HTML基础常用标签_html基础标签-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_54034052/article/details/135341619

本文详细介绍了HTML中的各种基础标签，包括浏览器标签、文档标签、头部引用、标题层次、段落处理、换行、分割线、文本格式化、div和span的区别、图像标签以及超链接的使用。特别强调了SEO优化和屏幕阅读器适配的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、浏览器标签

在这里插入图片描述

2、文档标签

标志使用什么语言中文是’zh’
在这里插入图片描述

3、头部标签

做外部资源的引用
在这里插入图片描述

一些选择器会写在头部中引用

4、身体标签

写一些常用标签，通常文本内容等存放在其中
在这里插入图片描述

5、标题标签

标题标签，h1-h6标题大小不同

<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>

在这里插入图片描述

6、段落标签和换行标签

文本在一个段落中会根据浏览器窗口的大小自动换行

对于中文段落来说无论如何都会自动换行，但是对于英文段落来说如果字母是连续的（aaa…），那么浏览器会认为该段落整体都是一个单词不会自动换行，要想英文段落自动换行字母之间得有空格。
段落和段落之间保有空隙（段间距）
同一段落里的不同行文字之间也有一定的空隙（行间距）

<p>段落标签</p>

在这里插入图片描述

换行

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。
如果希望某段文本强制换行显示，就需要使用换行标签 <br>。

<br>

在这里插入图片描述

分割线

<hr>
<!-- 某些时候需要对内容块进行分割时会用到分割线标签 -->

注意：实际开发中并不常用 hr 作为分割线，而是使用 CSS 盒子模型中的边框来实现分割线效果，或是利用一个空盒子设置长宽高及背景颜色来实现分割线效果。

在这里插入图片描述

7、文本格式化标签

语义	标签	说明
加粗	`<strong>` `</strong>` 或 `<b>` `</b>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
倾斜	`<em>` `</em>` 或 `<i>` `</i>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
删除线	`<del>` `</del>` 或 `<s>` `</s>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
下划线	`<ins>` `</ins>` 或 `<u>` `</u>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者

8、<div>和<span>标签

<div> 标签用来布局，一行只能放一个 <div>，大盒子
<span> 标签用来布局，一行上可以放多个 <span>，小盒子

<!-- div —— 块标签    自带宽高 -->
<!-- border:边框 -->
<div>这是一个盒子标签</div>
<div style="width:100px ; height: 100px;border:5px solid rgb(82, 157, 254)">这是在盒子中</div>

<hr/>

<!-- span —— 行标签 （可以放置行类内容）  -->
<span style="border:5px solid greenyellow">这是一个行标签</span>
<span>这是一个行标签</span>

-，，，，，，

9、图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

<img src="图像URL">

图像标签的其他属性：

属性	属性值	说明
`src`	图片路径	必须属性
`alt`	文本	替换文本，图像显示失败时显示（为了提高 SEO 及适配屏幕阅读器，建议都把 alt 写上）
`title`	文本	提示文本，鼠标放到图片上，显示的提示文字
`width`	像素	设置图像的宽度（了解，后面通过 CSS 设置）
`height`	像素	设置图像的高度（了解，后面通过 CSS 设置）
`border`	像素	设置图像的边框粗细（了解，后面通过 CSS 设置）

<!-- --1本地图片 -->
<!-- ①相对路径 -->
<img src="2023-12-06_23-25-08-000.jpg">
<!-- ②绝对路径 -->
<img src="E:\JX3\SeasunGame\Game\JX3\bin\zhcn_hd\DCIM\2023-08-05_23-06-05-000.jpg">

<!-- --2网络图片 -->
<img src="https://sjbz-fd.zol-img.com.cn/t_s750x530c5/g5/M00/0F/0A/ChMkJlfJQsGIXMihABkV3H_04r4AAU7wAGrWNIAGRX0441.jpg"  alt="">

注意：
相对路径为 /（正斜杆），绝对路径为 \（反斜杆）
实际开发中建议使用相对路径或网络地址（都是 / 正斜杆）

10、超链接标签

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

<a href="跳转目标" target="目标窗口的弹出方式">文本、图像或其他内容</a>

两个属性的作用如下：

属性	作用
`href`	用于指定链接目标的 url 地址，（必须属性）当标签应用 href 属性时，它就具有了超链接的功能
`target`	用于指定链接页面的打开方式，其中 `_self` 在当前页面打开的方式（为默认值），`_blank` 在新窗口中打开的方式