这篇博客详细介绍了HTML的基础标签，包括标题标签、段落标签、文本格式化、水平线、特殊符号、图像、链接、列表（有序和无序）以及<div>和<span>的使用。通过这些标签，可以构建网页的基本结构和内容。
目录
一，标题标签
HTML中使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标签来定义标题部分，默认样式是加粗左 对齐，并且从<h1>到<h6>字号递减，语法格式如下：
<hn 属性=“属性值”>标题内容</hn>若想改变对齐方式，可使用align属性，属性取值表如下：
| 属性值 | 对齐方式 |
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
效果图：
< title>< /title> 定义网页标题
二.段落标签
浏览新闻会看到文章的段落，在HTML中通过使用<p>标签实现。语法如下：
<p 属性=“属性值”>段落文本</p>三.文本格式化标签
| 标签 | 文本显示效果 |
| <strong> | 强调加粗 |
| <em> | 强调斜体 |
| <sub> | 下标文本 |
| <sup> | 上标文本 |
| <del> | 加删除线方式 |
| <ins> | 加下划线方式 |
| <i> | 斜体（不具备语义化强调作用，指显示斜体效果） |
| <b> | 加粗（不具备语义化强调作用，指显示加粗效果） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 align="center">回头科科</h1>
<p>欢迎来到回头科科主页面!欢迎来到回头科科主页面!
欢迎来到回头科科主页面!欢迎来到回头科科主页面!
欢迎来到回头科科主页面!欢迎来到回头科科主页面!</p>
<strong> <em>文本格式化标签 强调加粗</em> </strong>
<em>强调斜体</em>
<sub>下标文本</sub>
<sup>上标文本</sup>
<del>加删除线方式</del>
<ins>加下划线方式</ins>
<i>斜体(不具备语义化强调作用，指显示斜体效果)</i>
<b>加粗（不具备语义化强调作用，指显示加粗效果）</b>
</body>
</html>这些标签可以嵌套使用
四.水平线标签
有时为了使文档结构清晰，层次分明，常常需要在网页文档中加一些水平线将段落与段落之间分开，HTML 中使用<hr>标签来创建水平线，该标签常用的属性如下表：
| 属性名 | 含义 | 属性取值 |
| align | 设置水平对齐方式 | left、right、center 默认为 center |
| size | 设置水平线的粗细 | 以像素为单位，默认为2像素 |
| width | 设置水平线的宽度 | 浏览器百分比（默认为100% |
| color | 设置水平线颜色 | 颜色名称、或十六进制RGB |
五.特殊符号
在编写代码的时候，经常会遇到无法输入的字符如：商标注册、版权符等，在HTML中为这些特殊
的字符准备了专门的代码如下所示：
| 特殊字符 | 含义 | 特殊字符代码 |
| 空格键 |  ； | |
| © | 版权 | ©； |
| ® | 注册商标 | ® |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| ¹ | 上标1 | ¹ |
| ² | 上标2 | ²； |
| ³ | 上标3 | ³； |
用法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titlesada</title>
</head>
<body>
<h1 align="left">我是标题标签h1 左对齐</h1>
<h2 align="right">我是标题标签h2 右对齐</h2>
<h3 align="center">我是标题标签h3 居中对齐</h3>
<h4>我是标题标签h4</h4>
<h5>我是标题标签h5</h5>
<h6>我是标题标签h6</h6>
<hr>
<p>我是段落标签我是段落标签我是段落标签我是段落标签
我是段落标签我是段落标签我是段落标签我是段落标签我
是段落标签我是段落标签我是段落标签我是段落标签我是段
落标签我是段落标签我是段落标签我是段落标签我是段落标签</p>
<hr>
<strong>强调加粗</strong>
<em>强调斜体</em>
<sup>上标文本</sup>
<sub>下标文本</sub>
<del>加删除线方式</del>
<ins>加下划线方式</ins>
<i>斜体（不具备语义化强调作用，指显示斜体效果）</i>
<b>加粗（不具备语义化强调作用，指显示加粗效果</b>
<hr align="left" size="5px" width="200%" color="65">
<p>©</p>
</body>
</html> 
六，图像标签
网页除了文本内容，还需要配合图片的展示。
HTML中使用<img>标签来添加图片
<img src="图像URL"/>- 其中src是用于指定图像文件路径和文件名属性，是<img>标签的必须属性。
- 核心要清楚相对路径和绝对路径的使用
- 相对路径：相对地址即被引入的文件相对于当前页面的地址
- 绝对路径：即文件在网络或本地的绝对路径
除了src属性外还有其他属性如下所示：
| 属性 | 属性值 | 描述 |
| alt | 文本 | 图片显示不出来时的提示文字 |
| title | 文本 | 鼠标移动到图片上的提示文字 |
| width | 像素 | 设置图片的宽度 |
| height | 像素 | 设置图片的高度 |
| border | 数字 | 设置图片边框的宽度 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 align="center">回头科科</h1>
<p>欢迎来到回头科科主页面!欢迎来到回头科科主页面!
欢迎来到回头科科主页面!欢迎来到回头科科主页面!
欢迎来到回头科科主页面!欢迎来到回头科科主页面!</p>
<strong> <em>文本格式化标签 强调加粗</em> </strong>
<em>强调斜体</em>
<sub>下标文本</sub>
<sup>上标文本</sup>
<del>加删除线方式</del>
<ins>加下划线方式</ins>
<i>斜体(不具备语义化强调作用，指显示斜体效果)</i>
<b>加粗（不具备语义化强调作用，指显示加粗效果）</b>
<hr align="center" size="5px" width="50%" color="red">
<!--其他特殊符号用法一致-->
<p>©</p>
<!--图像标签 src是用于指定图像文件路径和
文件名属性，是<img>标签的必须属性。-->
<img src="https://t7.baidu.com/it/u=4162611394,
4275913936&fm=193&f=GIF" alt="正在缓冲中" title="可爱的小狗"
width="500px" height="500px" border="20">
</body>
</html> 
七. 链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相
同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
- HTML中使用<a></a>标签来定义链接部分实现网页的跳转
-
<a href="链接页面的地址" target="链接打开方式">链接对象名称</a> - 链接和图像一样，地址可以是相对地址，也可以是绝对地址。链接除了地址外还可以链接其他元素如（压缩包、Word文档、PPT文档等）
-
<a href="../照片.rar" >下载压缩包</a><a href="https://www.baidu.com/" target="_blank">百度一下你就知道</a>
target属性用于指定链接页面的打开方式
| 属性取值 | 打开方式 |
| _self | 在当前窗口打开链接，默认方式 |
| _blank | 在新的窗口中打开链接 |
| _top | 在顶层框架中打开链接 |
| _parent | 在当前框架的上一层打开链接 |
八.列表标签
1.有序列表
- 在HTML中用<ol>标签表示有序列表，列表项目用<li>标签表示，列表项目有先后顺序之分，
因此称为有序列表 - 有序列表可以通过type属性来设置不同的显示效果
- 如下所示：
| 属性值 | 显示效果 |
| 1 | 数字（1,2,3,4....） |
| a | 小写字母（a,b,c,d....） |
| A | 大写字母（A,B,C,D....） |
| i | 小写罗马数字（i,ii,iii.....） |
| Ⅰ | 大写罗马数字(Ⅰ,Ⅱ,Ⅲ.....) |
2.无序列表
- 在HTML中用<ul>标签表示无序列表，列表项目用<li>标签表示，列表项目没有先后顺序之分，因此称为无序列表
- 无序列表可以通过type属性来设置不同的显示效果
- 如下所示：
| 属性值 | 显示效果 |
| disc(默认值) | 实心圆 |
| circle | 空心圆 |
| square | 实心正方形 |
注意：<li></li> 之间相当于一个容器，可以容纳所有的元素。但是<ul></ul>中只能嵌套<li></li>,
不允许直接在<ul></ul>标记中输入文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<ol>
<li>回</li>
<li>头</li>
<li>科</li>
<li>科</li>
</ol>
<ol type="A">
<li>回</li>
<li>头</li>
<li>科</li>
<li>科</li>
</ol>
<ul>
<li>回</li>
<li>头</li>
<li>科</li>
<li>科</li>
</ul>
<ul type="circle">
<li>回</li>
<li>头</li>
<li>科</li>
<li>科</li>
</ul>
</body>
</html>
九.<div>与<span>
- div全称为division，表示“分割、分区”之意。<div>标签用来划分一个区域，或相当于一个容器，可以容纳段落、标题、表格、图片等各种标签。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>,用来将网页分割成独立的，不同的部分。
- div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
- span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
- 块级元素与行内元素的区别： 所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。 这两个元素是专门为定义CSS样式而生的。
注意：
关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，
它只能包含其它内联元素。
总结：
- .独占一行的块级标签 h1~h6、p、div、hr
- 在一行显示的行内标签/内联标签 a、span、img、b/i/u/s
- 标签的嵌套 （标签可以嵌套标签）
- 尽量不要用内联标签包块儿级标签
- p标签不能嵌套p标签
- p标签不能嵌套div标签
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
