HTML知识点总结篇（一）

src和href的区别

• 作用结果不同
  • src用于替换当前内容
  • href用于在引用资源和当前文档之间建立链接
• 请求资源类型不同
  • 在请求src资源时，会将其指向的资源下载并应用到文档中。常用于img/iframe/input/style/script
  • href常用于建立当前元素和文档之间的链接。常用的有link/a
• 浏览器解析方式不同
  • 当浏览器解析到src时，会暂停其他所有资源的下载和处理，直到将该资源加载、编译、执行完毕
  • 若在文档中使用href，浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理
  • 也就是说src是同步加载执行，href是异步加载执行

对HTML语义化的理解

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

语义化的优点如下：

• 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
• 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header>header>  头部

<nav>nav>  导航栏

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

<main>main>  主要区域

<article>article>  主要内容

<aside>aside>  侧边栏

<footer>footer>  底部
1
2
3
4
5
6
7
8
9
10
11
12
13

DOCTYPE(⽂档类型) 的作⽤

DOCTYPE 是HTML 5中的一种文档类型声明，用来声明文档类型和DTD规范。

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

1. 文档类型定义（DTD：Document Type Definition）

是一套语法规则，可以通过比较文档和文档定义文件来检查文档是否符合规范，元素和标签使用的是否正确

2. 呈现模式

• 标准模式：默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面
• 混杂模式（怪异模式）：浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

script标签中defer和async的区别

1. 如果没有defer或async属性，浏览器会立即加载并执行相应的脚本，他不会等待后续加载的文档元素，读取到就开始加载和执行，这样就阻塞了后续文档的加载。

2. 共同特征：

   • defer 和 async属性都是异步加载外部的JS脚本文件，使得script标签的加载和HTML解析并行执行。加载script标签时不会阻塞页面加载。

3. 区别：

   1. 执行时机
      • 具有 defer 属性的script标签的加载与后续文档的加载是并行进行的，而js脚本是在HTML文档中所有元素解析完毕后，DOMContentLoaded事件调用前执行
      • 具有 async 属性的script标签的加载与后续文档的加载是并行进行的，但是加载完成后立即执行，执行完成后才继续解析HTML
   2. 执行顺序
      • 多个 defer 属性的脚本按照加载顺序执行
      • 对于多个 async 属性的脚本而言，他们是无顺序加载的，完全依赖于网络传输结果，谁先到先执行谁。
   3. 作用范围
      • defer不支持内联script标签。
      • async支持内联script标签。

常用的meta标签有哪些

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

常用的meta标签：

（1）charset，用来描述HTML文档的编码类型

<meta charset="UTF-8" >
1

(2) keywords，页面关键字

<meta name="keywords" content="关键词" />
1

(3) description，页面描述：

<meta name="description" content="页面描述" />
1

(4) refresh，页面重定向和刷新：

<meta http-equiv="refresh" content="0;url=..." />
1

(5) viewport，适配移动端，可以控制视口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
1

其中，content 参数有以下几种：

