关于前端:HTMLHTML5-基础知识-面试题专用

37次阅读

共计 39200 个字符，预计需要花费 98 分钟才能阅读完成。

HTML/HTML5 基础知识 | 面试题专用

DTD 介绍

  • DTD（Document Type Definition 文档类型定义）是一组机器可读的规定，它们定义 XML 或 HTML 的特定版本中所有容许元素及它们的属性和档次关系的定义。在解析网页时，浏 览器将应用这些规定查看页面的有效性并且采取相应的措施。
  • DTD 是对 HTML 文档的申明，还会影响浏览器的渲染模式（工作模式）

SGML、HTML、XML 和 XHTML 的区别？

  • SGML 是规范通用标记语言，是一种定义电子文档构造和形容其内容的国际标准语言，是所有电子文档标记语言的起源
  • HTML（HyperText Markup Language）是超文本标记语言，它定义了网页内容的含意和构造。
  • XML 是可扩大标记语言是将来网页语言的倒退方向，XML 和 HTML 的最大区别就在于 XML 的标签是能够本人创立的，数量有限多，而 HTML 的标签都是固定的而且数量无限。
  • XHTML 是一个基于 XML 的标记语言，他与 HTML 没什么实质的区别，但他比 HTML 更加严格。

  • 为了标准 HTML，W3C 联合 XML 制订了 XHTML1.0 规范，这个规范没有减少任何新的标签，只是依照 XML 的要求来标准 HTML。两者最次要的区别是：

    • 文档顶部 doctype 申明不同，XHTML 的 doctype 顶部申明中明确规定了 xhtml DTD 的写法
    • 元素必须始终正确嵌套
    • 标签必须始终敞开
    • 标签名必须小写
    • 特殊字符必须本义
    • 文档必须有根元素
    • 属性值必须用双引号 "" 括起来
    • 禁止属性最小化（例如，必须应用 checked="checked" 而不是 checked）

DOCTYPE 有什么用？

  • <!DOCTYPE> 申明位于 HTML 文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器应用规范模式渲染文档。DOCTYPE 不存在或格局不正确会导致文档以兼容模式出现。
// 返回以后文档关联的文档类型定义（DTD），如果以后文档没有 DTD，则该属性返回 null。document.doctype
  • Doctype

规范模式与兼容模式各有什么区别？它们有何意义？

  • 规范模式：又称严格模式，是指浏览器依照 W3C 规范解析代码。

    • 规范模式的渲染形式和 JS 引擎的解析形式都是以该浏览器反对的最高规范运行。

  • 兼容模式：又称怪异模式或混淆模式，是指浏览器用本人的形式解析代码。

    • 在兼容模式中，页面以宽松的向后兼容的形式显示，模仿老式浏览器的行为以避免站点无奈工作。

  • 如何辨别：

    • 在 HTML4.01 规范中，浏览器解析时到底应用规范模式还是兼容模式，与网页中的 DTD 间接相干，因为 HTML 4.01 基于 SGML，DTD 规定了标记语言的规定，这样浏览器能力正确地出现。且有三种
    • HTML5 不基于 SGML，因而不须要对 DTD 进行援用。只须要在顶部申明 <!DOCTYPE html>
  • 目标：避免出现文档时浏览器切换到“兼容模式”。
  • 怪异模式和规范模式
  • 怪异模式（Quirks Mode）对 HTML 页面的影响

页面导入款式时，应用 link 和 @import 有什么区别？

  • link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 rel 连贯属性等作用；而 @import 是 CSS 提供的，只能用于加载 CSS；
  • 页面被加载的时，link 会同时被加载，而 @import 援用的 CSS 会等到页面被加载完再加载；
  • @import 是 CSS2.1 提出的，只在 IE5 以上能力被辨认，而 link 是 XHTML 标签，无兼容问题；
  • link 形式的款式的权重高于 @import 的权重。

HTML 中 form 里 action 办法的 Get 和 Post 有什么区别？

  • Get：Form 的默认办法。
  • Get 是用来从服务器上取得数据。Post 是用来向服务器上传递数据
  • Get 将表单中数据的依照 name=value 的模式，增加到 action 所指向的 URL 前面，并且两者应用 “?” 连贯，而各个变量之间应用 “&” 连贯。Post 是将表单中的数据放在 form 的数据体中，依照变量和值绝对应的形式，传递到 action 所指向 URL
  • Get 是不平安的，因为在传输过程，数据被放在申请的 URL 中。Post 的所有操作对用户来说都是不可见的，其搁置 request body 中
  • Get 传输的数据量小，这次要是因为受 URL 长度限度。Post 能够传输大量的数据，所以在上传文件只能应用 Post
  • Get 限度 Form 表单的数据集的值必须为 ASCII 字符。Post 反对整个 ISO10646 字符集
  • Get 申请浏览器会被动 cache。Post 反对不会
  • Get 申请参数会被残缺保留在浏览历史记录中。Post 中的参数不会被保留。
  • GET 和 POST 实质上就是 TCP 链接，并无差别。然而因为 HTTP 的规定和浏览器 / 服务器的限度，导致他们在利用过程中体现出一些不同。
  • GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。

Meta viewport 原理是什么？

  • meta viewport 标签的作用是让以后 viewport 的宽度等于设施的宽度，同时当设置 user-scalbale="no" 时不容许用户进行手动缩放
  • viewport 的原理：挪动端浏览器通常都会在一个比挪动端屏幕更宽的虚构窗口中渲染页面，这个虚构窗口就是 viewport；目标是失常展现没有做挪动端适配的网页，让他们残缺的展现给用户；
  • viewport 属性值
属性 形容
width 设施的虚构视口的宽度。
height 设施的虚构视口的高度。
device-width 设施屏幕的物理宽度。
device-height 设施屏幕的物理高度。
initial-scale 拜访页面时的初始缩放。1.0 无奈缩放。
user-scalable 容许设施放大和放大，值为 yes 或 no。
minimum-scale 容许用户的最小缩放值，1.0 表无奈缩放。
maximum-scale 容许用户的最大缩放值，1.0 表无奈缩放。 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Meta 的目标是什么？

  • meta 元素可用于蕴含形容 HTML 文档属性的名称 / 值对，如作者，字符编号，关键字列表，文档作者等信息
<!DOCTYPE html>
<html>
  <head>
    <!-- 举荐 Meta Tags -->
    <meta charset="utf-8" />
    <meta name="language" content="english" />
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Author Name" />
    <meta name="designer" content="Designer Name" />
    <meta name="publisher" content="Publisher Name" />
    <meta name="no-email-collection" content="name@email.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- 搜索引擎优化 Meta Tags -->
    <meta name="description" content="Project Description" />
    <meta
      name="keywords"
      content="Software Engineer,Product Manager,Project Manager,Data Scientist"
    />
    <meta name="robots" content="index,follow" />
    <meta name="revisit-after" content="7 days" />
    <meta name="distribution" content="web" />
    <meta name="robots" content="noodp" />

    <!-- 可选 Meta Tags-->
    <meta name="distribution" content="web" />
    <meta name="web_author" content="" />
    <meta name="rating" content="" />
    <meta name="subject" content="Personal" />
    <meta name="title" content="- Official Website." />
    <meta name="copyright" content="Copyright 2020" />
    <meta name="reply-to" content="" />
    <meta name="abstract" content="" />
    <meta name="city" content="Bangalore" />
    <meta name="country" content="INDIA" />
    <meta name="distribution" content="" />
    <meta name="classification" content="" />

    <!-- 挪动设施上 HTML 页面的 Meta Tgas -->
    <meta name="format-detection" content="telephone=yes" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- http-equiv Tags -->
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />

    <title>HTML5 Meta Tags</title>
  </head>
  <body>
    ...
  </body>
</html>
  • Meta Refresh
<!-- 在 5 秒钟内重定向到提供的 URL。设置为 0 可立刻重定向 -->
<meta http-equiv="refresh" content="3;url=https://juejin.cn/user/96412754251390" />
  • Note：如果你的网站不是专门为响应而设计的，并且在这个尺寸下工作得很好，不要应用响应元标签，因为它会让体验变得更糟。
  • Stop using the viewport meta tag (until you know how to use it)
  • metatags

什么是替换元素与非替换元素

  • 替换元素：就是浏览器依据其标签的元素属性来判断显示具体的内容的元素，且元素个别领有固定的尺寸（宽高或宽高比）。

    • 在 html 中像这样的元素有 img，input，textarea，select，object，这些都是替换元素，这些元素都没有理论的内容。

  • 非替换元素：html 中大多数都是非替换元素，他们间接将内容通知浏览器，间接显示进去。

    • 如：p 标签，浏览器会间接显示 p 标签里的内容。
  • tips：替换元素和非替换元素不仅是在行内元素中有，块级元素也有替换和非替换之分，比方嵌入的文档 iframe，audio，canvas 在某些状况下也为替换元素。

块级元素和行内元素的区别？

  • HTML4.01 中，元素被分成两大类：inlink（行内元素）与 block（块级元素）。区别如下：
块级元素 行内元素
独占一行 不独占一行
能够设置宽高（盒模型） 不能够设置宽高，宽高由元素外部的内容决定，padding 和 margin 的 top/bottom 不会对元素失效
能够蕴含行内元素和其余块级元素 行内元素只能蕴含文本和其余行内元素。
  • 默认状况下是这样，但能够利用 display 来批改其为块级还是行内
  • 内联元素和块级元素

