一篇文章理解HTML常考知识

引言

在当今的Web开发世界中，HTML（HyperText Markup Language）作为构建万维网的基石，其重要性不言而喻。它不仅仅是定义网页内容的语言，更是赋予网页结构、语义和可访问性的关键。随着Web标准的不断演进，特别是HTML5的推出，开发者们获得了更强大、更语义化的工具集来创建丰富、高效且对机器友好的现代网站。

深入理解HTML的核心概念------从语义化标签的正确使用到元数据（meta）的精细控制，从新旧元素的特性差异到资源加载的微妙机制（如src与href的区别，defer与async的抉择）------是每一位前端开发者夯实基础、提升代码质量、优化用户体验和搜索引擎可见性的必经之路。

本文将系统性地梳理这些核心知识点，旨在帮助您构建一个清晰、坚实的HTML知识体系，为成为一名卓越的前端工程师打下牢固的基础。

HTML语义化标签

增加代码可读性，便于开发和维护，结构清晰
对机器友好，有利于SEO(搜索引擎优化)可以使网站在搜索引擎靠前，增加流量
方便解析，用于智能分析
在没有CSS样式下，也能呈现出很好的内容结构

常见的语义化标签

title 页面主体内容
header 页眉通常包含网站标志、主导航、全站链接以及搜索框
nav 标记导航，仅对文档中重要的链接群使用。
section ：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
main，帮助到搜索引擎以及搜索工程师找到网站的主要内容，本身并不承载特殊的功能和意义。
article：定义外部的内容，其中的内容独立于文档的其余部分。
aside: 定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
footer: 页脚，只有当父级是body时，才是整个页面的页脚。
address: 作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。

meta标签

Meta标签的作用

Meta标签用于描述文档的属性，例如字符集、页面描述、关键词、文档作者和视口设置等。它们不会显示在页面上，但会被浏览器和搜索引擎解析。
主要作用包括： 搜索引擎优化（SEO）、定义页面使用语言、自动刷新并指向新的页面、实现网页转换时的动态效果、控制页面缓冲、网页定级评价、控制网页显示的窗口等。

1.页面描述信息 (name属性)

arduino 复制代码

// keywords - 关键词
// 提供页面内容的关键词，用于搜索引擎优化
<meta name="keywords" content="HTML, CSS, JavaScript, Web开发">
// author - 作者
// 定义网页的作者
<meta name="author" content="张三">
// viewport - 视口设置
// 控制移动设备上的页面布局和缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.http标题信息(http-equiv属性)

HTML5新特性

1.新增特性

新的选择器 document.querySelector、document.querySelectorAll
媒体播放的 video 和 audio 标签
本地存储 localStorage 和 sessionStorage
语义化标签，例如 header，nav，footer，section，article 等标签。
地理位置 Geolocation
全双工通信协议 websocket
浏览器历史对象 history
多任务处理 webworker
拖拽相关API
跨窗口通信 PostMessage
canvas+SVG

2.src和href的区别

src ⽤于替换当前元素，href ⽤于在当前⽂档和引⽤资源之间确⽴联系

src

当浏览器解析到带有src属性的元素时，会暂停其他加载和渲染过程，先下载并处理该资源，然后再继续文档的解析。

xml 复制代码

<script src="app.js"></script> <img src="image.jpg" alt="示例图片"> <iframe src="https://example.com"></iframe>

href

当浏览器遇到href资源时，会并行下载资源而不会停止对当前文档的处理。这使得页面可以继续渲染而不被阻塞。

xml 复制代码

<link rel="stylesheet" href="styles.css"> <a href="https://example.com">访问示例网站</a> <link rel="icon" href="favicon.ico">

3.行内元素和块级元素

3.1 行内元素

和其他元素都在一行上；
高，行高及外边距和内边距部分可改变；
宽度只与内容有关；
行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在 ie6 中不对上下起作用，只能对左右起作用

xml 复制代码

<a >
<strong>
<b>
<em>
<del>
<span >
<img> 
<input> 
<select>

3.2 块级元素

总是在新行上开始，占据一整行；
高度，行高以及外边距和内边距都可控制；
宽带始终是与浏览器宽度一样，与内容无关；
它可以容纳内联元素和其他块元素。

css 复制代码

<h1>~<h6>
<p>
<div>
<ul>
<ol>
<li>
<div>
<dl>

3.3行内元素和块级元素转换

arduino 复制代码

//定义元素为块级元素
display：block 
//定义元素为行内元素
display : inline  
//定义元素为行
display：inline-block

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

是否占据一行，还是能多个处于一行中，行内是可以的；
是否可以设置宽高，行内是不可以的。
行内元素只可以容纳文本和其他行内元素，块级元素啥都可以容纳

4.iframe

iframe元素可以在一个网站里嵌入另一个网站内容

优点：- 实现一个窗口同时加载多个第三方域名下内容 - 增加代码复用性

缺点：- 搜索引擎无法识别 - 影响首屏加载时间 - 兼容性差

设置iframe访问另一个页面

json 复制代码

"Content-Security-Policy": "frame-ancestors 'self'"//限定iframe的嵌套

5.defer 和 async

注意，在上述过程中，脚本文件的下载和执行是和文档解析同步的，即它会阻塞文档的解析，若控制的不好，会影响用户体验，造成页面卡顿。因此我们可以在script中声明defer和async这两个属性。

defer: 用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。

async: HTML5新增属性，用于异步加载脚本文件，下载完毕立即解释执行代码。

区别

async表示异步加载，表后续文档的加载和渲染与JS脚本加载和执行并行进行,脚本文件一旦加载完成，会立即执行，我们无法预测每个脚本的下载和执行时间顺序，谁先下载好谁执行。
defer表示延迟加载，加载后续文档和JS脚本加载（仅加载不执行)并行进行，JS脚本的执行需要等待文档所有元素解析完之后，load和DOMContentLoaded事件之前执行，有顺序而言。