H5 C3 第一天

H5 C3 第一天

语义化标签

header 头部标签

nav 导航标签

article 内容标签

section 块级标签

aside 侧边栏标签

footer 底部标签

h5表单属性

新增type属性值

email 邮箱

tel 电话

url 网址

search 搜索

date 日期

number 数字输入框

color 颜色

表单属性

required 必填验证

novalidate 关闭验证 添加该属性 不会执行required验证

pattern 自定义验证

placeholder 占位符-提示信息

autofocus 自动获得焦点 一般页面放一个 如百度的搜索框中的

autucomplete 自动完成 on 打开 为默认的 off 关闭 打开时类似于历史搜索记录，一般都关闭使用 使用时一般在表单里同时加上name属性

multiple 选择多个文件提交 结合之前的 一起使用

多媒体标签

音频标签 audio

浏览器支持的格式不同 一般写多个格式，防止播放不了

谷歌浏览器禁止自动播放

1.autoplay 自动播放

2.controls 播放控件

3.loop 循环播放 默认为播放一次

视频标签 video

用muted 可以解决谷歌浏览器禁止视频自动播放

1.autoplay 自动播放

2.controls 播放控件

3.loop 循环播放 默认为播放一次

4.muted 静音播放

5.poster=“lmgarl” 加载等待的画面图片

6.preload 音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。

​ src 音频和视频的文件地址

伪类选择器

E:fiesr-child 匹配父元素中的第一个子元素

E:last-child 匹配父元素中的最后一个子元素

E:nth-child(n)与E:nth-of-type(n)的区别

• E:nth-child(n) 匹配父元素的第n个子元素E

• E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E

属性选择符

1. E[att] 选择具有att属性的E元素。
2. E[att=“val”] 选择具有att属性且属性值等于val的E元素。
3. E[att^=“val”] 选择具有att属性且属性值为以val开头的字符串的E元素。
4. E[att$=“val”] 选择具有att属性且属性值为包含val的字符串的E元素
5. E[att*=“val”] 选择具有att属性且属性值为包含val的字符串的E元素。

伪元素选择器

1. E::before 在E元素前插入一个元素
2. E::after 在E元素后插入一个元素

伪元素是行内元素

伪元素里面必须写concent:"";属性

伪元素只能给双标签加

伪元素冒号前面不能加空格

单冒号能被浏览器识别 但不符合h5的语法规范

2D转换 transfrom

2d移动 translate

translate（x，y）；

teanslateX()；

teanslateY()；

1. translate中的百分比单位是相对于自身 `

2. translate类似定位，不会影响到其他元素的位置

3. 对行内标签没有效果

旋转 rotate

rotate（360deg）；deg为度

正数为顺时针旋转

负数为逆时针旋转

默认的中心点为元素的中心点