• width viewport ：宽度(数值/device-width)
• height viewport ：高度(数值/device-height)
• initial-scale ：初始缩放比例
• maximum-scale ：最大缩放比例
• minimum-scale ：最小缩放比例
• user-scalable ：是否允许用户缩放(yes/no）

(6) 搜索引擎索引方式：

<meta name="robots" content="index,follow" />
1

其中，content 参数有以下几种：

• all：文件将被检索，且页面上的链接可以被查询；
• none：文件将不被检索，且页面上的链接不可以被查询；
• index：文件将被检索；
• follow：页面上的链接可以被查询；
• noindex：文件将不被检索；
• nofollow：页面上的链接不可以被查询。

HTML5有哪些更新

1.语义化标签

2.媒体标签

（1）audio：音频

autoplay、loop、controls

（2）video

controls、poster、width、height

（3）source

因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，通过source来指定浏览器支持的源文件

src、type、sizes、srcset

<picture>
  <source media="(min-width:650px)" srcset="https://static.runoob.com/images/runoob-logo.png">
  <source media="(min-width:465px)" srcset="https://static.runoob.com/images/code-icon-script.png">
  <img decoding="async" src="https://static.runoob.com/images/mix/hjkg_icon.png"  style="width:auto;">
picture>
1
2
3
4
5

3.表单

表单事件：

• oninput：每当input里的输入框内容发生变化都会触发此事件
• oninvalid：当提交的input元素的值为无效值时触发此事件
• setCustomValidity：判断表单的正误，有错误时可以手动设置提示信息。当没有错误时要将setCustomValidity(“)设置为空，否则表单无法提交

4.进度条、度量器

5.DOM查询操作

• document.querySelector()
• document.querySelectorAll()

6.Web存储

H5新增两种存储方式

• localStorage：长久保存整个网站的数据，没有过期时间，直到手动去除
• sessionStorage: 用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据

7. 其他

• 
  canvas 拥有多种绘制路径、矩阵、圆形、字符以及添加图像的方法。

  1. canvas坐标：

     canvas 是一个二维网格，左上角坐标为（0,0）

     fillRect方法拥有参数（X，Y，Width，Height)，例如fillRect(0,0,150,75)意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)

  2. canvas样式

     设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）

  3. Canvas - 路径

     在Canvas上画线，我们将使用以下两种方法：

     • moveTo(x,y) 定义线条开始坐标
     • lineTo(x,y) 定义线条结束坐标

     绘制线条我们必须使用到 “ink” 的方法，就像stroke()

     var c=document.getElementById("myCanvas");
     var ctx=c.getContext("2d");
     ctx.moveTo(0,0);
     ctx.lineTo(200,100);
     ctx.stroke();
     1
     2
     3
     4
     5

     绘制圆形则是 arc(x,y,r,start,stop)

     var c=document.getElementById("myCanvas");
     var ctx=c.getContext("2d");
     ctx.beginPath();
     ctx.arc(95,50,40,0,2*Math.PI);
     ctx.stroke();
     1
     2
     3
     4
     5

  4. Canvas - 文本

     使用 canvas 绘制文本，重要的属性和方法如下：

     • font - 定义字体
     • fillText(text,x,y) - 在 canvas 上绘制实心的文本
     • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

     var c=document.getElementById("myCanvas");
     var ctx=c.getContext("2d");
     ctx.font="30px Arial";
     ctx.fillText("Hello World",10,50);
     
     ctx.strokeText("Hello World",10,50);
     1
     2
     3
     4
     5
     6

  5. Canvas - 渐变

     以下有两种不同的方式来设置Canvas渐变：

     • createLinearGradient(x,y,x1,y1) - 创建线条渐变
     • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

  6. Canvas - 图像

     • drawImage(image,x,y)

     var c=document.getElementById("myCanvas");
     var ctx=c.getContext("2d");
     var img=document.getElementById("scream");
     ctx.drawImage(img,10,10);
     1
     2
     3
     4

• 拖放

1. 设置元素可拖放

   <img draggable="true">
   1

2. 将元素设置为可拖动数据,并规定拖动时会发生什么 – ondragstart 和 setData()

在菜鸟官网的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
 ev.dataTransfer.setData("Text",ev.target.id);
}
1
2
3
4

3. 在放置处设置可以放置 – ondragover

event.preventDefault()
1

4. 放置处添加 ondrop 属性，进行放置的过程。在菜鸟官网的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
	// 避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
    ev.preventDefault();
    // 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    // 被拖数据是被拖元素的 id ("drag1")
    var data=ev.dataTransfer.getData("Text");
    // 把被拖元素追加到放置元素（目标元素）中
    ev.target.appendChild(document.getElementById(data));
}
1
2
3
4
5
6
7
8
9
10

• SVG

