一、HTML5新增语义化标签 header 头部标签 nav 导航标签 article 内容标签 section 块级标签 aside 侧边栏标签 footer 尾部标签 注意:1. 这种语义化标准主要针对搜索引擎; 2. 在页面中可以多次使用; 3. 默认为block,但在IE9中需要转换为block; 4.移动端常用; 二、新增input表单 1. 新增input type: 限制输入类型: email 、url、date 、time 、month 、week 、number; 其他: tel 、search(尾部有用于重输的×)、color(生成颜色选择表单); 2. H5表单属性: 1)required=“required”,必填; 2)placeholder=“提示文本”,浅灰色的提示文本,存在默认值时不显示; 3)autofocus=“autofocus”,页面加载完成时自动聚焦到指定表单; 4)autocomplete=“on/off”,当用户在字段开始键入时,浏览器基于之前键入的值,显示出在字段中填写的选项,默认为on,需要放在表单内同时加上name属性; 5)multiple=“multiple”,结合type=“file”使用,可以选中多个文件提交; 三、audio标签 <audio src=“文件地址”></ audio> <audio> <source src=”happy.mp3” type=”audio/mpeg> <source src=”happy.ogg” type=”audio/ogg> 您的浏览器暂不支持audio标签。 </ audio> 1. 属性: src 、autoplay 、 controls 、loop 、preload 四、video标签 语法同audio标签 1. 属性: src 、autoplay 、controls 、width、height 、loop 、preload=“auto/none” 、poster=“图片地址” 、muted=“muted”(google需加上此属性才可autoplay) 五、属性选择器 权重为10 E[att] 选择具有att属性的E元素 E[att=”val”] 选择具有att属性且属性值等于val的E元素 E[att^=”val”] 匹配具有att属性、且值以val开头的E元素 E[att$=”val”] 匹配具有att属性、且值以val结尾的E元素 E[att*=”val”] 匹配具有att属性、且值中含有val的E元素 六、结构伪类选择器 权重为10 E:first-child 、E:last-child 、E:nth-child(n) 只强调第几个子元素,不考虑元素类型 E:first-of-type 、E:last-of-type 、E:nth-of-type(n) 第几个元素类型为E的子元素 n可以是数字、关键字(odd、even)、公式(公式中的n为自然数,如果值为0或超出数量则被忽略) 七、伪元素选择器 权重为1; 必须有content属性,属性值可以为空; ::before 、::after 都属于行内元素; 八、2D转换,transform 1. transform: translate(x, y); 2. 可以使用translateX()和translateY()分别设置横纵坐标的值; 3. 百分比单位是相对于元素自身的宽高; 4. translate之后不会影响其他元素的位置; 5. 对行内元素没有效果;
|