HTML**介绍＜h1＞到＜h6＞标记的使用，斜体、粗体、下划线、删除线等文本格式化标记，＜p＞标记及其属性的应用，常用特殊字符标记的使用 + 网页设计的基础标签

最新推荐文章于 2025-03-20 04:30:00 发布
最新推荐文章于 2025-03-20 04:30:00 发布
阅读量1.2k 收藏 30
点赞数 39
分类专栏： HTML+CSS——网页制作 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_88591507/article/details/146343912
版权

 

以下是 HTML 标记的详细介绍，包含双标签/单标签说明、代码示例及输出示例：

⭐一、标题标记 <h1> 到 <h6>

类型：双标签
用途：定义标题层级，<h1> 最大（最重要），<h6> 最小（最次要）。
代码示例：

<h1>主标题</h1>
<h2>副标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

输出效果展示

输出效果：
主标题（最大字体，加粗）
副标题（次大字体）
...
六级标题（最小字体）

⭐二、文本格式化标记

1. 斜体：<i> 或 <em>✨

类型：双标签
区别：<i> 纯视觉斜体，<em> 语义强调斜体（推荐优先使用）。

<i>斜体文本</i>  
<em>强调斜体文本</em>

输出 效果展示

2. 粗体：<b> 或 <strong>✨

类型：双标签
区别：<b> 纯视觉粗体，<strong> 语义强调粗体（推荐优先使用）。

<b>粗体文本</b>  
<strong>强调粗体文本</strong>

输出 效果展示

3. 下划线：<u>✨

类型：双标签

<u>下划线文本</u>

输出效果展示 

4. 删除线：<s> 或 <del>✨

类型：双标签
区别：<s> 纯视觉删除线，<del> 表示已删除内容。

<s>删除线文本</s>  
<del>已删除文本</del>

输出效果展示

完整示例：

<p>
  原价：<s>100元</s> 现价：<strong>50元</strong><br>
  <em>注意：</em><u>限时优惠</u>
</p>

输出效果展示：

⭐三、段落标记 <p>

类型：双标签
用途：定义段落，默认换行并留有空白间距。
常用属性：align（对齐方式，如 left/center/right）。

<p align="left">左对齐段落</p>
<p align="center">居中对齐段落</p>
<p align="right">右对齐段落</p>

输出效果展示

⭐四、特殊字符标记

用途：显示 HTML 保留字符或特殊符号。

 常见字符：

  • &nbsp;：空格（不会被合并）

  • &lt;：小于号 <

  • &gt;：大于号 >

  • &amp;：& 符号

  • &copy;：版权符号 ©

代码示例：

<p>
  输入代码：&lt;h1&gt;标题&lt;/h1&gt;<br>
  版权信息：&copy; 2023 我的网站<br>
  多个空格：Hello&nbsp;&nbsp;&nbsp;World
</p>

输出效果展示

⭐总结

  • 双标签：<h1>-<h6>、<i>、<em>、<b>、<strong>、<u>、<s>、<del>、<p>。

  • 单标签：无（上述均为双标签）。

  • 特殊字符：非标签，通过字符实体（如 &nbsp;）显示。

👑补充+介绍网页设计的基础标签：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<!--  -->

</head>

<body>

</body>

</html>介绍上面出现的标及的作用和用法

以下是提供的 HTML 代码中 所有标签及其作用 的详细解析，按层级结构说明：

1. <!DOCTYPE html>✨

  • 类型：文档类型声明（非标签，单指令）

  • 作用：声明文档遵循 HTML5 标准，确保浏览器以标准模式渲染页面

  • 必须性：必须放在 HTML 文件的第一行

示例：

<!DOCTYPE html>  <!-- 仅此一种写法，不可修改 -->

2. <html> 标签✨

  • 类型：双标签

  • 作用：包裹整个 HTML 页面的根元素，所有内容都写在内部

  • 常用属性：lang（定义页面语言，如 lang="zh-CN" 表示中文）

示例：

<html lang="zh-CN">
  <!-- 所有内容 -->
</html>

3. <head> 标签✨

  • 类型：双标签

  • 作用：存放页面元数据（不直接显示在页面上），包含标题、字符编码、CSS/JS 链接等

常见子标签：

  • <meta>：定义元数据（如字符编码、视口设置）

  • <title>：定义页面标题（显示在浏览器标签页）

  • <link>：引入外部资源（如 CSS 文件、图标）

  • <style>：内嵌 CSS 样式

  • <script>：引入或编写 JavaScript 代码

4. <meta charset="utf-8">✨

  • 类型：单标签

  • 作用：定义文档字符编码为 UTF-8，支持中文和多语言显示

  • 重要性：避免页面乱码，必须放在 <head> 的最前面

扩展属性：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 适配移动端 -->

5. <title> 标签✨

  • 类型：双标签

  • 作用：定义页面标题，显示在浏览器标签页/收藏夹中

  • SEO 影响：影响搜索引擎结果中的标题显示

