成功的路上并不拥挤，因为能坚持到底的人并不多。保持初心，勇往直前。
文章目录
前言
-
HTML 标签简介
1.HTML 标签是由 尖括号 包围的关键词，比如<html>
2.HTML 标签通常是 成对出现 的，格式为：<标签>内容</标签>，比如<b>和</b>，标签对中的第一个标签是开始标签，第二个标签是 结束标签。
3.HTML 标签也有是 单个出现 的，比如<br />，单标签中间无内容。
4.由于 HTML 标签对英文字母的大小写不敏感，所以 <P> 和 <p> 表达的意思相同。但是因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，因此建议强制规范使用小写。 -
以下是汇总的 HTML 常用标签 - 第一集
1. 标题标签 h1 - h6
1.1 标签描述
- HTML 提供了 6 个等级的网页标题标签：h1-h6 （主标题 h1 ，副标题 h2）。
- h 使用的是英文单词 header 的缩写，意为标题。
- 6 个标题标签用于区分标题的重要性，h1-h6 标题的重要性依次递减（ 主标题 h1 最重要）。
- 标题标签中间的文字：默认文字的字体大小依次递减（字体大小： h1 最大，h6 最小）。
- 默认文字字体加粗：css 样式 { font-weight: bold; } 。
- 默认文字独占一行：css 样式 { display: block; } 。
使用规范：
（1）如果页面需要使用标题，则主标题 h1 应该只被使用一次，所有其他标题应该位于主标题的下方。
（2）在页面中，应该按照标题的重要性（h1 --> h2 -->…–> h6）依次使用标题。不要使用完 h3 来表示副标题，后面又使用 h2 来表示次级标题。
（3）建议每个页面中使用标题的级别不超过三个，具有许多标题级别的文档会变得难以导航，如果有需要，则建议将内容拆分后分散在多个页面上。
1.2 示例代码
<h1>这是主标题</h1>
<h2>这是副标题</h2>
<h3>这是 3 级标题</h3>
<h4>这是 4 级标题</h4>
<h5>这是 5 级标题</h5>
<h6>这是 6 级标题</h6>
1.3 运行截图
2. 段落标签 p 、换行标签 br、预格式化文本标签 pre
2.1 标签描述
段落标签 <p>这是一段文本。</p>
- 段落标签 p 是英文单词 paragraph 的缩写，含义是段落。
- p 标签可以把 HTML 文档分割为若干段落，段落标签可以包含文本、图片、列表、链接等标签。
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落上下之间默认有垂直间距（默认有margin属性），段落标签的默认样式：{ display: block; }
- 为了可读性，无论你在代码中用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML 解释器会默认将连续出现的空格字符减少为一个单独的空格符。如果需要保留您需要的文本格式，比如不会取消换行和空格，可以使用 预格式化文本标签 pre 标签。
换行标签 <br />
- 换行标签 br 是个单标签，可以执行强制换行。
- br 是英文单词 break 的缩写，意为打断、换行。
- 换行标签 br 只是简单地开始新的一行，默认不会有上下之间的间距，跟段落标签 p 不一样。
预格式化文本标签 <pre>这中间的文本会按预先格式化好的样式显示，保留空格和换行符</pre>
- pre 标签可定义预格式化的文本，被包围在 pre 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
- pre 元素是块级元素，但是只能包含文本或行内元素，任何块级元素（常见为可以导致段落断开的标签：例如 title 、p 和 address 标签）都不能位于 pre 元素中。
2.2 示例代码
<p>第一个段落没有换行标签，所以会根据浏览器窗口的大小自动换行。段落标签 p 可以把 HTML 文档分割为若干段落，段落标签可以包含文本、图片、列表、链接等标签。</p>
<p>第二个段落有换行标签，<br />所以会在换行标签处强制换行。<br />段落标签 p 可以把 HTML 文档分割为若干段落，段落标签可以包含文本、图片、列表、链接等标签。<br />段落标签 p 可以把 HTML
文档分割为若干段落，段落标签可以包含文本、图片、列表、链接等标签。</p>
<p>第三个段落没有使用换行标签，在代码中有许多的空格 和换行，
为了可读性，无论你在代码中用了多少空格（包括空格字符，包括换行），当渲染这些代码
的时候，HTML 解释器会默认将连续出现的空格字符减少为一个单独的空格符。</p>
<pre>如果需要保留您需要的文本格式，比如不会取消换行和空格，可以使用 pre 标签：
这是一串数字 123 456 789
这是一串英文 abcdefg
</pre>
2.3 运行截图
3. 分组标签 div 和 span
3.1 标签描述
- 大多数 HTML 元素被定义为块级元素或内联元素。
- 块级元素在浏览器显示时，通常会以新行来开始（和结束）。例如： h1 、p、div。
- 内联元素在显示时通常不会以新行开始。例如：a、img、span。
- div元素是块级元素，可用于文档布局，是一个可以组合其他 HTML 元素的容器，从而把文档分割为独立的、不同的部分。
- span元素是内联元素，可用作文本的容器，对行内文本进行分组，使它们以不同的样式显示。
- 这两个元素都没有特定的含义，仅作为容器使用。
3.2 示例代码
<div>
<h1>这是一个在 div 元素中的标题。</h1>
<p>这是一个组合的段落，
<span style="font-weight: bold;">这是第1句</span>、
<span style="color: red;">这是第2句</span>和
<span style="color: blue;">第3句</span>。
</p>
</div>
3.3 运行截图
4. 图像标签 img
4.1 标签描述
img 标签用于定义 HTML 页面中的图像，为被引用的图像创建占位符，从而将图像链接到 HTML 页面上。
| 重要属性 | 描述 |
|---|---|
| src | 图像的 URL路径。 |
| alt | 替换文本。图像不能显示时替换占位显示的文字。 |
| title | 提示文本。鼠标放到图像上，显示的文字。 |
| height | 设置图像的显示高度。 |
| width | 设置图像的显示宽度。 |
4.2 示例代码
<div>
<img src="image1.png" alt="这是图片的占位描述文本" title="这是图片的标题" height="50" width="50">
</div>
<div>
<img src="image.png" alt="这是图片的占位描述文本" title="这是图片的标题" height="50" width="50">
</div>
4.3 运行截图
4. 超链接标签 a
4.1 标签描述
- a 标签定义超链接，用于从一个页面链接到另一个页面。
- 在浏览器中，链接的默认外观如下：
| 类型 | 默认样式 |
|---|---|
| 未被访问过的链接 | 蓝色链接文字，带有下划线 |
| 已被访问过的链接 | 紫色链接文字，带有下划线 |
| 点击或鼠标长按链接时 | 红色链接文字，带有下划线 |
- 重要属性及描述如下：
| 重要属性 | 描述 |
|---|---|
| href | 链接的目标 URL路径。 |
| target | 定义链接的打开方式。 _self：默认值，在当前窗口打开链接 _blank：新窗口打开链接 |
- 链接分类：
| 类别 | 描述 |
|---|---|
| 外部链接 | 相对当前网站的其他外部网站链接，一般 href 以https://开头 |
| 内部链接 | 网站内部页面之间的相互链接，一般 href 直接设置具体 html 页面 |
| 空链接 | 当前没有链接目标，href 直接设置为 # ，单击后仍停留在当前页面 |
| 下载链接 | 地址链接的 href 是 .exe / .zip / .apk 等压缩文件形式，点击链接直接下载该文件 |
| 网页元素的链接 | 网页中的各种网页元素，如文本、图像等都可以添加超链接 |
| 锚点链接 | 点击链接，可以快速定位到页面中的 id=[href设置值] 的元素的位置 |
4.2 示例代码
<h3>链接示例</h3>
<div>
<a id="first"
href="https://blog.csdn.net/weixin_44637621/category_12783118.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12783118&sharerefer=PC&sharesource=weixin_44637621&sharefrom=from_link">默认在当前窗口打开链接：【学习HTML】专栏</a>
</div>
<div>
<a href="https://blog.csdn.net/weixin_44637621/article/details/142068170"
target="_self">默认值，在当前窗口打开链接：【HTML入门知识点汇总】</a>
</div>
<div>
<a href="https://blog.csdn.net/weixin_44637621/article/details/142635055"
target="_blank">新窗口打开链接：【HTML常用文本格式化标签】</a>
</div>
<h3>链接类型</h3>
<div>
<a href="https://www.baidu.com/">1. 外部链接</a>
</div>
<div>
<a href="test1.html">2. 内部链接</a>
</div>
<div>
<a href="#">3. 空链接</a>
</div>
<div>
<a href="file.zip">4. 下载链接</a>
</div>
<div>
<a href="test2.html">5. 网页元素的链接<img src="image.png" /></a>
</div>
<div>
<a href="#first">6. 锚点链接：快速定位到 first 链接元素，回到顶部</a>
</div>
4.3 运行截图
5. HTML 注释
5.1 标签描述
浏览器不会显示注释，但是能够利用注释在 HTML 中放置通知和备注信息。
5.2 示例代码
<!-- 这是一段注释，不会被浏览器渲染 -->
<p>这是一个段落。</p>
<!-- end of comment 2024-09-25 -->
5.3 运行截图
6. 常用特殊字符汇总
6.1 标签描述
在 HTML 中，某些字符是预留的。您不能使用包含这些字符的文本。
例如在 HTML 中不能直接使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
| 常用字符 | 描述 |
|---|---|
| 不间断空格 (Non-breaking Space)，使用后在页面中增加一个空格 “ ” |
< | 小于号，使用后在页面中增加一个 “ < ” |
> | 大于号，使用后在页面中增加一个 “ > ” |
& | 和号，使用后在页面中增加一个 “ & ” |
× | 乘号，使用后在页面中增加一个 “ × ” |
÷ | 除号，使用后在页面中增加一个 “ ÷ ” |
6.2 示例代码
<h3>常用特殊字符示例</h3>
<p>这里需要3个空格 来分隔</p>
<p>这是段落标签<p></p>
<p>这是 & 的字符描述：&</p>
<p>计算：3 × 10 ÷ 2 = 15</p>
6.3 运行截图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