块级元素和行内元素别离有哪些？空（void）元素有哪些？

  • CSS 标准规定，每个元素都有 display 属性，每个元素都有默认的 display 值。例如：

    • div 默认display 属性值为 block，为块级元素；
    • span 默认 display 属性值为 inline，为行内元素。

  • 块级元素：

    • <h1>-<h6>、<p>、<div>、<ul>、<ol>、<form>、<table>、<address>、<blockquote>、<center>、<dir>、<dl>、<fieldset>、<hr>、<menu>、<noscript>、<pre>、<noframes>、<isindex>
    • 当元素的 display 属性为 block、list-item 或 table 时，该元素将成为“块级元素”。

  • 行内元素：

    • <a>、<img>、<input>、<span>、<textarea>、<label>、<select>、<abbr>、<acronym>、<b>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<kbd>、<q>、<s>、<samp>、<small>、<strike>、<strong>、<sub>、<sup>、<tt>、<u>
    • 当元素的 display 属性为 inline、inline-block 或 inline-table 时，该元素将成为“行内元素”

  • 常见的空元素：标签内没有内容的 HTML 标签被称为空元素。

    • <br>、<hr>、<img>、<input>、<link>、<meta>
  • 不常见的空元素：<area>、<base>、<col>、<command>、<embed>、<keygen>、<param>、<source> <track>、<wbr>

什么是可选标签？为什么要应用它？

  • 在 HTML 中，某些元素具备可选标记。实际上，即便元素自身是必须的，也能够从 HTML 文档中齐全删除某些元素的开始和完结标签。
  • p，li，td，tr，th，html，head，body 等。如：
<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.
  • 您不用提供 </p> 完结标签。浏览器会检测到它须要它们，并且无论如何都会正确显示在 DOM 中。但这可能带给你编写上的艰难！
  • 您能够节俭一些字节并缩小须要在 html 文件中下载的字节。

为了便于浏览，当您的标签内有内容 / 文本时，带上完结标签。

简述一下 src 与 href 的区别？

  • src 用于援用资源，替换以后元素；href 用于在以后文档和援用资源之间确立分割。

  • href（hyperReference）即超文本援用：浏览器遇到并行下载资源，不阻塞页面解析，与 link 引入 css 一样，浏览器并行下载 css 不阻塞页面解析

    • href 是指向网络资源所在位置，建设和以后元素（锚点）或以后文档（链接）之间的链接，用于超链接。

  • src（resource）即资源：当浏览器遇到 src 时，会暂停页面解析，直到该资源下载或执行结束，这也是 script 标签之所以放底部的起因

    • src 是指向内部资源的地位，指向的内容将会嵌入到文档中以后标签所在位置；
    • 在申请 src 资源时会将其指向的资源下载并利用到文档内，例如 js 脚本，img 图片和 frame 等元素。
    • 当浏览器解析到该元素时，会暂停其余资源的下载和解决，直到将该资源加载、编译、执行结束，图片和框架等元素也如此，相似于将所指向资源嵌入以后标签内。这也是为什么将 js 脚本放在底部而不是头部。

img 上 title 与 alt

  • title 是鼠标放在图片下面时显示的文字，title 是对图片的形容和进一步的阐明。
  • alt 定义了图像的备用文本形容。

  • tips：浏览器并非总是会显示图像。当有下列状况时，alt 属性能够为图像提供代替的信息：

    • 非可视化浏览器（Non-visual browsers）（比方有视力阻碍的人应用的音频浏览器）
    • 用户抉择不显示图像（比方为了节俭带宽，或出于隐衷等思考不加载包含图片在内的第三方资源文件）
    • 图像文件有效，或是应用了不反对的格局
    • 浏览器禁用图像等
    • tips：倡议尽可能地通过 alt 属性提供一些有用的信息。
<!-- × -->
<img src="wenhao.jpg" alt="图片" />

<!-- √ -->
<img src="wenhao.jpg" alt="满脸问号的男人" />

  • 图像上 alt 属性的用处是什么？

    • 如果用户无奈查看图像，alt 属性将为图像提供可选信息。alt 属性应该用来形容任何图像，除了那些仅用于装璜目标的图像，在这种状况下，应该将其留空。
    • 装饰性图像应具备空 alt 属性。
    • 网络爬虫应用 alt 标签来了解图像内容，因而它们被认为对搜索引擎优化（SEO）很重要。
    • 在 alt 标签的开端减少可拜访性。
  • img

为什么在 img 标签中应用 srcset 属性？请形容浏览器遇到该属性后的处理过程。

  • 为了设计响应式图片。咱们能够应用两个新的属性 srcset 和 sizes 来提供更多额定的资源图像和提醒，帮忙浏览器抉择正确的一个资源。
  • srcset：定义了咱们容许浏览器抉择的图像集，以及每个图像的大小。
  • sizes：定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳抉择。

  • 处理过程：

    • 查看设施宽度
    • 查看 sizes 列表中哪个媒体条件是第一个为真
    • 查看给予该媒体查问的槽大小
    • 加载 srcset 列表中援用的最靠近所选的槽大小的图像
<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">
  • 响应式图像：如果您只是在更改分辨率，请应用 srcset。
  • 响应式图像教程

noscript 标签的作用

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

  • <noscript> 标签中的内容只有在下列状况下才会显示进去：

    • 浏览器不反对脚本
    • 浏览器反对脚本，但脚本被禁用
<!-- 给予用户敌对的提醒! -->
<noscript> 您的浏览器不反对 JavaScript！</noscript>

label 的作用是什么？是怎么用的？

  • label 标签定义表单管制间的关系，当用户抉择该标签时，浏览器会主动将焦点转到和标签相干的表单控件上。
  • 两种用法：一种是 id 绑定，一种是嵌套
<label for="select"> 爱我 </label>
<input type="radio" id="select" name="love" value="love" />
<label> 恨我 <input type="radio" name="hate" value="hate" /></label>

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

  • <title> 与 <h1> 的区别

    • <title> 用于网站信息题目，一个网站能够有多个 title，seo 权重高于 h1；
    • <h1> 概括的是文章主题，一个页面最好只用一个 h1，seo 权重低于 title。

  • <b> 与 <strong> 的区别

    • <b> 为了加粗而加粗
    • <strong> 为了表明重点内容而加粗，有语气增强的含意

  • <i> 与 <em> 的区别

    • <i> 为了斜体而斜体，<em> 为了表明重点而斜体，且对于搜索引擎来说 <strong> 和 <em> 比 <b> 和 <i> 要器重的多

rel="noopener" 应在什么场景下应用，为什么？

  • rel="noopener" 是 <a> 标签的一个属性。他能够禁止关上的新页面中应用 window.opener 属性，这样一来关上的新页面就不能通过 window.opener 去操作你的页面。
  • 新页面能够通过 window.opener.location = newURL 将你的页面导航至任何网址。
<!-- home.html -->
<a href="./home.html" target="_blank">home</a>
<!-- <a href="./home.html" target="_blank" rel="noopener">home</a> -->

<!-- details.html -->
<h1> 点关注 不迷路！</h1>
<script>
  window.opener.location = 'https://juejin.cn/user/96412754251390'
</script>
  • 如果您正在应用带有 target ="_ blank" 的内部链接，则您的链接应具备 rel="noopener" 属性，以避免标签被挪用。如果您须要反对旧版本的 Firefox，请应用 rel="noopener noreferrer"
  • 总结：rel="noopener" 利用于超链接，避免关上的链接操纵源页面

为什么最好把 link 标签放在 head 之间？

  • 把 <link> 标签放在 <head></head> 之间是标准要求的内容。此外，这种做法能够让页面逐渐出现，进步了用户体验。
  • 将样式表放在文档底部左近，会使许多浏览器（包含 Internet Explorer）不能逐渐出现页面。
  • 一些浏览器会阻止渲染，以防止在页面款式发生变化时，从新绘制页面中的元素。
  • 这种做法能够避免出现给用户空白的页面或没有款式的内容。

为什么最好把 JS 的 script 标签放在 body 之前，有例外情况吗？

  • 脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部，保障 HTML 首先实现解析，将页面尽早出现给用户。

  • 例外情况：当你的脚本里蕴含 document.write() 时。

    • 然而当初，document.write() 不举荐应用。
    • 同时，将 <script> 标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。对此比拟好的做法是，<script> 应用 defer 属性，放在 <head> 中。

HTML 全局属性（global attribute）有哪些

  • accesskey：设置快捷键，提供快速访问元素
  • class：为元素设置类标识，多个类名用空格离开，CSS 和 JavaScript 可通过 class 属性获取元素
  • contenteditable：指定元素内容是否可编辑
  • contextmenu：自定义鼠标右键弹出菜单内容
  • data-*：为元素减少自定义属性
  • dir：设置元素文本方向
  • draggable：设置元素是否可拖拽
  • dropzone：设置元素拖放类型：copy，move，link
  • hidden：示意一个元素是否与文档。款式上会导致元素不显示，然而不能用这个属性实现款式成果
  • id：元素 id，文档内惟一
  • lang：元素内容的的语言
  • spellcheck：是否启动拼写和语法查看
  • style：行内 CSS 款式
  • tabindex：设置元素能够取得焦点，通过 tab 能够导航
  • title：元素相干的倡议信息
  • translate：元素和子孙节点内容是否须要本地化

请形容下 SEO 中的 TDK？

  • 在 SEO 中，所谓的 TDK 其实就是 title、description、keywords 这三个标签

    • title 题目标签
    • description 形容标签
    • keywords 关键词标签

你有应用过什么模板引擎？为什么应用它？

  • 罕用模板引擎：Pug（以前叫 Jade）、Haml、Handlebars、art-template 等
  • 这些模版语言大多是类似的，都提供了用于展现数据的内容替换和过滤器的性能
  • 大部分模版引擎都反对自定义过滤器，以展现自定义格局的内容。
!!! 5 
html 
  head 
    title = HelloWorld 
  body 
    h1 应用 Jade 创立 HelloWorld 网页

编译为

<!DOCTYPE html>
<html>
  <head>
    <title>HelloWorld</title>
  </head>
  <body>
    <h1> 应用 Jade 创立 HelloWorld 网页 </h1>
  </body>
</html>
  • 它帮忙咱们用更少的代码更快地编写 HTML 代码。