SVG 是指可伸缩矢量图形，用于定义 用于网络上的基于矢量的图形。SVG 使用 XML 格式定义图形，SVG图像在放大或改变尺寸的情况下其图形质量不会有损失，是万维网联盟的标准

优势：

1. 可以被索引、搜索、脚本化或压缩
2. 可通过文本编辑器来创建和修改
3. 可以在图片质量不下降的前提下被方法
4. 可以在任何的分辨率下被高质量的打印
5. 可伸缩

与 canvas 的区别：

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

• 地理定位：Geolocation（地理定位）用于定位用户的位置。

总结：

（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、replacestate、popstate（前三个是宿主对象history，pushstate、replacestate是H5新增API，popstate是H5新增事件）

请描述一下cookie、sessionStorage和localStorage的区别？

• 相同点：都存储在客户端
• 不同点
  1. 存储大小
     cookie数据大小不能超过4k。
     sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  2. 有效时间
     localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
     sessionStorage 数据在当前浏览器窗口关闭后自动删除。
     cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
  3. 数据与服务器之间的交互方式
     cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
     sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

img的srcset属性的作⽤？

响应式图片之srcset & sizes详讲

浏览器页面经常用到需要根据屏幕密度设置不同的图片，这时就用到了srcset 属性。他能根据屏幕密度的不同，自动加载不同的图片。

用法：srcset([图片源地址] [屏幕密度]) 例如：

<img srcset="img/flower.png 1x">
1

屏幕密度共有1x、2x、3x、4x四种。但是不同屏幕密度下都需要设置图片，按照这种写法，每一张图片都设置四张图片，加载就会很慢。

另一种实现方式：srcset+sizes

用法：srcset([图片源地址] [图片像素宽度]，。。。。) 图片像素宽度单位是 w

​ sizes([媒体查询] [图片显示宽度]，。。。。。) 图片显示宽度单位是 px

​ 根据媒体查询得到的屏幕大小选择对应的图片显示宽度，再根据屏幕显示宽度去图片像素宽度区间中查找到对应位置，选择合适的图片

sizes="(max-width: 500px) 400px, (max-width: 900px) 700px, 1200px"
在屏幕小于等于500px情况下，图片显示成400px宽；在屏幕小于等于900px情况下，图片显示成700px宽；其余情况显示成1200px宽。
1
2

注意：上述结果都是在DPR为1的情况下，主要针对PC端。 如果是手机端，DPR还可能是2,3的情况。这时候进行判断需要用 图片显示宽度*DPR 与图片像素宽度进行比较。

常用的空元素、块级元素、行内元素有哪些

空元素： 即没有内容的HTML元素，空元素没有闭合标签

常见的有：input img meta br hr link 等
1

块级元素：

div ul(无序列表) ol(有序列表) li h1 h2 h3 h4 h5 h6 p(定义段落)
1

行内元素：

span img input select  a(超链接) b(加粗) strong(用于强调文本)
1

对 web worker 的理解

我们都知道在浏览器中 JS 的执行是单线程的，页面上的javascript在执行时会阻塞浏览器的响应，这非常影响用户体验。也就是说在HTML页面执行脚本时，页面的状态是不可响应的，直到脚本完成。

但是 new 出来的web worker对象为子线程，运行在后台，只有主线程中的代码执行时会导致阻塞，子线程不会。它独立于其他脚本，不影响页面的性能，我们可以做任何想做的操作，同时，web worker在后台运行。 并且web worker通过postMessage 将结果回传给主线程，这样在进行复杂操作的时候，就不会阻塞主线程了

有两种Web Worker

Worker对象分为两种：专用式Web Worker和共享式Web Worker：专用式的Web Worker只能被当个页面使用，而共享式的Web Worker可以在被多个页面使用。

如何创建：

