本文最后更新于：8 个月前

内容为html文档的上半部分（body标签以上的部分），包括：<!DOCTYPE>文档声明、文档注释、全局属性 3个全局范围的内容，和 head 标签内部的标签

HTML基础——head部分

前言

之前主要通过MDN的《HTML基础》入门学习过HTML的知识，也看过菜鸟教程、W3C等网站的HTML教程，可能都是出于方便快速入门的考虑，所以讲解的内容不全面不系统。经过一轮的学习和经历过笔试之后，感觉之前那种方式的学习遗漏掉了许多细节的点，掌握的知识与不成体系。因此，决定再次系统化地梳理归纳一遍HTML的知识体系，以一个实际HTML文档的顺序去整理各个知识点。

针对大多数的知识点，围绕着”是什么、起什么作用“、和”怎么使用“ 2个方面展开。

目录结构

上篇 head部分

文档声明
文档注释
HTML全局属性
head部分
- meta标签
- link标签
- title标签，必须
- script标签

下篇 body部分

body部分
- 语义主体标签，header、main、footer等等
- 常用文本标签
- 链接标签
- 表单标签
- 列表标签
- 表格
- iframe
- 多媒体标签
- 实体字符

参考资料：

【1】HTML 教程 - 网道 (wangdoc.com)

【2】HTML | 菜鸟教程 (runoob.com)

【3】HTML (w3school.com.cn)

一、<! DOCTYPE> 文档声明

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

<!DOCTYPE>声明必须是位于文档中的最前面的位置，处于 <html> 标签之前。

<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本（doctype）

<!DOCTYPE> 声明不区分大小写

<!DOCTYPE html>是 HTML5 中唯一的 doctype，也被视作将网页 “升级” 到 HTML5 的第一步

如果不加声明，大部分浏览器将开启最大兼容模式来解析网页，会触发替代盒模型，会产生一些难以预知的bug，例如：

宽高的算法与 W3C 盒模型不同
在表格中的字体样式不会继承
怪异模式下可以设置行内元素宽高

二、文档注释

标签，支持跨越多行

<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>

