HyperTextMarkupLanguage: 超文本标记语言
###常见的文本标签
<a href="#top">回到顶部</a>
###表格标签table
1.列表练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul type="square">
<li>裴擒虎</li>
<li>上官婉儿</li>
<li>吕布</li>
<li>马超</li>
<li>苏烈</li>
</ul>
<ol type="1" start="10" reverse="reversed">
<li>打开冰箱门</li>
<li>把大象装进去</li>
<li>关上冰箱门</li>
<li>该吃饭了</li>
</ol>
<ul>
<li>凉菜
<ol>
<li>拍黄瓜</li>
<li>芥末鸭掌</li>
<li>花毛一体
<ul>
<li>花生</li>
<li>毛豆</li>
</ul>
</li>
</ol>
</li>
<li>热菜
<ol>
<li>红烧肉</li>
<li>水煮鱼片</li>
<li>地锅鸡</li>
</ol>
</li>
</ul>
</body>
</html>
显示效果:
2.超链接练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a id="top" href="01第一个页面.html">01第一个页面</a>
<a href= "http://www.baidu.com">百度</a>
<a href="1.jpg">图片</a>
<a href="http://www.tmooc.cn"><img width="20%" height="20%"src="1.jpg"></a>
<img width="20%" height="20%" src="../imgs/1.jpg">
<img width="20%" height="20%" src="../imgs/2.jpg">
<img width="20%" height="20%" src="../imgs/3.jpg">
<img width="20%" height="20%" src="../imgs/4.jpg">
<img width="20%" height="20%" src="../imgs/5.jpg">
>
<!-- #代表当前页面-->
<a href="#top" >回到顶部</a>
</body>
</html>
显示效果:
3.表格练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- border边框
cellspacing单元格间距
cellspacing单元格距内容的距离-->
<table align="center" border="1" cellspacing="10" cellpadding="10">
<caption>表格标题</caption>
<!-- tr表示行 th表头 td表示列 -->
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>尼古拉赵四</td>
<td>29</td>
</tr>
</table>
<table border="" cellspacing="" cellpadding="">
<!--colspan跨列-->
<tr><td align="center"colspan="2">1-1</td><td rowspan="2">1-3</td></tr>
<tr><td rowspan="2">2-1</td><td>2-2</td></tr>
<tr><td align="center"colspan="2">3-2</td></tr>
</table>
</body>
</html>
显示效果:
4.表单练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- action服务器地址 method提交方式 -->
<form action="http://www.tmooc.cn" method="get">
<!-- 文本框 name是对传递过去的参数做介绍 id唯一标识
value值设置文本框的值-->
名字:<input type="text" name="username"
placeholder="请输入用户名" id="" value=""/>
<br/>
密码:<input type="password" name="pwd"
placeholder="请输入您的密码" id="" value=""/>
<hr>
性别:<input type="radio" checked="checked" name="gender" id="" value="m" />男
<input type="radio" name="gender" id="" value="f" />女
<hr>
<!-- 多选和单选类似 -->
爱好: <input type="checkbox" checked="checked" name= "hobby" id=""
value="cy" />抽烟
<input type= "checkbox" name="hobby" id=""
value="hj" />喝酒
<input type="checkbox" name= "hobby" id=""
value="tt" />烫头
<!-- label扩充点击范围 -->
<input type="checkbox" name="hobby" id="dbj" value="dbj"/>
<label for="dbj">大保健</label>
<hr >
<!-- 日期选择器 -->
生日:<input type="date" name="birthday" id="birthday" />
<input type="submit" value="注册"/>
<hr >
<!-- 文件选择器 -->
靓照:<input type="file" name="pic" id="pic" />
</form>
</body>
</html>
显示效果:
5.图片练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- alt:图片不能显示时显示文本 -->
<img alt="这显示不出来" src="a1.jpg">
<!-- title:鼠标悬停时显示的文本 -->
<img width="100" height="100" title="这是个头像" src="../2.jpg">
<img width="100" height="100" src="abc/3.png">
<img width="20%" height="20%" src="../imgs/4.jpg">
<!-- 绝对路径访问站外资源,又称为图片盗链
好处:节省本站资源
坏处:有可能找不到图片-->
<img width="20%" height="20%" src="http://cdn.tmooc.cn/bsfile//courseImg///280c6025caa14649ba86b3561db92066.jpg">
</body>
</html>
显示效果:
代码已打包,连接如下https://download.csdn.net/download/qq_44273429/12700036 未完待续…
下一节链接: Web前端基础(02)