HTML

简介 #

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

• 标签列表 - MDN

语义化 #

• 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取
• 有利于不同设备的解析（屏幕阅读器，盲人阅读器等）
• 有利于构建清晰的机构，有利于团队的开发、维护

参考

• HTML 中的语义 - MDN
• HTML Semantic Elements - w3schools

meta #

提供有关HTML文档的元数据，元数据不会显示在页面上，但是能够被机器识别。
是空元素，必须有开始标签，并且不能有结束标签

属性主要有：name chartset http-equiv itemprop

content是配置name和http-equiv的值

<meta charset="UTF-8" />
<meta name="author" content="Zhang Di" />
<meta http-equiv="refresh" content="30" />

参考

• meta - MDN
• HTML meta Tag - w3schools

name #

• application-name
• author
• description
• generator
• keywords
• viewport
• robots
• referrer
• theme-color
• color-scheme
• creator
• publisher
• googlebot

参考

• meta name的属性值 - MDN

viewport #

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minmum-scale=1.0"
/>

参考

• viewport的content值 - MDN

http-equiv #

HTTP的header

• content-security-policy
• content-type
• x-dns-prefetch-control
• X-UA-Compatible
• refresh
• default-style

OG #

个人感觉就是类似于指定【微信分享】的标题、图片、地址

<meta property="og:title" content="HTML Document" />

参考

• 连 OG 都不知道还好意思说自己开发过 H5？ - 微信公众号文章
• The Open Graph protocol

块级、行内元素 #

块级元素（Block-level） #

• 独占一行
• width, height, margin, padding 都可以控制
• 元素的宽度如果不设置的话，默认为父元素的宽度

<h1>-<h6> <div> <p>
<footer> <header> <main> <nav> <aside>
<dd> <dl> <dt> <ul> <ol> <li> <hr>
<section> <article> <form> <table> <tfoot>
<address>  <blockquote> <canvas>
<fieldset> <figcaption> <figure>
<noscript> <pre> <video>

行内元素（Inline） #

• 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化
• 高宽无效，对外边距（margin）和内边距（padding）仅设置左右有效 上下无效
• 设置行高有效，等同于给父级元素设置行高
• 元素的宽度就是它包含的文字或图片的宽度，不可改变
• 行内元素中不能放块级元素，a 链接里面不能再放链接

<a> <img> <code> <label> <map>
<input> <button> <select> <textarea>
<span> <strong> <sub> <sup>
<em> <b> <i> <small> <br> <script>
<abbr> <acronym> <bdo> <big> <cite> <dfn>
<kbd> <output> <q> <samp>
<time> <tt> <var>

参考

• HTML Block and Inline Elements - w3schools

行内块级元素 #

button input textarea select在Chrome中默认就是display:inline-block

• 高度、行高、外边距以及内边距都可以控制
• 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙

可替换元素 #

替换元素是指，浏览器会根据元素的标签和属性，来决定元素的具体显示内容。
其内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）。

如img

• 根据img元素的src属性加载图片信息并显示，如果仅查看HTML代码，只能看到引用地址，而看不到图片的实际内容。
• 它的 display 属性的默认值是 inline，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。

主要：

1. 典型的：
   • iframe
   • video
   • embed
   • img
2. 特定情况下：
   • option
   • canvas
   • audio
   • object
3. input type=“image”
4. CSS的content属性

参考

• 可替换元素 - MDN
• CSS入门10-替换元素和非替换元素，块级元素和行内元素 - 腾讯云开发者社区文章

空元素 #

空元素（void element）是 HTML 中不能存在子节点（例如内嵌的元素或者文本节点）的元素。
空元素只有开始标签且不能指定结束标签。
HTML5 中的空元素可以使用自闭合的格式，例如 <br />、<img src="..." />。

常见的空元素有：

• <br>
• <hr>
• <meta>
• <link>
• <img>
• <input>
• <source>
• <area>
• <base>
• <col>
• <embed>
• <track>
• <wbr>

参考

• 空元素 - MDN

defer async #

