HTML_note-CSDN博客

本文链接：https://blog.csdn.net/weixin_46094523/article/details/136620516

本文是HTML学习笔记，涵盖HTML概述、元素、属性、路径等基础知识，还介绍了常用标签，如标题、段落、图片、链接、列表、表格和表单等。详细讲解了各标签的作用、用法及注意事项，为学习HTML提供了全面的参考。

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

简介

HTML学习笔记，来源：菜鸟教程、MDN Web Docs、黑马程序员
HTML学习思维导图：
在这里插入图片描述

概述

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。

HTML文档详解

<!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
<html></html> — <html> 元素。该元素包含整个页面的内容，也称作根元素。
<head></head> — <head>元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> — <title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> — <body> 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

注意：HTML中的空白
无论你在 HTML 元素的内容中使用多少空格（包括一个或多个空白字符或换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。

元素

图片摘自MDN

这个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

注：不包含任何内容的元素称为空元素。比如 <img> 元素：

<img src="images/firefox-icon.png" alt="My test image" />

本元素包含两个属性，但是并没有结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

属性

元素也可以有属性（Attribute）：

在这里插入图片描述

属性应该包含：

在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
属性的名称，并接上一个等号。
由引号所包围的属性值。（单双引号均可，在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号）

注：布尔属性
有时你会看到没有值的属性，这也是完全可以接受的。这些属性被称为布尔属性。布尔属性只能有一个值，这个值一般与属性名称相同。
eg：

<input type="text" disabled="disabled" />

方便起见，我们完全可以将其写成以下形式：

<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />

<!-- 下面这个输入框不包含 disabled 属性，所以用户可以向其中输入 -->
<input type="text" />

适用于大多数HTML元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

路径

相对路径

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

相对路径分类	符号
同一级路径	.
下一级路径	/
上一级路径	…/

绝对路径

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

“D:\web\img\logo.gif”
或完整的网络地址
“http://www.itcast.cn/images/logo.gif”

注释

<!-- 我在注释内！ -->

特殊字符

实体引用：
在 HTML 中，字符 <、>、"、’ 和 & 是特殊字符。它们是 HTML 语法自身的一部分，那么你如何将这些字符包含进你的文本中呢，比如说如果你真的想要在文本中使用符号 & 或者小于号，而不想让它们被浏览器视为代码并被解释？
我们必须使用字符引用——表示字符的特殊编码，它们可以在那些情况下使用。每个字符引用以符号 & 开始，以分号（;）结束。

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
X	乘号	×
℃	摄氏度	°

常用标签

标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题。 <h6> 定义最小的标题。

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

注意：请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。

水平线

<hr/>标签在HTML页面中创建水平线，这是一个空标签

<hr/>

段落

HTML 可以使用<p>将文档分割为若干段落。

<p>
    这是一个段落
</p>
<p>
    这是另一个段落
</p>

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙

换行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用该标签<br/>

<p>
    这个段落<br>演示了换行效果
</p>

注意：我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

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

文本格式化

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

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

语义	标签	说明
加粗	strong或b	推荐使用strong，语义更强烈
倾斜	em或i	推荐使用em
删除线	del或s	推荐使用del
下划线	ins或u	推荐使用ins

图片

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

<img src="URL" />

属性	值	说明
src	图片路径	必须属性，指定图像文件的路径和文件名。
alt	文本	替换文本；图像不能显示时会显示的文字
title	文本	提示文本；鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细
注：单独调整宽度或高度，其会等比例缩放

div和span

<div> 和<span> 是没有语义的，它们就是一个盒子，用来装内容的。

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

特点：div是块元素、span是行元素

链接

超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址。

eg：通过将文本或其他内容包裹在 <a>元素内，并给它一个包含网址的 href属性（也称为超文本引用或目标，它将包含一个网址）来创建一个基本链接。

<p>
  我创建了一个指向
  <a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的链接。
</p>

常见属性：

属性	描述
href	用于指定链接目标的url地址
target	用于指定链接页面的打开方式：_self默认值 _blank新窗口打开

链接类型：

类型	描述
外部链接	href为网址
内部链接	网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 `< a href="index.html"> 首页 </a >`。
空链接	如果暂时没有确定链接目标时，`< a href="#"> 首页 </a >`
下载链接	如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
网页元素链接	在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
锚点链接	点击链接,可以快速定位到页面中的某个位置

