H5C3(第一小节)

HTML5

学习目标：

​ 了解 H5 新变化

​ 掌握 H5 新增语义化标签

​ 掌握 H5 新增多媒体标签

​ 掌握 H5 新增 input 表单、表单属性

1.1. 语义化标签 了解

使用语义化标签的好处是增强了代码的可阅读性，也方便了网站的seo（Search Engine Optimization，搜索引擎优化）。

header 头部标签nav 导航标签article 内容标签section 块级标签aside 侧边栏标签footer 尾部标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0oCvDtnE-1599180055277)(medias/1523421588540.png)]

1.2. h5表单

h5表单分为三大部分来学习 输入标签、表单属性 和 表单事件

1.2.1 h5表单标签

对于h5表单标签的学习，以下案例已经包含了所有的新知识，我们只需要做个选择题即可，看着案例来学习新标签即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cC0Rn45m-1599180055281)(medias/1525016474186.png)]

1.2.1.1. 常见输入类型

text password radio checkbox button file hidden submit reset image

1.2.1.2. 新的输入类型

email 邮箱

url 网址

search 搜索

tel 电话

日期等

datetimedatetimedatetime-localmonthweek

number 数字输入框

min 最小值max 最大值step 步长

range 范围

min 最小值max 最大值step 步长

color 颜色

标签的value属性中写颜色值只能写 这格式 #000000

datalist 可输入表单

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6p5PHB5C-1599180055282)(medias/1525017063309.png)]

1.2.2. h5表单属性

placeholder:占位符-提示信息

autofocus:自动获得焦点-一般页面中放1个

autocomplete 自动完成

当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开 如 autocomplete=on 关闭 autocomplete =off需要放在表单内同时加上name属性

multiple:可以多选文件提交

结合文件上传标签 <input type="file" > 一起使用

form属性，可以将输入标签放在表单的外面，还受到表单的管理

<!-- 指定了id为ff --> <form action="" id="ff" > <input type="submit" value="提交"> </form> <!-- 指定了属性form，值为表单的id=ff --> <input type="text" required form="ff" >

required:必填验证

novalidate:关闭验证

在表单上添加该属性，那么在提交的时候就不会再执行 required验证

pattern：自定义验证-通过编写正则表达式自定义验证规则 一般和required同时使用

表单事件

1.2. 多媒体标签

多媒体标签分为 音频 audio 和视频 video 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。

因为多媒体标签的 属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o6gaWzEa-1599180055286)(medias/1525055132280.png)]

1.2.1. audio 音频标签

使用

<audio src="小猪佩奇.mp3" autoplay> </audio>

支持的格式

格式MIME-typeMP3audio/mpegOggaudio/oggWavaudio/wav

1.2.2. video 视频标签

使用

<video src="小猪佩奇.mp4" autoplay controls ></video>

支持的格式

格式MIME-typeMP4video/mp4WebMvideo/webmOggvideo/ogg

video常用属性、方法、事件

属性方法事件duration 视频播放时长play 播放canplay 视频加载完毕 准备播放currentTime 当前播放进度pause 暂停timeupdate 播放时-持续触发volume 音量大小

source标签

可以通过在多媒体标签内加入source标签，用来指定多个播放路径，当第一个source标签的路径出错时，自动会切换到第二个source标签

<!-- 当1.mp4出错时，自动切换到2.mp4 ... --> <video > <source src="1.mp4"> <source src="2.mp4"> <source src="3.mp4"> </video>

object-fit属性

当video标签视频内容宽度没有铺满video标签时，可以在css写上 该属性即可

video { /* 让视频内容铺满整个video标签 */ object-fit: fill; }

1.2.3. 兼容性

因为多媒体标签在不同的浏览器下是不一样的外观，我们有时候需要统一所有的样式，所以就需要我们自己使用**div + 多媒体 **的一些api实现 控制条工具 。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sbZj5EaF-1599180055287)(medias/1525056633662.png)]

1.2.4. 公共属性

以下属性 是要直接写在标签上的 如 autoplay controls

