HTML基础全景图
HTML是前端基础，不知道你学完之后，是否和我一样需要一张全景视图?
如果拥有这么一张视图，那么复习和查询知识点就方便多了。
# 原则
HTML的使用原则
- 语义与呈现分离。也就是HTML与CSS分离
- 不要误用。典型的就是万物皆可table，这是不对的
- 具体为佳，一以贯之。标签太多，语义不明？你喜欢div布局，没关系，一以贯之
# 全局属性
全局属性是所有HTML元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用。
参考MDN 全局属性 (opens new window)
accesskey：提供了为当前元素生成键盘快捷键的提示class：控制用户的文本输入是否和如何自动大写class：一个以空格分隔的元素的类名（classes ）列表contenteditable：一个枚举属性（enumerated attribute），表示元素是否可被用户编辑contextmenu：<menu>的id ，作为该元素的上下文菜单data-*：自定义数据属性dir：一个指示元素中文本方向的枚举属性draggable：是否可以拖动dropzone：在元素上删除哪些类型的内容hidden：隐藏id：定义唯一标识符land：帮助定义元素的语言style：含要应用于元素的CSS样式声明tabindex：顺序键盘导航title：表示与其所属元素相关信息的文本
# 基础标签
一段基础的HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟</title>
</head>
<body>
<p>我的第一个段落。</p>
</body>
</html>
逐个分析其中的元素：
!DOCTYPE：涉及到了SGML (opens new window)的古老历史，HTML可以说是SGML的一种格式。HTML5中简化为了目前我们看到的头部html：根标签head：包含元数据title：标题base：为页面上的所有的相对链接规定默认 URL 或默认目标meta： 参考MDN meta元素 (opens new window)name：参考MDN meta name (opens new window)author：文档作者的名字description：一段简短而精确的、对页面内容的描述generator：生成此页面的软件的标识符keywords：与页面内容相关的关键词（搜索引擎相关）referrer：控制由当前文档发出的请求的 HTTP Referer 请求头theme-color：表示当前页面的建议颜色color-scheme：指定与当前文档兼容的一种或多种配色方案viewport：为viewport（视口）的初始大小提供指示（hint）。目前仅用于移动设备。
一个常见的示例：width=device-width，表示宽度等于设备宽度 initial-scale，表示初始缩放比例 此外还有height、maximum-scale、minimum-scale等值<meta name="viewport" content="width=device-width, initial-scale=1.0"/>creator：当前文档的创建者googlebot：robots 的替代名称，只被 Googlebot（Google 的网页爬虫/索引搜寻器）使用publisher：当前文档的发布者/出版者robots：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则
charset：这个属性声明了文档的字符编码。比如utf-8content：此属性包含http-equiv 或name 属性的值，具体取决于所使用的值http-equiv：定义了一个编译指示指令content-security-policy：它允许页面作者定义当前页的内容策略。关于内容策略CSP，参考：CSP (opens new window)content-type：如果使用这个属性，其值必须是"text/html; charset=utf-8"default-style：设置默认样式x-ua-compatible：这是一个旧标记，不推荐使用。主要是IE浏览器渲染时用到refresh：指定重新载入页面的时间间隔 (秒)
body：包含了可见的页面内容style：包含文档的样式信息或者文档的部分内容。参考MDN style元素 (opens new window)type：以 MIME 类型 (opens new window) 定义样式语言。默认为text/cssmedia：规定该样式表适用于哪个媒体。参考 媒体查询 (opens new window)title：标题
link：外部资源链接元素。参考MDN link元素 (opens new window)href：指定被链接资源的URLhreflang：指明了被链接资源的语言rel：指定 链接类型 (opens new window) 值。下面对主要的值进行说明icon：重点关注。一般和type、sizes配合使用。在之前，还会看到shortcut，应该被弃用
<link rel="icon" href="/static/images/favicon.ico" type="image/x-icon" sizes="16x16" />stylesheet：重点关注。样式表，如果没有制定type，默认是text/cssprefetch：建议浏览器提前获取链接的资源。页面全部加载完成后，空闲时间下载或预取preload：告诉浏览器下载资源，因为在当前导航期间稍后将需要该资源。在页面生命周期的早期开始加载，尽早但不要阻塞页面呈现
as：如果rel="preload" 或者 rel="prefetch" 时才能使用。规定了加载内容的类型，比如audio image，这样会先预加载音频资源，再预取图片资源importance：如果rel="preload" 或者 rel="prefetch" 时才能使用。规定资源优先级，可选值：auto、high、lowtype：内容的MIME类型。常用值：text/csscrossorigin：是否必须使用 CORSdisabled：仅对于rel="stylesheet"可用，表示禁止应用样式表
script：嵌入或引用可执行脚本。参考MDN script元素 (opens new window)defer：有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成async：对于普通脚本，会并行请求；对于模块（type="module"）脚本，脚本和依赖都会在延缓队列中并发请求src：定义引用外部脚本的 URIintegrity：子资源完整性，常用于CDN安全设置nomodule：用于不支持ES2015 Modules的旧浏览器中脚本回退。一个示例：
新浏览器会解析第一行，旧浏览器会解析第二行<script type="module" src="app.js"></script> <script nomodule src="classic-app-bundle.js"></script>type：可以是MIME类型，支持的 MIME 类型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript；可以是module，会被当成JavaScript模块
noscript：如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML noscript 元素中定义脚本未被执行时的替代内容
# 行内元素和块级元素
HTML元素众多，分类的方法也是五花八门。
从排版的角度，对元素进行分类，大致可分为两种：行内元素和块级元素。
在HTML 5规范关于排版方面，并没有行内和块级的概念。这俩名词最高出现在HTML 4.01标准，HTML 5中用了更复杂的 内容类别 (opens new window) 来替代，有兴趣可以去学习一下。
由于行内、块级概念本身的简洁性，从它们出发有利于我们更好的理解HTML排版。
简单来说，它们的主要区别是：
- 块级元素：独占一行，对宽高的属性值生效，有盒子模型。不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽
- 行内元素：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高
我们来看一个实际的例子：
会看到元素在浏览器中的排版流程大概是这样的：
- 对行的排版，一般是先行内布局，再确定行的位置，根据行位置计算出行内盒和文字的排版位置
- 对块的排版，它总是单独占据一行，计算出交叉轴方向的高度即可
排版角度分类，每个类别元素太多了，下面从功能性进行分类，一一介绍。
由于元素众多，并不会对每个元素的用法详细讲解，只会对其中重点提点一下，具体详情参阅：MDN HTML元素参考 (opens new window)
# 标记文字标签
此章节的元素都为行内元素
a：超链接。主要用到href和target属性（常用值：_blank,_self）b：特别强调。渲染为字体加粗strong：表示重要。渲染为字体加粗，和b表现形式一致small：文本的字体变小一号u：非文本注释。渲染时有一条实体下划线em：强调。渲染为斜体i：区别于不同文本，例如表示科学术语、外文词语。渲染字体为斜体，和em表现形式一样s：表示不精确、不正确的内容。渲染时有一条删除线del：表示删除的文本。渲染时有一条删除线，和s表现形式一样ins：表示插入文本。渲染时有一条下划线sub：下标。渲染时字体变小，位置变低sup：上标。渲染时字体变小，位置变高br：生成一个换行符号wbr：在合适的位置换行code：一段代码。渲染时字体变细var：表示变量。渲染时字体为斜体samp：表示程序输出。渲染时字体为monotypeabbr：表示缩写。无特殊表现span：表示短语，无任何语义。无特殊表现dfn：表示术语。渲染时字体为斜体q：表示短的引用文本。渲染时前后会添加双引号cite：表示作品的引用。渲染时字体为斜体ruby/rt/rp：东亚语言中的注音符号。渲染效果如下：
mark：突出显示的文本。渲染时会高亮（背景颜色为mark，字体颜色为marktext）time：表示时间和日期的标签
标记文字元素中最常用的就是a和span了，你会发现其他元素大多都是具有语义的span，在忽略CSS样式表的浏览器或者是搜索引擎爬虫中，使用语义元素是有利于页面信息展示的。
当你学习了CSS之后，你会发现所有的标记文字语义元素其实就是自带样式的span，比如sub的默认样式表：
sub {
vertical-align: sub;
font-size: smaller;
}
# 组织内容标签
此章节的元素都为块级元素
# 1、内容分区
无特殊说明，元素都没有默认渲染样式
main：呈现应用主题部分nav：提供导航链接section：通用独立章节header：介绍性内容footer：页脚article：独立结构aside：与其余页面几乎无关的内容，比如侧边栏或标注栏address：个人或组织的联系信息h1-h6：6个不同级别的标题，H1是一级标题，渲染时字体加粗，字号变大；h2之后，渲染效果逐级递减
# 2、文本内容
div：通用的内容容器ul/ol,li：ol是有序列表，ul是无序列表。li是ol/ul的项目，他们的默认渲染效果：
dl,dt,dd：一个术语定义和描述的列表，三个元素要配合使用。效果如下：
figure,figcaption：两者配合使用，作为一个独立的引用单元blockquote：块级引用元素p：段落pre：预定义格式文本。通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来
# 3、图片多媒体
img：图片audio,source：音频。source用来描述资源，参考：MDN Audio元素 (opens new window)video,source：视频。source用来描述资源，参考：MDN Video元素 (opens new window)map,area：定义图片的点击热区。可用来实现点击不同区域，触发不同逻辑。演示效果：
# 4、内嵌内容
iframe：将另一个HTML文档嵌入到当前页面object、embed：嵌入对象，可以嵌入图片、视频、html、flash等。不推荐使用，请使用iframe、img、video等语义元素picture,source：为不同的显示/设备场景提供不同的图像展示svg：嵌入一个独立的svg片段，支持的内容非常丰富。参考：MDN Svg属性列表 (opens new window)math：MathML的根元素，MathML用来描述数学公式、符号。参考：MDN MathML (opens new window)
# 5、交互元素&Web组件
dialog：对话框details,summary：一个挂件，可以切换成展开状态template,slot：Web Components使用的元素，允许定制元素并在web应用中使用。参考：MDN Web Components (opens new window)
# 表格
来看一个完整的示例：
从示例上我们可以看到，一个表格由如下部分组成：
table：表格根元素caption：定义表格标题colgroup,col：定义列样式thead,tr,th：定义表格列头tbody,tr,td：定义表格内容
thead和tbody通常可以省略，极简的表格只需要table、tr、td即可完整展示
# 表单
form：表单根元素，常用属性有：auction：处理表单提交的 URLmethod：请求方式，可选值：get、post、dialog（表单在dialog元素中，提交时关闭对话框）enctype：method为post时，提交给服务器的MIME类型。可选值：application/x-www-form-urlencoded：默认值multipart/form-data：文件上传用到的值text/plain：用于调试
novalidate：不需要验证表单
fieldset、legend：对表单元素分组。示例：
label、input：一般两个元素会配合使用。input的类型丰富，根据类型不同配合使用的属性也各不相同。参考：MDN Input元素 (opens new window) ：button：表现为普通按钮reset：表现为按钮，将表单的所有内容重置为默认值submit：表现为按钮，提交表单image：表现为图片按钮hidden：隐藏的textcheckbox：复选框。有属性checked，表示被选中radio：单选框color：颜色控件date：日期控件（年月日）。常用属性值：min：最小值。例如"2017-04-01"max：最大值
time：时间控件。也有min、max属性month：年与月组成的日期。有min、max属性week：年与周组成的日期。有min、max属性datetime-local：日期时间控件。有min、max属性file：想要上传文件，form的请求方式必须为post，enctype必须为"multipart/form-data"。常用属性值：accept：可以是文件扩展名，如".jpg,.png,.doc"。或者一个有效的MIME类型，如"image/*"capture：在PC上会得到一个文件选择器。在移动端，当accept为图像、音频、视频的时候，此属性指定哪个设备获得媒体资源。可选值有：user：应使用面向用户的摄像头和/或麦克风environment：应使用外向摄像头和/或麦克风
multiple：表示可以选择多个文件
number：数字控件。有min、max、step属性range：范围控件。有min、max、step、list（和datalist配合）属性text：文本控件。常用属性有：maxlength： 最大字符minlength： 最小字符pattern： 验证内容的正则placeholder： 示例值size： 文本框有多少字符的宽度spellcheck： 是否进行拼写检查
tel： 电话号码控件，属性同text。移动端设备会显示电话数字键盘email： 邮箱控件，属性同texturl： url地址控件，属性同textpassword： 密码控件，属性同text（不支持list）- input的所有控件都有通用属性：
name： 反馈给服务器的名称value： 默认值disabled： 控件不可用。click事件将失效，也不会把此控件数据提交到服务器readonly： 只读，不可修改。在type为hidden、range、color、checkbox、radio、file，将被忽略required： 表示必填
- select、optgroup、option 选择框，optgroup元素是可选的。如果要做出多选框，使用mulpitle，也可以和size属性配合
datalist： 描述了input元素中可能的值。演示效果：
textarea： 多行纯文本编辑控件。常用属性值：cols： 文本可视宽度，默认为 20rows： 文本行数wrap： 文本换行的方式，默认为 soft。还可选hard，文本到达元素最大宽度的时候，浏览器自动插入换行符minlength、maxlength、placeholder、spellcheck： 不赘述
meter： 描述标量或者分数值。常用属性有：low： 下限值。会有视觉效果，元素处于[min-low][low-high][high-max]之间颜色会有所不同high： 上限值。会有视觉效果optimum： 最佳取值min： 最小值，默认 0max： 最大值，默认 1
progress： 进度条。一般是max属性和value属性配合着用button： 可点击的按钮
# 总结
有了这个HTML全局视图，在脑海中就有了基本框架，以后遇到HTML方面相关的问题，按图索骥就好了。
当然，HTML只是千层之台的第一步，后续还有CSS和JS DOM相关的内容，有了CSS，就有了神笔马良；而有了JS DOM，就有了展示动态内容的内容，插上了飞翔的翅膀。
任重而道远，让你我继续前进。
祝你变得更强！
编辑 (opens new window)
上次更新: 2024/12/26