HTML5新标签

header：定义文档的页眉 头部nav：定义导航链接的部分footer：定义文档或节的页脚 底部article：定义文章。section：定义文档中的节（section、区段）aside：定义其所处内容之外的内容 侧边 <header> 语义 :定义页面的头部 页眉</header> <nav> 语义 :定义导航栏 </nav> <footer> 语义: 定义 页面底部 页脚</footer> <article> 语义: 定义文章</article> <section> 语义： 定义区域</section> <aside> 语义： 定义其所处内容之外的内容 侧边</aside> datalist 标签定义选项列表。请与 input 元素配合使用该元素  。  <input type="text" value="输入名称" list="star"> <datalist id="star"> <option value="王昭君">王昭君</option> <option value="伽罗">伽罗</option> <option value="嫦娥">嫦娥</option> <option value="兰陵王">兰陵王</option> <option value="大乔">大乔</option> </datalist>

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用  （宽度默认与父亲一样大）

<fieldset> <legend>标题</legend> 表单项: <input type="text"><br /><br /> 表单项: <input type="tel"> </fieldset>

新增的input type属性值：

类型使用示例含义email<input type="email">输入邮箱格式tel<input type="tel">输入手机号码格式url<input type="url">输入url格式number<input type="number">输入数字格式search<input type="search">搜索框（体现语义化）range<input type="range">自由拖动滑块time<input type="time">小时分钟date<input type="date">年月日datetime<input type="datetime">时间month<input type="month">月年week<input type="week">星期 年

常用新属性

 

属性用法含义placeholder<input type="text" placeholder="请输入用户名">占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回autofocus<input type="text" autofocus>规定当页面加载时 input 元素应该自动获得焦点multiple<input type="file" multiple>多文件上传autocomplete<input type="text" autocomplete="off">规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮 2.这个表单您必须给他名字required<input type="text" required>必填项 内容不能为空accesskey<input type="text" accesskey="s">规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式

 

 

CSS3 新增选择器

结构(位置)伪类选择器（CSS3)

:first-child :选取属于其父元素的首个子元素的指定选择器:last-child :选取属于其父元素的最后一个子元素的指定选择器:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式。

属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

/* 获取到 拥有 该属性的元素 */ div[class^=font] { /* class^=font 表示 font 开始位置就行了 */ color: pink; } div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */ color: skyblue; } div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */ color: green; }

 

<div class="font12">属性选择器</div> <div class="font12">属性选择器</div> <div class="font24">属性选择器</div> <div class="font24">属性选择器</div> <div class="font24">属性选择器</div> <div class="24font">属性选择器123</div> <div class="sub-footer">属性选择器footer</div> <div class="jd-footer">属性选择器footer</div> <div class="news-tao-nav">属性选择器</div> <div class="news-tao-header">属性选择器</div> <div class="tao-header">属性选择器</div>

伪元素选择器（CSS3)

 E::first-letter文本的第一个单词或字（如中文、日文、韩文等）E::first-line 文本第一行；E::selection 可改变选中文本的样式； p::first-letter { font-size: 20px; color: hotpink; } /* 首行特殊样式 */ p::first-line { color: skyblue; } p::selection { /* font-size: 50px; */ color: orange; } E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor { content:"开始"; } div::after { content:"结束"; }

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

":" 与 "::" 区别在于区分伪类和伪元素

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

注意

伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

 

CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。