1. 首先检测浏览器是否支持web worker

   if(typeof(Worker)!=="undefined")
   {
       // 是的! Web worker 支持!
       // 一些代码.....
   }
   else
   {
       //抱歉! Web Worker 不支持
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9

2. 创建 web worker 文件

3. 创建web worker 对象（首先检测对象是否存在，不存在就先创建，然后再运行 web worker 文件）

   if(typeof(w)=="undefined")
   {
       w=new Worker("demo_workers.js");
   }
   1
   2
   3
   4

4. 终止 web worker

   w.terminate();
   w = undefined;
   1
   2

限制：

• Web Worker无法访问DOM节点；
• Web Worker无法访问全局变量或是全局函数；
• Web Worker无法调用alert()或者confirm之类的函数；
• Web Worker无法访问window、document之类的浏览器全局变量；

不过Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数，也可以使用XMLHttpRequest对象来做Ajax通信

应用场景：

极少有在实际项目中应用 web worker 的，两方面原因，一方面是web worker的兼容性问题，主流浏览器对web worker的兼容性还不够高（比如Safari ，IE就更不用说了） 二是在项目中引入web worker并不能带来质的改变（从这一点来说，websocket就不一样，引入websocket后基本可以替换掉项目里所有的轮询，达到性能优化的目的，但正常的项目决不可能设计成让前台来处理复杂的业务逻辑）

当然，这也不表示web worker毫无用武之地，比如 在使用Ajax与服务端交互的时候，页面需要处理数据库的信息，我们通过 postMessage 获取接口响应结果。

addEventListener("message", function(evt){
var xhr = new XMLHttpRequest();
xhr.open("GET", "lengthytaskhandler.ashx");
xhr.onload = function(){
postMessage(xhr.responseText);
};
xhr.send();
},false);
1
2
3
4
5
6
7
8

Web Worker的错误处理机制

Web Worker提供了error事件来捕捉错误

HTML5的离线储存怎么使用，它的工作原理是什么

有趣的HTML5：离线存储

离线存储指的是 在用户没有与因特网连接时，可以正常访问站点或应用；在用户与因特网连接时，更新用户机器上的缓存文件。

**原理：**HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

使用方法：

1. 在你的页面头部 标签中像下面一样加入一个manifest的属性，然后创建一个和 html 中 manifest 属性同名的 manifest 文件（manifest 文件的建议的文件扩展名是：“.appcache”）：

   DOCTYPE HTML>
   <html manifest = "cache.manifest"> / <html manifest = "cache.appcache">
   ...
   html>
   1
   2
   3
   4

2. cache.manifest文件的书写方式，就像下面这样：

   CACHE MANIFEST
   #v0.11
   
   CACHE:
   
   js/app.js
   css/style.css
   
   NETWORK:
   resourse/logo.png
   
   FALLBACK:
   / /offline.html
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

   1. CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
   2. NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
   3. FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

HTML5离线储存的优势

应用程序缓存为应用带来三个优势：

1. 离线浏览 - 用户可在应用离线时使用它们
2. 速度 - 已缓存资源加载得更快
3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

HTML5的离线储存是怎么更新缓存的

一旦应用被缓存，它就会保持缓存直到发生下列情况：

• 用户清空浏览器缓存
• manifest 文件被修改（更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法）
• 由程序来更新应用缓存

浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

• 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
• 离线的情况下，浏览器会直接使用离线存储的资源。

title与h1的区别、b与strong的区别、i与em的区别？

一个无意义，一个表示强调，有语义，在搜索引擎中更受重视

• strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。
• title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响
• i内容展示为斜体，em表示强调的文本

head 标签有什么作用，其中什么标签必不可少？

:为页面上的所有的相对链接规定默认 URL 或默认目标。
       在一个文档中，最多能使用一个  元素。 标签必须位于  元素内部。
       如果使用了  标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。
1
2
3

:链接到外部样式文件,可出现任何次数
	   href:定义被链接文档的位置
	   type:规定被链接文档的 MIME 类型
	   rel:定义当前文档与被链接文档之间的关系
1
2
3
4

noscript 元素用来定义在脚本未被执行时的替代内容（文本）
1

标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：, , ,