跳到主要内容

HTML 知识点总结

渐进增强与优雅降级​

渐进增强 并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能（避免网页打不开、排版错误等），并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。

优雅降级 也是一种设计思想，为了保证在高版本浏览器中提供最好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。

这两种思想得区别在于：

  1. 渐进增强是向上兼容，优雅降级是向下兼容；
  2. 渐进增强是从简单到复杂，优雅降级是从复杂到简单；
  3. 渐进增强关注的是内容（保证核心内容），优雅降级关注的是浏览体验（为了兼容低版本浏览器）

DOCTYPE​

<!DOCTYPE html>
<html>
    <!-- ... -->
</html>

作用​

DTD（Document Type Definition，文档类型定义）是一系列的语法规则，用来定义 XML 或 (X)HTML 的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。
DOCTYPE 是用来声明文档类型和 DTD 规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。

HTML5 的文档类型声明：

<!DOCTYPE html>

HTML 4.01 Strict（HTML 4.01严格模式）的DTD包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（如font），它的文档类型声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

标准模式与怪异模式​

怪异模式（Quirks Mode）用于模拟就浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的 DOCTYPE 都会触发怪异模式。

浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。DOCTYPE 可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。

怪异模式与标准模式的主要区别：

  1. 怪异模式的宽度和高度会包含 padding 和 border。标准模式不包含，标准模式下可以通过设置 box-sizing: border-box 将标准盒模型转化成怪异模式下的盒模型。

  2. 怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。

  3. 怪异模式下，在表格中的字体样式（如 font-size ）不会继承。

  4. 怪异模式下颜色值必须使用十六进制表记法。

语义化​

HTML5 中的语义化就是让元素、属性或属性值有含义，更准确地标记特定类型的内容。对元素语义化的目的是为了让元素的语义和呈现分离，元素只负责文档内容的结构与含义，而 CSS 样式控制内容的呈现，像 <b> 元素，没有语义但却能将字体变粗，这类元素违背了语义化的目的，将会被废弃。

优点​

  • 使得 HTML 文档结构清晰、布局合理、主体突出、可读性更强。
  • 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
  • 方便其他设备解析，如盲人阅读器根据语义渲染网页。
  • 有利于开发和维护，语义化更具可读性，代码更好维护，与 CSS3 关系更和谐。

语义化标签​

  • <header> 定义文档的页眉区域,应作为介绍内容或者导航链接栏的容器；
  • footer 内容的页脚，通常包含该章节作者、版权数据或者与文档相关的链接等信息；
  • article 文档、页面、应用或网站中的独立结构，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目；
  • nav 描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表；
  • section 表示文档中的一个区域（或节），比如，内容中的一个专题组；
  • main 定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（搜索框作为文档的主要内容）；
  • aside 表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

HTML 布尔属性​

属性描述
hidden该元素是否隐藏
readonly控件的值不可编辑
required控件的值是必填的
multiple是否允许选取多个值
checked该控件是否被选中
disabled是否禁用该控件
autofocus是否自动聚焦输入框
selectedoption 元素初始是否被选中；

这些值属性的值只要设置上就会认为是 true，例如可以这么写：disabled='disabled'，或者 checked='' 都会认为是 true，也就是说只要有这个字段，无论它是什么值，都会认为你设置了该属性，并且值是 true。要想移除这个属性，可以使用 removeAttribute 方法；或者获取到这个元素的 DOM，将属性设置成 elem.checked = false。

href 和 src 的不同​

两者的功能不同。href（hypertext reference）能够建立一条通道，将当前文档和定义的资源连接起来。src（source）是将定义的资源嵌入到当前文档中。

defer 和 async 的区别​

两者都是异步去加载外部JS文件，不会阻塞 DOM 解析；

  • async 是在外部 JS 加载完成后，浏览器空闲时，Load 事件触发前执行，标记为 async 的脚本并不保证按照指定他们的先后顺序执行，该属性对于内联脚本无作用 (即没有「src」属性的脚本）。defer 是在 JS 加载完成后，整个文档解析完成后，触发 DOMContentLoaded 事件前执行，如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。