前端基础【HTML基础】-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_54230514/article/details/135533525

本文围绕Web标准和HTML展开。介绍了Web标准的必要性、构成，强调其能统一浏览器显示效果、减少开发量等优点。详细阐述HTML语法规范，包括标签类型，还介绍了HTML常用标签，如标题、段落、图像、超链接、表格、列表等标签的使用方法和注意事项。

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

文章目录

前言
- Web标准
- - 为什么需要Web标准？
  - Web标准的构成！
一、HTML语法规范
二、HTML标签

前言

Web标准

W3C：万维网联盟，国际最著名的标准化组织之一

Web 标准：W3C 组织和其他标准化组织为 Web 开发制定的一系列标准的集合

为什么需要Web标准？

浏览器不同，解析渲染显示的页面效果就有些许差异，通过 Web 标准可以统一浏览器解析显示效果，同时大大减少开发者的工作量（一套代码，多种浏览器平台兼容运行）

遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
- 让 Web 开发前景更广阔
- 网页能被更广泛的设备访问
- 更容易被搜索引擎搜索（排名靠前）
- 降低网站的流量费用
- 使网站更易于维护
- 提高页面的加载速度

Web标准的构成！

主要包括三个方面：结构、表现、行为。

**结构：**用于对网页元素进行整理和分类，主要指 HTML
**表现：**用于设置网页元素的版式、大小、颜色等外观样式，主要指 CSS
**行为：**网页模型的定义及交互方式的编写，主要指 JavaScript

Web 标准提出的最佳体验方案：结构、样式、行为 相互分离

**简单的理解：**结构写到 .html 文件中、表现写到 .css 文件中、行为写到 .js 文件中
**一句话解释：**结构类似身体、表现类似衣服、行为类似动作（结构是一切的基础）

一、HTML语法规范

HTML 标签是由尖括号包围的关键字词，例如：<html>。

HTML 标签通常是成对出现的，例如：<html> 和 </html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。

有些特殊的标签必须是单个标签，例如：<br />，我们称为单标签。注意：/ 之前有一个空格（Coding Style 编码风格）。

每个标签原则上都应该有结束符，即： /，所以单标签的最后要加 / 以表示结束，当然不加也是可以被浏览器正常解析的。

HTML5 规范中明确说明单标签 / 是可以忽略的，目前的实际开发中习惯不给单标签添加斜线。

任何标签都建议不要大写，即便是 <!doctype html> 标签

二、HTML标签

2.1 标签关系

包含关系

<head>
    <title></title>
</head>

并列关系

<head>
</head>
<body> 
</body>

2.2 第一个HTML网页

每个网页都会有一个基础的结构标签（骨架标签：4组），页面内容也是在这些基础标签上书写的。

HTML 页面也称为 HTML 文档

【HTML 基础结构】

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

标签名	定义	说明
`<html>` `</html>`	根标签	页面中最大的标签（最基础的标签）
`<head>` `</head>`	头部标签	在 head 标签中我们必须要设置 title 标签
`<title>` `</title>`	标题标签	页面自己的网页标题
`<body>` `</body>`	主体标签	包含文档的所有内容

网页 title 示例：
文件注意.html的后缀：
在这里插入图片描述

<!doctype> 文档类型声明，作用是告诉浏览器应该使用哪种 HTML 版本来解析渲染网页

<!doctype html>
<!-- 当前页面采用 HTML5 版本 -->
<!DOCTYPE HTML>
<!-- 许多人习惯大写（我们就大写吧） -->

注意：
- <!doctype> 声明位于文档最前面的位置，处于 <html> 标签之前
- <!doctype> 文档类型声明标签，不属于 HTML 标签
- 请默认统一指定 HTML5 版本 <!doctype html>

2.3 HTML常用标签

标签的含义：**简单的理解：**标签的含义，即：这个标签是用来干嘛的

2.3.1 标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。
HTML 提供了 6 个等级的网页标题，即：<h1> 到 <h6>。

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

在这里插入图片描述

特点：
- 加了标题的文字会自动加粗，字号也会依次变大
- 一个标题就独占一行，同一行标题后不会再放置其他任何内容（后期可以通过 CSS 修改）

级别越大的标题标签，对网页元素的强调性越强，同时也和浏览器 SEO 优化有关。

故：标题标签不得滥用，要用在合适的地方！

2.3.2 段落和换行标签

在 HTML 标签中，<p> 标签用于定义段落，它可以将整个网页分为若干个段落

<p>我是一个段落标签</p>

单词 paragraph 的缩写，意为：段落。

**便签语义：**可以把 HTML 文档分割为若干段落。

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

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

<br>

单词 break 的缩写，意为：打断、换行。

**标签语义：**强制换行。

特点：

