跳到主要内容

HTML

关于 HTML 的一些总结, 持续更新中……

HTML 常见理解​

1、语义化标签​

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

常见的语义化标签：

<header></header>
<!-- 头部 -->

<nav></nav>
<!-- 导航栏 -->

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

<main></main>
<!-- 主要区域 -->

<article></article>
<!-- 主要内容 -->

<aside></aside>
<!-- 侧边栏 -->

<footer></footer>
<!-- 底部 -->

语义化的优点如下：

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

2、src 和 href 的区别​

src 和 href 都是用来引用外部的资源，它们的区别如下：

  • src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。
  • href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在 a、link 等标签上。

3、script 标签中defer 和 async 的区别​

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

defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

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

注 从改变脚本处理方式上看，async 属性与 defer 类似。当然，它们两者也都只适用于外部脚本，都会告诉浏览器立即开始下载。不过，与 defer 不同的是，标记为 async 的脚本并不保证能按照它们出现的次序执行。给脚本添加 async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。执行时其实也是异步的，谁先下载完，谁先执行，所以执行阶段的顺序会很随机，所以 async 属性的 script 中最好不要在这个阶段操作 DOM 元素。

4、常见的 meta 标签​

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了 HTTP 标准固定了一些 name 作为大家使用的共识，开发者还可以自定义 name 。

常用的 meta 标签：

<!-- charset，用来描述HTML文档的编码类型： -->
<meta charset="UTF-8" />

<!-- keywords，页面关键词： -->
<meta name="keywords" content="关键词" />

<!-- description，页面描述： -->
<meta name="description" content="页面描述内容" />

<!-- refresh，页面重定向和刷新： -->
<meta http-equiv="refresh" content="0;url=" />

<!-- viewport，适配移动端，可以控制视口的大小和比例： -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<!-- 搜索引擎索引方式： -->
<meta name="robots" content="index,follow" />

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

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

这里有一个衍生的问题： 怎么处理移动端 1px 渲染成 2px 问题 局部处理：

  • mate 标签中的 viewport 属性 initial-scale 设置为 1，
  • rem 按照设计稿标准走，外加利用 initial-scaletransfrome 的设置为 1scale(0.5) 缩小一倍即可；

全局处理

  • mate 标签中的 viewport 属性 initial-scale 设置为 1
  • 使用 rem 按照设计稿开发

其中，搜索 robots 的 content 参数有以下几种：

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

5、HTML5 标签​

5.1、语义化标签​

详见 1

5.2、媒体标签​

<!-- audio: 音频标签，属性分别为：controls 控制面板, autoplay 自动播放 loop=‘true’ 循环播放 -->
<audio src='' controls autoplay loop='true'></audio>

<!--
  video: 视频标签，属性分别为：
   - poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
   - controls 控制面板
   - width height
-->
<video src='' poster='imgs/aa.jpg' controls></video>

<!--
  source标签
  因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。
-->
<video>
 	<source src='aa.flv' type='video/flv'></source>
 	<source src='aa.mp4' type='video/mp4'></source>
</video>

5.3、表单​

表单类型：

  • email ：能够验证当前输入的邮箱地址是否合法
  • url ： 验证 URL
  • number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max 属性可以设置为最大值，min 可以设置为最小值，value 为默认值。
  • search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
  • range ： 可以提供给一个范围，其中可以设置 max 和 min 以及 value，其中 value 属性可以设置为默认值
  • color ： 提供了一个颜色拾取器
  • time ： 时分秒
  • data ： 日期选择年月日
  • datatime ： 时间和日期(目前只有 Safari 支持)
  • datatime-local ：日期时间控件
  • week ：周控件
  • month：月控件

表单属性：

  • placeholder ：提示信息
  • autofocus ：自动获取焦点
  • autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
    • 表单必须提交过
    • 必须有 name 属性。
  • required：要求输入框不能为空，必须有值才能够提交。
  • pattern=" " 里面写入想要的正则模式，例如手机号 patte="^(+86)?\d10$"
  • multiple：可以选择多个文件或者多个邮箱
  • form=" form 表单的 ID"

表单事件：

  • oninput 每当 input 里的输入框内容发生变化都会触发此事件。
  • oninvalid 当验证不通过时触发此事件

5.4、进度条、度量器​

  • progress 标签：用来表示任务的进度（IE、Safari 不支持），max 用来表示任务的进度，value 表示已完成多少

  • meter 属性：用来显示剩余容量或剩余库存（IE、Safari 不支持）

    • high/low：规定被视作高/低的范围
    • max/min：规定最大/小值
    • value：规定当前度量值

设置规则：min < low < high < max

5.5、其他​

<!-- 拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放： -->
<img draggable="true" />

<!--  
  画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。
  画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
-->
<canvas id="myCanvas" width="200" height="100"></canvas>
  • SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
  • 地理定位：Geolocation（地理定位）用于定位用户的位置。

6、行内元素有哪些？块级元素有哪些？ 空(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>。

7、离线缓存（历史方案与现代替代）​

注意

AppCache 和 window.applicationCache 已被现代浏览器废弃，这部分只作为历史方案了解。

过去 HTML5 曾提供基于 manifest 的离线缓存机制，但它存在缓存更新不可控、调试困难、资源粒度粗等问题，如今已经不再推荐。

前端项目里的现代替代方案通常是：

  • Service Worker：拦截请求并实现离线能力、资源缓存和预缓存
  • Cache Storage：按资源维度管理缓存，而不是依赖旧的清单文件
  • IndexedDB：在需要离线数据同步、草稿保存、本地查询时存储结构化数据

如果你在项目里要做“弱网可用”或“离线优先”，更实用的思路是：

  1. 静态资源通过 Service Worker + Cache Storage 做预缓存和版本更新
  2. 业务数据通过 IndexedDB 或本地存储做兜底
  3. 明确“哪些页面可离线、哪些能力必须联网”，不要把所有请求都缓存掉

8、iframe 优点和缺点​

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

优点：

  • 用来加载速度较慢的内容（如广告）
  • 可以使脚本可以并行下载
  • 可以实现跨子域通信

缺点：

  • iframe 会阻塞主页面的 onload 事件
  • 无法被一些搜索引擎索识别
  • 会产生很多页面，不容易管理

9、Doctype 和 <!Doctype html> 的作用，严格模式与混杂模式的区分及意义​

文档声明的作用： 文档声明是为了告诉浏览器，当前 HTML 文档使用什么版本的 HTML 来写的，这样浏览器才能按照声明的版本来正确的解析。

作用： <!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5 标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。

严格模式与混杂模式的区分：

  • 严格模式： 又称为标准模式，指浏览器按照 W3C 标准解析代码；
  • 混杂模式： 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；

区分： 网页中的 DTD，直接影响到使用的是严格模式还是浏览模式，可以说 DTD 的使用与这两种方式的区别息息相关。

  • 如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；
  • 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
  • DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD 不存在或者格式不正确——混杂模式）；
  • HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的 法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

总之，严格模式让各个浏览器统一执行一套规范兼容模式保证了旧网站的正常运行。

10、渐进增强和优雅降级之间的区别​

（1）渐进增强（progressive enhancement）： 主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。 （2）优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

两者区别：

  • 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
  • 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。