HTML 学习指南

2023.10.17

2024.11.20

学习指南 HTML

1.7k 字 7 分钟

<!-- DOCTYPE 用于 HTML 的版本声明，不区分大小写 -->
<!DOCTYPE html>
<!-- html 标签划定了 HTML 文档的内容 -->
<html>
    <!-- head 标签包含了元数据等对 HTML 文档的描述信息 -->
    <head>
        <title>这是网页标题</title>
    </head>
    <!-- body 标签划定了可视的内容 -->
    <body>
        <h1>
            这是可视内容的标题
        </h1>
    </body>
</html>

<!DOCTYPE> 声明

<!DOCTYPE> 声明有助于浏览器了解文档遵顼的 HTML 规范，正确地显式网页。

在 HTML4.01 及之前版本中，<!DOCTYPE> 声明需要指定 DTD（文档类型定义）文件，因为它们是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）的。

HTML5 不再基于 SGML，因此不再需要指定 DTD 文件。

一个简单的例子：

<!-- HTML4.01 的版本声明 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML5 的版本声明 -->
<!DOCTYPE HTML>

元素

HTML 元素由起始标签、结束标签、元素内容和属性组成。

规范建议：

即使是非成对的单体标签如 br 标签，也推荐使用   的形式显式结束标签。

HTML 标签、属性和属性值都是大小写不敏感，但推荐使用小写。

头部区域标签

头部标签 head 中可以插入元标签 meta、网页标题标签 title、基础超链接地址标签 base、链接标签 link、样式标签 style、脚本标签 script 和不支持脚本标签 noscript。

base

base 标签用于描述网页的基础超链接地址，以及超链接的打开方式。

href 属性用于设置基础超链接地址，对所有使用相对路径的 URL 都生效，例如 script 标签的 src 属性；target 属性用于设置超链接的打开方式，只对标签的 href 属性生效。

<!DOCTYPE html>
<html>
<head>
    <title>Base Tag</title>
    <base href="http://www.xxx.com/" target="_blank" />
    <!-- 实际地址是 "http://www.xxx.com/1.css" -->
    <link rel="stylesheet" type="text/css" src="1.css" />
</head>
<body>
    <!-- 实际地址是 "http://www.xxx.com/1.html"，打开方式是 "_blank" -->
    <a href="1.html">1.html</a>
</body>
</html>

link

link 标签用来链接外部文件。

rel 属性用来描述外部文件与网页的关系；href 属性指定外部文件的超链接地址；type 属性指定外部文件的 MIME 类型，可以省略。

文本格式化标签

strong：加粗文本。
1
这个文本是加粗的
这个文本是加粗的
big：放大文本。
1
<big>这个文本字体放大</big>
这个文本字体放大
small: 缩小文本。
1
这个文本是缩小的
这个文本是缩小的
em：让文本变为斜体。
1
这个文本是斜体的
这个文本是斜体的
sub：让文本变为上标。
1
这个文本是上标
^{这个文本是上标}
sub：让文本变为下标。
1
这个文本是下标
_{这个文本是下标}
del：标记文本是被删除的。
1
<del>你好！</del>
~~你好！~~
ins：标记文本是新插入的，通常和 del 配合使用。
1
<del>你好！</del><ins>好吧！</ins>
~~你好！~~好吧！

pre：使文本保留原格式。

<pre>
	你好      啊！
</pre>
<p>
    你好      啊！
</p>

    你好      啊！

你好啊！

计算机输出标签

code：标记文本是一段代码。
1
<code>计算机输出的代码</code>
效果：计算机输出的代码
kbd：标记文本是键盘的输入。
1
<kbd>CTRL + L</kbd>
CTRL + L

引文、引用标签

abbr：定义缩写。

1	<abbr title="World Health Organization">WHO</abbr>

WHO

address：定义文档作者/所有者的联系信息。

<address>
Written by <a href="mailto:shabbyacc@outlook.com">Lyana</a>.<br> 
Visit me at:<br>
github.com/Lyana-nullptr<br>
Earth<br>
Milky Way
</address>

Written by Lyana.
Visit me at:
github.com/Lyana-nullptr
Earth
Milky Way

q：定义摘自另一个 HTML 的引用文本。
1
2
3
WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.
WWF's goal is to: Build a future where people live in harmony with nature. We hope they succeed.

blockqueto：定义摘自另一个 HTML 文档的引用块。

1
2
3

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

cite：定义引用作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
1
<cite>The Scream</cite> by Edward Munch. Painted in 1893.
The Scream by Edward Munch. Painted in 1893.

作者: Lyana-nullptr

链接: http://lyana-nullptr.github.io/2023/10/17/html-study-guide/

声明: 本博客所有文章除特别声明外，均采用许可协议 CC-BY-NC-4.0 转载请注明出处！

HTML

目录

简介

页面结构