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 电话
-
日期等
- date
- time
- datetime
- datetime-local
- month
- week
-
number 数字输入框
- min 最小值
- max 最大值
- step 步长
-
range 范围
- min 最小值
- max 最大值
- step 步长
-
color 颜色
- 标签的value属性中写颜色值只能写 这格式
#000000
- 标签的value属性中写颜色值只能写 这格式
-
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-type |
---|---|
MP3 | audio/mpeg |
Ogg | audio/ogg |
Wav | audio/wav |
1.2.2. video 视频标签
使用
<video src="小猪佩奇.mp4" autoplay controls ></video>
支持的格式
格式 | MIME-type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/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>
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 规定视频输出应该被静音。 |
preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的音频的 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=3
- n=1时 -1+3=2
- n=2时 -2+3=1
- n=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类似定位,不会影响到其他元素的位置
- 对行内标签没有效果