HTML5开发系列（1） 之 标签
程序员文章站
2022-04-29 23:16:10
...
1.标签的分类
1.双标签
例如：<body> </body>
2.单标签
例如: <br/>
2.标签之间的关系
2.1 是嵌套关系即父子关系
2.2 兄弟姐妹关系；
3.各种标签
3.0 注释标签
<!--
标题标签一共有6个，重要性依次减少，字体依次变小，变细；
h1标签和搜索引擎先关，慎重使用；
-->3.1 版本标签
<!DOCTYPE html>这个标签就是告诉浏览器我们是html5的版本；在每一个html文件的第一行都有这样的一个标签；
3.2 标题标签
<p>
来自星星的你》是由张太侑导演，朴智恩编剧，金秀贤、全智贤、刘仁娜、朴海镇等主演的爱情科幻喜剧，于2013年12月18日在韩国SBS电视台首播。
</p>p标签，段落标签
3.3 水平线标签
<hr />会产生一条水平线
3.4 换行标签
<br/>3.5 布局标签
<div>布局标签</div>
<span>也是布局标签</span>3.5 文本格式化标签
3.6 图片标签
<img src="img/meinv.png"
alt="这是一个美女"
title="美女"
/>alt当图片显示不出来的会显示alt属性；title是当鼠标移动到图片上的时候会显示美女字样；
3.7 连接标签
<a href="http://www.baidu.com">百度</a>通过连接的方式添加 锚点 实现快速定位；
<a href="#live"></a>
<p id="live">我的个人生活</p>
3.8 base标签 设定连接的跳转方式；
<head>
<meta charset="UTF-8">
<title></title>
<base target="_blank" />
</head>3.9特殊符号的显示：
3.10 html中的路径
3.11 无序列表
无序列表的实现是通过两个标签实现的；
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
<li>葡萄</li>
</ul>3.12 有序类表
表现样式是有顺序的；
<h3>有序列表</h3>
<ol>
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
<li>英国</li>
</ol>3.13 自定义列表
<h3>自定义列表</h3>
<dl>
<dt>联系客服</dt>
<dd>电话11111</dd>
<dd>邮箱****</dd>
<dd>qq111111</dd>
</dl>3.14 表格标签
<table width="300" height="150" border="1">
<tr>
<td> 姓名</td>
<td> 年龄</td>
<td> 性别</td>
</tr>
<tr>
<td> 姓名</td>
<td> 年龄</td>
<td> 性别</td>
</tr>
<tr>
<td> 姓名</td>
<td> 年龄</td>
<td> 性别</td>
</tr>
</table> <table width="300" height="150" border="1"
cellspacing="0" cellpadding="1" align="center">
<thead>
<tr>
<th> 姓名</th>
<th> 年龄</th>
<th> 性别</th>
</tr>
</thead>
<tbody>
<tr>
<td> 张飞</td>
<td> 30</td>
<td> 男</td>
</tr>
<tr>
<td> 关羽</td>
<td> 32</td>
<td> 男</td>
</tr>
</tbody>
</table>合并单元格：
跨行和跨列合并单元格，从上往下，从左往右；
<table width="300" height="150" border="1"
cellspacing="0" cellpadding="1" align="center">
<caption>三国演义演员表</caption>
<thead>
<tr>
<th> 姓名</th>
<th> 年龄</th>
<th> 性别</th>
</tr>
</thead>
<tbody>
<tr>
<td> 张飞</td>
<td> 30</td>
<td rowspan="2"> 男</td>
</tr>
<tr>
<td> 关羽</td>
<td> 32</td>
</tr>
<tr>
<td> 刘备</td>
<td colspan="2"> 30</td>
</tr>
</tbody>
</table>
3.15 input标签
用户名：<input type="text" value="用户名"/>
<br />
密 码：<input type="password" maxlength="6"/>
<br />
<!--input的name属性表示一组单选标记；男和女只能选一个-->
性 别：<input type="radio" name="sex" checked="checked"/> 男
<input type="radio" name="sex" /> 女
<br />
<!--复选框-->
爱 好：<input type="checkbox" checked="checked"/>足球
<input type="checkbox" />篮球
<input type="checkbox" />乒乓球
<br />
搜索按钮<input type="button" value="搜索" />
<br />
提交按钮<input type="submit" value="确认" />
<br />
图片按钮<input type="image" src="img/meinv.png" width="50" height="25"/>
<br />
上传文件 <input type="file" />
3.16 label标签传递焦点
<!--label标签 起到获取焦点的作用传递给input控件；-->
<label> 请输入用户名<input type="text" /></label>
<!--如果在label中有多个input，默认是将焦点传递给第一个，但是如果要传递给第二个的需要使用for id的方式实现；-->
<label for="two"> 请输入密码<input type="text" /> <input type="text" id="two"/></label>3.17 表单标签
<form action="xxx.php" method="get" name="userMessage">
用户名：<input type="text" value="用户名"/>
<br />
密 码：<input type="password" maxlength="6"/>
<br />
<!--input的name属性表示一组单选标记；男和女只能选一个-->
性 别：<input type="radio" name="sex" checked="checked"/> 男
<input type="radio" name="sex" /> 女
<br />
<!--复选框-->
爱 好：<input type="checkbox" checked="checked"/>足球
<input type="checkbox" />篮球
<input type="checkbox" />乒乓球
<br />
搜索按钮<input type="button" value="搜索" />
<br />
提交按钮<input type="submit" value="确认" />
<br />
图片按钮<input type="image" src="img/meinv.png" width="50" height="25"/>
<br />
上传文件 <input type="file" />
</form>4.html5中新加入的标签和属性
4.1新加的标签
新增的input属性：
input中新增的属性：
表单标签的综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<fieldset id="">
<legend>学生档案思密达</legend>
<label >姓名：<input type="text" placeholder="请输入学生姓名" /></label>
<br />
手机号：<input type="tel" />
<br />
邮箱：<input type="email" />
<br />
所属学院：<input type="text" placeholder="选择学院" list="aaa"/>
<datalist id="aaa">
<option>java学院</option>
<option>前端学院</option>
<option>服务端学院</option>
</datalist>
<br />
出生日期：<input type="date" /> <br />
成绩: <input type="number" /> <br />
毕业时间: <input type="date" /> <br />
<input type="submit" />
</fieldset>
</form>
</body>
</html>