<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>
<!-- 注释行结尾处的两条斜杠 (//) 是 JavaScript 注释符号。这可以避免 JavaScript 执行 - - > 标签。-->

三、全局属性

所有HTML元素都具有的属性

属性	描述
class	规定元素的一个或多个类名（引用样式表中的类
id	规定元素的唯一 id
style	规定元素的行内 CSS 样式
lang	规定元素内容的语言
data-*	用于存储页面或应用程序的私有定制数据
title	规定有关元素的额外信息^[1]
contenteditable	规定元素内容是否可编辑
draggable	规定元素是否可拖动
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接
dir	规定元素中内容的文本方向^[2]
accesskey	规定激活元素的快捷键
tabindex	规定元素的 tab 键次序
hidden	规定元素仍未或不再相关

[1] title属性规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本。如下

PRC was founded in 1949

W3School.com.cn

1 2	`<abbr title="People's Republic of China">PRC</abbr> was founded in 1949 <p title="Free Web tutorials">W3School.com.cn</p>`

[2] dir属性

Write this text right-to-left!

1	`<p dir="rtl">Write this text right-to-left!</p>`

四、meta 标签

<!DOCTYPE html>
<html lang='zh-cn'>
<head>
    <meta charset="utf-8">
    <meta name="robots" content="all">
    <meta name="author" content="w3school.com.cn">
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <meta name="description" content="免费的 Web 教程">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> /*将页面的宽度设置为跟随设备的屏幕宽度，设置浏览器首次加载页面时的初始缩放级别*/
</head>
<body></body>
</html>

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对

<meta> 标签永远位于 head 元素内部

元数据总是以名称/值的形式被成对传递的

属性	（可选）值	描述
charset	character_set	规定 HTML 文档的字符编码。
content	text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-security-policy，规定文档的内容策略 content-type，规定文档的字符编码 default-style refresh，页面自我刷新的时间间隔与name属性只可选其一	把 content 属性关联到 HTTP 头部。
name	application-name author description generator，规定用于生成文档的软件包之一 keywords，有助于搜索优化的关键词，用逗号分隔 viewport 还可以自由使用对自己和源文档的读者来说富有意义的名称与http-equiv属性只可选其一	把 content 属性关联到一个名称。
scheme	some_text	定义用于翻译 content 属性值的格式。

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv用法实例

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body></body>
</html>

使用带有 http-equiv 属性的标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：
1
2
<meta http-equiv="charset" content="iso-8859-1"> <meta http-equiv="expires" content="31 Dec 2008">
这样发送到浏览器的头部就应该包含：
1
2
3
content-type: text/html charset:iso-8859-1 expires:31 Dec 2008
refresh用法实例，在网址已经变更的情况下，将用户重定向到另外一个地址

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>
<body></body>
</html>

五、link 标签

1
2
3

<head>
	<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分

<link> 标签定义文档与外部资源的关系

<link> 标签最常见的用途是链接样式表

属性：

属性	（可选）值	描述
href^[1]	URL	规定被链接文档的位置
rel	stylesheet alternate search等等	规定当前文档与被链接文档之间的关系
type	MIME_type	规定被链接文档的 MIME^[2] 类型
media	media_query	规定被链接文档将被显示在什么设备上
hreflang	language_code	规定被链接文档中文本的语言
sizes	height x width	规定被链接资源的尺寸。仅适用于 rel=”icon”

注：

[1] href，Hypertext Reference，指定网络资源的位置

[2] MIME，媒体类型，是一种标准，用来表示文档、文件或字节流的性质和格式，通用结构：type/subtype，不允许空格存在，type 表示可以被分多个子类的独立类别。subtype 表示细分后的每个类型。例如：text/html、image/png、application/json、multipart/form-data

link实例：

<head>
    <link rel="icon" type="image/png" sizes="16x16" href="/ui2019/logo-16-red.png">
    <link rel="apple-touch-icon-precomposed" sizes="180x180" href="/ui2019/logo-180.png">
    <link rel="manifest" href="/manifest.56b1cedc.json">
    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs">
    <link rel="alternate" title="MIME" types="" (iana="" media="" types)="" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types" hreflang="en">
</head>

rel属性值：

值	描述
alternate	文档的替代版本（比如打印页、翻译或镜像）。
stylesheet	文档的外部样式表。
copyright	包含版权信息的文档。
contents	文档的目录。
index	文档的索引。
next	集合中的下一个文档。

六、link和@import区别

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="theme.css" />
        <link rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
        <style type="text/css">
        	@import url("001.css");
        </style>
    </head>
</html>

两者都是导入CSS样式的方式，但是存在区别：

link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载
link支持使用Javascript控制DOM改变样式；而@import不支持
link 方式的样式的权重高于 @import 权重
link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持（IE 5 以上才能识别）
link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS

参考文章：HTML导入外部样式表（HTML导入CSS文件） (biancheng.net)

七、title 标签

<!DOCTYPE html>
<html>
  <head>
    <title>XHTML Tag Reference</title>
  </head>
  <body></body>
</html>

<title> 元素可定义文档的标题

<title> 标签是 <head> 标签中唯一要求包含的东西，所有浏览器都支持 <title> 标签

通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称

八、script 标签

<script type="text/javascript">
	document.write("Hello World!")
</script>
<script src="/lib/cc/w3CodeColor.js" async></script>

<script> 标签用于定义客户端脚本。既可以包含脚本语句，也可以通过src属性指向外部脚本文件

<script>标签的加载、执行，会阻塞html的解析过程，所以通常情况下，把<script>标签放到<body>的底部。当然，它也可以放到<head>内部，此时可以结合async或者defer属性。

属性：

属性	值	描述
src	URL	规定外部脚本文件的 URL
async		规定异步执行脚本（仅适用于外部脚本）异步加载，加载完立即执行，可能阻塞html解析过程，并且不能保证执行顺序 HTML5新属性
defer		规定是否对脚本执行进行延迟（仅适用于外部脚本）异步加载，直到html解析完成、显示给用户之后，才按照顺序执行加载完的脚本适合不改变文档内容的脚本不是HTML5新属性
type	MIME-type	指示脚本的 MIME 类型
charset	charset	规定在外部脚本文件中使用的字符编码

扩展：<noscript>标签

<noscript> 标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器，用来显示一段文本。

如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本

<body>
  <script type="text/vbscript">
   		document.write("Hello World!")
   </script>
  <noscript>Your browser does not support VBScript!</noscript>
</body>

九、src和href区别

在<link>标签中使用了「href」属性；在<script>标签中使用了「src」属性；这两者有何区别？

请求资源类型不同

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a

请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe

这也是为什么加载css不会阻塞html解析，而加载script会阻塞html解析的原因
作用结果不同

href 用于在当前文档和引用资源之间确立联系

src 用于替换当前内容
浏览器解析方式不同

若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理

当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕

HTML > HTML基础

HTML基础——head部分

http://timegogo.top/2022/10/26/HTML/HTML基础——head部分/

作者

丘智聪

发布于

2022年10月26日

更新于

2023年7月16日

许可协议

HTML基础——body部分上一篇

Vue探究下一篇