H5简介

「1. 什么是HTML5」

  • 定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，号称下一代的HTML。

  • 两个概念：

    1. 是一个新版本的HTML语言，定义了新的标签、特性和属性
    2. 拥有一个强大的技术集，这些技术集是指：HTML5、CSS3、JavaScript,这也是广义上的HTML5

「2. HTML5拓展了哪些内容」

  • 语义化标签
  • 本地存储
  • 兼容特性
  • 2D、3D
  • 动画、过渡
  • CSS3特性
  • 性能与集成

HTML5新增

「1. 什么是语义化」

语义化是指用HTML写出符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

「2. 新增了哪些语义化标签」

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

「3. 新增多媒体音频标签」

多媒体标签有两个，分别是音频 audio和视频video。

audio 标签说明

  • 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
  • 但是：播放的格式是有限的。

audio 参数

属性 值 描述
autoplay autoplay 音频就绪后立刻播放
controls controls 向用户展示音频控件
loop loop 音频结束后重新循环播放
src src 播放音频的url地址 
1
2
3
4
5
6
7
8
9
10
<audio controls>
    <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
    <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
    <!-- 
    因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件 -->                             
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

video 参数

属性 值 描述
autoplay autoplay 自动播放
aontrols controls 播放控件
width px像素 宽度
height px像素 高度
loop loop 循环播放
preload auto || none 是否预加载视频（如又autoplay忽略该属性）
src url 视频url地址
poster imgurl 加载等待图片地址
muted muted 静音播放 
1
2
3
4
5
6
7
8
9
<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

多媒体标签总结

  • 音频标签和视频标签使用基本一致
  • 多媒体标签在不同浏览器下情况不同，存在兼容性问题
  • 谷歌浏览器把音频和视频标签的自动播放都禁止了
  • 谷歌浏览器中视频添加muted属性就可以自己播放了
  • 注意：重点记住使用方法及自动播放即可，其他属性在使用时查找对应的手册

「4. 新增input标签」

属性值 说明
type=“email” 限制用户输入必须为Email类型
type=“url” 限制用户输入必须为url类型
type=“date” 限制用户输入必须为日期类型
type=“time” 限制用户输入必须为时间类型
type=“month” 限制用户输入必须为月类型
type=“week” 限制用户输入必须为周类型
type=“number” 限制用户输入必须为数字类型
type=“tel” 手机号码
type=“search” 搜索框
type=“color” 生成一个颜色选择表单

「5. 新增表单属性」

属性 属性值 说明
required required 表单为必填项
placeholder 提示文本 表单的提示信息
autofoucs autofoucs 自动聚焦属性，页面加载完成时自动聚焦表单
autocomplete off / on 显示之前提交过的值，须name属性和成功提交同时满足
multiple multiple 可以多选文件提交

CSS3新增

「1. CSS3属性选择器」

选择符 简介
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
   button {
    cursor: pointer;
  }
  button[disabled] {
    cursor: default;
  }

input[type=search] {
    color: skyblue;
  }

  span[class^=black] {
    color: lightgreen;
  }

  span[class$=black] {
    color: lightsalmon;
  }

  span[class*=black] {
    color: lightseagreen;
  }

「2. 结构伪类选择器」

选择符 简介
E:first-child 匹配父元素中第一个子元素E
E:last-child 匹配父元素中最后一个子元素E
E:nth-child(n) 匹配父元素中第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个 
1
2
3
4
5
6
7
8
9
10
11
ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

**nth-child(n)**参数n详解

  • 注意：本质上就是选中第几个子元素
  • n 可以是数字、关键字、公式
  • n 如果是数字，就是选中第几个
  • 常见的关键字有 even 偶数、odd 奇数
  • 常见的公式如下(如果 n 是公式，则从 0 开始计算)
  • 但是第 0 个元素或者超出了元素的个数会被忽略
公式 取值
2n 偶数
2n+1 奇数
5n 5 10 15…
n+5 从第五个开始到最后（包含第五个）
-n+5 前五个（包含第五） 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style>
  /* 偶数 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }

  /* 奇数 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }

  /*n 是公式，从 0 开始计算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }

  /* 偶数 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }

  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }

  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }

  /* n + 5 就是从第5个开始往后选择 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }

  /* -n + 5 前五个 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

类选择器，属性选择器，伪类选择器，权重为10

nth-child与nth-of-type区别

  • nth-child 对父元素里面的所有孩子排列选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
  • nth-of-type 对父元素里面指定的子元素进行排列选择。先匹配E，然后在根据E找第n个孩子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

「3. 伪元素选择器」

选择符 简介
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

伪元素选择器注意事项

  • before 和 after 必须有 content 属性
  • before 在内容前面，after 在内容后面
  • before 和 after 创建的是一个元素，但是属于行内元素
  • 创建出来的元素在 Dom 中查找不到，所以称为伪元素
  • 伪元素和标签选择器一样，权重为 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

伪元素字体图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
p {
   position: relative;
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;

}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}

伪元素清除浮动

  1. 额外标签法也称隔墙法，是W3C推荐的做法
  2. 父元素添加overflow属性
  3. 父元素添加afte伪元素
  4. 父元素添加双伪元素

额外标签法是基本做法，在浮动元素后面新增一个空标签，必须为块级盒子，属性为clear:both。

后面两种伪元素清除浮动的方法是第一种额外标签法的升级和优化

1
2
3
4
5
6
7
.clearfix::after {
		content:"";		伪元素必填属性
    	display: block;		插入元素必须是块级
    	height: 0;		不要看见这个元素
    	clear: both;		核心代码清除浮动
    	visibility: hidden;		不要看见这个元素
}
1
2
3
4
5
6
7
.clearfix::before .clear::after {
    	content:"";
    	display:table;    	转换为块级元素并且一行显示
}
.clearfix::after{
    	clear:both;
}

「4. CSS3盒子模型」

box-sizing属性可用来指定盒子模型，有两个属性值值，可指定为content-box，border-box。

区别：

  1. box-sizing: content-box;盒子大小为width+padding+border（以前默认的）
  2. box-sizing: border-box; 盒子大小为width

如果盒子模型改为第二种，则padding和border就不会撑大盒子（前提是padding和border不会超过width宽度）