<video src="小猪佩奇.mp4" autoplay controls ></video> 属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。mutedmuted规定视频输出应该被静音。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。srcurl要播放的音频的 URL。

1.3. 伪类选择符

伪类选择符其实我们在基础班就已经学习过一些了，看看它们的大家族

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LL6uhbUy-1599180055289)(medias/1525000040910.png)]

因为有些常用 有些不常用。所以我们就只学习常用的即可

1.3.1. E:first-child

匹配父元素的第一个子元素E。

<style> ul li:first-child{ background-color: red; } </style> <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gQrghK1l-1599180055291)(medias/1525000310879.png)]

E:last-child 则是选择到了最后一个li标签

1.3.2. E:nth-child(n) E:nth-last-child(n)

匹配到父元素的第n个元素 或者 是倒数第n个元素

相比 E:first-child 则要强大了不少，功能如下 （死记硬背是最好的）

匹配到父元素的第2个子元素

ul li:nth-child(2){}

匹配到父元素的倒数第2个子元素

ul li:nth-last-child(2){}

匹配到父元素的序号为奇数的子元素

ul li:nth-child(odd){} odd 是关键字 奇数的意思（3个字母 ）

匹配到父元素的序号为偶数的子元素

ul li:nth-child(even){} even（4个字母 ）

匹配到父元素的前3个子元素

ul li:nth-child(-n+3){}

选择器中的 n 是怎么变化的呢？

因为 n是从 0 ，1，2，3… 一直递增

所以 -n+3 就变成了

n=0 时 -0+3=3n=1时 -1+3=2n=2时 -2+3=1n=3时 -3+3=0…

匹配到父元素的后3个子元素

ul li:nth-last-child(-n+3){}

1.3.3. E:nth-of-type(n)

这里只讲明 E:nth-child(n) 和 E:nth-of-type(n) 的区别 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推导即可

<style> ul li:nth-child(2){ /* 字体变成红色 */ color: red; } ul li:nth-of-type(2){ /* 背景变成绿色 */ background-color: green; } </style> <ul> <li>列表项一</li> <p>乱来的p标签</p> <li>列表项二</li> <li>列表项三</li> <li>列表项四</li> </ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0nnTStQk-1599180055292)(medias/1525002608570.png)]

也就是说

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

1.4. 属性选择符 了解

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元素。

1.5. 伪元素选择器 了解

1.5.1. 伪元素种类

E::before 在E元素前插入一个元素E::after 在E元素后插入一个元素E::first-letter 选择到了E容器内的第一个字母E::first-line 选择到了E容器内的第一行文本

1.5.2. h5写法和传统写法区别 了解

单冒号 E:before双冒号 E::before浏览器对以上写法都能识别 双冒号 是h5上语法的规范

1.5.3. 伪元素的注意事项 了解

想要让伪元素有效，必须遵循以下注意事项

伪元素只能给双标签加 不能给单标签加伪元素的冒号前不能有空格 如 E ::before 这个写法是错误的伪元素里面必须写上属性 content:"";

1.6. 2D转换（变换）transform

2d转换是改变标签在2维平面上的位置和形状的一种技术，先来学习2维坐标系

1.6.1. 2维坐标系

2维坐标系其实就是指布局的时候的坐标系 如图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fsLIU9Dx-1599180055294)(medias/1524965494414.png)]

1.6.2. 2d移动 translate

2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似 定位

使用2d移动的步骤：

给元素添加 转换属性 transform属性值为 translate(x,y) 如 transform:translate(50px,50px); div{ transform: translate(50px,50px); }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8TrF0Ga4-1599180055296)(medias/1524965782388.png)]

1.6.2.1. 小结

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);translate类似定位，不会影响到其他元素的位置对行内标签没有效果

2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似 定位

使用2d移动的步骤：

给元素添加 转换属性 transform属性值为 translate(x,y) 如 transform:translate(50px,50px); div{ transform: translate(50px,50px); }

[外链图片转存中…(img-8TrF0Ga4-1599180055296)]

1.6.2.1. 小结

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);translate类似定位，不会影响到其他元素的位置对行内标签没有效果