<br> 是个单标签
<br> 标签只是简单地开始新的一行，跟段落不一样，所以不会产生段间距

分割线标签：<hr>。

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

在这里插入图片描述

2.3.3 文本格式化标签

需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要。

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

注意：<em> 标签不只是单纯的用于倾斜文本，其核心的意义在于对元素进行强调！所以在后期的开发中可以把一些特殊性、强调性的元素放在 em 标签中，然后再对 em 这个盒子进行样式设置，这比把其放入其他盒子（如：span）中要更合理，同理 <strong> 标签页适合放一些重点强调的元素。

2.3.4 <div>和<span>标签

<div> 和 <span> 是没有语义的，它们就是两种盒子，用来对网页进行布局和装其他内容。

<div>这是头部</div>
<span>今日价格</span>

div 是 division 的缩写表示：分割、分区。

span 意为：跨度、跨距。

特点：

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

说明：后期可以通过 CSS 将 div 与 span 之间的特性相互转换。

拓展： span 标签不单单是用于布局，对于一些需要单独修饰和设置的元素，可以将其用 span 标签嵌套起来，然后就可以单独对其进行设置（比如：在一个 p 标签的段落中要对其中某一句话单独设置样式，那么就可以用 span 将这句话单独嵌套起来，这样就方便对其单独设置样式还不会影响段落中的其他内容，这其实也是利用了 span 一行可以放置多个盒子的特性），不过对于特殊且具有强调性的元素建议使用 em，对于重点强调但不特殊的的元素建议使用 strong。

 <!-- 4. div  和 span 标签 
        <div>  块级标签  盒子 在网页中画出一个盒子的区域 默认是一条线，因此需要自定义长宽-->
            <!-- style 是标签属性:
            border盒子边框：-->
            <div style="width: 100px ;height: 100px;border: 5px solid black;">这是盒子标签</div>
            <div>这是一个盒子标签</div>


            <!--    <span> 行级标签  -->
            <span>这是块</span><span>这是块</span><span>这是块</span>
            <!-- 可以自动扩大 -->
            <span>这是标签这是块标签这是块标签这是块标签这是块标签这是块标签这是块标签这是块标签这是块标签
                这是块标签这是块标签这是块标签这是块标签这是块标签这是块标签这是块标签这是块标签这是块标签</span>
            <span style="border: 5px solid green;">这是一个span标签</span>

在这里插入图片描述

2.3.5 图像标签和路径

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

<img src="图像URL">

单词 image 的缩写，意为图像

src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名

URL 是 统一资源定位符（通俗理解：地址、网址）

所谓属性：简单理解就是属于这个图像标签的特性

图像标签的其他属性：

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

图像标签的注意点：

图像标签可以同时拥有多个属性（其它标签也是同理）
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开（其它标签也是同理）
属性均采取键值对的格式，即：key="value" 的格式，属性="属性值"
设置图像的宽度与高度时：一般设置其中之一便可，另外一个会自动按比例适配
设置宽高时，可以使用百分数作为值，此时图片大小会以当前父元素的大小为基础进行比例缩放，这样做的好处在于当父元素改变大小时，图片也会随比例同等缩放

（2）路径

相对路径

相对路径：以引用文件所在位置为参考基础，而建立出目录路径

相对路径分类	符号	说明
同一级路径	`.`	如：`<img src="baidu.png" />`
下一级路径	`/`	如：`<img src="image/baidu.png" />`
上一级路径	`../`	如：`<img src="../image/baidu.png" />`

绝对路径

绝对路径：指目录下的绝对位置，直接到达目的位置，通常是从盘符开始的路径

如 Windows 系统的绝对路径：D:\web\img\logo.png

网络地址

https://github.com/JERRY-Z-J-R/I-love-you-3-thousand/raw/master/mark-img/I-Love-You.gif

注意：

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

这里所说的绝对路径为 \（反斜杠）指的是在 Windows 环境中，而 Linux 系统依旧是正斜杠

<body>
    <!-- 图像标签 img  单标签 src属性:放的是图片的地址！！   alt:图像内容展示-->
    <!-- 本地图片展示
             1. 相对路径 :
             2. 绝对路径 -->
    <img src="./linux.jpg" alt="">

    <img src="C:\Users\XXX\Desktop\MySQL.jpg" alt="">

    <!-- 网络图片展示 -->
    <img src=https://tse4-mm.cn.bing.net/th/id/OIP-C.Yft5o2d_9_P-ZhUbsdrZjQHaFj?w=89&h=89&c=1&rs=1&qlt=90&r=0&dpr=1.5&pid=InlineBlock"
        alt="">
</body>

在这里插入图片描述

2.3.6 超链接标签

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

（1）链接的语法格式

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

单词 anchor 的缩写，意为：锚

两个属性的作用如下：

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

（2）链接分类

