|
一、今日学习内容： 1、HTML5的新特性：增加了一些新的标签、新的表单和新的表单属性等等，一般只支持IE9以上版本的浏览器，如果我们不去考虑兼容性问题，可以大量使用。 2、常用标签 3、优点：语义更加明确，便于浏览器进行解析 缺点：大部分的标签只有Chrome 和 Safari支持。 4、新增的Input类型 Email：限制输入内容为邮箱 Url：限制输入的内容为url地址 Date：生成日期控件 Time：生成时间控件 Month：生成月份选择控件 Week：生成周选择控件 Number：限制输入的内容为数字 Search：将输入的内容清除 Color：生成一个颜色选择表单元素 5、新增表单属性 placeholder给表单元素添加提示文本，和value同时使用时则不会进行提示文本的展示 multiple可以多选文件进行提交 required校验当前元素是必填项 autofocus当页面刷新时自动聚到到指定的表单元素 autocomplete属性值为on/off选择是否记录用户提交过的内容，on代表记录，off代表不记录 注意：使用该属性时，必须要加上name属性才可以生效 6、新增的多媒体标签 ①<video>：H5可以在不使用插件的情况下，可以使用原生的标签来支持视频格式文件的播放。 相关属性 autoplay视频就绪自动播放（需要和muted属性来进行连用，自动播放时视频必须是默认静音的） control给video标签增加视频播放控件 width宽度 height高度 loop视频播放完成后是否要循环播放，属性值为loop为循环播放 preload属性值auto（预加载视频），none（不预先加载），规定是否预加载视频（如果有autoplay时，就忽略该属性） src属性值：url视频的url地址 poster属性值 imgUrl加载等待的画面图片 muted静音播放 ②<audio> controls让音频显示相应的控件 loop重新开始播放 src url地址 7、CSS3的怪异盒模型 CSS3可以通过box-sizing来指定盒子模型 content-box：盒子大小是width+height +padding +border（默认值） border-box：大小是width和height 8、CSS3新增选择器 属性选择器 注意点：类选择器、属性选择器、伪类选择器，他们权重都是0,0,1,0。 结构伪类选择器 概念：根据文档结构来选择元素的，常用于根据父级来进行子级的选择 选择符nth-child E:first-child; 选择父元素中的第一个子元素E E:last-child; 选择父元素中的最后一个子元素E E:child(n); 匹配父元素中的第n个子元素E n可以是数字可以是关键字可以是公式 选择符nth-of-type E:first-of-type：指定E元素的第一个 E:last-of-type: 指定E元素的最后一个 E:nth-of-type：指定E元素的第n个 nth-child和nth-of-type的区别： nth-child对父元素里面所有子元素进行排序（序号是固定的），先找第n个孩子，然后看是否和p元素匹配 nth-of-type 先对父元素里面指定的子元素进行排列，先去匹配p元素，然后再找第几个p元素 伪元素选择器 概念：伪元素选择器可以帮助我们利用CSS创建新的标签元素，而不需要HTML标签，从而简化HTML的结构 注意： • 1、before和after都可以创建一个元素，这个元素属于行内元素 • 2、新创建的元素在HTML结构里是找不到的，所以称之为伪元素 • 3、before和after都必须要有content属性 • 4、before是在父元素的内容前面创建元素，after是在父元素的内容后面创建元素 • 5、伪元素选择器和元素选择器一样，权重都是1 二、今日问题：无 三、解决方案：无
| 