iframe 是什么？有什么优缺点？

  • HTML 内联框架元素（<iframe>）示意嵌入的浏览上下文。它可能将另一个 HTML 页面嵌入到以后页面中。
  • iframe 是用来在网页中插入第三方页面，晚期的页面应用 iframe 次要是用于导航栏这种很多页面都雷同的局部，这样在切换页面的时候防止反复下载。
  • tips：能够将提醒文字放在 <iframe></iframe> 之间，来提醒某些不反对 iframe 的浏览器

  • 长处

    • 便于批改，模仿拆散，像一些信息管理系统会用到。
    • iframe 可能一成不变的把嵌入的网页展示进去。
    • 如果有多个网页援用 iframe，那么你只须要批改 iframe 的内容，就能够实现调用的每一个页面内容的更改，方便快捷。
    • 网页如果为了对立格调，头部和版本都是一样的，就能够写成一个页面，用 iframe 来嵌套，能够减少代码的可重用。
    • 并行加载脚本
    • security sandbox（平安沙盒）
    • 解决加载迟缓的第三方内容。如：图标和广告等的加载问题。

  • 毛病

    • 没有语意。搜索引擎无奈解读这种页面，不利于 SEO
    • 会产生很多页面，不容易治理。
    • 即便内容为空，加载也须要工夫。
    • iframe 的创立比个别的 DOM 元素慢了 1-2 个数量级
    • 很多的挪动设施（PDA 手机）无奈齐全显示框架，设施兼容性差。
    • iframe 框架页面会减少服务器的 http 申请，对于大型网站是不可取的。
    • iframe 会阻塞主页面的 onload 事件。
    • iframe 和主页面共享连接池，而浏览器对雷同域的连贯有限度，所以会影响页面的并行加载。
    • 如果须要应用 iframe，最好通过 javascript 动静给 iframe 增加 src 属性值，这样能够绕开以上两个问题
    • iframe 框架结构有时会让人感到蛊惑，如果框架个数多的话，可能会呈现高低、左右滚动条，会扩散访问者的注意力，用户体验度差。
  • tips：除非非凡须要，个别不举荐应用。目前 iframe 的长处齐全能够应用 Ajax 实现，因而曾经没有必要应用 iframe 了。
  • iframe

div+css 的布局较 table 布局有什么长处？

  • 拆散不便、改版快、清晰简洁、seo

    • 体现与构造相拆散。
    • 改版的时候更不便，只有改 css 文件。
    • 页面加载速度更快、结构化清晰、页面显示简洁。
    • 易于优化（seo）搜索引擎更敌对，排名更容易靠前。

很多网站不罕用 table，iframe 这两个元素，晓得起因吗？

因为浏览器页面渲染的时候是从上至下的，而 table 和 iframe 这两种元素会扭转这样渲染规定，他们须要期待本人元素内的内容加载完才整体渲染。用户体验会很不敌对。

  • 还有一些其余的影响：具体参考为什么咱们不倡议用 Table 布局，iframe 的话本文有所提及，能够翻阅查找

HTML 中的 lang 属性有什么作用？

  • 通过在 css:lang() 伪类拼写和语法查看器中应用页面款式来帮忙搜索引擎进行语言检测
:lang(zh) {font-size: 1.5em;}
  • HTML 的 lang 属性的作用
  • HTML 中 html 元素的 lang 属性的阐明
  • 网页头部的申明应该是用 lang=”zh” 还是 lang=”zh-cn”？

什么 enctype='multipart/form-data' 意思？

  • enctype 属性指定将表单数据提交到服务器时应如何编码。

HTML5

HTML5 是 HTML（超文本标记语言）最新的订正版本，由万维网联盟（W3C）于 2014 年 10 月实现规范制订。指标是取代 1999 年所制订的 HTML 4.01 和 XHTML 1.0 规范。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。

HTML5 向后兼容旧浏览器吗？

  • HTML5 被设计成尽可能向后兼容现有的 web 浏览器

HTML5 为什么只须要写 <!DOCTYPE html>？

  • HTML5 不基于 SGML，因而不须要对 DTD 进行援用，然而须要 DOCTYPE 来标准浏览 器的行为（让浏览器依照它们应该的形式来运行）
  • HTML4.01 基于 SGML，所以须要对 DTD 进行援用，能力告知浏览器文档所应用的文档类型。
  • 其中，SGML 是规范通用标记语言，简略的说，就是比 HTML，XML 更老的规范，这两者都是由 SGML 倒退而来的。然而，HTML5 不是。

HTML5 文档类型和字符集是？

  • HTML5 文档类型：<!DOCTYPE html>
  • HTML5 字符集编码：<meta charset="UTF-8" />

HTML5 有哪些新个性

  • 在 HTML5 中，DOM 拓展了三种选择器 document.querySelector、document.querySelectorAll、matchesSelector()
  • 拖拽开释（Drag and drop）API
  • 绘画 canvas，反对内联 SVG。反对 MathML
  • 媒体播放的 video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据，浏览器敞开后数据不失落；sessionStorage 的数据在浏览器敞开后主动删除
  • 更好的实际 web 语义化，比方 article、footer、header、nav、section 等语义标签
  • 表单控件：calendar、date、time、email、url 等
  • 新增表单元素：datalist、keygen、output
  • 新的技术：多线程编程的 webWorker，全双工通信协议 webSocket 和天文定位 Geolocation

什么是 data-* 属性？

  • 自定义数据属性以 data 开始，并将依据您的需要进行命名
  • 您能够应用 JavaScript 取得这些属性的值
  • 在 JavaScript 框架变得风行之前，前端开发者常常应用 data-* 属性，把额定数据存储在 DOM 本身中，而过后没有其余 Hack 伎俩（比方应用非标准属性或 DOM 上额定属性）。它用于存储页面或应用程序专用的自定义数据，对于这些数据，没有更适合的属性或元素。

  • 而当初，不激励应用 data-* 属性。起因：

    • 用户能够通过在浏览器中利用查看元素，轻松地批改属性值，借此批改数据
    • 数据模型最好存储在 JavaScript 自身中，并利用框架提供的数据绑定，使之与 DOM 放弃更新

HTML5 中不举荐应用哪些 HTML 标签？

  • <acronym>：倡议用 <abbr>
  • <applet>：倡议用 <object>
  • <basefont>：倡议用 <font>
  • <bgsound>：倡议用 <audio>
  • <b>：不举荐应用，倡议用 font-weight 代替
  • <big>：不举荐应用，倡议用 font-size 代替
  • <blink>：倡议采纳 animation 代替
  • <center>：不举荐应用，倡议用 text-align: center 代替
  • <dir>：倡议依据语义采纳 <ul>、<ol> 或者 <dl>
  • <font>：不举荐应用，倡议用 CSS 代替，以便更好管制。
  • <frame>：不举荐应用，倡议用 <iframe> 代替。但 <iframe> 当初又能够用 ajax 来代替
  • <frameset>：不举荐应用
  • <hgroup>：不举荐应用
  • <isindex>：倡议用 <input>
  • <listing>：倡议用 <pre> 或应用语义更好的 <code>
  • <marquee>：不举荐应用
  • <multicol>：倡议用 <input>
  • <nobr>：不举荐应用，倡议用 white-space 代替
  • <noframes>：不举荐应用，倡议用 帧 CSS 代替
  • <plaintext>：倡议用 <pre> 或应用语义更好的 <code>
  • <u>：不举荐应用，倡议用 帧 font-style 代替
  • <spacer>：不举荐应用
  • <strike>：倡议用语义更好的 <del> 或 <s>
  • <tt>：倡议用 <code> 或 <span>
  • <xmp>：倡议用带有 CSS 的 <pre> 或应用语义更好的 <code>
  • HTML5 与 HTML4 的区别
  • HTML 元素参考

你如何了解 Web 的语义化?

  • web 语义化是指通过 HTML 标记示意页面蕴含的信息，蕴含了 HTML 标签的语义化和 CSS 命名的语义化。
  • HTML 标签的语义化是指：通过应用蕴含语义的标签（如 h1-h6）失当地示意文档构造
  • CSS 命名的语义化是指：为 HTML 标签增加有意义的 class，id 补充未表白的语义，如 Microformat 通过增加合乎规定的 class 形容信息

HTML 为什么须要构造语义化

  • 便于团队开发和保护。
  • 在没有 CSS 款式的状况下，能让页面出现清晰的构造。
  • 屏幕阅读器（如果访客有视障）会齐全依据你的标记来 “ 读 ” 你的网页。
  • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

它用于改良文档的自动化解决。主动解决产生的频率比你意识到的要高——搜索引擎中的每个网站排名都是从所有网站的主动解决中派生进去的。

<!-- 机器：这种构造看起来可能是导航元素？-->
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>

<!-- 机器: 这是导航元素！-->
<nav class="some-meaningless-class"><ul><li><a>...</nav>
  • 为什么要应用 HTML5 语义标记而不是 div？
  • 我应该为图标应用 <i> 标记而不是 <span>？
  • <section> 和 <div>之间有什么区别？

什么是语义和非语义元素？

  • 语义元素：对浏览器和开发人员都分明地形容了其含意。例如：<form>，<table>，<article>，<aside>，<details>，<figcaption>，<figure>，<footer>，<header>，<main>，<mark>，<nav>，<section>，<summary>，<time> 明确规定其含意。
  • 非语义元素：<div>，<span> 不蕴含任何含意。

简述 HTML5 一些语义的用法

  • <header> 用于蕴含无关页面某个局部的介绍性和导航信息。这能够包含章节题目、作者姓名、出版工夫和日期、目录或其余导航信息。
  • <article> 是用来寄存一个自成体系的作文，在逻辑上能够在页面之外独立地从新创立，而不会失去它的意义。集体博客文章或新闻故事就是很好的例子。
  • <section> 是一个灵便的容器，用于保留共享公共信息主题或目标的内容。
  • <footer> 用于保留应该呈现在内容节开端的信息，并蕴含无关该节的附加信息。作者姓名、版权信息和相干链接是此类内容的典型示例。
  • <main> 元素示意 body 文档的次要内容。次要内容区域由与文档的核心主题或应用程序的核心性能间接相干或扩大的内容组成。
  • HTML5 中的语义

Canvas 和 SVG

  • Canvas 和 SVG 都容许您在浏览器中创立图形，然而它们在基本上是不同的。

SVG

