黑马程序员技术交流社区

标题: H5C3基础笔记 [打印本页]

作者: Zo. 时间: 2019-4-11 13:46
标题: H5C3基础笔记

一、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>

您的浏览器暂不支持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. 对行内元素没有效果；

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2