HTML · 我的文档

[TOC] ## 语义化标签 * 语义化的优点如下： 1. 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录； 2. 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。 * HTML5语义化标签 1. header：定义文档的页眉（头部）； 2. nav：定义导航链接的部分； 3. footer：定义文档或节的页脚（底部）； 4. article：定义文章内容； 5. section：定义文档中的节（section、区段）； 6. aside：定义其所处内容之外的内容（侧边）； * HTML5 提供了两种在客户端存储数据的新方法： 1. localStorage - 没有时间限制的数据存储 2. sessionStorage - 针对一个 session 的数据存储 **行内元素有哪些？块级元素有哪些？空(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>`。 **head 标签有什么作用，其中什么标签必不可少？** * 标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。 * 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 * 下面这些标签可用在 head 部分：`<base>,<link>,<meta>,<script>,<style>,<title>`。 * 其中定义文档的标题，它是 head 部分中唯一必需的元素。 ## script标签中defer和async的区别如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。下图可以直观的看出三者之间的区别: ![](https://img.kancloud.cn/90/d1/90d14fd011a607d32bd7a6d3e6f60304_689x112.png) 其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。 **defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析**，其区别如下： * **执行顺序：** 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行； * **脚本是否并行执行：**async属性，表示**后续文档的加载和执行与js脚本的加载和执行是并行进行的**，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。 ## HTML5的离线储存怎么使用，它的工作原理是什么 * 离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。 * **原理：** HTML5的离线存储是基于一个新建的 `.appcache` 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示 * **使用方法：** 1. 创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性： ``` <html lang="en" manifest="index.manifest"> ``` 2. 在 `cache.manifest` 文件中编写需要离线存储的资源： ``` CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html ``` * **CACHE**: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。 * **NETWORK**: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。 * **FALLBACK**: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。 3. 在离线状态时，操作 `window.applicationCache` 进行离线缓存的操作。 * **如何更新缓存：** 1. 更新 manifest 文件 2. 通过 javascript 操作 3. 清除浏览器缓存 **浏览器是如何对 HTML5 的离线储存资源进行管理和加载？** * **在线的情况下**，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。 * **离线的情况下**，浏览器会直接使用离线存储的资源。