一、今日学习内容
H5C3
html5部分
html5的新特性
主要增加了一些新的标签，新的表单和新的表单属性等，这些特性都有兼容性问题，基本上IE9+以上的浏览器才能支持，如果不考虑兼容性的话，可以大量使用新标签
常用的H5标签
<!-- 头部标签 -->：<header></header>
<!-- 导航栏标签 -->：<nav></nav>
<!-- 内容标签 -->：<article></article>
<!-- 侧边栏标签 -->：<aside></aside>
<!-- 尾部标签 -->：<footer></footer>
HTML5标签的优缺点
优点：便于搜索引擎来解析
缺点：会有兼容问题
HTML5新增的input的type属性的属性值
属性值 说明
email 限制用户输入必须为Email类型
URL 限制用户输入必须为URL类型
date 限制用户输入必须为date类型
time 限制用户输入必须为time类型
month 限制用户输入必须为month类型
week 限制用户输入必须为week类型
number 限制用户输入必须为number类型
search 搜索框
color 生成颜色选择表单
tel 手机号码
注意：属性值为Tel是，声明的input标签为电话输入，因为世界上电话号码都不尽相同，所以不能做出明确的显示，需要JS和正则表达式来进行限制
HTML5新增属性
属性 属性值 说明
required required 表单拥有该属性表示不能为空，必填项
placeholder 提示文本 填写表单的提示信息，如果有默认 value 值的话则不会显示提示信息
autofocus autofocus 自动聚焦，页面首次加载时聚焦到该表单元素
autocomplete on/off 当用户提交搜索内容时，浏览器记录用户提交过的内容，默认是ON，如果要关闭的话将值设为off，同时要添加name属性，而且要提交成功
multiple multiple 可以进行多选文件
HTML5新增的多媒体标签
<Audio>标签，音频标签
当前常用的三种浏览器
浏览器 MP3 Wav Ogg
IE Y N N
Chrome Y Y Y
firfox Y Y Y
safari Y Y N
opera Y Y Y
常用的属性和属性值
controls：controls；向用户展示播放控件
autoplay：autoplay；自动播放
loop：loop；当音频结束时重新播放
src：需要播放的音频URL地址
例：<audio src="" controls="controls" loop="loop" autoplay="autoplay"></audio>
<video>标签，视频标签
当前常用的三种浏览器
浏览器 MP3 Wav Ogg
IE Y N N
Chrome Y Y Y
firfox Y Y Y
safari Y N N
opera Y Y Y
常用属性和属性值
属性 属性值 说明
autoplay autoplay 视频自动播放（谷歌要添加muted属性才能生效）
controls controls 向用户展示播放控件
width 像素值 设置播放器的宽度
height 像素值 设置播放器的高度
loop loop 循环播放视频
preload auto/none 预加载视频，auto：预加载，none：不进行加载操作，如果有auto属性，那么该属性会被忽略
src URL 视频URL地址
poster 图片地址 加载视频时等待的画面
muted muted 静音播放
例：video多格式轮询
<video controls="controls" width="1000px">
<sourc src="" type="video/MP4">
</video>
CSS3新增属性
CSS怪异盒模型
css3中可以通过box-sizing来指定盒模型，他有两个值，分别是content-box、border-box。
box-sizing：content-box；盒子大小是width+padding+border（默认值）
box-sizing：border-box；盒子的大小为width
注意点：
使用box-sizing：border-box；时，padding+border都不要超过盒子本身的宽度
CSS3新增选择器
属性选择器
概念：可以根据元素的特性来选择，这样就不用借助类或者id选择器
总结表格
选择符 说明
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个子元素E
E:nth-child(n) 匹配父元素中的第N个子元素E
E:first-of-type 匹配指定类型E的第一个元素
E:last-of-type 匹配指定类型E的最后一个元素
E:nth-of-type 匹配指定类型E的第N个元素
结构伪类选择器
概念：主要是根据文档的结构来选择元素，通常根据父元素来进行选择里面子元素的情况
nth-child(0)：
n是数字的情况（代表从0开始不断递增）
n是关键字的情况
n是公式的情况
nth-child和nth-of-type的区别
nth-child对父元素里面所有的子元素进行排序（序号是固定的），先找到第N个孩子，然后再看是否和相应元素匹配
nth-of-type对父元素里面的所有指定的元素进行排序选择，先去进行相应元素的匹配，再排序区选择第n各元素
伪元素选择器
|
