AI 摘要

文章系统梳理 HTML5 基础：从 DOCTYPE、html、head、body 文档骨架，到标题、段落、换行、水平线、图像、超链接等常用标签，并强调废弃标签的语义化替代；继而聚焦列表（无序、有序、定义）与表格（基本结构、跨行跨列）的完整用法，辅以示例代码与效果，帮助读者快速建立静态页面结构思维。

此摘要根据文章内容自动生成，仅用于文章内容的解释与总结

HTML5 基础

HTML 基本结构

HTML 文档的基本结构：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML 文档的基本结构是由三个部分组成：文档类型声明、head 标签和 body 标签。

  • <!DOCTYPE html>：位于 HTML 文档的第一行，告诉浏览器这是一个 HTML5 文件。
  • html 标签：是 HTML 文档的根标签，lang 属性表示文档的语言。
  • head 标签：定义文档的头部信息。只有一些特定的标签才允许放在 head 标签内，如 title 标题标签、meta 参数标签、scirpt 脚本标签、link 链接样式表标签、style 样式标签。
  • body 标签：用于定义 HTML 文档的正文内容。

HTML 网页中常见的标签：标题标签、段落标签等。

  • body 等成对的标签，分别叫开放标签和闭合标签。
  • 单独呈现的标签（空标签）如 hr 水平标签 ，用 / 来关闭空标签。

文档标题标签

title 标签用于设置 HTML 文档的标题，标题会显示在浏览器的选项卡栏上。

文档参数标签

meta 标签用于设置网页的摘要信息，包括字符集编码、网页关键词、网页描述等。

示例：使用文档参数标签设置网页的摘要信息

入口页面（index.html）：

<!-- 字符集编码：UTF-8通用编码、GB2312/GBK中文编码、ISO-8859-1英文编码、BIG5繁体编码 -->
<meta charset="UTF-8">

<!-- 网页关键词和描述，有利于SEO优化 -->
<meta name="keywords" content="关键词">
<meta name="description" content="描述">

内容标题标签

h1~h6 标签用于定义文档标题。

示例：使用内容标题标签定义文档标题

入口页面（index.html）：

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

示例效果：

段落标签

p 标签用于开始一个新的段落，当浏览器遇到 p 标签时，通常会在相邻的段落之间插入一些垂直的间距，这使得 p 标签内的文本内容形成了一个独立的段落。

示例：使用段落标签定义段落

入口页面（index.html）：

<p>床前明月光</p>
<p>疑似地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>

示例效果：

换行标签

br 标签用于强制换行，它只是一个简单的换行符，不会在浏览器中创建额外的空间或边距。

示例：使用换行标签实现文本换行

入口页面（index.html）：

床前明月光<br/>
疑似地上霜<br/>
举头望明月<br/>
低头思故乡<br/>

水平标签

hr 标签用于展示一条水平线。

示例：使用水平标签定义水平线

入口页面（index.html）：

<h1>静夜思</h1>
<hr/>
<p>床前明月光</p>

示例效果：

字体样式标签

font 标签用于设置字体样式、字体大小、字体颜色。该标签在 HTML5 中已经废弃。

b 标签用于设置文本为粗体。该标签已经被废弃，使用 strong 标签代替。

small 标签用于设置小字体的描述、声明等文本。

u 标签用于设置文本下划线。该标签已经被废弃，使用 ins 标签代替。

i 标签用于设置文本倾斜。该标签已经被废弃，使用 em 标签代替。

s 标签用于设置文本删除线。该标签已经被废弃，使用 del 标签代替。

示例：使用字体样式标签设置字体样式

入口页面（index.html）：

<p><font size="12" color="blue">这是一行文本</font></p>

<p><b>加粗文字</b></p>
<p><strong>加粗文字</strong></p>

<p>全场5折<small>仅限当天</small></p>

<p><u>文本下划线</u></p>
<p><ins>文本下划线</ins></p>

<p><i>文本倾斜</i></p>
<p><em>文本倾斜</em></p>

<p><s>文本删除</s></p>
<p><del>文本删除</del></p>

示例效果：

废弃标签：HTML 中以前存在一部分不是用来添加语义的标签，而 HTML 标签是用来添加语义的，这与我们的定义不相符，故会废弃一些标签。

图像标签

img 标签用于加载图像。

img 标签的基本用法：

<img src="path" alt="text" title="text" width="x" height="y" />

img 标签的基本属性：

名称描述
src图像地址，支持本地图片和远程图片
alt图像的替换文本
title鼠标悬停时提示的文本
width图像宽度
height图像高度

示例：使用图像标签定义图片

入口页面（index.html）：

<img src="avatar.jpg" alt="avatar" width="180">

示例效果：

超链接标签

a 标签用于设置超链接。

