HTML5常考点-笔记整理

PECT
270 阅读6分钟

1.src和href的区别

（1）src src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请 求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js 脚本放在底部⽽不是头部。 href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档 （链接）之间的链接，如果在⽂档中添加那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。 这也是为什么建议使⽤ link ⽅式来加载 css，⽽不是使⽤@import ⽅式

<script src =”js.js”></script>
<link href=”common.css” rel=”stylesheet”/>

2.对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是⽤正确的标签做正确的事情。 语义化的优点如下：

  • 对机器友好，带有语义的⽂字表现⼒丰富，更适合搜索引擎的爬⾍爬取有效信息，有利于SEO。除此之外，语义类还⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录；
  • 对开发者友好，使⽤语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出⽹⻚的结构，便于团队的开发与维护。 常⻅的语义化标签：

<nav></nav> 导航栏

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

<main></main> 主要区域

<article></article> 主要内容

<aside></aside> 侧边栏

<footer></footer> 底部

3.DOCTYPE(⽂档类型) 的作⽤

DOCTYPE是HTML5中⼀种标准通⽤标记语⾔的⽂档类型声明，它的⽬的是告诉浏览器（解析器）应该以什么样（html或xhtml）的⽂档类型定义来解析⽂档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染⻚⾯的两种模式（可通过document.compatMode获取，⽐如，语雀官⽹的⽂档类型是 CSS1Compat）：CSS1Compat：标准模式（Strick mode），默认模式，浏览器使⽤W3C的标准解析渲染⻚⾯。在标准模式中，浏览器以其⽀持的最⾼标准呈现⻚⾯。BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。在怪异模式中，⻚⾯以⼀种⽐较宽松的向后兼容的⽅式显示。

4.DOCTYPE(⽂档类型) 的作⽤

如果没有defer或async属性，浏览器会⽴即加载并执⾏相应的脚本。它不会等待后续加载的⽂档元素，读取到就会开始加载和执⾏，这样就阻塞了后续⽂档的加载。 下图可以直观的看出三者之间的区别:

image.png

其中蓝⾊代表js脚本⽹络加载时间，红⾊代表js脚本执⾏时间，绿⾊代表html解析。 defer 和 async属性都是去异步加载外部的JS脚本⽂件，它们都不会阻塞⻚⾯的解析，其区别如下：

  • 执⾏顺序：多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执⾏；
  • 脚本是否并⾏执⾏：async属性，表示后续⽂档的加载和执⾏与js脚本的加载和执⾏是并⾏进⾏的，即异步执⾏；defer属性，加载后续⽂档的过程和js脚本的加载(此时仅加载不执⾏)是并⾏进⾏的(异步)，js脚本需要等到⽂档所有元素解析完成之后才执⾏，DOMContentLoaded事件触发执⾏之前。

5.常⽤的meta标签有哪些

meta 标签由 name 和 content 属性定义，⽤来描述⽹⻚⽂档的属性，⽐如⽹⻚的作者，⽹⻚描述，关键词等，除了HTTP标准固定了⼀些 name 作为⼤家使⽤的共识，开发者还可以⾃定义name。

常⽤的meta标签：

  • （1） charset ，⽤来描述HTML⽂档的编码类型：<meta charset="UTF-8" >
  • （2） keywords ，⻚⾯关键词：<meta name="keywords" content="关键词" />
  • （3） description ，⻚⾯描述：<meta name="description" content="⻚⾯描述内容" />
  • （4） refresh ，⻚⾯重定向和刷新：<meta http-equiv="refresh" content="0;url=" />
  • （5） viewport ，适配移动端，可以控制视⼝的⼤⼩和⽐例：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 其中， content 参数有以下⼏种：
    1. width viewport ：宽度(数值/device-width)
    2. height viewport ：⾼度(数值/device-height)
    3. initial-scale ：初始缩放⽐例
    4. maximum-scale ：最⼤缩放⽐例
    5. minimum-scale ：最⼩缩放⽐例
    6. user-scalable ：是否允许⽤户缩放(yes/no）
  • （6）搜索引擎索引⽅式：<meta name="robots" content="index,follow" /> 其中， content 参数有以下⼏种：
    1. all ：⽂件将被检索，且⻚⾯上的链接可以被查询；none ：⽂件将不被检索，且⻚⾯上的链接不可以被查询；
    2. index ：⽂件将被检索；
    3. follow ：⻚⾯上的链接可以被查询；
    4. noindex ：⽂件将不被检索；
    5. nofollow ：⻚⾯上的链接不可以被查询。

6.HTML5有哪些更新

总结：

（1）新增语义化标签：nav、header、footer、aside、section、article

（2）⾳频、视频标签：audio、video

（3）数据存储：localStorage、sessionStorage

（4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）

（5）input标签新增属性：placeholder、autocomplete、autofocus、required

（6）history API：go、forward、back、pushstate

7.⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

⾏内元素有： a b span img input select strong ；

块级元素有： div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p ；

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

常⻅的有： <br> 、 <hr> 、 <img> 、 <input> 、 <link> 、 <meta> ；

鲜⻅的有： <area> 、 <base> 、 <col> 、 <colgroup> 、 <command> 、 <embed> 、 <keygen> 、 <param> 、 <source> 、 <track> 、 <wbr> 。

8. 对 web worker 的理解

在 HTML ⻚⾯中，如果在执⾏脚本时，⻚⾯的状态是不可相应的，直到脚本执⾏完成后，⻚⾯才变成可相应。web worker 是运⾏在后台的 js，独⽴于其他脚本，不会影响⻚⾯的性能。 并且通过postMessage 将结果回传到主线程。这样在进⾏复杂操作的时候，就不会阻塞主线程了。

如何创建 web worker：

  1. 检测浏览器对于 web worker 的⽀持性

  2. 创建 web worker ⽂件（js，回传函数等）

  3. 创建 web worker 对象

avatar
文章
阅读
粉丝