HTML基础（二）_元素“h2”不能嵌套在元素“ul”内。-CSDN博客

本文链接：https://blog.csdn.net/weixin_45455252/article/details/118858590

文章目录

- HTML基础

HTML基础

文本标签

1、页面组成元素

一个静态页面，通常由以下4种元素组成：文本、图片、超链接、音频和视频。

这里还要强调以下，静态页面和动态页面的区别在于是否与服务器进行数据交互。

2、HTML文本

文本：标题、段落、换行、文本、水平线、特殊符号。

标题标签

在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6，6个标签在页面中的重要性以此降低。一个页面一般只能有一个h1标签。

标签的级别越大，字体也越大。标题标签h1~h6也是有一定顺序的，h1用于大标题，h2用于二级标题……以此类推。

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

title标签与h1标签：title标签用于显示地址栏的标题，而h1标签用于显示文章的标题。

段落标签

在HTML中，我们可以使用“p标签”来显示一段文字。

<p>段落内容</p>

段落标签会自动换行，并且段落与段落之间有一定的间距。

换行标签

换行标签：<br/>

<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>

使用p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会。

br标签是用来给文字换行的，而p标签是用来给文字分段的。

文本标签

常用的文本标签有以下8种：

	- 粗体标签：strong、b
	- 斜体标签：i、em、cite
	- 上标标签：sup
	- 下标标签：sub
	- 中划线标签：s
	- 下划线标签：u
	- 大字号标签：big
	- 小字号标签：small

strong标签和b标签的加粗效果是一样的，但在实际开发中，如果想要对文本实现加粗效果，尽量使用strong标签，而不要使用b标签，因为strong标签比b标签更具有语义性。

在实际开发中，如果想要实现文本的斜体效果，尽量使用em标签。

水平线标签

<hr />

div标签

div，全称division（分区），用来划分一个区域。div标签内部可以放入绝大多数其他的标签，如p标签、strong标签和hr标签等。

div标签最重要的用途是划分区域，然后结合CSS针对该区域进行样式控制。

<div id="">
			
</div>

自闭合标签

在HTML中，标签分为两种：一般标签和自闭合标签。

一般标签：由于有开始符号和结束符号，因此可以在内部插入其他标签或文字。如：div、p、strong
自闭合标签：由于只有开始符号而没有结束符号，因此不可以在内部插入标签或文字。如：meta、br、hr

块元素和行内元素

在HTML中，根据元素的表现形式，可将元素分为两类：块元素和行内元素。

块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。一般情况下，块元素内部可以容纳其他块元素和行内元素。如：h1~h6、p、div、br、hr
行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。如：strong、em、a、span

特殊符号

空格：  1个汉字约等于3个 。

特殊符号（易输入）
特殊符号（难输入）

列表标签

在HTML中，列表共有3种：有序列表、无序列表和定义列表。

有序列表

ol，即ordered list（有序列表）。li，即list（列表项）。

<!-- 有序列表 -->
		<ol>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项1</li>
		</ol>

<ol>和</ol>标志着有序列表的开始和结束，而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。

ol标签和li标签需要配合一起使用，不可以单独使用，而且<ol>标签的子标签也只能是li标签，不能是其他标签。

type属性：‘1’、‘a’、‘A’、‘i’、‘I’。对于有序列表的列表项符号，等学了CSS之后，我们可以不再使用type属性，而应使用liststyle-type属性。

无序列表

默认情况下，无序列表的列表项符号是●，我们可以通过type属性来改变其样式。

<!-- 无序列表 -->
		<ul>
			<li>列表项</li>
			<li>列表项</li>
			<li>列表项</li>
		</ul>

ul，即unordered list（无序列表）。li，即list（列表项）。<ul>和</ul>标志着一个无序列表的开始和结束，<li>表示这是一个列表项。一个无序列表可以包含多个列表项。

ul标签和li标签也需要配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。文本也不能直接放在ul元素内。

type属性：‘disc’、‘circle’、‘square’。对于无序列表的列表项符号，等学了CSS之后，我们可以不再使用type属性，而应使用liststyle-type属性。

在实际的前端开发中，无序列表比有序列表更为实用。更准确地说，一般使用的都是无序列表，几乎用不到有序列表。

定义列表

在HTML中，定义列表由两部分组成：名词和描述。

<!-- 定义列表 -->
		<dl>
			<dt>名词</dt>
			<dd>描述</dd>
		</dl>

dl即definition list（定义列表），dt即definition term（定义名词），而dd即definition description（定义描述）。

在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。

HTML语义化

HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义。例如，p标签，表示的是paragraph，标记的是一个段落；h1标签，表示的是header1，标记的是一个最高级标题。但div和span是无语义的标签，我们应该优先使用其他有语义的标签。

在HTML中，语义化是非常重要的一个思想。语义化提高了代码的可读性，语义化对于搜索引擎优化（即SEO）来说，也是极其重要的。

我们学习HTML的目的并不是记住所有的标签，而是在你需要的地方能使用正确的语义化标签。把标签用在对的地方，这才是学习HTML的目的所在。

表格标签

表格的作用：使用表格可以更清晰地排列数据。

基本结构

在HTML中，一个表格一般由以下3个部分组成：

	- 表格：**table**标签
	- 行：**tr**标签
	- 单元格：**td**标签

<table>
	<tr>
		<td>单元格1</td>
		<td>单元格2</td>
	</tr>
	<tr>
		<td>单元格3</td>
		<td>单元格4</td>
	</tr>
</table>

tr指的是table row（表格行）。td指的是table data cell（表格单元格）。

<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td>和</td>表示单元格的开始和结束。在表格中，有多少组“<tr></tr>”，就表示有多少行。

完整结构

一个表格的“完整结构”不是只有table、tr、td，还包括caption、th等。

在HTML中，表格一般都会有一个标题，我们可以使用caption标签来实现。

<caption>表格标题</caption>

一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题位于整个表格的第一行。

在HTML中，单元格其实有两种：一种是“表头单元格”，使用的是th标签；另一种是“表行单元格”，使用的是td标签。

<tr>
	<th>表头单元格1</th>
	<th>表头单元格2</th>
</tr>

th和td的区别：

	显示上：浏览器会以“粗体”和“居中”来显示th标签中的内容，但是td标签不会。
	语义上：th标签用于表头，而td标签用于表行。

表格语义化

一个完整的表格包含：table、caption、tr、th、td。为了更进一步地对表格进行语义化，HTML引入了thead、tbody和tfoot这3个标签。

thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。

表脚（tfoot）往往用于统计数据。对于thead、tbody和tfoot标签，不一定需要全部都用上，如tfoot就很少用。一般情况下，我们根据实际需要来使用这些标签。

合并行：rowspan

在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。

<tr>
	<td rowspan="2">合并行</td>
	<td>单元格</td>
</tr>

合并列：colspan

在HTML中，我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。

<tr>
	<td colspan="2">单元格</td>
</tr>