HTML 参考手册

CJY2025/5/24大约 5 分钟

HTML 参考手册

提示

每个 HTML 演示都可以点击左上角小箭头查看源代码

基本格式

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML基本格式</title>
</head>
<body>
	<!--这是一条注释-->
	我的第一个网页
</body>
</html>

文本

标题

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

注

HTML 中最多只有六级标题。

段落

<p>段落1</p>
<p>段落2</p>

文本样式

<p><strong>粗体文本</strong></p>
<p><em>斜体文本</em></p>
<p>SO<sub>4</sub><sup>2-</sup>上标和下标</p>
<p><s>中划线</s></p>
<p><u>下划线</u></p>
<p><big>大字号</big></p>
<p><small>小字号</small></p>

注意

<big> 标签已被 HTML 5 废弃，可使用 CSS 实现。

自闭合标签

水平线标签：<hr>
换行标签：这是第一行<br>这是第二行

注

自闭合标签：只有开始符号而没有结束符号，不可以在内部插入标签或文字。

<meta> <link> <br> <hr> <img> <input> 等都是自闭合标签。

特殊符号

注

空格： 。

行内元素与块元素

注

行内元素：不会换行，不可以包含块元素。

<strong> <em> <a> <span> 等都是行内元素。

块元素：自动换行，不能和其他元素在同一行。

<h1>~<h6> <p> <div> <hr> <ol> <ul> 等都是块元素。

列表

有序列表

请按以下步骤完成：
<ol>
	<li>第一步</li>
	<li>第二步</li>
	<li>第三步</li>
</ol>

可以用 type 属性设置符号：

阿拉伯数字

请按以下步骤完成：
<ol type="1">
	<li>第一步</li>
	<li>第二步</li>
	<li>第三步</li>
</ol>

小写英文字母

请按以下步骤完成：
<ol type="a">
	<li>第一步</li>
	<li>第二步</li>
	<li>第三步</li>
</ol>

大写英文字母

请按以下步骤完成：
<ol type="A">
	<li>第一步</li>
	<li>第二步</li>
	<li>第三步</li>
</ol>

小写罗马数字

请按以下步骤完成：
<ol type="i">
	<li>第一步</li>
	<li>第二步</li>
	<li>第三步</li>
</ol>

大写罗马数字

请按以下步骤完成：
<ol type="I">
	<li>第一步</li>
	<li>第二步</li>
	<li>第三步</li>
</ol>

无序列表

需要准备以下食材：
<ul>
	<li>苹果</li>
	<li>西瓜</li>
	<li>香蕉</li>
</ul>

同样可以使用 type 属性设置符号：

实心圆

需要准备以下食材：
<ul type="disc">
	<li>苹果</li>
	<li>西瓜</li>
	<li>香蕉</li>
</ul>

空心圆

需要准备以下食材：
<ul type="circle">
	<li>苹果</li>
	<li>西瓜</li>
	<li>香蕉</li>
</ul>

正方形

需要准备以下食材：
<ul type="square">
	<li>苹果</li>
	<li>西瓜</li>
	<li>香蕉</li>
</ul>

注意

<ol> 和 <ul> 的子标签只能是 <li>，而 <li> 中还可以包含其他标签。

定义列表

<dl>
    <dt>HTML</dt>
    <dd>制作网页的标准语言，控制网页的结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，控制网页的样式</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言，控制网页的行为</dd>
</dl>

注

这种列表不是很常用。<dt> 是定义名词，<dd> 是定义描述。

列表的嵌套

请按以下步骤完成：
<ol>
	<li>第一大步：
		<ul>
			<li>第 1 小步</li>
			<li>第 2 小步</li>
			<li>第 3 小步</li>
		</ul>
	</li>
	<li>第二大步</li>
	<li>第三大步</li>
</ol>

表格

提示

为更方便观察，本文档的表格统一使用以下 CSS 样式：

table {
    border-collapse: collapse;
    margin: 0 auto;
}
caption {
	padding: 10px 15px;
	font-size: 22px;
}
thead {
	background-color: rgba(22, 93, 255, 0.3);
}
th, td {
	border: 2px solid #0C6CD4;
	padding: 8px 15px;
}

基本结构

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

table {
    border-collapse: collapse;
    margin: 0 auto;
}
caption {
	padding: 10px 15px;
	font-size: 22px;
}
thead {
	background-color: rgba(22, 93, 255, 0.3);
}
th, td {
	border: 2px solid #0C6CD4;
	padding: 8px 15px;
}

注

<tr> 代表一行，<td> 代表一个单元格。

完整结构

<table>
    <caption>考试成绩表</caption>
    <thead>    
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>英语</th>
            <th>数学</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
       <tr>
            <td>平均</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
    </tfoot>
</table>

table {
    border-collapse: collapse;
    margin: 0 auto;
}
caption {
	padding: 10px 15px;
	font-size: 22px;
}
thead {
	background-color: rgba(22, 93, 255, 0.3);
}
th, td {
	border: 2px solid #0C6CD4;
	padding: 8px 15px;
}

注

以下是标签的解释：

标签名	解释
`<caption>`	表格的标题
`<thead>`	表头
`<tbody>`	表身
`<tfoot>`	表脚

合并行

<table>
    <tr>
        <td>姓名:</td>
        <td>小明</td>
    </tr>
    <tr>
        <td rowspan="2">喜欢的水果:</td>
        <td>苹果</td>
    </tr>
    <tr>
        <td>香蕉</td>
    </tr>
    <tr>
        <td>性别:</td>
        <td>男</td>
    </tr>
</table>

table {
    border-collapse: collapse;
    margin: 0 auto;
}
caption {
	padding: 10px 15px;
	font-size: 22px;
}
thead {
	background-color: rgba(22, 93, 255, 0.3);
}
th, td {
	border: 2px solid #0C6CD4;
	padding: 8px 15px;
}

注

rowspan = 合并的行数

合并列

<table>
    <thead>
    	<tr>
    		<td>姓名</td>
    		<td colspan="2">喜欢的水果</td>
    		<td>性别</td>
    	</tr>
    </thead>
    <tbody>
    	<tr>
    		<td>小明</td>
    		<td>苹果</td>
    		<td>香蕉</td>
    		<td>男</td>
    	</tr>
    </tbody>
</table>

table {
    border-collapse: collapse;
    margin: 0 auto;
}
caption {
	padding: 10px 15px;
	font-size: 22px;
}
thead {
	background-color: rgba(22, 93, 255, 0.3);
}
th, td {
	border: 2px solid #0C6CD4;
	padding: 8px 15px;
}

注

colspan = 合并的列数