因从自己的语雀复制过来，若有瑕疵请移步语雀

www.yuque.com/books/share… 《Web前端学习路线|进阶版》

1 语义化标签了解

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

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

2 h5表单

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

2.1 h5表单标签

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

2.1.1. 常见输入类型

text password radio checkbox button file hidden submit reset image

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 可输入表单

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同时使用
表单事件

2. 多媒体标签

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

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

2.1. audio 音频标签

使用

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

支持的格式

格式

MIME-type

MP3

audio/mpeg

Ogg

audio/ogg

Wav

audio/wav

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;
    }

2.3. 兼容性

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

2.4. 公共属性

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

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

属性

值

描述

autoplay

如果出现该属性，则音频在就绪后马上播放。

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

loop

如果出现该属性，则每当音频结束时重新开始播放。

muted

规定视频输出应该被静音。

preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src

url

要播放的音频的 URL。

3. 伪类选择符

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

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

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>

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

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){}

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>

也就是说

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

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

5. 伪元素选择器了解

5.1. 伪元素种类

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

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

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

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

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

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

6. 2D转换（变换）transform

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

6.1. 2维坐标系

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

6.2. 2d移动 translate

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

使用2d移动的步骤：

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

div{ transform: translate(50px,50px); }

6.2.1 小结

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

7.sessionStorage

基本

sessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(或标签页)的数据,关闭浏览器之后所有的sessionStorage里面的数据将全部消失.

sessionStorage 非常适合SPA(单页应用程序)，可以方便在各业务模块进行传值。

使用

在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象,sessionStorage保存数据的操作很简单,只需要调用setItem(key,value)方法传入key和value即可

getItem(key) 即可取出对应的值,如不存在,返回 null 值

特点

同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。
存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

浏览器最小支持

支持sessionStorage的浏览器最小版本：IE8、Chrome 5。

适合场景

sessionStorage 非常适合SPA(单页应用程序)，可以方便在各业务模块进行传值。

属性

readonly int sessionStorage.length ：返回一个整数，表示存储在 sessionStorage 对象中的数据项(键值对)数量。

存储json数据

sessionStorage也可存储Json对象：存储时，通过**JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()**将文本转换回对象。

8.localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

使用

需要先判断浏览器是否支持localStorage功能

9.其它

1．杂七杂八

设置网页图标

2．字体标签

$.ajax({

type:"get",

url:"left.html",

async:true,

success:function(data){

$("#left").html(data);

}

});

2021年HTML5完整版（全程无废话）

因从自己的语雀复制过来，若有瑕疵请移步语雀

1 语义化标签 了解

2 h5表单

2.1 h5表单标签

2.1.1. 常见输入类型

2.1.2. 新的输入类型

2.2. h5表单属性

2. 多媒体标签

2.1. audio 音频标签

2.2. video 视频标签

2.3. 兼容性

2.4. 公共属性

3. 伪类选择符

3.1. E:first-child

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

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

4. 属性选择符 了解

5. 伪元素选择器 了解

5.1. 伪元素种类

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

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

6. 2D转换（变换）transform

6.1. 2维坐标系

6.2. 2d移动 translate

6.2.1 小结

7.sessionStorage

8.localStorage

9.其它

1．杂七杂八

2．字体标签

3．图片标签

4．列表标签

5．超链接标签

6．table表格标签

7．框架集

8．超文本链接

9．引入静态资源文件路径问题

10．静态引入公共页面

a）引入头部(用到ajax技术)

b）引入侧边栏(左边栏,和上面操作基本一样)

c）将上面抽取到js文件里面

1 语义化标签了解

4. 属性选择符了解

5. 伪元素选择器了解

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

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