概览
文档章节
- <body>
- <header>
- <nav> 导航
- <aside> 表示和主要内容不相关的区域
- <article> 表示一个独立的、可重复的结构
- <section> 表示一组内容，相邻的section之间的内容是有相关性的，相邻的article标签之间是独立的
- <footer>
- <hx>
标题
- h1
- h2
- h3
- h4
- h5
- h6
文本
-
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...）