script标签用于加载脚本与执行脚本，直接使用script脚本时，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。
比如现在大家习惯于在页面中引用各种第三方脚本，但如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。

图：defer-async

图：defer-async

defer #

• 异步加载
• 加载完不立即执行，DOM渲染完执行
• 多个，按顺序执行
• 阻塞DOMContentLoaded

async #

• 异步加载
• 加载完即执行
• 多个，无序，谁先加载完谁先执行
• 不阻塞DOMContentLoaded

参考

• script：脚本元素 - MDN
• script 标签中， async 和 defer 两个属性有什么用途和区别？ - 博客文章

src href #

src #

src 目的是把资源下载到页面中；会阻塞对文档的处理。

• script
• img
• iframe
• audio
• video

href #

href 是超文本引用，它是指向资源的位置，建立与目标文件的联系；不会阻塞对文档的处理。

• link
• a

link @import #

参考

• link和@import引入css 区别，不建议使用@import - 腾讯云开发者社区文章

BOM 和 DOM #

BOM #

Browser Object Model，浏览器对象模型。
BOM的核心是 window

Window对象主要属性：

• document
• navigator
• location
• history
• screen

DOM #

Document Object Model，文档对象模型。
以树状结构组织文档的内容（DOM Tree），其中树的根节点是document对象，window.document。

参考

• Window - MDN
• 文档对象模型（DOM） - MDN
• What is the difference between DOM and BOM ? - GeeksforGeeks

Node 和 Element #

Element 继承于 Node，具有 Node 的方法，同时又拓展了很多自己的特有方法。
Element 一定是 Node，但 Node 不一定是 Element。

Node #

• Document
• Element
• Text
• Comment：注释
• …

属性：

• childNodes：返回 NodeList
• firstChild：返回 Node
• parentNode：返回 Node
• parentElement：返回 Element

Element #

属性：

• children：HTMLCollection集合，它会返回所有HTML元素节点

参考

• Node - MDN
• NodeList - MDN
• Element - MDN
• HTMLElement - MDN
• HTMLCollection - MDN

图片 #

格式 #

• GIF——简单图像和动画的不错选择。
• JPEG——有损压缩静态图像的不错选择（目前最流行的格式）。
• PNG——对于无损压缩静态图像而言是不错的选择（质量略好于 JPEG）。
• SVG——矢量图像格式。用于必须以不同尺寸准确描绘的图像。
• WebP（网络图片格式）——图像和动画的绝佳选择。
• APNG——无损动画序列的不错选择（GIF 性能较差）。
• AVIF——静态图像或动画的不错选择，其性能较好。

参考

• 图像文件类型与格式指南 - MDN

渐进式 #

响应式 #

• 图片响应式

渐进增强和优雅降级？ #

渐进增强（progressive enhancement）
主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。

优雅降级（graceful degradation）
一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

参考

• 渐进增强 - MDN
• 优雅降级 - MDN

SEO #

Search Engine Optimization，搜索引擎优化。
搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。

方法：

1. SSR/SSG
2. TDK（title，description，keywords）
3. 语义化标签
4. robots.txt 文件
5. sitemap
6. 使用https
7. 内链和外链

参考

• sitemap - Google文档
• robots.txt - Google文档
• 使用 noindex 阻止搜索引擎编入索引 - Google文档
• 一文带你弄懂 前端SEO优化 - 掘金

dpr #

devicePixelRatio，设备像素比
dpr = 设备像素 / CSS像素，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。

CSS像素 = 逻辑像素 = 设备独立像素
设备像素 = 物理像素

放大缩小会改变 dpr：

• 缩小：一个设备像素覆盖了多个CSS像素，dpr < 1
• 放大：一个CSS像素覆盖了多个设备像素，dpr > 1

参考

• 图文并茂带你弄懂物理分辨率、分辨率、物理像素、逻辑像素、dpr、ppi - 腾讯云开发者社区文章

Canvas 和 SVG ⌛️ #

离线缓存 ⌛️ #

• application cache
• service worker

无障碍适配 ⌛️ #

• 面试官：来说一说你是如何实现H5无障碍适配的？ - 微信公众号文章