SVG 意为可缩放矢量图形（Scalable Vector Graphics）是一种基于 XML 的图像格式，用于为 web 定义基于向量的二维图形。与光栅图像（例如 .jpg、.gif、.png 等）不同，矢量图像能够在不损失图像品质的状况下进行任何水平的放大或放大。

<!-- SVG 是矢量和申明性的 -->
<svg viewBox="0 0 200 200">
    <circle cx="10" cy="10" r="10" />
</svg>

Canvas

Canvas 是一个 HTML5 元素，用于在网页上绘制图形。它是一个带有 “ 立刻模式 ” 图形应用程序编程接口（API）的位图，用于在其上绘图。<canvas> 元素只是图形的容器。为了绘制图形，你应该应用 js 画布在绘制门路、方框、圆、文本和增加图像时有几种策略。

  • HTML <canvas> 元素提供了一个空白绘图区域，可通过 JavaScript API（Canvas API 或 WebGL API）绘制图形及图形动画

    • 通过 Javascript 来绘制 2D 图形
    • 是逐像素进行渲染的
    • 其地位产生扭转，会从新进行绘制
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
</script>
  • Canvas 的一些预期用处包含构建图形、动画、游戏和图像合成。
  • Canvas 元素用于在网页上绘制图形，该元素标签弱小之处在于能够间接在 HTML 上进行图形操作

Canvas 和 SVG 的区别

Canvas SVG
基于栅格（由像素组成） 基于矢量（由形态组成），非常适合 UI/UX 动画
依赖分辨率 不依赖分辨率
不反对事件处理器 反对事件处理器
文本渲染能力差 良好的文字渲染性能
应用更多的对象或更小的曲面或两者都提供更好的性能 复杂度高会减慢渲染速度（任何适度应用 DOM 的利用都不快）
最适宜图像密集型的游戏，其中的许多对象会被频繁重绘 不适宜游戏利用
仅通过脚本批改 通过脚本和 CSS 批改
可能以 .png 或 .jpg 格局保留后果图像 多个图形元素，成为页面 DOM 树的一部分
可伸缩性差。不适宜以较高分辨率打印。可能产生像素化 更好的可扩展性。能够任何分辨率高质量打印。不会产生像素化

100 * 100 的 canvas 占多少内存？

  • 100*100 的 canvas 占多少内存

您如何为您的网站抉择 svg 或 canvas？

  • 如果你晓得你须要矢量艺术，则抉择 SVG。与 JPG 之类的栅格图形相比，矢量艺术在视觉上是清晰的，并且文件大小通常较小。
  • 像一个小的立体色彩图标，这显然是 SVG 的畛域。
  • 像互动游戏，那显然是 Canvas。

参考

  • Canvas API
  • SVG 图像
  • How to Choose Between Canvas and SVG
  • 何时应用 SVG 与何时应用 canvas

新标签

新语义和构造元素

  • canvas 标签定义图形，比方图表和其余图像。该标签基于 JavaScript 的绘图 API
<canvas width="300" height="300">
  道歉，您的浏览器不反对 canvas 元素
</canvas>
  • figure 代表一段独立的内容，常常与阐明（caption）配合应用，并且作为一个独立的援用单元
  • figcaption 是与其相关联的图片的阐明 / 题目，用于形容其父节点 figure 元素里的其余数据。
<style>
  figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
  }
  img {
    max-width: 220px;
    max-height: 150px;
  }
  figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
  }
</style>

<figure>
  <img src="1.jpg" alt="索隆">
  <figcaption>An elephant at sunset</figcaption>
</figure>
  • summary 利用了一个 details 元素的一个内容的摘要，题目或图例。

  • details 可创立一个挂件，仅在被切换成开展状态时，它才会显示内含的信息。

    • 标签用于形容文档或文档某个局部的细节。
    • 给他来点动画成果：如何对 Details 元素进行动画解决
<style>
  details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
  }
  summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
  }
  details[open] {padding: 0.5em;}
  details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
  }
</style>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
  • header、nav、main、footer、section、article
<section>
  <header></header>
  <main>
      <nav></nav>
  </main>
  <footer></footer>
</section>
<article></article>

  • map 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像

    • area 元素永远嵌套在 map 元素外部。area 元素可定义图像映射中的区域。
<div>
  <img
    src="../img/cs.jpg"
    width="500"
    height="500"
    alt="pic"
    usemap="#circusmap"
  />
  <map name="circusmap">
    <area shape="rect" coords="90,18,202,186" href="https://www.baidu.com/"/>
    <area shape="rect" coords="222,141,318, 256" href="https://www.baidu.com/" />
    <area shape="circle" coords="343,111,455, 267" href="https://www.baidu.com/" />
    <area shape="rect" coords="35,328,143,500" href="https://www.baidu.com/" />
  </map>
</div>
  • mark 突出显示 html 中的文本。在这个标签呈现之前，常应用应用 em 或 strong 赋予突出显示的内容一些语义。当初不举荐了。如果须要突出显示，请应用此标签
<p><mark>Lio</mark></p>

默认背景色彩 <mark> 是黄色

/* default style */
mark {
  background: yellow;
  color: black;
}

能够应用 CSS 自定义款式

mark {
  background: red;
  color: white;
}

  • meter 标签定义已知范畴或分数值内的标量测量。也被称为 gauge（尺度）。

    • <meter> 标签不利用于批示进度（在进度条中）。如果标记进度条，请应用 <progress> 标签。
<div>
  <meter value="4" min="0" max="10">4/10</meter><br />
  <meter value="0.6">60%</meter>
</div>
  • progress 标签标示工作的进度（过程）。
<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
  • time 定义日期或工夫。
<p>The concert starts at <time datetime="2020-06-01T20:00:00">20:00</time>.</p>
  • bdi 容许您设置一段文本，使其脱离其父元素的文本方向设置。
<p dir="ltr">Lorem ipsum <bdi>dolor</bdi> sit amet.</p>
  • dialog 标签定义一个对话框、确认框或窗口。
<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

新多媒体元素

  • source 定义视频源 <video> 和 <audio>
  • track 定义文本轨道

  • video 定义视频元素

    • HTML5 反对 mp4、webm 和 ogg 格局的视频。其中 Ogg 格局在 IE 中不受任何形式的反对
    • src 指定视频的起源。
    • 当不给 video 设置高度和宽度时，浏览器不晓得视频的大小，当视频加载时，页面将发生变化或闪动
<!-- 1. 用 src 属性定义 -->
<video
  src="video.mp4"
  controls
></video>

<!-- 2. 定义 source 标签 -->
<video controls>
    <source src="video.mp4" type="video/mp4">
      你的浏览器不反对 HTML5 viedo 标签。</video>
  • embed 将内部内容嵌入文档中的指定地位。
<embed
  src="https://juejin.cn/user/96412754251390"
  height="700"
  width="100%"
/>

<embed
  type="video/webm"
  src="/media/cc0-videos/flower.mp4"
  height="700"
  width="100%"
/>

  • audio 定义音频内容

    • HTML5 反对 MP3、Wav 和 Ogg 格局的音频。
<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
  您的浏览器不反对 HTML5 audio 标签。</audio>

新表单元素

  • datalist

    • <datalist> 标签定义选项列表。与 input 元素配合应用该元素，来定义 input 可能的值。
    • datalist 及其选项不会被显示进去，它仅仅是非法的输出值列表。
    • 应用 input 元素的 list 属性来绑定 datalist
<label for="course"> 抉择学习课程：</label>
<input list="target" name="course" id="course" />
<datalist id="target">
  <option value="HTML"></option>
  <option value="CSS"></option>
  <option value="JavaScript"></option>
  <option value="Node"></option>
  <option value="Vue"></option>
  <option value="React"></option>
  <option value="Webpack"></option>
</datalist>

  • keygen 该元素有助于生成密钥和通过表单提交。

    • keygen 必须在表单内应用。
    • keygen 曾经从 Web 规范中删除，请应用 JavaScript 生成密钥
    • MDN
  • output 标签定义不同类型的输入，比方脚本的输入。
<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
  0 <input type="range" id="a" value="50"> 100
  * <input type="number" id="b" value="1" /> =
  <output name="x" for="a b"></output>
</form>

HTML5 之前的一些元素

  • pre 标签可定义预格式化的文本。被突围在 <pre> 标签中的文本通常会保留空格和换行符。而文本也会出现为等宽字体。
  • strong 用于批示比四周文本更重要的文本，例如正告或谬误。从语义上讲，它的重要性。它显示为粗体
  • b 与 strong 十分类似，因为它也显示为粗体。然而，与它不同的是，它并没有真正传播出任何重要性，它更像是一种文体而非语义。
  • em 用于强调某个词。它显示为斜体
<strong>lorem</strong>
<b>lorem</b>
<em>lorem</em>

  • q 和 blockquote

    • q 引号
    • blockquote 块引号
<q>lorem</q>
<blockquote>lorem</blockquote>

  • bdo 能够更改 HTML 文本的方向

    • rtl：从右到左。ltr：从左到右。
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

  • 应用 abbr 标签缩写您的代码，当你传递一个题目时，它将创立一个工具提醒

    • <abbr> 不同浏览器的默认款式有些不同。在 Chrome 和 Firefox 中，它将带有下划线，并且在悬停时将带有 title 传递的值的工具提醒。如果您在 Safari 上关上此页面，则不会呈现下划线。此外，仅当您具备 title 属性时才显示下划线。
    • 因为跨浏览器的差别，倡议为 <abbr> 代码加上自定义款式。这样，您将在浏览器之间领有统一的外观

定义术语时，能够与 dfn 混合应用

<dfn>
  <abbr title="Today I learned">TIL</abbr> something awesome!    
</dfn>

批示的非缩写词并将其输入到页面上的括号中

abbr[title]::after {content: '(' attr(title) ')';
}

利用 hover 状态仅在点击时显示非缩写词

abbr[title]:hover::after {content: '(' attr(title) ')';
}

应用 abbr 标签来批示在程序键盘导航中是可聚焦的 tabindex="0"，而后在聚焦时触发咱们的非缩写内容。