关于锚点链接：

1.在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a> 
2.找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3>
点击即会跳转到对应id位置

列表

无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。无序列表的基本语法格式如下：

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

注意：

无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。
有序列表的基本语法格式如下：

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

注意：

在<ol></ol>中只能嵌套<li><\li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不允许的
<li>与</li>之间相当于一个容器，可以容纳所有元素
有序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd> 
</dl>

表格

用法

表格的作用：展示数据，它可以让数据显示的非常的规整。

<table>
    <tr>
        <td>hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>hello</td>
        <td>world</td>
    </tr>
</table>

<table> </table> 是用于定义表格的标签。
<tr> </tr> 标签用于定义表格中的行，必须嵌套在<table> </table>标签中。
<td> </td> 用于定义表格中的单元格，必须嵌套在<tr> </tr>标签中。
字母 td 指表格数据（table data），即数据单元格的内容。

表头单元格标签

<table>
    <tr>
    	<th>name</th>
        <th>number</th>
    </tr>
    <tr>
    	...
    </tr>
</table>

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。<th> 标签表示 HTML 表格的表头部分(table head 的缩写)
表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中

表格属性

属性	值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
注：表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置。

表格结构标签

因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分；在表格标签中，分别用：<thead>标签表示表格的头部区域、<tbody>标签表示表格的主体区域. 这样可以更好的分清表格结构。

<thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。一般是位于第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
以上标签都是放在 <table></table> 标签中。

<table>
    <thead>
        <tr>
            <td>姓名</td>
            <td>学号</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>YELLOW</td>
            <td>007</td>
        </tr>
        <tr>
            <td>BLACK</td>
            <td>03</td>
        </tr>
    </tbody>
</table>

table {
    border: 1px solid black;/*表格边框*/
}
td {
    border: 1px solid black;/*单元格边框*/
    text-align: center;
}

合并单元格

可以把多个单元格合并为一个单元格

合并单元格方式

跨行合并：rowspan="合并单元格的个数"，最上侧单元格为目标单元格, 写合并代码
跨列合并：colspan="合并单元格的个数"，最左侧单元格为目标单元格, 写合并代码

合并单元格步骤：

先确定是跨行还是跨列合并。
找到目标单元格. 写上合并方式 = 合并的单元格数量。
比如：<td colspan="2"></td>。删除多余的单元格。

<body>
    <table>
        <tr>
            <td colspan="3">格子</td>


        </tr>
        <tr>
            <td rowspan="2">格子</td>
            <td>格子</td>
            <td>格子</td>
        </tr>
        <tr>

            <td>格子</td>
            <td>格子</td>
        </tr>
        <tr>
            <td>格子</td>
            <td>格子</td>
            <td>格子</td>
        </tr>
    </table>
</body>

table {
    margin:0 auto;
    text-align: center;
    border: 1px solid black;

}
td {
    border: 1px solid black;

}

表单

作用

作用：收集用户信息

组成

在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

表单域

表单域是一个包含表单控件的区域。
在HTML标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器。

<form action=“url地址” method=“提交方式” name="表单域名称">
	各种表单元素控件
</form>

其常用属性：

属性	值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分用一个页面中的多个表单域

注意：

在我们写表单元素之前,应该有个表单域把他们进行包含
表单域是 form标签

表单控件

input

在表单元素中 <input> 标签用于收集用户信息。
在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="value"  />

<input /> 标签为单标签，type 属性设置不同的属性值用来指定不同的控件类型：

值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

属性	值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

name和value是每个表单元素都有的属性值，主要给后台人员使用
name表单元素的名字，要求单选按钮和复选框要有相同的name值
checked属性主要针对于单选按钮和复选框，主要作用是一打开页面，就默认选中某个表单元素
maxlength是用户可以在表单元素输入的最大字符数，一般较少使用

eg：

<form>
    <label for="username">uesrname</label>
    <input type="text" value="please input" id="username">
</form>

label

<label> 标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex" />

注： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

select

<select> 标签控件定义下拉列表。

<select>
   <option>选项1</option>
   <option>选项2</option>
   <option>选项3</option>
   ...
</select>

textarea

使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

<textarea rows="3" cols="20">
    文本内容 
</textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。