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>