标签
标签的基本内容
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：提交按钮
转义字符
像后台开发语言的特殊字符 一样，会被解析为换行，
html5中也有很多特殊字符数字的组合会被解析为特殊含义。
格式： (&和; 中间加上字符)
1.空格：
2.字符''："
更多字符转换：http://tool.oschina.net/commons?type=2
指令
被<>包裹，以！开头的特殊符号，称之为指令
指令中不区分大小写，前端需要掌握两个指令
1.文档指令
<!doctype html>
2.注释指令
<!-- -->