移动端
<article> 定义独立的内容，如论坛帖子、报纸文章、博客条目、用户评论等内容。 支持HTML5的全局属性和事件属性。
<aside> 定义两栏或多栏页面的侧边栏内容，如联系我们、客服、网站公告等内容。 支持HTML5的全局属性和事件属性。
<command> 标记定义一个命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
<embed> 定义外部的可交互的内容或插件。
<figure> 定义一组媒体内容（图像、图表、照片、代码等）以及它们的标题。如果被删除，则不应对文档流产生影响。支持HTML5的全局属性和事件属性。用法如下：
<figure>
<figcaption>The title of the image.</figcaption>
<img src=’someimage.jpg’ width=’100″ height=’50″ />
</figure>
<footer> 定义一个页面或一个区域的页脚。可包含文档的作者姓名、创作日期或者联系信息。 支持HTML5的全局属性和事件属性。
<header> 定义一个页面或一个区域的头部。 支持HTML5的全局属性和事件属性。
<hgroup> 定义文件中一个区块的相关信息，使用 <hgroup> 标签对网页或区段（section）的标题进行组合。 支持HTML5的全局属性和事件属性。用法如下：
<hgroup>
<h1>Welcome my world!</h1>
<h2>This is a title.</h2>
</hgroup>
<keygen> 定义表单里一个生成的键值。规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
<mark> 定义有标记的文本。请在需要突出显示文本时使用此标签。 支持HTML5的全局属性和事件属性。用法如下：
<p>I like <mark>apple</mark> most.</p>
<nav> 定义导航链接。（注：如果文档中有’前后’按钮，则应该把它放到 <nav> 元素中。） 支持HTML5的全局属性和事件属性。
<output> 定义不同类型的输出，比如脚本的输出。
<section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<source> 为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<time> 定义一个日期/时间，该元素能够以机器可读的方式对日期和时间进行编码，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
<datalist> 定义选项列表，需与 input 元素配合使用，通过input 元素的 list 属性来绑定。用法如下：
<input id=’fruits’ list=’fruits’ />
<datalist id=’fruits’>
<option value=’Apple’>
<option value=’Banana’>
</datalist>
<video> 定义视频，比如电影片段或其他视频流。
<audio> 定义音频内容，如音乐或其他音频流。
<canvas> 定义图形，如图表和其他图像。（注：<canvas> 只是图形容器，我们必须使用脚本来绘制图形。）
Input相关的属性：
<!–属性：
placeholder：提示文本
readonly：只读
disabled：禁用
required：必填项
–>
H5标签内可嵌入的样式：
hidden：隐藏
contenteditable：可编辑
required=’’ : 必填项 不填写表单无法提交 注：多用于input标签中
readonly=’’ : 只读项 只能读取无法填写修改 注：多用于input标签中
/*UI伪类选择器
- 事件触发
1.：hover 鼠标移动到当前元素触发
2.：active 鼠标在当前元素按下触发
3.:focus 获取焦点的时候触发
4.：enable 选中所有可以表单元素
5.：disable选中所有被禁用表单元素
6.：read-only 选中所有表单中只读元素
7.:checked 选中表单中被激活的单选框或者复选框
- */
属性选择器
/*[class=user]{
background: blue;
width: 100px;
height: 200px;
}
.user{
background: blue;
}*/
/*效果蓝色*/
/*.user{
background: blue;
}
[class=user]{
background: blue;
width: 100px;
height: 200px;
}*/
/*效果红色*/
body .user{
background: blue;
}
html body [class=user]{
background: blue;
width: 100px;
height: 200px;
}
/*效果 蓝色*/
/注 ：谁的逻辑关系更严密 就执行谁/
注：对边框的样式进行设置
div{
width:200px;
height: 200px;
border:10px solid red;
border-image-width: 30px;
/*边框图的宽度*/
border-image-source: url(http://www.w3school.com.cn/i/border.png);
border-image-slice: 10 30 10 30;
/*slice 为取得图片的位置*/
border-image-repeat: stretch;
/*round 和repeat 平铺 stretch为拉伸*/
}
* 伪类选择器：
* 1 :after 在尾部最佳内容（元素）
* 2 :before 在元素之前添加内容（元素）
*
* 用法：
* 1.添加图标等
* 2.清除浮动
*
例子：
div{
width:100px;
height: 100px;
}
div:after{
content: '这是一个div';
}
span{
display: block;
width: 100px;
height: 100px;
background: yellow;
}
div:before{
}
/*伪类选择器2
1.：first-letter 选中第一行第一个单词或汉子或字母
2.：first-line 选中第一行
3.:not(条件) 选中不包含条件以外的所有元素
4.：empty 选中内容为空的元素（回车 空格 均算内容）
* * * */
例子：
p{
color:red;
}
p:first-letter{
color: gold;
}
p:first-line{
color: pink;
}
div:not(.box){
color: greenyellow;
}
span{
display: block;
background: orangered;
width:100px;
height: 60px;
}
span:empty{
background: greenyellow;
}
/*伪类选择器4
1.：nth-child（n）选中当前父级内正数第n个元素 从1开始
2.：nth-last-child（n）选中当前父级内倒数第n个元素 从1开始
3.:nth-of-type(odd（奇数项）或者even（偶数项）)
4.：nth-last-of-type（n）odd 选中奇数倒数第n个元素或者even选中偶数倒数第n个元素
5.：first-child 选中第一个元素
6.：last-child 选中最后一个元素
* * * * */
例子：
ul li{
font-size: 20px;
line-height: 40px;
font-weight: bold;
}
li:nth-child(2){
color: red;
}
li:nth-last-child(2){
color: blue;
}
li:nth-last-of-type(odd){
background: yellow;
}
li:nth-last-of-type(even){
background:blanchedalmond;
}
li:first-child{
color: green;
}
li:last-child{
color: brown;
}
background-size属性：
/*background-size 如果后面只设置一个数值 代表 宽度 会等比例缩放
也可以添加命令 例如：1.cover 等比例缩放 取高度或者宽度 当中取最大的（能够把图完全撑开的一个值）
2.contain 会永远的完整显示图片，高度和宽度其中一个一定是100%
* * */
响应式布局
Dpr:设备像素比 分辨率越大 比值越大
设置视口：meta标签中 name 用来告诉浏览器对适口进行设置 content当中的具体参数
Width=device-width 设置视口宽度等于设备的宽度
Initial-scale=1.0 初始缩放比例
Maximum-scale=1.0 最大缩放比例
Minimum-scale=1.0 最小缩放比例
User-scalable=no 是否允许用户进行捏合
< meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximun-scale=1.0,minimum-scale=1.0,user-scalable=no” />