示例：

<title>唐诗欣赏 - 李白诗集</title>

6. <body> 标签✨

  • 类型：双标签

  • 作用：包裹所有页面可见内容（文字、图片、链接等）

  • 常用属性：bgcolor（背景色，已过时，建议用 CSS）

示例：

<body>
  <h1>静夜思</h1>
  <p>床前明月光，疑是地上霜。</p>
</body>

输出效果展示

7. <!-- 注释内容 -->✨

  • 类型：HTML 注释（非标签）

  • 作用：添加代码注释，浏览器不会渲染

  • 用途：解释代码、临时屏蔽内容

示例：

<!-- 这里是导航栏，待完善 -->

完整代码结构解析

<!DOCTYPE html>
<html>                      <!-- 根元素 -->
  <head>                    <!-- 元数据容器 -->
    <meta charset="utf-8">  <!-- 字符编码 -->
    <title>唐诗欣赏</title>   <!-- 页面标题 -->
    <!-- 其他元数据或链接 -->  <!-- 注释 -->
  </head>
  <body>                   <!-- 可见内容容器 -->
    <!-- 此处添加页面内容 -->
  </body>
</html>

✨总结表格✨

标签/指令类型作用是否必须
<!DOCTYPE html>指令声明 HTML5 标准是
<html>双标签包裹整个页面是
<head>双标签存放元数据是
<meta charset>单标签定义字符编码是
<title>双标签定义页面标题是
<body>双标签存放可见内容是
<!-- 注释 -->注释解释代码否

实际开发中，建议始终包含这些基础标签以构建标准化的网页结构！

 