<abbr title="Today I learned" tabindex="0">TIL</abbr>
abbr[title]:focus::after {content: '(' attr(title) ')';
}

也能够应用一些提醒工具，如 Bootstrap 的工具提醒组件。

  • kbd 和 code

    • kbd：示意用户从键盘、语音输入或任何其余文本输出设施输出的文本。
    • code：示意计算机代码的简短片段的文本。
    • 两者应用同样的 monospace 字体。然而在语义上它们是不同的。最好应用 kbd 代替 code
<kbd>Ctrl</kbd> + <kbd>C</kbd>
<code>Ctrl</code> + <code>C</code>
/* Default Style */
kbd {font-family: monospace;}

kbd, code {
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px;
}

  • s 和 del 删除线

    • s 当您尝试示意不再相干或不再精确的事物时，应用它。
    • del 当您要批示某些内容已从文档中删除时，应用它。
    • 它们都是删除线。然而，它们传播了对于内容的不同含意。
<s>Lorem ipsum dolor sit amet.</s>

<!-- 常应用于商品价格折扣 -->
<span><s>$1999</s></span>
<span style="color: red;">$99</span>

<del>Lorem ipsum dolor sit amet.</del>

<!-- 常应用于待办事项清单 -->
<ul>
  <li><del> 打卡 </del></li>
  <li> 喝杯咖啡 </li>
</ul>
  • ins
<p>
  Lorem ipsum
  <ins>dolor sit amet consectetur adipisicing elit.</ins> Perferendis, rem.
</p>
  • 20 HTML Elements for Better Text Semantics
  • 有哪些被低估未被宽泛应用的有用的 HTML 标签？

新属性

  • contenteditable

    • contenteditable 属性利用于任何 HTML 元素，它能够像 input 或 <textare> 那样工作编辑它们
    • 您能够为其增加事件监听器，监听其内容变动
    • contenteditable 属性值有 3 个不同的值：true、false、inherit
<div contenteditable="true">
  <h1> 元素可编辑 </h1>
</div>
<div contenteditable="false">
  <h1> 元素不可编辑 </h1>
</div>
<div contenteditable="inherit">
  <h1> 元素继承其父元素的可编辑状态 </h1>
</div>

  • input

    • required
    • autofocus 属性可能让 button，input 或 textarea 元素在页面加载实现时主动成为页面焦点
    • pattern 用正则表达式验证
<!-- required -->
<input type="text" id="username1" name="username" required>

<!-- autofocus -->
<input type="text" id="username2" name="username" >

<!-- pattern -->
<input
  type="password"
  name="password"
  placeholder="请输出明码"
  pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$"
  required
/>

  • HTML5 新的表单输出类型？

    • 新输出类型（type 13 种）：date、month、week、time、number、range、email、url、color、datatime-local、datetime、search、tel
    • search：用于搜寻域，比方站点搜寻或 Google 搜寻，域显示为惯例的文本域。
    • url：用于应该蕴含 URL 地址的输出域在提交表单时，会主动验证 url 域的值。
    • email：用于应该蕴含 e-mail 地址的输出域，在提交表单时，会主动验证 email 域的值。
    • datetime：选取工夫、日、月、年（UTC 工夫）
    • date：选取日、月、年
    • month：选取月、年
    • week：选取周和年
    • time：选取工夫（小时和分钟）
    • datetime-local：选取工夫、日、月、年（本地工夫）
    • number：用于应该蕴含数值的输出域，您还可能设定对所承受的数字的限定。
    • range：用于应该蕴含肯定范畴内数字值的输出域，类型显示为滑动条。
    • color：定义拾色器。
    • tel：定义用于输出电话号码的字段。
    • 其中 datetime 不在被举荐应用，转而应用 datatime-local
<!-- url -->
<input type="url" />

<!-- tel -->
<input type="tel" name="tel" />

<!-- search -->
<input type="search" />

<!-- email -->
<form action="/">
    <input type="email" />
    <input type="submit" value="提交">
</form>

<!-- date -->
<input type="date" value="2020-06-01" min="2020-01-01" max="2022-01-01" />

<!-- time -->
<input type="time" value="12:00" />

<!-- datetime -->
<input type="datetime" value="2020-09-12T23:00Z" />

<!-- week -->
<input type="week" />

<!-- month -->
<input type="month" value="2020-06-01" />

<!-- datetime-local -->
<input type="datetime-local" value="2020-09-06T23:00" />

<!-- number -->
<input type="number" name="number" min="2" max="10" value="3"  />

<!-- color -->
<input type="color" onchange="showColor(event)">

<!-- range -->
<input type="range" name="range" min="0" max="100" step="1" value="" />

  • hiden 属性规定对元素进行暗藏。

    • 能够对 hidden 属性进行设置，使用户在满足某些条件时能力看到某个元素（比方选中复选框，等等）。而后，可应用 JavaScript 来删除 hidden 属性，使该元素变得可见。
<div hidden>lorem</div>

  • Download

    • 锚点标记的默认设置是导航链接，它将转到您在 href 属性中指定的链接
    • 增加 download 属性时，它将变成一个下载链接。提醒您要下载的文件。下载的文件将具备与原始文件名雷同的名称。然而，您也能够通过将值传递给 download 属性来设置自定义文件名
    • download 属性仅实用于同源 URL。如果的 href 起源与网站的起源不同，那么它将无奈失常工作。换句话说，您只能下载属于该网站的文件。此属性遵循 同源策略 中的雷同规定概述。
<a href="../img/cs.jpg" download>
    应用原始文件名下载本地文件
</a>

<a href="../img/cs.jpg" download='logo'>
  应用自定义文件名下载 logo.png
</a>
  • 同源政策
  • 浏览器同源政策及其躲避办法

HTML5 的 form 如何敞开主动实现性能？

  • 将 input 设置为 autocomplete=off
<!-- 不应用 autocomplete -->
<input type="email" name="email" />

<!-- 应用 autocomplete -->
<form action="/post">
    <input type="email" name="email" autocomplete="off" />
    <input type="submit" value="提交" />
</form>

<script> 标记上的 defer 和 async 属性是什么？

  • <script>：当遇到脚本时，HTML 进行解析，脚本被获取并立刻执行。执行完结后，HTML 解析持续。
  • defer 和 async 的作用：都是让脚本的下载和执行不阻塞页面的渲染

区别：

  • defer 是推延执行，它是等到页面渲染结束，所有脚本下载实现，在 DOMContentLoaded 事件前依照脚本的在文档中的程序执行；
  • async 是立刻下载并执行，加载和渲染后续文档元素的过程将和 js 脚本的加载与执行并行进行（异步）
  1. 对于 defer，咱们还要记住的是它是依照加载程序执行脚本的
  2. 标记为 async 的脚本并不保障依照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不论你申明的程序如何，只有它加载完了就会立即执行。
  3. async 对于利用脚本的用途不大，因为它齐全不思考依赖（哪怕是最低级的程序执行），不过它对于那些能够不依赖任何脚本或不被任何脚本依赖的脚本来说却是十分适合的。
<script src="longTime.js"></script>
<script src="longTime.js" defer></script>
<script src="longTime.js" async></script>
  • tips：没有 src 属性的脚本（即不是内联脚本），async 和 defer 属性会被疏忽。

如何解决 HTML5 新标签的浏览器兼容问题？如何辨别 HTML 和 HTML5？

  • IE6-8 反对通过 document.createElement 办法产生的标签，利用这一个性让这些浏览器反对 HTML5 新标签
  • 应用 html5shiv 框架

  • HTML5：

    • DOCTYPE 申明
    • 新增的语义元素（<header>、<section> 等）
    • 新增性能元素

HTML5 的形成因素是什么？

  • 语义：提供更精确地形容内容。
  • 连贯：提供新的形式与服务器通信。
  • 离线和存储：容许网页在本地存储数据并无效地离线运行。
  • 多媒体：在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
  • 2D/3D 图形和特效：提供更多种演示选项。
  • 性能和集成：提供更快的访问速度和性能更好的计算机硬件。
  • 设施拜访：容许应用各种输出、输出设备。
  • 外观：能够开发丰盛的主题。
  • HTML5

Modernizr

  • Modernizr 是一个用来检测浏览器性能反对状况的 JavaScript 库。
  • 通过这个库咱们能够检测不同的浏览器对于 HTML5 个性的反对状况。
<article>
  <h1> 通过 Modernizr 检测 HTML5 个性 </h1>
</article>
<script
  crossorigin="anonymous"
  integrity="sha384-l7lIexAaQrMGAnOGdPikxQDjq8aY1MS3oqkKPS8FXlJ47UejXvEzmezjhEwHVkzm"
  src="https://lib.baomitu.com/modernizr/2010.07.06dev/modernizr.js"
></script>
<script>
  window.onload = function () {
    // 通过 Modernizr. 对浏览器 canvas 性能进行检测
    if (Modernizr.canvas) {console.log('本浏览器反对 Canvas API')
    } else {console.log('本浏览器不反对 Canvas API')
    }
  }
</script>

HTML5 存储

localStorage

localStorage 长久化的本地存储，除非是通过 js 删除，或者革除浏览器缓存，否则数据永远不会过期，敞开浏览器也不会失落。

  • HTML5 订正 localStorage 取代 globalStorage
  • 在同源的所有标签页和窗口之间共享数据
  • 数据仅保留在客户端，不与服务器进行通信，对数据的操作是同步的
  • 大小限度为 5M；但理论 JavaScript 中的字符串为 UTF-16，因而每个字符须要两个字节的内存。这意味着只管许多浏览器的限度为 5MB，但您只能存储 2.5M 个字符。
  • 浏览器的反对状况：IE7 及以下版本不反对 web storage。但在 IE5-7 中有个 userData，其实也是用于本地存储。

sessionStorage