超链接的应用场景：

  • 页面间链接：从 A 页面跳转到 B 页面。
  • 锚链接：在 A 页面中从 A 区域跳转到 B 区域。
  • 功能性链接：从 A 页面跳转到发送邮箱窗口。

a 标签的基本用法：

<a href="url" target= "target">text</a>

a 标签的基本属性：

名称描述
href要跳转的链接地址
target目标窗口。
_self：在当前窗口打开链接（默认值）
_blank：在新窗口打开链接
_parent：在父窗口打开链接
_top：在顶层窗口打开链接

示例：使用超链接标签定义超链接

入口页面（index.html）：

<a href="https://www.duozai.cn/">在当前窗口打开网页</a>
<a href="https://www.duozai.cn/" target="_blank">在新窗口打开网页</a>
<a href="mailto:vis@duozai.cn">发送邮件</a>
<a href="#box3">跳转到box3</a>

<div id="box1" style="height: 300px; width: 300px; border: blue solid 1px">
    box1
</div>
<div id="box2" style="height: 300px; width: 300px; border: yellow solid 1px">
    box2
</div>
<div id="box3" style="height: 300px; width: 300px; border: red solid 1px">
    box3
</div>

示例效果：

行内元素和块元素

行内元素：左右都是行内元素的可以排在一行，如 a 标签。

块元素：无论内容多少，该元素独占一行，如 h1～h6 标签。

HTML 注释

HTML 注释的基本用法：

<!-- 注释内容 -->

HTML 特殊符号

如果要在 HTML 文档中显示特殊符号，需要使用相应的 HTML 代码标识。

参考文档：https://www.runoob.com/charsets/ref-html-symbols.html

列表

无序列表

ul、li 标签用于定义无序列表。

无序列表的特点：

  • 没有顺序，每个 li 标签独占一行。
  • 默认 li 标签项前面有个实心小圆点。

示例：使用无序列表标签定义列表

入口页面（index.html）：

<h1>热搜</h1>
<ul>
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
</ul>

示例效果：

有序列表

ol、li 标签用于定义有序列表。

有序列表的特点：

  • 有顺序，每个 li 标签独占一行。
  • 默认 li 标签项前面有个顺序标记。

示例：使用有序列表标签定义列表

入口页面（index.html）：

<ol>
    <li>题目1</li>
    <li>题目2</li>
    <li>题目3</li>
</ol>

示例效果：

定义列表

dl、dt、dd 标签用于定义定义列表。

  • 定义列表是标题及列表项的结合。
  • dl 标签作为列表的开始。
  • dt 标签作为每个列表项的开始。
  • dd 标签作为每个列表项。

定义列表的特点：

  • 没有顺序，每个 dt、dd 标签独占一行。
  • 默认没有标记。

示例：使用定义列表标签定义列表

入口页面（index.html）：

<h1>食物列表</h1>
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>菠萝</dd>
    <dd>橘子</dd>
</dl>
<dl>
    <dt>蔬菜</dt>
    <dd>生菜</dd>
    <dd>黄瓜</dd>
    <dd>西红柿</dd>
</dl>

示例效果：

表格

表格基本结构

表格由单元格、行、列组成。

定义一个表格的规范步骤：

  • 使用 table 标签定义表格。
  • 使用 thead 标签定义表头。
  • 使用 tr 标签在 thead 标签中定义表头的第一行，可以有多行。
  • 使用 th 标签在 thead-tr 标签中定义表头的单元格。
  • 使用 tbody 标签定义表格内容主体。
  • 使用 tr 标签在 tbody 标签中定义表格内容的第一行，可以有多行。
  • 使用 td 标签在 tbody-tr 标签中定义表格内容的单元格。

表格的基本结构：

<table>
    <thead>
    <tr>
        <th></th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td></td>
    </tr>
    </tbody>
    </tbody>
</table>

表格标签的基本属性：

名称描述
border设置 table 表格边框
align设置内容的对齐方式，可以让表格在网页内居中，也可以让表格内容在单元格居中 left：左对齐
right：右对齐
center：居中对齐
color设置内容颜色
width设置内容宽度
height设置内容高度

示例：使用表格标签定义表格

入口页面（index.html）：

<table border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>张三</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
    </tr>
    </tbody>
</table>

示例效果：

表格跨列

表格跨列是指单元格的横向合并。

示例：表格跨列

入口页面（index.html）：

<tr>
    <!-- 指定这一格横向跨2列 -->
    <td colspan="2">学生列表</td>
</tr>

示例效果：

表格跨行

表格跨行是指单元格的纵向合并。

示例：表格跨行

入口页面（index.html）：

<tr>
    <!-- 指定这一格纵向跨2行 -->
    <td rowspan="2">张三</td>
    <td>语文</td>
    <td>98</td>
</tr>
<tr>
    <td>数学</td>
    <td>89</td>
</tr>

示例效果：