HTML <h1> 到 <h6> 标签
郭晓湉
09-30 3899
元素 元素用来描述网页中最上层的标题。由于一些浏览器会默认地把 元素显示为很大的字体，因此会有一些 web 开发者使用 元素代替 元素来显示最上层的标题。这样做不会对读者产生影响，但会使那些试图“理解网页结构”的搜索引擎和其他软件感到迷惑。请确保把 用于最顶层的标题， 和 用于较低的层级。谈到SEO优化的话 H1标签　　H1标签是指网页html中对文本标题所进行的着重强调的一种标签，制作
h1 ~ h6 谁是网页之王？
weixin_40348267的博客
04-08 555
这些标签表示标题的层级，从 <h1> 到 <h6>，层级逐渐降低，<h1> 是最高级别的标题，而 <h6> 是最低级别的标题。以上就是今天学习的内容了，相信看到这里的朋友，都知道了标题标签的用法，希望今天的内容对你有帮助，学习是一个持续的过程，不断学习和实践将使你逐渐成为一名出色的前端开发者。标题应该用于表示页面或内容的结构，搜索引擎和屏幕阅读器等工具也会根据标题的级别和结构来理解网页的内容，它应该用于最重要的内容。6.<h6>: 表示最低级别的标题，用于细化五级标题的内容，一般不常使用。
什么是HTML？
最新发布
dingxingaq的博客
03-20 2303
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言，不是编程语言而是一种标记语言。所谓超文本，有2 层含义：1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制)。2.它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。语法1. HTML 标签是由尖括号包围的关键词，例如。2. HTML 标签通常是成对出现的，例如 和 ，我们称为双标签。
php <h1>字体,html <h1> 标题标签元素
weixin_31869579的博客
03-12 758
h1 html标题标签网页内容中，比如一篇文章标题，一般采用标签来标记布局，这样显示标题在HTML中重要性，同时也考虑到告诉搜索引擎标签内内容为标题很重要。一、h1语法结构文章标题以开始,以结束的一对有开始有闭合的标签组。同样h1标签也可以使用class和id引入外部CSS样式。文章标题主题标题二、h1标题标签特点与使用建议(用什么地方)html h1标题标签常常一个网页中最好只使用一次即可，不要...
html h1 字母,HTML: <h1> 标签
weixin_30375113的博客
05-30 250
HTML: 标签HTML 标记定义了HTML文档中的最高级别或最重要的标题。该标签通常也称为 元素。在线示例HTML H1标题：示例html>HTML5H1标签的使用(基础教程网nhooo.com)Heading1ThisisthecontentthatwouldappearunderHeading1.测试看看 ‹/›浏览器兼容性IEFirefoxOper...
html中h1标签格式
hellozxcv的博客
06-30 3969
html中的h1标签在格式上表现为 <h1>hello world!</h1> ，而在语义上表达的是一个页面，通常是一片文章的大标题，虽然文章有很多标题，但是只有一个大标题。下面展示了在编辑器中使用H1标签输出一个hello world！ 首先，为了使用HTML构建一个简单的网页，可以在编辑器中使用下面的代码。 <h1>Hello World！&lt...
html语言中标记h1代表什么意思,html中h1是什么意思
weixin_29416253的博客
06-02 5707
在html中，h1指的是“一级标题”，是用于定义大标题的一个标签，该标签定义的标题重要等级最高，语法格式“网站大标题”。h1对一个网页中起到提纲挈领的作用；在一个页面中，h1标签只能出现一次。本教程操作环境：windows7系统、HTML5版、Dell G3电脑。HTML h1标签是什么？h1标签指的是一级标题。一个网页中，用h1包括起来的内容是除了title之外最重要的内容，对一个网页中起到提纲...
基于java的html 标记大全.zip
05-27
- `<s>` 或 `<del>`：删除线。 - `<pre>`：预格式化文本，保留空格和换行。 5. **链接标记**： - `<a>`：创建超链接，通过`href`属性指定链接地址。 6. **图像标记**： - `<img>`：插入图片，`src`属性指定...
HTML基础总结推荐(文本格式)
09-28
`<del>` 表示删除的文本，通常会有删除线。这两个标签有助于跟踪文档的修改历史。 6. `<pre>`：`<pre>` 标签用于定义预格式化的文本，它会保留文本中的空格和换行，适合展示代码片段或其他需要固定宽度字体的文本。...
HTML学习笔记包括简介、基础、元素、属性、标题、段落等
04-15
- **删除线**：`<del>`。 - **下划线**：`<u>`。 2. **示例**： ```html <p><strong>这是粗体文本。</strong></p> <p>这是<em>斜体文本。</em></p> ``` #### 八、HTML 链接 1. **定义**： - 超链接是 HTML ...
HTML标记参考手册.pdf
10-05
18. **外观相关标签**：包括`<B>`、`<I>`、`<U>`、`<S>`、`<SUB>`、`<SUP>`、`<TT>`、`<CENTER>`等，用于设置字体样式，如加粗、斜体、下划线、删除线、下标、上标、打字机字体和居中对齐。 19. **字体大小和颜色**...
前端技术HTML基础笔记
06-07
- **删除线**：`<del>`。 - **容器标签**： - **块级元素**：`<div>`，用于布局或分组内容。 - **内联元素**：`<span>`，用于分组文本或其他内联元素。 - **图像标签**：`<img>`，用于插入图片。 - **属性**： ...
html语言中标记h1代表什么,认识HTML中h1h2h3h4标签
weixin_39932939的博客
05-30 4646
H1 H2 H3 H4标题标签常常使用在一个网页中唯一标题、重要栏目、重要标题等情形下。一、搜索引擎下看h1标题标签针对搜索引擎来说是告诉了不同标签下代表不同的重要级别内容。如果你在一个网页中使用的1-2中H型标签中都含有一个相同关键字，搜索引擎也会格外注重你所注重关键字与内容，但切记无滥用。二、Html h1 h2 h3 h4用法HTML代码片段：最重要的标题H1次要栏目或标题-小标题H2再次要...
html的<h>标签
weixin_30482181的博客
03-31 487
<h>标签：标题标签。 <h>标签只有六个：<h1>........<h6> 转载于:https://www.cnblogs.com/heisetianshi/p/10631638.html
HTML <h1>到<h6>标签
boonyaxnn的博客
08-15 578
我的主页 第一个标题 第二个标题 第三个标题 第四个标题 第五个标题 第六个标题 注：最大，最小。
HTML标题<h>,HTML H标题标签
weixin_34283265的博客
06-23 1633
可以将HTML标题或HTML h标签定义为要在网页上显示的标题或副标题。当你将文本放在标题标签 ……… h1>内时, 它在浏览器中以粗体显示, 并且文本的大小取决于标题的数量。从到标签定义了六个不同的HTML标题, 从最高级别h1(主标题)到最低级别h6(最重要的标题)。h1是最大的标题标签, h6是最小的标题标签。因此, h1用于最重要的标题, h6用于最不重要的标题。HTML中的标题可...
常见的html标签：＜h1＞/＜p＞/＜br＞/＜hr/＞/＜b＞/＜strong＞/＜i＞/＜em＞/＜s＞/＜del＞/＜u＞/＜sup＞/＜sub＞＜/sub＞
YY的博客
08-22 2657
常见的html标签：////////////
html h1标签什么意思,什么是html h1标签？html h1标签使用方法的详细介绍
weixin_39714307的博客
06-24 4085
本篇文章主要为大家介绍了关于HTML h1~h6的使用介绍，介绍了关于html h1标签在网页中的两种使用方法，一个是网站首页的具体介绍，一个是文章内容页面的具体介绍，最后一点的总结，现在让我们看看这篇文章吧首先，让我们先来看看什么是html h1标签：HTML h1标签是什么？是一级标题。一个网页中，用h1包括起来的内容是除了title之外最重要的内容，对一个网页中起到提纲挈领的作用。搜索引擎首...
Web前端开发 — HTML基础（1）
qq_45709187的博客
04-10 1539
基本介绍 ——Web开发：前端+后端 ——前端开发学习基本内容：CSS(样式)+HTML（语义）+JS HTML是网页的结构和内容，CSS是美化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值