**外部链接：**例如：<a href="http://www.baidu.com">百度</a>
**内部链接：**网站内部页面之间相互链接，直接链接内部页面名称即可，例如： <a href="./about.html">关于页</a>
**空链接：**如果当时没有确定链接目标时，<a href="javascript:void(0)">哪也不去</a>"，当用户点击链接时 void(0) 计算为 0，但 Javascript 上没有任何效果
**下载链接：**如果 href 里面地址是一个文件或者压缩包（前提：路径包含文件类型后缀名，如：.exe、.zip 等），便会下载这个文件，如果是图片、视频、PDF则会打开一个新窗口预览
**网页元素链接：**在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都可以添加超链接
**锚点链接：**点击链接，可以快速定位到当前页面中的某个位置
- 在链接文本的 href 属性中，设置属性值的 #名字 的形式，如：<a href="#two">第2集</a>
- 找到目标位置标签（此处以 h3 标签为例），里面添加一个 id属性="刚才的名字"，如：<h3 id="two">第2集介绍</h3>
- <a href="#"></a> 定位到页面顶部

    <!-- 超链接 四种状态(在css中重点)：激活、鼠标悬浮、点击、已访问-->
    <a href="https://www.baidu.com">百度</a>

在这里插入图片描述

2.4 表格标签

表格的基本语法

<table>
    <tr>
        <td>单元格</td>
        ...
    </tr>
    ...
</table>

<table> </table> 是用于定义表格的标签
<tr> </tr> 表示行，用于定义表格中的行，必须嵌套在 <table> </table> 标签中
<td> </td> 表示列，用于定义表格中的单元格，必须嵌套在 <tr> </tr> 标签中
字母 td 指表格数据（table data），即：数据单元格的内容
单元格 td 里面可以放任何的元素

- 表头单元格标签

一般表头单元格位于表格的第一行或第一列，作用是：突出重要性，表头单元格里面的文本内容默认加粗居中显示。

<th> 标签表示 HTML 表格的表头部分（table head 的缩写）。

<table>
    <tr>
    	<th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        ...
    </tr>
    ...
</table>

表格属性
注意：表格标签的属性在实际开发中并不常用，而是通过后面的 CSS 来设置，这里了解即可
以下属性都写在 table 开始标签内，多个属性之间用空格隔开。

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="240">
    ...
</table>

属性名	属性值	描述
`align`	`left`、`center`、`right`	规定表格相对周围元素的对齐方式（默认 left），注意指的是整个表格的对齐方式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐方式（单元格内容对齐可以通过：`style="text-align: center;"` 设置）（了解）
`border`	`1` 或 `""`	规定表格单元是否拥有边框，默认为 “”，表示没有边框（了解）
`cellpadding`	像素值	规定单元边沿与其内容之间的空白，默认 1 像素（了解）
`cellspacing`	像素值	规定单元格之间的空白，默认 2 像素（了解）
`width`	像素值或百分比	规定表格的宽度（了解）
`height`	像素值或百分比	规定表格的高度（了解）

表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成：表格头部 和 表格主体 两大部分
在表格标签中，分别用：<thead> 标签表示表格的头部区域，<tbody> 标签表示表格的主体区域，这样可以更好的分清表格结构
<thead> </thead>：用于定义表格的头部，<thead> 内部必须拥有 <tr> 标签，一般是位于第一行，且一般 <tr> 标签中推荐放置 <th> 标签
<tbody> </tbody>：用于定义表格的主体，主要用于放数据本体
以上标签都是放在 <table> </table> 标签中

<table>
    <!-- 头部区域 -->
    <thead>
    	<tr>
    		<th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        	...
    	</tr>
    </thead>
    <!-- 主体区域 -->
    <tbody>
        <tr>
            <td>周吉瑞</td>
            <td>男</td>
            <td>18</td>
            ...
        </tr>
        ...
    </tbody>
</table>

2.5 列表标签

表格是用来显示数据的，那么列表就是用来布局的
列表最大的特点就是：整齐、整洁、有序、它作为布局会更加自由和方便

在实际开发中凡是遇到排列整齐的简洁内容，都可以使用列表来进行布局
合理的使用列表布局可以有效提高 SEO
根据使用情景不同，列表可以分为三大类：无序列表、有序列表 和 自定义列表。

标签名	定义	说明
`<ul>` `</ul>`	无序标签	里面只包含 li，没有顺序，使用较多，li 里面可以包含任何标签
`<ol>` `</ol>`	有序标签	里面只包含 li，有顺序，使用相对较少，li 里面可以包含任何标签
`<dl>` `</dl>`	自定义标签	里面只能包含 dt 和 dd，dt 和 dd 里面可以放任何标签，dd 一般作为对 dt 的细分描述

在这里插入图片描述