一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

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
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类似定位，不会影响到其他元素的位置
对行内标签没有效果

HTML5CSS3(第一章)

H5C3(第一小节)

HTML5

1.1. 语义化标签 了解

1.2. h5表单

1.2.1 h5表单标签

1.2.1.1. 常见输入类型

1.2.1.2. 新的输入类型

1.2.2. h5表单属性

1.2. 多媒体标签

1.2.1. audio 音频标签

1.2.2. video 视频标签

1.2.3. 兼容性

1.2.4. 公共属性

1.3. 伪类选择符

1.3.1. E:first-child

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

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

1.4. 属性选择符 了解

1.5. 伪元素选择器 了解

1.5.1. 伪元素种类

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

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

1.6. 2D转换（变换）transform

1.6.1. 2维坐标系

1.6.2. 2d移动 translate

1.6.2.1. 小结

1.6.2.1. 小结

1.1. 语义化标签了解

1.4. 属性选择符了解

1.5. 伪元素选择器了解

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

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