HTML和html5知识总结
Posted 得说
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML和html5知识总结相关的知识，希望对你有一定的参考价值。
Flyer
资深互联网人
10年互联网领域工作经验，其中3年多团队管理经验，曾就职过ba两家互联网公司。
爱设计，关注用户体验，关注移动互联网。在用户体验，产品设计，ui设计方向都有相关的工作经历和实践。
擅长前端架构，团队建设管理，用户体验等
(一) 什么是html？对HTML语义化的理解？什么是Doctype？
(二) html有哪些常用标签？
(三) HTML5新增新增知识？哪些标签？
(四) img的title和alt有什么区别？
(五) src 与 href 的区别？
(六) HTML5中引进`data-`有什么作用？
(七) canvas的性能优化？
(八) 什么是浏览器重绘（repaint）和重排（reflow）？
(九) 描述一下 cookies，sessionStorage 和 localStorage 的区别？
(十) HTML5应用程序缓存和浏览器缓存有什么区别？
(十一) 谈谈对 canvas 的理解？
(十二) 什么是 WebGL？有何优点？
(十三) requestAnimationFrame 是什么？有何好处？
(十四) 屏幕自适应布局解决方案和比较？
问
(一) 什么是HTML？对HTML语义化的理解？什么是Doctype？
答
HTML - 超文本标记语言，英文全称：Hyper Text Markup Language
HTML语义化 - 就是用正确的标签做正确的事情，html 语义化就是让页面的内容结构化，便于浏览器、搜索引擎的解析。在没有样式的情况下也能呈现出很好地内容结构。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
DOCTYPE - 声明文档类型，指示web浏览器关于页面使用哪个 HTML 版本进行编写与渲染页面;
题外：DOCTYPE的作用？
一般浏览器默认会使用怪异模式解析渲染页面,生命DOCTYPE可以确保HTML元素能够使浏览器严格遵守标准模式(即让浏览器按照符合W3C的标准解析渲染页面);
问
(二) HTML有哪些常用标签
答
html 元素定义了整个 HTML 文档
head 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。可以添加在头部区域的元素标签为: title, style, meta, link,script, noscript 和 base。head 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
meta标签描述了一些基本的元数据，不显示在页面上，但会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。meta一般放置于 head区域
title 标签定义了不同文档的标题。
link 标签定义了文档与外部资源之间的关系。
script标签用于加载脚本文件，如： javascript
body 元素定义了 HTML 文档的主体
标题 h1-h6 h1标签只能有一个
段落 P
锚点 a 主要用于页面跳转和当前页面内部导航，"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接
img 图片
br 元素用于换行
hr 元素用于创建水平线
b 定义粗体文本
i 定义斜体字
code 定义计算机代码
sub 上标文本
sup 下标文本
strong 定义加重语气
small 定义小号字
del 定义删除字
em 定义着重文字
ins 定义插入字
table 表格 每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
列表 有序列表：ol>li 无序列表： ul>li 自定义列表: dl > dt > dd
表单元素 form input label select textarea fieldset legend 等等
框架 iframe
问
(三) HTML5新增新增知识？哪些标签？
答
HTML5新增哪些知识
拖拽释放API拖动某元素时，依次触发下列事件：dragstart -- drag-- dragend。当某元素被拖动完，依次触发下列事件：dragenter -- dragover -- dragleave 或 drop
语义化更好的内容标签header、nav、footer、aside、section、article;
音频 ( audio ), 视频 ( video )API;
画布 ( cavans )API;
地理 ( getCurrentPosition() API);
本地存储 ( localStorage )长期存储数据，浏览器关闭后数据不丢失;
sessionStorage的数据在浏览器关闭后自动删除
表单控件 date、time、email、url、search
HTML5新增哪些标签
canvas标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
audio 定义音频内容 同下，跟video差不多
video 定义视频内容 属性有controls buffered paused palyed time currentSrc muted loop 方法有load play pause
source 定义媒体内容 如audio 和 video
embed 定义插入的内容 比如说插件
track 为诸如video 和 audio 之类的内容定义外部文本轨道
datalist 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
article 定义页面独立的内容区域
aside 定义页面的侧边栏内容
command 定义命令按钮，比如单选按钮、复选框或按钮
dialog 定义对话框
details 用于描述文档或文档某个部分的细节
summary 标签包含 details 元素的标题
progress 定义进度条
section 定义文档的某个独立的区域或者部分
figure 定义文档中独立的流内容（比如说图片，图表，代码等等）
figcaption figure的标题
time 定义时间或者日期
nav 定义运行中的进度
header 定义文档的头部内容
footer 定义文档或者section的页脚
新增属性拖放，通过设置内联属性draggable=true，设置相关事件即可实现，但是貌似用法比较局限，基本上是把一个元素从一个地方拖进另一个地方
地理位置 navigator.geolocation navigator.getCurrentPosition navigator.WatchPosition
input 新增了很多类型 如color tel time datatime week search等等
keygen用于表单的密钥对生成器字段
localStorage 和 session Storage 两者的接口都差不多，getItem setItem clear removeItem key
WebSQL 浏览器模拟的数据库
应用程序缓存 可以离线运行 manifest
WebWorkers 可以后台跑js不影响页面渲染和交互
SSE 服务器发送时间
WebSocket 用于服务端和客户端通信
问
(四) img的title和alt有什么区别？
答
title 用于为元素提供附加信息，当鼠标滑动到元素上的时候显示。
alt 的特有属性，是图片内容的等价描述，用于图片无法加载时显示
问
(五) src 与 href 的区别？
答
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是部。
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加
那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。
问
(六) HTML5中引进`data-`有什么作用？
答
'data-'是HTML5新增的一个自定义属性。用以方便开发者在HTML中自定义一些属性来存储和操作数据，同时又不违背HTML的规范，不会带来一些副作用。
问
(七) canvas的性能优化？
答
主要有使用缓存、使用requestAnimationFrame而不是setTimeout或者setInterval做动画的最佳循环、避免浮点运算、尽量减少canvas API的调用、硬件加速。
问
(八) 什么是浏览器重绘（repaint）和重排（reflow）？
答
重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。
重排是明显的一种改变，可以理解为渲染树需要重新计算。
通过CSS与JS设置元素例如颜色，背景图等不会影响布局的属性，但会引起重绘，此时不影响布局，只是局部元素的重新渲染，对性能影响不大。当改变了布局或者改变元素宽高，display等属性时，会引起重排，此时可能会改变DOM树的局部结构，甚至改变整个DOM树，因此浏览器（内部程序）会执行大量的重排工作，很耗性能。
重排会因DOM树中元素的定位（排版）或结构被改变而触发，具体有：
通过JS增加，删除，修改DOM节点；
改变元素的display属性；
改变窗口大小，滚动屏幕；
移动DOM元素；
修改默认字体，大小，行高；
获取offsetTop，scrollTop，clientTop等距离值；
获取元素样式；
优化：
display:none;的元素不加入DOM树，因此对于需要一次性改动大量DOM元素时，可以先将要增加，删除，修改元素的父级display设为none，在DOM树外执行增加，删除，修改操作后再一次性加回DOM树（display:none;），此过程只进行2次重排；减少改变样式的次数，即将对同一元素的样式设置尽量合并，减少操作；
将要进行多次重排的元素属性设为absolute或fixed，这样该元素便脱离了普通流，所以改变定位时不影响DOM结构；
缓存经常使用的与重排相关的属性值；例如：
for(i = 0; i尽量减少table布局。过去为了对齐等原因，大部分的网页都用table布局，但是性能都非常差。table布局的重排和重绘，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。而且随便一个cell的高度宽度的修改都会影响到整个表格重排，因此性能非常差。所以，尽量避免使用table布局。
问
(九) 描述一下 cookies，sessionStorage 和 localStorage 的区别？
答
Cookie
一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie，默认是关闭浏览器后失效。
每个域名存储量比较小（各浏览器不同，大致 4K）
所有域名的存储量有限制（各浏览器不同，大致 4K）
每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题
localStorage
永久存储（可以手动清除）
单个域名存储量比较大（推荐 5MB，各浏览器不同）
总体数量无限制
sessionStorage
仅在当前会话下有效，关闭页面或浏览器后被清除
仅在客户端（即浏览器）中保存，不参与和服务器的通信
存储量更大（推荐没有限制，但是实际上各浏览器也不同）
问
(十) HTML5应用程序缓存和浏览器缓存有什么区别？
答
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源
它的实现借助于 manifest 文件，如下：
<html manifest="demo.appcache">manifest 文件是简单的文本文件，它告知浏览器被缓存（以及不缓存）的内容。
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK: - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK: - 在此标题下列出的文件规定当页面无法访问时的回退页面（如 404 页面）
"#" 开头的是注释行（一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件）更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法
与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。
问
(十一) 谈谈对 canvas 的理解？
答
canvas 是 HTML5 中新增一个 HTML5 标签与操作 canvas 的 JavaScript API，它可以实现在网页中完成动态的 2D 与 3D 图像技术。它有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。 canvas 可以完成动画、游戏、图表、图像处理等原来需要 Flash 完成的一些功能。
问
(十二) 什么是 WebGL？有何优点？
答
WebGL（Web Graphics Library）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。
WebGL 完美地解决了现有的 Web 交互式三维动画的两个问题：第一，它通过 HTML 脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器插件支持；第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的 OpenGL 接口实现的。通俗说 WebGL 是 canvas 绘图的 3D 版本。因为原生的 WebGL 很复杂，我们经常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。
问
(十三) requestAnimationFrame 是什么？有何好处？
答
requestAnimationFrame(callback) 就是针对动画效果的 API，你可以把它用在 DOM 上的风格变化或 canvas 动画或 WebGL 中。
在浏览器动画程序中，我们通常使用 setTimout() 或 setInterval() 来循环每隔几毫秒移动目标物体一次，来让它动起来。HTML5 标准规定了 setTimeout() 的最短时间不得低于 4 毫秒，如果低于这个值，就会自动增加。另外，对于那些 DOM 的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每 16 毫秒执行一次。这时使用 requestAnimationFrame() 的效果要好于 setTimeout()。浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。另外，当标签页不可见时，浏览器会暂停其动画，这会减少 CPU、内存的压力，节省电池电量。
问
(十四) 屏幕自适应布局解决方案和比较？
答
使用 meta 标签：在移动端，低端无定制的需求，都可以用这个完美视口完成。
其中 device-width 的计算公式为：设备的物理分辨率 /(设备像素比 devicePixelRatio * scale).
高清屏的 devicePixelRatio 普遍都是 2 以上。手淘布局的前提就是 viewport 的 scale 根据 devicePixelRatio 动态设置：scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');固定内容区宽度（一般为 980px 或 1024px，移动端浏览器默认viewport: (document.documentElement.clientWidth/Height）页面css宽度，PC 为可视宽度），viewport width 固定情况下，浏览器自动缩放页面显示全内容；否则，如果屏幕小于固定内容区的宽度，则在屏幕范围内显示一部分内容（可用下列方式适配屏幕大小），如果大于 (PC)，则内容区居中两侧显示空白。
流式布局：使用百分比 + 媒体查询，只适合布局简单的页面（如信息流），复杂的页面实现很困难 (用宽度表示高度的 hack：子元素 position: relative; padding-top: 占父元素宽度的百分比; 孙元素 position: absolute; top/bottom: 0; 或用图片撑开).
使用 css3 单位 rem：将根节点 html 的 font-size 的值作为整个页面的基准尺寸 (如 20px，则 1rem=20px，32px=1.6rem)。在页面 resize 时，根据不同的 viewport 宽度 W，为 html 设置一个合适的 font-size(如 W / 设计稿宽度 * 100，则元素宽度为设计稿标注宽度 / 100 rem).
未来应该有两个发展方向：拥抱 vw,vh（手淘的 ml.js 十等分宽度，1rem ＝ 10vw）；更好的使用 flex: 如设计稿宽度是 375px(iPhone6 尺寸)，那么其中两个元素 flex 分别为 200 和 175，比自己计算的百分比要精准。
·END·
以上是关于HTML和html5知识总结的主要内容，如果未能解决你的问题，请参考以下文章