sessionStorage 存储对象存储一个会话的数据，数据会在浏览器敞开后主动删除。

  • 跟 localStorage 一样，大小限度最多为 5M。
  • 同一个会话的页面能力拜访并且当会话完结后数据也会随之销毁，因而 sessionStorage 不是一种长久化的本地存储
  • 与 localStorage 领有对立的 API 接口；
  • localStorage 有本人独立的存储空间；
  • 对数据的操作是同步的。
  • localStorage 还能这么用
  • 给 localStorage 加上过期工夫
  • 不同类型浏览器存储的入门
  • 前端存储除了 localStorage 还有啥

cookie、sessionStorage 和 localStorage 的区别

  • 都是在客户端以键值对存储的存储机制，并且只能将值存储为字符串。
cookie localStorage sessionStorage
由谁初始化 客户端或服务器，服务器能够应用 Set-Cookie 申请头。 客户端 客户端
过期工夫 手动设置 永不过期 以后页面敞开时
在以后浏览器会话（browser sessions）中是否放弃不变 取决于是否设置了过期工夫 是 否
是否随着每个 HTTP 申请发送给服务器 是，Cookies 会通过 Cookie 申请头，主动发送给服务器 否 否
容量（每个域名） 4kb 5MB 5MB
拜访权限 任意窗口 任意窗口 以后页面窗口

什么是 WebSQL？

  • WebSQL 是应用 SQL 的客户端（浏览器）的数据库 API。
  • Web SQL 数据库 API 并不是 HTML5 标准的一部分，然而它是一个独立的标准，引入了一组应用 SQL 操作客户端数据库的 APIs。
  • 并非所有浏览器都反对 WebSQL。
  • 当初不举荐应用 WebSQL，而是应用 IndexedDB 代替它。

什么是 IndexedDB？

IndexedDB 是一种底层异步 API，浏览器内置的数据库，用于在客户端存储大量的结构化数据（也包含文件 / 二进制大型对象（blobs））。

  • 它将将数据存储为键值对。
  • 大多数浏览器都反对 IndexedDB。

IndexedDB API 功能强大，但对于简略的状况可能看起来太简单如果你更喜爱一个简略的 API，请尝试 localForage，dexie.js，PouchDB，IDB，IDB-KEYVAL，JsStore 或者 lovefield 之类的库，这些库使 IndexedDB 对开发者来说更加敌对。

  • IndexedDB
  • 浏览器数据库 IndexedDB 入门教程

为什么在 HTML5 中应用 IndexedDB 代替 WebSQL？

IndexedDB 像一个 NoSQL 数据库，而 WebSQL 像关系型数据库，应用 SQL 查问数据。W3C WebSQL 曾经不再反对这种技术。

HTML5 应用程序缓存（Application Cache）

依据最新的规范，该个性曾经从 Web 规范中删除，倡议应用 Service Workers 代替。这里找了一些材料，感兴趣理解一下。

  • 乏味的 HTML5：离线存储
  • Using the application cache
  • HTML5- 离线缓存（Application Cache）

什么是 Web Workers？

  • Web Workers 帮忙咱们在后盾运行 JavaScript 代码，而不会阻止应用程序。
  • Web Workers 在一个隔离的（新的）线程中运行，用于执行 JavaScript 代码，并且通过 postMessage 将后果回传到主线程。这样就不会阻塞主线程的运行。
  • Web Workers 通常用于大型工作。
  • Web Workers 须要一个独自的文件来存储咱们的 JavaScript 代码。
  • Web Workers 文件是异步下载的。
  • 所有最新的浏览器均反对 Web Worker。

客户端 js：

var myWebWorker = new Worker("task.js") // 创立 worker

// 监听 task.js worker 音讯
worker.addEventListener("message", function(event) {console.log("Worker said:", event.data)
}, false)

// 启动工作程序
worker.postMessage("From web worker file")

task.js（工作文件）文件：

// 监听客户端 JS 文件公布音讯
self.addEventListener("message", function(event) {
  // 解决后的数据发送到客户端监听 JS 文件
  self.postMessage(event.data)
}, false)
  • 应用 Web Worker 减速 JavaScript 应用程序

WebSocket

  • WebSocket 是 HTML5 开始提供的一种在单个 TCP 连贯上进行全双工通信的协定。
  • WebSocket 是一种在客户端与服务器之间放弃 TCP 长连贯的网络协议，能够随时进行信息替换。
  • Websocket 应用 ws 或 wss 的对立资源标志符，相似于 HTTPS，其中 wss 示意在 TLS 之上的 Websocket。
  • 默认状况下，Websocket 协定应用 80 端口；运行在 TLS 之上时，默认应用 443 端口。

webSocket 如何兼容低浏览器？

  • Adobe Flash Socket
  • ActiveX HTMLFile（IE）
  • 基于 multipart 编码发送 XHR
  • 基于长轮询的 XHR

websocket 与 socket 的区别

Socket 是传输管制层协定，WebSocket 是应用层协定。更多请看参考

参考

  • WebSocket 介绍和 Socket 的区别
  • WebSocket 教程
  • WebSocket
  • WebSocket 是什么原理？为什么能够实现长久连贯？

天文定位 API 如何在 HTML5 中工作？

  • HTML5 天文定位 API 容许用户在须要时向 web 应用程序提供用户的地位。出于隐衷起因，用户须要取得报告地位信息的权限。
  • JavaScript 能够捕捉你的纬度和经度，并能够发送到后端 Web 服务器，做一些奇异的地位感知的事件，比方找到本地企业或在地图上显示你的地位
  • 现在，大多数浏览器和挪动设施都反对天文定位 API
  • 天文定位 API 通过 navigator 获取对象。
if ("geolocation" in navigator) {/* geolocation is available */} else {/* geolocation IS NOT available */}
  • 应用 navigator.geolocation.getCurrentPosition() 办法获取用户的地位
  • Navigator.geolocation

页面可见性（Page Visibility）API 能够有哪些用处？

  • 页面可见性 API 提供了您能够察看的事件，刹车理解文档何时可见或暗藏，以及查看页面以后可见性状态的性能。
  • 应用选项卡式浏览，任何给定网页都有可能在后盾，因而对用户不可见。页面可见性 API 提供了您能够察看的事件，以便理解文档何时可见或暗藏，以及查看页面以后可见性状态的性能。

  • document.hidden 返回一个布尔值。

    • true 示意页面可见，false 则示意页面暗藏。
    • 不同页面之间来回切换，将触发 visibilitychange 事件。

  • document.visibilityState：示意页面所处的状态，以后页面的可见性，有四个取值

    • visible：页面彻底不可见。
    • hidden：页面至多一部分可见。
    • prerender：页面行将或正在渲染，处于不可见状态。
    • unloaded：已被废除，不在应用。
  • 只有 document.visibilityState 属性发生变化，就会触发 visibilitychange 事件
// 关上新的页面，来回切换标签页，察看页面题目的变动
document.addEventListener("visibilitychange", function() {if (document.visibilityState === 'hidden') {document.title = "爱我"} else {document.title = "恨我"}
})

  • 用处：

    • 动画，视频，音频都能够在页面显示时关上，在页面暗藏时敞开
    • 实现登陆后，无刷新主动同步其余页面的登录状态
// 视频暂停或播放
document.addEventListener('visibilitychange', function () {if (document.visibilityState === 'hidden') {video.pause()
  } else if (document.visibilityState === 'visible') {video.play()
  }
})
  • tips：页面可见性 API 对于节俭资源和进步性能特地有用，它使页面在文档不可见时防止执行不必要的工作。
  • Page Visibility（页面可见性）
  • Page Visibility API 教程

说一下 HTML5 Drag And Drop API

HTML 拖放（Drag and Drop）接口使应用程序可能在浏览器中应用拖放性能。例如，用户可应用鼠标抉择可拖拽（draggable）元素，将元素拖拽到可搁置（droppable）元素，并开释鼠标按钮以搁置这些元素。

Event Description
Drag 每次拖动对象时挪动鼠标时，它都会激发。事件主体是被拖放元素，在正在拖放被拖放元素时触发。
Dragstart 当用户开始拖动对象时触发。事件主体是被拖放元素，在开始拖放被拖放元素时触发。
Dragenter 当用户将鼠标光标移到指标元素上时，它将激发。事件主体是指标元素，在被拖放元素进入某元素时触发。
Dragover 当鼠标移到某个元素上时触发此事件。事件主体是指标元素，在被拖放在某元素内挪动时触发。
Dragleave 当鼠标来到元素时触发此事件。事件主体是指标元素，在被拖放元素移出指标元素是触发。
Drop 拖放操作完结时触发。事件主体是指标元素，在指标元素齐全承受被拖放元素时触发。
Dragend 当用户开释鼠标按钮以实现拖动操作时触发。事件主体是被拖放元素，在整个拖放操作完结时触发

draggable 是可枚举的属性批示该元素是否能够拖动，用于标识元素是否容许应用 HTML 拖放 API

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script>
  function allowDrop(e) {e.preventDefault()
  }

  function drag(e) {e.dataTransfer.setData("text", e.target.id)
  }

  function drop(ev) {e.preventDefault()
    var data = e.dataTransfer.getData("text")
    e.target.appendChild(document.getElementById(data))
  }
</script>
  • HTML Drag and Drop API
  • 确定从 Dragenter 和 Dragover 事件中拖动的内容
  • 触摸屏设施上的 HTML5 Drag and Drop API
  • HTML5 在窗口间 drag and drop

其余 HTML5 API

document.querySelector() 和 document.querySelectorAll()

  • querySelector()：依据 css 选择器返回第一个匹配的元素，如果没有匹配返回 null
  • querySelectorAll()：办法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。如果 querySelectorAll 没有匹配的内容返回的是一个空数组。

classList

  • 管制 CSS 的 增、删、切换、是否存在某个类
ele.classList.add("addClass")
ele.classList.remove("removeClass")
ele.classList.toggle("toggleClass")
ele.classList.contains("containsClass")

contextMenu

  • 它并不会替换原有的右键菜单，而是将你的自定义右键菜单增加到浏览器的右键菜单里
<div id="menu">Lorem ipsum dolor sit amet.</div>
<script>
  menu.addEventListener('contextmenu', function() {alert('点我！')
  })
</script>

