概览
文档章节
<body><header><nav>导航<aside>表示和主要内容不相关的区域<article>表示一个独立的、可重复的结构<section>表示一组内容，相邻的section之间的内容是有相关性的，相邻的article标签之间是独立的<footer><hx>
标题
- h1
- h2
- h3
- h4
- h5
- h6
文本
-
<a></a>标签- 创建指向另一个文档的链接；
- 创建指向另一个文档内部的锚点；
- 链接到email地址；
<!--href 属性，链接地址--> <!--target 跳转方式--> <!--_self:当前窗口显示；--> <!--_blank:新开一个窗口显示；--> <!--也可是一个名称name，在名为name的iframe中打开链接--> <a href="mailto:zhangweihang_amy@qq.com">给阿航发邮件</a> <a href="tel:10010">给联通打电话</a> <!--?cc抄送--> <!--subject 主题--> -
更多不是特别常用的标签
<em></em> <!--表示强调--> <strong></strong> <!--粗体强调--> <br> <!--换行，在内容中换行 --> <cite></cite> <!--斜体，用在文章标题处；--> <q></q> <!--表示引用，会加引号“”；--> <code></code> <!--放代码--> <b></b> <!--粗体，关键词--> <i></i> <!--斜体，关键字-->
组合内容
-
分区 div：本身没有任何的语义，主要用来作为分区,h5之前没有header这种语义化的标签，
-
段落 p：段落
-
列表，列表是可以嵌套的
- ul：无序列表（导航 ，节目列表，用户列表等都可以用无序列表来表示）
/*默认的li的样式会有小圆点，可以用css来控制*/ .class{ list-style:none }- ol：有序列表 （排行榜）
//适合做排行榜等有顺序的列表，默认样式会有序号123 //序号可以用type属性改变，start属性用来改变起始序号；- dl：自定义列表
//dt定义了列表项，dd定义了对列表项的描述， //每一项的dt只能有一个，对应的dd可以有多个， //dd会有一定缩进 -
pre: 把code标签的内容放到pre标签中，可以保留code内容中的换行
-
blockquote: 大块的引用
嵌入资源
-
<img>图片- 页面中嵌入图片，自闭和标签
- src: 图片路径
- alt: 描述图片的含义(如果网速慢等情况，导致图片没有加载出来，或者地址写错了导致无法加载图片，alt的内容就会替代图片，显示出来;一般都会要求写上alt，改善用户体验)
-
<iframe></iframe>嵌入页面- 当前页面的上下文（css，js）和嵌入页面中的内容是隔离的，
- 在嵌入页面中的操做并不影响当前页面
- 比如页面中的播放器，可以放在iframe中，这样页面的操作就不会影响播放器的操作
-
<object></object>嵌入外部资源（可能是pdf等插件）- 在type属性中指定插件类型，插件的参数可以放在param标签中
- 播放器的地址也可以写在object的data属性上面，ie8以下不兼容data属性
<object data="" type="application/x-shockwaveflash"> <param name="movie" value="http://pdfReader.swf"> <param name="flashvars" value="http://book.pdf"> </object> -
<embed></embed>嵌入插件<embed src="http://pdfReader.swf" type="application/x-shockwaveflash"> -
<video></video>在h5中可以使用video标签来插入视频，viedo标签，只有高版本的浏览器才支持<!--因为不同的浏览器对视频的支持格式不一样，--> <!--所以要准备多个视频文件，放在source的标签中，如果只有一个视频文件，可以直接放在video标签的src里面--> <!--浏览器会选择一个它支持的文件视频类型来播放--> <video src="" controls="controls" poster="海报地址" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <source src="movie.ogg" type="video/ogg"> <track kind="subtitles" src="video.srt" label="English"> 您的浏览器不支持video标签 </video> <!--通过controls，显示控制条--> <!--poster用来指定封面，如果没有指定，则显示视频的第一帧；--> <!--track属性用来引入字幕--> <!--autoplay属性用来设置为自动播放--> <!--loop属性，循环播放,没有指定，则播放完毕后显示视频的最后一帧--> -
<audio></audio>和video标签很类似 -
<canvas>（图）基于像素的，有很多图形函数，可以在js中进行绘制；适合用来处理比较复杂的，实时性比较高的，比如游戏； -
<svg>（图） 是矢量的，适合用来处理高保真的、静态的图形图像 -
<map>(热点区域） -
<area>(热点区域）<!--coords,区域--> <!--shape,形状--> <img src="图片地址" alt="图片名称" width="1090" height="995" usemap="#Map2"> <map name="Map2"> <area shape="rect" coords="669,75,1075,682" href="xiupin.com/..." target="_blank"> <area shape="rect" coords="26,93,391,337" href="xiupin.com/..." target="_blank"> </map>
附录
video文件兼容性 https://en.wikipedia.org/wiki/HTML5_video#Browser_support
audio文件兼容性https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats
表格
<table></table><table> <caption>照片冲印价格详情</caption> <thead> <tr> <!--表头单元格用th表示--> <th>照片尺寸</th> <th>富士</th> <th>科达</th> </tr> </thead> <tbody> <tr> <th>6寸</th> <!--普通单元格用td表示--> <td>0.45</td> <td>0.6</td> </tr> </tbody> <tfoot> <tr> <!--跨列用colspan，跨行用rowspan--> <td colspan="3">运费8元每单，满99免运费</td> </tr> </tfoot> </table>
表单
-
<form></form><!--action，接口；method，方式--> <form action="/login" method="post"> <!--fieldset表示不同的区域--> <fieldset> <legend>照片选择</legend> <!--input有两个重要的属性，name和value，name是向后台传值时的参数名，value是向后台传值时的参数值--> <input type="file" name="file"> </fieldset> <fieldset> <legend>填写信息</legend> <div> <!--多选--> <!--checked 表示默认选中--> <!--同一组单选框或者多选框的name的值是一样的--> <input type="checkbox" value="香蕉" id="banana" checked><label for="banana">香蕉</label> <input type="checkbox" value="苹果" id="apple"><label for="apple">苹果</label> </div> <div> <!--单选--> <input type="radio" value="榨汁" id="1" name="how-to-eat" checked><label for="1">榨汁</label> <input type="radio" value="直接吃" id="2" name="how-to-eat"><label for="2">直接吃</label> <!--disabled属性用来禁用某个选项--> <input type="radio" value="不吃了" id="3" name="how-to-eat" disabled><label for="2">不吃了</label> </div> <div> <!--文本--> <!--label为表单做提示，for对应input、textarea、select的id--> <label for="name">姓名</label> <!--placeholder占位符，默认展示的文字--> <!--readonly属性，表示只读--> <!--hidden属性表示隐藏，页面上不可见，但是向后台传值的时候是传的--> <input type="text" id="name" placeholder="请输入姓名" readonly> <input type="text" id="name2" placeholder="请输入姓名" readonly hidden> </div> <div> <label for="more-info">备注</label> <!--多行文本框用textarea表示--> <textarea name="" id="more-info" cols="30" rows="10"></textarea> </div> <label for="delivery">delivery</label> <!--下拉框--> <select name="" id="delivery"> <!--optgroup用来区分选项组--> <optgroup label="group1"> <option value="0">快递</option> <option value="1">平邮</option> </optgroup> <option value="2" selected>EMS</option> </select> </fieldset> <!--<div>--> <!--<!–input也可以用来做按钮，但是，为了更好地语义化，我们通常使用button–>--> <!--<input type="submit">--> <!--<input type="reset">--> <!--</div>--> <div> <button type="submit">提交</button> <button type="reset">重置</button> </div> </form> -
<input/>//input的type属性 //email //url //number //tel //search //range 一定范围内的数据 //color 颜色的拾色器 //date-picker （date，month，week，time，datetime，datetime-local）
语义化
-
什么是语义化呢？ 了解每一种标签的用途，用适当的标签来描述页面。
-
语义化的作用：
1. 便于SEO（Search Engine Optimization）优化， 我们的页面是给搜索引擎看的，搜索引擎的爬虫呢会根据语义话的标签来确定关键字的权重，这样子我们的关键字能和用户的关键字能更加的匹配；另外，搜索引擎也会给语义化的页面一个更高的权重，这样我们的页面也会更早出现在用户的搜索结果中。
2.可访问性 页面也可能是给残障人士看的，他们可以通过屏幕阅读器来访问页面，屏幕阅读器会对不同的标签发出不同的声音，使用更语义化的标签能够传达不同信息的重要性，使他们能够更好的理解页面的内容。
3.可读性 提高代码的可读性，便于多人的修改维护，提高开发效率。
（ps：主流浏览器都兼容HTML5的新标签，对于 IE8 及以下版本不认识 HTML5的新元素，可以使用 JavaScript 创建一个没用的元素来解决，例如：，也可以使用shiv来解决兼容性问题，详情可参考HTML5 Shiv https://github.com/afarkas/html5shiv）
