标签
标签的基本内容
1.由<>包裹、字母开头、可以结合数字和合法字符的能被浏览器解析的标记
合法字符：字母、数字、-
2.标签是有语义的
<br>：换行 <hr>：分隔线
3.标签是有作用范围的
<h1>中间就是标签的作用范围，由标签来控制，具有默认样式</h1>
4.标签可以修改内容样式
<p style = "color: red">000</p> 就可以把中间的文本字体改成红色
标签分类及常用标签
标签有单双标签之分：
--.单标签无需内容，主(功能)，可以省略标签的结束符/
eg：<br/> 可以省略成 <br>
--.双标签主(内容)，需要有作用域，必须明确结束标签
<a></a> 开始结束标签之间就是他的作用域
常用标签
页面结构相关的系统标签
1.页面根标签：<html></html>
2.页面头标签：<head></head>
3.页面体标签：<body></body>
4.页面标题标签：<title></title>
5.元标签：<meta >
6.链接标签：<link >
7.样式标签：<style></style>
8.脚本标签：<script></script>
简单的系统标签
1.标题标签：<h1></h1> ....<h6></h6>
2.段落标签：<p></p>
3.换行标签：<br >
4.分割线标签：<hr >
5.行文本标签：<span></span>
6.斜体标签：<i></i>
7.加粗标签：<b></b>
8.图片标签：<img src="图片源" alt="图片加载失败显示内容">
9.超链接标签：<a href="链接地址"></a>
10.架构标签：<div></div>
复杂的系统标签
1.无序列表标签：<ul><li></li></ul>
2.表格标签：<table>包含大量的表格子标签</table>
每一行用<tr></tr>标签包裹
tr标签中th标签表示标题单元格
td标签标识内容单元格
3.表单标签：<form action="表单数据提交的后台地址" method="提交方式"></form>
标签使用的案例分析
案例一：页面结构相关的系统标签使用
<!DOCTYPE html>
<!-- 文档指令，建议出现在html的最上方，一个文档只出现一次，标识该文档用html5语法进行编写-->
<html lang="en">
<!-- 页面根标签的开始，一个html文件只出现一次 -->
<!-- lang属性表示的是浏览器解析文件的语言，en代表英语，浏览器就会提示翻译 -->
<head>
<!-- 页面头标签的开始，一个html文件只出现一次 -->
<meta charset="UTF-8">
<!-- 单标签 可以指定文件编码 -->
<title>Title</title>
<!-- 页面标题标签，用来在浏览器中显示页面标题 -->
<link rel="icon" href="">
<!-- 设置页面标签图标 -->
<link rel="stylesheet" href="">
<!-- 用来连接外联式的css样式标签 -->
<style></style>
<!-- 用来存放内联式css样式标签 -->
<script></script>
<!-- 用来存放出现在head中的JavaScript脚本代码标签 -->
</head>
<body>
<!-- 网页中所有展示给用户看的标签及内容存放在这里：普通文本、音频 -->
<!-- 页面中不给用户产看的内容也写在这：如结构标签或者是隐藏的标签 -->
</body>
<!-- 代表页面体的结束，这里一般不写标签，但是这里写的标签都会被放到body中的最后一个-->
</html>
案例二：简单系统标签的使用
h1 - h6 标签
<h1>在页面上显示一级标题</h1>
......
<h6>在页面上显示六级标题</h6>
p标签
<p>一个页面显示的文本段落放在一个p标签中</p>
br标签
<br> 换行
hr标签
<hr> 分隔线
span标签
<span>普通的文本内容</span>
图片标签
<img src="" alt="" title="">
<!-- src中写的是链接：可以是本地地址，也可以是网络地址 -->
<!-- alt 中写的是加载图片失败后返回的信息 -->
<!-- title 中写的是鼠标放在上面显示的信息，基本上能显示内容的标签都可以设置 -->
超链接标签
<a href="https://www.baidu.com">前往百度</a>
<!-- 点一下超链接标签中文字就可以在当前页面中直接跳转-->
<a href="https://www.baidu.com" target="_blank"></a>
<!-- 加上 target="_blank" 可以实现新开一个窗口前往百度-->
<a name="xxx"></a>
<!-- 也可以通过 name 这种方式给页面种下锚点-->
<a href="#xxx"></a>
<!-- 直接用#对应值就可以实现当前页面内的跳转-->
架构标签
<div></div>
<!-- div标签没有具体的语义，主要被用于页面架构的设计-->
案例三：复杂的系统标签的使用
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 只需要掌握ul 与li 的嵌套关系即可 -->
<!-- ul 中只能嵌套li标签 li标签中可以嵌套任意标签-->
表格标签
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2"></td>
<!-- <td></td>-->
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<!--caption：标签中表示的是表格的标题-->
<!--thead：表示的是表格的头部，中间都是用th标签-->
<!--tbody：表示的是表格身体，中间都是用td标签-->
<!--tfoot：表示的是表格尾部，中间都是用td标签-->
<!--tr：主要用作表格的分行-->
<!--th：标题单元格-->
<!--td：内容单元格-->
注：我们一般都会把thead、tbody、tfoot省略，
直接用tr、th、td构成表格
想要合并单元格可以直接通过rowspan或者colspan来合并
例如上面直接注掉第二个单元格，把第一个单元格colspan设为2，就显示合并了第一行的一二列单元格
表单标签（重点*****）
<form action="" method="get">
<label for="">sdasd</label>
<input type="text" name="user">
<input type="password" name="password">
<input type="submit" name="提交">
<select name="list" id="s1">
<option value="sss">math</option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button type="submit" value="提交"></button>
</form>
<!-- 标签部分 -->
1.form 表单标签
2.label 普通文本标签
3.input 输入标签，通过type的值来确定输入的具体是什么类型
4.select 表单中的列表标签，option列表选项标签
5.textarea 文本域标签
6.button 按钮标签
<!-- form全局属性 -->
1.action：提交表单数据给后台的地址
2.method：提交数据的方式(get或post)
3.enctype：提交数据的编码格式
<!-- form子标签全局属性 -->
1.type：标签的类型
2.name：将该标签提交给后台表示数据的key，不设置name的标签内容无法提交
3.value：将该标签提交给后台的数据，用户自己输入的可以不设置
<!-- input标签type属性值的分类 -->
1.text：普通文本输入框
2.password：密文文本输入框
3.radio：单选框
4.checkbox：复选框
5.file：文件输入，该类型input标签有个全局属性multiple，属性值省略，代表可以选取文件提交给后台
6.submit：提交表单信息给后台，用value设置提交按钮的显示内容
<!-- button标签type属性值与分类-->
1.button：普通的按钮
2.reset：重置按钮，默认点击后会还原表单的所有操作
3.submit：提交按钮
转义字符
像后台开发语言的特殊字符\n一样，会被解析为换行，
html5中也有很多特殊字符数字的组合会被解析为特殊含义。
格式： (&和; 中间加上字符)
1.空格：
2.字符''："
更多字符转换：http://tool.oschina.net/commons?type=2
指令
被<>包裹，以！开头的特殊符号，称之为指令
指令中不区分大小写，前端需要掌握两个指令
1.文档指令
<!doctype html>
2.注释指令
<!-- -->
来源：https://www.cnblogs.com/hesujian/p/11116626.html