一、HTML 知识点总结#

1. src 和 href 的区别

   1. src是source的缩写，用于引入外部资源，如引入外部的js文件、css文件、图片等， 会阻塞页面的加载，直到资源加载完成，这就是为什么要将js文件放在页面底部的原因。

   2. href是hypertext reference的缩写，用于引入外部资源，如引入外部的css文件、图片等， 不会阻塞页面的加载。这就是为什么要将css文件放在页面顶部的原因。

2. HTML 语义化

语义化是指根据页面内容的结构，选择合适的标签来描述页面的内容，使页面的结构更加清晰，方便搜索引擎的爬取和理解。

常见的语义化标签有：

1
<header></header>  头部
2

3
<nav></nav>  导航栏
4

5
<section></section>  区块（有语义化的div）
6

7
<main></main>  主要区域
8

9
<article></article>  主要内容
10

11
<aside></aside>  侧边栏
12

13
<footer></footer>  底部

3. DOCTYPE(文档类型)的作用

DOCTYPE 是 HTML 文档的第一行，用于告诉浏览器(解析器)该文档使用的 HTML 版本(html或者xhtml)。

浏览器渲染页面的两种模式：

1. 严格模式（strict mode）

2. 混杂模式（quirks mode）

3. script标签中的defer和async的区别

如果没有defer或async属性，浏览器会立即加载并执行脚本，它不会等待后续的加载文件执行，读取到就会开始加载和执行，阻塞后续文档的加载。

defer和async属性都是去一部加载外部的JS脚本文件，它们都不会阻塞网页的解析，区别如下：

1. 执行顺序: 多个async属性的标签，不能保证执行顺序，多个带defer属性的标签，按照加载顺序执行

2. 脚本是否并行执行： async属性，表示后续文档的加载和执行和js脚本的加载和执行是并行的，不会阻塞后续文档的加载，defer属性，加载到后续文档的过程和js脚本的加载（此时仅加载不执行）是并行进行的（异步）

5.常见的meta标签有哪些

meta标签由name和content属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等。

常见的meta标签：

1
<meta charset="UTF-8">  字符编码
2

3
<meta name="keywords" content="前端,知识点,总结">  页面关键词
4

5
<meta name="description" content="整理一些前端的知识点">  页面描述
6

7
<meta name="refresh" content="refresh">  页面的重定向和刷新
8

9
<meta name="viewport" content="width=device-width, initial-scale=1.0">  适配移动端，可以控制视口的大小和比例
10

11
<meta name="robots" content="index,follow">  搜索引擎的索引方式