你也能够阻止它，显示本人自定义的菜单

menu.addEventListener('contextmenu', function(e) {e.preventDefault()
  // ...
})
  • 如何为您的 Web 应用程序创立自定义上下文菜单

dataset

  • 通过 dataset 能够不便的获取或设置 data-* 自定义数据属性集
<div class="avatar" data-user="lisi" data-avatar-type="circle" data-animateSpeed>
  lorem
</div>
<script>
  const avatar = document.querySelector('.avatar')
  avatar.dataset.user === 'lisi' // true
  avatar.dataset.avatarType === 'circle' // true
  avatar.dataset.animateSpeed = 4000
    
  // 增加不存在的属性
  avatar.dataset.id = 'user'
  // console.log(avatar.dataset)
</script>
  • dataset

tabindex

  • tabindex 属性规定当应用 “tab” 键进行导航时元素的程序。

  • 在 HTML4.01 中，tabindex 属性可用于：<a>，<area>，<button>，<input>，<object>，<select> 和 <textarea>。

    • 在 HTML5 中，tabindex 属性可用于任何的 HTML 元素（它会验证任何 HTML 元素。但不肯定是有用）
<ul>
  <li tabindex="2">HTML</li>
  <li tabindex="1">CSS</li>
  <li tabindex="3">JAVASCRIPT</li>
</ul>

accessKey

  • accessKey 属性规定激活（使元素取得焦点）元素的快捷键。

  • 不同浏览器应用的快捷键办法不同：

    • IE，Chrome，Safari，Opera 15+：[ALT] + accesskey
    • Opera prior version 15：[SHIFT] [ESC] + accesskey
    • Firefox：[ALT] [SHIFT] + accesskey
<input accesskey="b" />
<a href="https://www.baidu.com/" accesskey="c"> 百度一下，你就晓得 </a>

FullScreen（全屏）

  • FullScreen API 是一个新的 JavaScript API
  • 全屏显示能够是任意元素
  • HTML5 API 存在兼容性问题（IE9+），即便高版本浏览器也有兼容性问题
  • 不同浏览器须要增加不同的前缀 webkit、moz、o、ms
const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen();

fullscreen(); // 默认全屏模式关上 "body"
fullscreen(false); // 退出全屏模式

:fullscreen CSS 伪元素代表一个元素，当浏览器是在全屏模式下的显示。

.elem:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

预加载

  • 预取 CSS 文件，预渲染整个页面或提前解析域
  • 浏览器有一个简略的内置形式来实现所有这些事件。有六个 <link rel> 标记批示浏览器预加载内容：
<link rel="prefetch" href="/index.css" as="style" />
<link rel="preload" href="/index.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/index.js" />

preload

  • 应用 preload 作为 rel 属性的属性值。还须要通过 href 和 as 属性指定须要被预加载资源的资源门路及其类型。
<link rel="preload" href="index.css" as="style">

  • 应用 as 来指定将要预加载的内容的类型，将使得浏览器可能：

    • 更准确地优化资源加载优先级。
    • 匹配将来的加载需要，在适当的状况下，反复利用同一资源。
    • 为资源利用正确的内容安全策略。
    • 为资源设置正确的 Accept 申请头。
    • MDN 残缺列表

prefetch

  • <link rel="prefetch"> 要求浏览器在后盾下载并缓存资源（例如 JS 或 CSS）。下载的优先级较低，因而不会烦扰更重要的资源。当您晓得在下一个页面上须要该资源，并且想要提前对其进行缓存时，这将很有帮忙。
  • 下载资源后，浏览器不执行任何操作。不执行 JS，不利用 CSS。它只是被缓存了，因而当其余需要时，它立刻可用。
  • 通过 link 标签的 rel 属性指定为 "prefetch"，在 href 属性里指定要加载资源的地址
<!-- 预加载整个页面 -->
<link rel="prefetch" href="https://juejin.cn/user/96412754251390" />

<!-- 预加载一个图片 -->
<link rel="prefetch" href="https://images.pexels.com/photos/918281/pexels-photo-918281.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />

preconnent

  • <link rel="preconnect"> 要求浏览器提前执行到域的连贯。
<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390">

dns-prefetch

  • DNS-prefetch（DNS 预获取）是尝试在申请资源之前解析域名。这可能是前面要加载的文件，也可能是用户尝试关上的链接指标。
<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390">

链接预加载的一些注意事项

  • 预加载能够跨域进行，当然，申请时 cookie 等信息也会被发送。
  • 预加载可能毁坏网站统计数据，而用户并没有理论拜访。
  • 浏览器兼容性不是很好

prerender

  • <link rel="prerender"> 要求浏览器加载 URL 并将其出现在不可见的标签中。当用户单击指向该 URL 的链接时，应立即出现该页面。当您的确确定用户接下来将拜访特定页面并且想要更快地出现它时，这将很有帮忙。
<link rel="prerender" href="https://juejin.cn/user/96412754251390" />
  • 当您确定大多数用户将导航到特定页面时，您心愿加快速度，那么你能够应用它

modulepreload

  • <link rel="modulepreload"> 通知浏览器尽快下载，缓存和编译 JS 模块脚本。
  • 应用它能够更快地加载您的 ES 模块应用程序。此标记仅实用于预加载 ES 模块——即您通过 import ... 或导入的模块 <script type="module">。
<link rel="modulepreload" href="/static/Header.js" />
  • Preload, prefetch and other <link> tags
  • dns-prefetch
  • 通过 rel=”preload” 进行内容预加载
  • 预取，预加载，预浏览

其余

对于 WEB 规范以及 W3C 的了解与意识问题

  • web 规范 简略来说能够分为 构造、体现和行为。

    • 构造次要是有 HTML 标签组成。或者艰深点说，在页面 body 外面咱们写入的标签都是为了页面的构造。
    • 体现即指 css 样式表，通过 css 能够是页面的构造标签更具美感。
    • 行为是指页面和用户具备肯定的交互，同时页面构造或者体现发生变化，次要是由 js 组成。
  • web 规范个别是将该三局部独立离开，使其更具备模块化。但个别产生行为时，就会有构造或者体现的变动，也使这三者的界线并不那么清晰。
  • 万维网联盟（W3C）是一个国内组织，它开发凋谢规范以确保 Web 的长期倒退。

  • W3C 对 web 规范提出了规范化的要求，也就是在理论编程中的一些代码标准：

    • web 标准规范要求，书写标签 必须闭合、标签小写、不乱嵌套，标签标准能够进步搜索引擎对页面的抓取效率，对 SEO 很有帮忙
    • 倡议应用外链 CSS 和 JS 脚本，从而达到构造、体现与行为的拆散，进步页面的渲染速度，进步用户的体验
    • 款式与标签的拆散，更正当的语义化标签，使内容能被更多的用户所拜访、内容能被更宽泛的设施所拜访、更少的代码和组件，从而升高保护老本、改版不便
    • 不须要变动页面内容，便可提供打印版本而不须要复制内容，进步网站易用性；
    • 遵循 w3c 制订的 web 规范，可能使用户浏览者更不便的浏览，使网页开发者之间更好的交换。

前端页面有哪三层形成，别离是什么？作用是什么？

  • 分成：结构层、表示层、行为层。
  • 结构层（structural layer）：由 HTML 或 XHTML 之类的标记语言负责创立。标签，也就是那些呈现在尖括号里的单词，对网页内容的语义含意做出了形容，但这些标签不蕴含任何对于如何显示无关内容的信息。例如，P 标签表白了这样一种语义：“这是一个文本段。”
  • 表示层（presentation layer）：由 CSS 负责创立。CSS 对“如何显示无关内容”的问题做出了答复。
  • 行为层（behaviorlayer）：负责答复“内容应该如何对事件做出反馈”这一问题。这是 JavaScript 语言和 DOM 主宰的畛域。

什么是渐进式渲染？

  • 渐进式渲染（Progressive rendering）：是用于进步网页性能（尤其是进步用户感知的加载速度），以尽快出现页面的技术。

  • 此类技术的示例：

    • 图片懒加载：页面上的图片不会一次性全副加载。当用户滚动页面到图片局部时，JavaScript 将加载并显示图像。
    • 确定显示内容的优先级（Hierarchical rendering）：为了尽快将页面出现给用户，页面只蕴含根本的最大量的 CSS、脚本和内容，而后能够应用提早加载脚本或监听 DOMContentLoaded/load 事件加载其余资源和内容。
    • 异步加载 HTML 片段：当页面通过后盾渲染时，把 HTML 拆分，通过异步申请，分块发送给浏览器。
  • 异步片段：应用 Marko 从新发现渐进式 HTML 渲染
  • 什么是渐进式渲染？

你能形容一下渐进加强和优雅降级之间的不同吗？

渐进加强（Progressive enhancement）

优雅降级（Graceful degradation）

什么是微格局？在前端构建中应该思考微格局吗？

  • 微格局（Microformats）是一种让机器可读的语义化 XHTML 词汇的汇合，是结构化数据的凋谢规范。是为非凡利用而制订的非凡格局。
  • 长处：将智能数据增加到网页上，让网站内容在搜索引擎后果界面能够显示额定的提醒。（如：豆瓣，有趣味自行 google）
  • Microformats

什么是字符编码？

  • 字符编码是一种将字节转换为字符的办法。为了正确地验证或显示 HTML 文档，程序必须抉择适当的字符编码。这是在标记中指定的：
<meta charset="UTF-8" />
  • UTF-8：Unicode 转换格局，以 8 位为单位，即以字节为单位。UTF8 中的字符长度能够从 1 到 4 个字节，从而使 UTF8 的宽度可变。

什么是 WHATWG？

WHATWG（Web 超文本利用技术工作组）是一个对通过规范和测试来倒退 Web 感兴趣的人们组成的社区。

  • WHATWG

什么是 WebP？

  • WebP 是一种像 JPG、PNG 这样的图像格式，它的大小比其余格局小大概 10-20%。
  • 由 Google 在 2010 年开发和推出。
  • 并非所有浏览器都反对 WebP。
  • 能够应用插件将其余格局转换为 WebP。
  • Web 的新图像格式

