概览文档章节<body><header><nav> 导航<aside> 表示和主要内容不相关的区域<article> 表示一个独立的、可重复的结构<section> 表示一组内容，相邻的section之间的内容是有相关性的，相邻的article标签之间是独立的<footer><hx>标题h1h2h3h4h5h6文本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...audio文件兼容性https://en.wikipedia.org/wiki...表格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 <!--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 创建一个没用的元素来解决，例如：<script>document.createElement("header");</script>，也可以使用shiv来解决兼容性问题，详情可参考HTML5 Shiv https://github.com/afarkas/ht...）
