绝对都是干货---HTML 基础常用标签总结_hbuilderx 中文尖括号-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44989801/article/details/106615855

本文详细介绍了HTML的基础结构，包括字符集、DTD文档声明，以及H系列标题标签、P标签、HR标签、IMG标签、A标签和BASE标签的用法和注意事项。强调了标签的语义性和实际应用，如图片显示、链接跳转、假链接和锚点的使用。

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

一. 基本结构

<html>：告诉游览器我是一个网页。
    <head>:用于给网站添加一些配置信息。很多信息不给用户看，用来给游览器看。
	<title> </title>：专门用于指定网站的标题。
title标签必须写在head标签里面
    </head>
    <body>
	给用户看的内容。
    </body>
</html>

注意：一对html里面只有一对body。

1.字符集

<meta char set="UTF-8"   />

meatal标签的作用：就是用来指定当前网页的字符集。

1.1 字符集
字符集就是字符的集合，也就是很多对字符堆在一起。在网页中指定字符集的意义就是告诉游览器如何查找内容。

1.2 -GBK(GB2312)和UTF-8区别
GBK里面存储的字符比较少，仅存了一些常用的汉子和一些常用的外文。
UTF-8里面存储世界上所有的方法。

1.3 在企业开发的过程中如何选择GBK和UTF-8？
2.3.1 如果网站仅仅包含中文，推荐使用GBK，如果网站除了中文以外，使用UTF-8。
1.3.2 在html文件里指定字符集必须与这个保存的文件的字符集一致，否则还是会出现乱码。

2.DTD文档声明

2.1 什么是DTD文档声明？
答：为了能使游览器能正常编译/解析网页。（html的版本有很多）

2.2.DTD文档声明

例如：htlm5的文档声明：<!DOCTYPE htlm>

2.3 注意事项：

2.3.1 DTD文档声明必须写在文档第一行
2.3.2.DTD文档不区分大小写。
2.3.3.DTD文档声明不是一个标签。（W3C规定的）
2.3.4.虽然DTD文档声明是告诉游览器我们要用哪一个版本的标准来解析文档。但是游览器并不完全依赖这个DTD文档声明。但是由于W3C要求必须写在第一行，为了规范，我们写在第一行。

二. 基础标签

1. H系列的标签：

1.1 作用：专门用来给文本添加标题语义。

1.2 注意点：

1.2.1 H标签不是用来修改文本样式的，而是用来给文本添加语义的。
1.2.2 一共有 H1–H6。超过6则无效
1.2.3：被H系列标签的文本独占一行，：H1最大，H6最小。
1.2.4一个界面最好只有一个H1标签。

2. P标签

2.1 作用：告诉游览器哪些文字是一段文本。
2.2 格式：<p> </p>
2.3 注意点：标签的文本独占一行，

3. -Hr标签(单标签)

3.1 作用 ：在游览器里面实现一条分割线。
3.2 格式：<hr/>

4.img标签

4.1 作用：image的缩写。告诉游览器我们需要显示一张图片。

4.2 img标签的格式：<img src= "图片的地址" width=‘’‘图片宽度’ height= “图片高度” alt=“图片找不到是显示的文字” title=" 当鼠标悬停时，显示的文字">

4.2.1 src是英文source的缩写，所以img标签里面的src是用来告诉img标签，需要显示的图片名称。
加粗样式
4.3 注意点：

4.3.1 和H系列/p标签不一样，img标签不会独占一行。
4.3.2 如果img标签没有指定宽高，系统会按照图片的宽高来显示。
4.3.3 属性title :用于告诉游览器，当鼠标悬停在图片上的时候，需要弹出来加粗样式的描述框中显示什么内容。
4.3.4 属性alt : alternate（缩写）用来告诉游览器，当需要的图片找不到时，需要显示的信息。

5. a标签

5.1 作用：用于控制页面与页面之间的跳转。

5.2 格式：

<a href = "指定需要跳转的界面地址">展现给用户看的内容</a>

5.3 a标签的其他属性

5.3.1 target：-self:本身跳转 , -blank：新的选项卡跳转

5.3.2 title：用来控制鼠标悬停时，显示的提示文本。

5.4 注意点
5.4.1. 不仅仅可以点击文字进行跳转，也可以点击图片进行跳转。

5.4.2. 一个a标签必须有一个herf属性，否则无法跳转。

5.4.3. 如果通过a标签的herf属性指定一个URL地址，必须在地址前面添加一个http://
5.4.4. a标签herf属性也可以跳转到本地地址。

6.base标签

6.1 作用：专门用来控制所有链接需要如何打开。
6.2 格式：<base target="">
6.3 如果同时在base和a里面同时指定了target属性，以a标签里面的为准。
6.4 base标签必须写在head里面。

7. 假链接

7.1 定义及意义：可以点击但不能跳转的链接就是假链接。在企业开发中经常使用。
7.2.格式 ： 1）# 。2）JavaScript：
7.3两者之间的区别 ： #的假链接会直接回到网页顶部。后者不会。

8.锚点

8.1 通过a标签跳转到指定位置
8.2 给标签添加一个id属性。
8.3.格式：

<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>

8.4 使用a标签进行跳转时是没有过度动画的。