什么是 Web 组件？

Web Components 是一套不同的技术，容许您创立可重用的定制元素（它们的性能封装在您的代码之外）并且在您的 web 利用中应用它们。不须要须要任何内部库来工作。

特色：

  • Custom elements（自定义元素）
  • Shadow DOM（影子 DOM）
  • HTML templates（HTML 模板）
  • HTML Import 容许导入的内部 HTML 文档。
  • Web Components
  • Web 组件入门实例教程

Web 应用程序中的可拜访性？

维基百科：可拜访性是最罕用于形容设施或设施，帮忙残疾人，如“轮椅”。这能够扩大到盲文标识、轮椅坡道，音频信号在人行横道，轮廓人行道，网站设计，等等。

什么是 ARIA？

Accessible Rich Internet Applications (ARIA) 是可能让残障人士更加便当的拜访 Web 内容和应用 Web 利用（特地是那些由 JavaScript 开发的）的一套机制。

  • ARIA 通过 HTML 属性为屏幕阅读器提供了额定的信息。其不影响元素如何被出现在浏览器中。
  • 您能够通过遵循 ARIA 规范（例如：HTML 语义，alt 属性并以预期的形式应用 [role = button]）来使您的网站更易于拜访
<style>
  [role='note'] {
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid rebeccapurple;
    color: rebeccapurple;
    border-radius: 5px;
  }
</style>
<section>
  <div role="note">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illum cum
    totam.
  </div>
</section>
  • ARIA role 没有为大多数元素的默认语义增加任何内容
  • 在某些状况下，HTML 元素的语义能够通过 ARIA role，状态或属性来表白。常被称为元素的“默认隐式 ARIA 语义”
  • ARIA 容许开发人员以有意义的形式从新创造和扩大本机 HTML 个性。但它的个性与内置技术相比是软弱的。

一些冗余 ARIA 的示例：

<button role="button"> 按我 </button>
<a href="https://www.baidu.com" role="link"></a>
<input type="checkbox" role="checkbox" />
<input type="radio" role="radio" />

  • HTML5 应用默认的隐式语义定义了一组新的构造和分段元素，这些语义与 ARIA role 匹配（在某些状况下）：

    • 应用 role = button 时，思考应用 <button> 元素，或者其余各种原生 HTML 按钮类型。
    • 应用 role=link 时，思考改用 <a href> 元素。
    • 应用 role=heading 和 aria-level="1-6"，思考改用 <h1> 到 <h6> 元素。
    • 应用 role=list 和 role=listitem 时，思考改用 <ol> 或 <ul> 和 <li> 元素。
    • 应用 role=listbox 和 role=option，思考改用 <select> 和 <option> 元素。
    • 应用 role=checkbox 或 role=radio 时，思考改用 <input type="checkbox"> 或 <input type="radio"> 元素。
    • 应用 role=textbox，能够思考应用 <input type="text"> 或搜寻、电子邮件、url 或电话。
    • article、aside、footer、header、main、nav、section 等等…
    • 这意味着在实现后，浏览器将公开该元素的默认隐式语义，因而您不用这样做。
  • MDN：ARIA
  • 在 HTML 和 ARIA 大括号上（默认的隐式 ARIA 语义，他们不想让你晓得）
  • HTML5 – W3C 建议书 2014 年 10 月 28 日
  • 在 HTML 中应用 ARIA 的注意事项

什么是屏幕阅读器？

屏幕阅读器是提供辅助技术的软件程序，该技术能够使残障人士（例如，没有视力，声音或滑鼠能力的人）应用 Web 应用程序。

HTML 开发准则

  • 合乎 W3C：所有页面都须要应用 W3C 验证程序进行测试，以辨认 HTML 代码中可能存在的问题。
  • 清理正文：在将页面发送到生产环境之前，须要删除不必要的代码。
  • 谬误页面：每个网站都应该存在谬误 404 页面和 5xx。
  • HTML5 语义元素：适当应用了 HTML5 语义元素（<header>，<section>，<footer>，<main>…）

  • HTMLHint：我应用工具来帮忙我剖析我的 HTML 代码可能遇到的任何问题。

    • Dirty markup
    • webhint 是一个可自定义的整顿工具，可通过查看代码中的最佳做法和常见谬误来帮忙您进步网站的可拜访性，速度，跨浏览器兼容性以及其余性能。
  • 链接查看器：查看页面链接是否可用，请确认您没有任何 404 谬误。
  • Noopener：如果您正在应用带有 target ="_ blank" 的内部链接，则您的链接应具备 rel="noopener" 属性，以避免标签被挪用。如果您须要反对旧版本的 Firefox，请应用 rel="noopener noreferrer"
  • HTML 代码标准：开发统一、灵便和可继续的 HTML 和 CSS 的规范。
  • 应用杰出的开源工具 W3C tools 将代码施展最大潜能。

HTML 性能优化

  • 为页面测速制订款式和脚本

  • 压缩 HTML：将正文、空格和空行从生产文件中删除。

    • 删除所有不必要的空格、正文和中断即将缩小 HTML 的大小，放慢网站的页面加载工夫，并显著缩小用户的下载工夫。
    • 能够应用 Glup 等构建工具进行删除
    • HTML minifier | Minify Code
    • Experimenting with HTML minifier — Perfection Kills

  • 删除不必要的属性：像 type="text/javascript" or type="text/css" 这样的属性应该被移除。

    • 类型属性不是必须的，因为 HTML5 把 text/css 和 text/javascript 作为默认值。没用的代码应在网站或应用程序中删除，因为它们会使网页体积增大。
    • 确保所有和 <script> 标记都没有任何 type 属性。
    • The Script Tag | CSS-Tricks

  • 防止脚本阻塞加载。确保在应用 JavaScript 代码之前加载 CSS。

    • 在援用 JavaScript 之前援用 CSS 能够实现更好地并行下载，从而放慢浏览器的渲染速度。
    • 确保 <link> 和 <style> 始终位于 <script> 之前。
    • 合理安排 styles 和 scripts 来进步网页速度

  • 尽可能应用 async 和 defer

    • 确保 JavaScript 脚本兼容 async 和 defer，任何时候都要尽可能应用 async，特地是当你有较多的 script 标签时。
    • 这样在加载 JavaScript 的过程中页面就不会从新绘制，否则，浏览器在不具备这些个性的 script 标签后就不会重绘任何货色。
    • 打消渲染阻塞资源
  • DNS 预取：一次 DNS 查问工夫大略在 60-120ms 之间或者更长，提前解析网页中可能的网络连接域名
<link rel="dns-prefetch" href="http://example.com/">

  • 缩小内联脚本的数量

    • 内联脚本在页面加载过程中耗费很多资源，因为解析器认为内联脚本会扭转页面构造。
    • 通常，尽量少的应用内联脚本和缩小用 document.write() 来输入内容，在肯定状况下能够减速整体页面的载入。当初浏览器中个别应用古代的 W3C DOM 办法操作页面内容，优于应用 document.write() 的传统办法。

  • 放大和压缩图像

    • 较大的图像会导致页面须要更多的工夫来加载。在将图像增加到页面之前，请思考应用 Photoshop 等图像处理工具内置的压缩性能，或应用 Compress Jpeg 或 Tiny PNG 等专用工具对图像进行压缩

  • 最小化文件数量

    • 缩小一个页面援用的文件数量能够升高在下载一个页面的过程中须要的 HTTP 申请数量，从而缩小这些申请的收发工夫。
    • 依据其缓存设置，浏览器可能会为每个所援用的文件发送一个带 If-Modified-Since 的申请给网络服务器，以查问这些文件自上次加载后是否有被批改。查问援用文件上次批改工夫会破费太多工夫，导致网页首屏提早，这是因为在渲染页面之前浏览器必须确认每个文件的批改工夫。
  • 最小化 iframe 的数量：仅在没有任何其余技术可行性时才应用 iframe。
  • 防止节点深层级嵌套：深层级嵌套的节点在初始化构建时往往须要更多的内存占用，并且在遍历节点时也会更慢些，这与浏览器构建 DOM 文档的机制无关。浏览器会把整个 HTML 文档的构造存储为 DOM “ 树 ” 构造。当文档节点的嵌套档次越深，构建的 DOM 树档次也会越深。

  • 页面缓存：在不设置页面缓存的状况下，每次刷新页面会从新读取服务器文件。设置页面缓存，每次刷新可从本地读取，进步页面加载效率

    • 通过设置页面头的 expires 来定义页面过期工夫，将过期工夫定久一点就达到了 “ 永恒 ” 缓存。
<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />

  • 防止 Table 布局：table 比其它 HTML 标记占更多的字节（造成下载时间延迟，占用服务器更多流量资源）

    • 不应用 table 布局，而应使用 floats，positioning，flexbox 或 grids 来布局。
    • 当然，table 仍是不失为一种无效的展现表格数据的形式。为了帮忙浏览器更疾速的渲染你的页面，你应该防止嵌套 table。
    • 参考：为什么咱们不倡议用 Table 布局 和 最小化布局
  • 如何制作疾速加载的 HTML 页面 中还有其余方面的例子，如：高效地排列页面组件、正当的抉择 user-agent 等
  • 优先分配资源
  • 预加载要害资产以进步加载速度
  • 尽早建设网络连接以进步感知的页面速度
  • 预取资源以减速未来的导航
  • Best Practices for Speeding Up Your Web Site
  • 基于 JavaScript 和网络信息 API 的自适应服务

参考

  • W3C
  • 维基百科
  • MDN
  • HTML 规范
  • front-end-interview-handbook
  • Front-End-Performance-Checklist
  • Front-End-Checklist
  • HTML 备忘单

正文完
前端
发表至： 前端
2021-05-03
 0
关于前端:React服务端渲染Nextjs帮你迭代React项目快速加载
关于前端:jvslogic执行控制篇逻辑的三种执行控制方式
关于前端:基于-Vue-技术栈的微前端方案实践
关于前端:如何解决-WebGL-绘制地理信息的精度损失问题