Python Day27 HTML 核心知识笔记及例题分析-EW帮帮网

一、HTML 基础认知

（一）HTML 是什么

HTML（HyperText Markup Language）即超文本标记语言 ，它不是编程语言，而是用于描述网页结构的标记语言。通过各种标签（标记）来定义网页的内容和结构，比如文字、图片、链接、表格等元素的呈现与组织。

（二）HTML 标签语法

完整标签：由开始标签、标签体内容和结束标签组成，语法为 <tagName attr='val'....> 标签体内容 </tagName> ，例如 <p style="color: red;">这是一段红色文字</p> ，p 是标签名，style 是属性，"color: red;" 是属性值，“这是一段红色文字” 是标签体内容。
单标签：部分标签在网页中不分开始和结束标签，这类标签称为单标签，语法是 <tagName attr='val'.... /> ，像 <br />（换行）、<hr />（水平分割线）、<img src="xxx" />（图片）等都是单标签。

二、网页基本结构

（一）网页构成概述

一个网站由多个网页组成，单个网页后缀名常见为 .html 、.htm ，也可用 .xhtml（对格式要求更严格）。一个网页本质上由三个核心部分构成：

（二）具体组成部分

文档类型声明：<!DOCTYPE html> ，这是 HTML5 的标记，用于告知浏览器当前网页使用的 HTML 版本，让浏览器以对应的规范去解析网页。
网页头信息（head 标签）：head 标签是不可见标签（浏览器页面上不会直接显示其内容），通常包含 meta 和 title 两个关键子标签。
- meta ：单标签，用于设置网页的头信息，比如网页编码（<meta charset="UTF-8"> 可设置为 UTF-8 编码，避免中文乱码）、适配设备（响应式布局相关设置）等。
- title ：用于设置网页的标题，会显示在浏览器的页签上，方便用户识别和管理网页，例如 <title>我的个人网页</title> 。
网页正文内容（body 标签）：浏览器页面上实际呈现给用户的数据都放置在这里，像文字、图片、视频、表格等可视化内容的标签，都要写在 body 标签内部。

（三）网页骨架结构

网页有且仅有一个根标签 html ，它包含两个重要子标签：

head ：负责承载网页头信息，如上述的 meta 、title 等设置。
body ：承载网页的正文内容，是用户能看到的网页可视化部分的容器。在空白网页文件中，输入 ! + tab 可快速生成网页的基本骨架，示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

三、常见 HTML 标签分类及用法

（一）标题标签（h1 - h6 ）

作用与特点：对应 1 级标题到 6 级标题，h1 字体最大、层级最高，h6 字体最小、层级最低。默认字体加粗（font-weight: bold; ）、颜色为黑色（color: black; ），且都是块级元素。
块级元素特性：独占一行，宽度默认铺满父容器整个宽度，高度由内容填充，允许使用 width 和 height 样式更改宽和高，例如 <h1 style="width: 200px; height: 50px;">一级标题</h1> 。

（二）文本相关标签

段落标签（p ）：块级元素，用于定义一段文本内容。p 标签不允许嵌套任意块级元素，但可以嵌套行内元素和行内块元素。另外，white-space: pre; 属性可保留文本中的换行、空格等格式，比如 `<p style="white-space: pre;">
这是一段
有多行
且带空格的文本

</p>` 会按原始格式显示。
2. 预格式标签（pre ）：会保留元数据的格式，包括换行符、空格、制表符效果，常与 `code` 标签配合用于展示代码，例如：
```html
<pre>
<code>
# 获取 100~1000 之间的水仙花数
for x in range(100, 1000):
a = x // 100
b = x // 10 % 10
c = x % 10
if a3 + b3 + c**3 == x:
print(x)
</code>
</pre>
```
让代码在网页上按编写时的格式展示。

（三）列表标签

有序列表（ol + li ）：ol 是有序列表的容器标签，li 代表列表项，默认会给列表项添加数字序号。列表项 li 里还可嵌套其他列表，比如：

<ol>
    <li>首页</li>
    <li>
        <i>关于我们</i>
        <ol>
            <li>QQ</li>
            <li>微信</li>
            <li>电话</li>
        </ol>
    </li>
</ol>

无序列表（ul + li ）：ul 是无序列表容器标签，li 为列表项，默认列表项前是圆点符号。无论是有序列表还是无序列表，常用来做网站导航等场景，示例：

<ul>
    <li>首页</li>
    <li>
        <b>关于我们</b>
        <ul>
            <li>QQ</li>
            <li>微信</li>
            <li>电话</li>
        </ul>
    </li>
</ul>

数据列表（dl + dt + dd ）：dl 是数据列表容器，dt 定义列表标题，dd 定义标题对应的详情内容，通常用于制作网站底部导航等，例如：

<dl>
    <dt>关于</dt>
    <dd>关于我们</dd>
    <dd>广告合作</dd>
    <dd>友情链接</dd>
</dl>

（四）图片与链接标签

图片标签（img ）：单标签，用于在网页加载图片。
- src 属性：设置图片地址，支持绝对路径（如 https://xxx.com/xxx.jpg ）和相对路径（以 ./ 、../ 等开头，代表相对当前项目的路径），例如 <img src="cat.gif" alt="猫咪"> ，alt 属性是图片加载失败时显示的替代文本。
- 元素特性：行内块元素，不独占一行，多个行内块元素默认水平布局，宽和高默认按内容填充，也可设置 width 和 height ，比如 <img src="cat.gif" style="width: 200px;" alt="猫咪"> 。
超链接标签（a ）：用于实现页面跳转等功能。
- href 属性：设置要跳转的地址，让 a 标签拥有超链接效果。值可以是绝对地址（如 https://www.baidu.com/ ）、相对地址（如 ./page2.html ），也可设置为 javascript:void(0) 禁止跳转，或者 #id 值实现锚点定位（快速定位到当前网页指定 id 元素位置），例如 <a href="#top">回到顶部</a> 配合 <h1 id="top">顶部标题</h1> 使用。
- target 属性：设置跳转方式，_self 是在当前网页打开新网页（默认值）；_blank 是在新窗口打开新网页；_parent 在父窗口打开；_top 在顶层窗口打开，比如 <a href="https://www.baidu.com/" target="_blank">百度</a> 会在新窗口打开百度页面。
- 元素特性：行内元素，不独占一行，按水平方向布局，宽度和高度默认由内容填充，不能设置宽高。

（五）表格标签（table ）

基本结构：由 table （表格容器）、tr （行）、th （表头单元格，默认文本居中）、td （普通单元格）等标签组成，还可配合 thead （表头）、tbody （表体）、tfoot （表尾）划分结构，让语义更清晰。
常用属性与特性：
- colspan ：合并列，指定单元格跨多少列，例如 <td colspan="2">合并两列</td> 。
- rowspan ：合并行，指定单元格跨多少行，例如 <td rowspan="3">合并三行</td> 。
- 表格相关标签里，table 可设置宽度（如 width="80%" ）、边框（border="1" ）等，tr 、td 、th 可设置对齐方式（align ，值如 center 居中、left 左对齐等）。

（六）其他常用标签

加粗标签（b、strong ）：b 标签单纯实现加粗效果；strong 标签不仅加粗还带有强调效果（主要给搜索引擎用，帮助高效检测数据），二者都是行内标签。行内标签特点是不独占一行，按水平方向布局，宽高默认由内容填充，不能设置宽高，示例 <b>加粗文字</b><strong>强调且加粗文字</strong> 。
斜体标签（i、em ）：i 标签实现斜体效果；em 标签斜体且带强调效果，较常用 em 标签，同样是行内标签，例如 <i>斜体文字</i><em>强调且斜体文字</em> 。
上下标标签（sub、sup ）：sub 实现下标效果（类似化学公式里 H₂O 的 “₂” ），sup 实现上标效果（类似数学公式里 3⁵ 的 “⁵” ），是行内元素，语法如 <h1>H<sub>2</sub>O</h1><h1>3<sup>5</sup></h1> 。
布局标签（div、span ）：
- div ：块级元素，专门用于布局，自身不带任何样式，可嵌套所有标签，常用来划分网页的不同区域，比如头部、内容区、底部等，例如 <div><h2>内容区标题</h2><p>内容区文本</p></div> 。
- span ：行内元素，用于水平布局，自身不带任何样式，可嵌套所有标签，常用来包裹一小段文本做特殊样式处理，比如 <span style="color: red;">红色文字</span> 。

三、元素显示模式（display ）

（一）块级元素（block ）

代表标签如 div 、p 、h1 - h6 、ul 、ol 、li 、table 等。特性是独占一行，按从上到下垂直布局，宽度默认是父容器宽的 100% ，高度由内容填充，支持设置宽和高。

（二）行内块元素（inline-block ）

代表标签如 img 、input 等。特性是不独占一行，按从左到右水平方向布局，宽和高均由内容填充，支持设置宽和高。

（三）行内元素（inline ）

代表标签如 a 、b 、strong 、i 、em 、span 等。特性是不独占一行，按从左到右水平方向布局，宽和高均由内容填充，不支持设置宽和高。

以上就是 HTML 核心知识的整理，涵盖了网页结构、常用标签语法及特性、元素显示模式等内容，帮助你更好地理解和运用 HTML 构建网页。

一、HTML 核心概念回顾

HTML 定义
超文本标记语言（HyperText Markup Language），非编程语言，通过标签描述网页结构，标签分：
- 完整标签：<tagName attr="val">内容</tagName>（如 <p>段落</p> ）
- 单标签：<tagName attr="val" />（如 <br /> 换行、<img /> 图片）
网页基本结构
- 文档声明：<!DOCTYPE html> （HTML5 标准）
- 头部（head）：含 meta（设置编码、设备适配等）、title（网页标题，显示在浏览器标签）
- 主体（body）：网页可见内容的容器，所有展示元素写在此处

二、示例网页功能拆解（含古诗、链接、表格等）

1. 古诗与链接模块

<!-- 古诗展示 + 链接 -->
<pre>
       无题
    一去二三里，
    烟村四五家。
    楼台六七座，
    八九十枝花。
</pre>
<hr/>
<a href="https://www.baidu.com/">点我到百度</a>
<a href="#">点我到无题诗</a>

<pre> 标签：保留文本格式（换行、空格），适合展示诗歌等需固定排版的内容
<a> 链接：href 设跳转地址（# 为占位，可替换为实际页面链接）

2. 请假条表格模块

<!-- 请假条表格 -->
<table width="80%" border="1" cellspacing="0">
    <caption>请假条</caption>
    <!-- 表格行与单元格：align 控制对齐，colspan 合并列，rowspan 合并行 -->
    <tr align="center" height="40">
        <td width="100">部门</td>
        <td width="130"></td>
        <td width="100">请假人</td>
        <td width="130"></td>
        <td width="80">日期</td>
        <td width="260"> ______年 ____ 月 ____ 日</td>
    </tr>
    <!-- 省略中间行... -->
    <tr height="140" >
        <td colspan="2"><pre>请假人签字：<br><br><br><br>          ________年____月____日</pre></td>
        <td colspan="2"><pre>部门主管意见：<br><br><br><br>          ________年____月____日</pre></td>
        <td colspan="2"><pre>批准人签字：<br><br><br><br>          ________年____月____日</pre></td>
    </tr>
</table>

<table> 核心属性：
- border：设置表格边框
- cellspacing：单元格间距（0 为无缝）
- colspan/rowspan：合并列 / 行，实现复杂布局

3. 个人简历表格模块

<!-- 个人简历表格 -->
<table width="60%" border="1" cellspacing="0">
    <caption><h1>个人简历</h1></caption>
    <tr height="40" align="center">
        <td width='80' >姓名：</td>
        <td width='120' ></td>
        <td width='80' >性别：</td>
        <td width='120'></td>
        <td rowspan="4" ></td>
    </tr>
    <!-- 省略中间行... -->
    <tr height="40" align="center">
        <td colspan="5">自我评价：</td>
    </tr>
</table>

简历表格设计：用 rowspan 合并单元格实现 “照片列” 跨多行，caption 设标题（搭配 <h1> 强调层级）

三、代码完整结构（含所有模块）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合示例</title>
</head>
<body>
    <!-- 古诗 + 链接 -->
    <pre>
           无题
        一去二三里，
        烟村四五家。
        楼台六七座，
        八九十枝花。
    </pre>
    <hr/>
    <a href="https://www.baidu.com/">点我到百度</a>
    <a href="#">点我到无题诗</a>

    <!-- 请假条表格 -->
    <table width="80%" border="1"  cellspacing="0">
        <caption>请假条</caption>
        <tr align="center" height="40">
            <td width="100">部门</td>
            <td width="130"></td>
            <td width="100">请假人</td>
            <td width="130"></td>
            <td width="80">日期</td>
            <td width="260"> ______年 ____ 月 ____ 日</td>
        </tr>
        <tr align="center" height="40" >
            <td>请假时间</td>
            <td colspan="5">________ 年 ____ 月 ____ 日 至 ______ 年 ____ 月 ____ 日</td>
        </tr>
        <tr align="center" height="40">
            <td>请假类别</td>
            <td colspan="5" align="center">□事假  □病假  □婚假  □丧假  □产假  □工伤假  □其他</td>
        </tr>
        <tr height="90" align="center">
            <td>请假事由</td>
            <td colspan="5"><p style="color: red;"">(离 XXX期间产生的一切安全问题有请假人自行承担，与XX无关)</p></td>
        </tr>
        <tr height="140" >
            <td colspan="2"><pre>请假人签字：<br><br><br><br>          ________年____月____日</pre></td>
            <td colspan="2"><pre>部门主管意见：<br><br><br><br>          ________年____月____日</pre></td>
            <td colspan="2"><pre>批准人签字：<br><br><br><br>          ________年____月____日</pre></td>
        </tr>
    </table>

    <!-- 个人简历表格 -->
    <table width="60%" border="1" cellspacing="0">
        <caption><h1>个人简历</h1></caption>
        <tr height="40" align="center">
            <td width='80' >姓名：</td>
            <td width='120' ></td>
            <td width='80' >性别：</td>
            <td width='120'></td>
            <td rowspan="4" ></td>
        </tr>
        <tr height="40" align="center">
            <td>身高：</td>
            <td></td>
            <td>体重：</td>
            <td></td>
        </tr>
        <tr height="40" align="center">
            <td>出生年月：</td>
            <td></td>
            <td>民族：</td>
            <td></td>
        </tr>
        <tr height="40" align="center">
            <td>联系电话：</td>
            <td></td>
            <td>电子邮箱：</td>
            <td></td>
        </tr>
        <tr height="40" align="center">
            <td>婚姻状况：</td>
            <td></td>
            <td>政治面貌</td>
            <td colspan="2"></td>
        </tr>
        <tr height="40" align="center">
            <td>特长爱好：</td>
            <td></td>
            <td>健康状况：</td>
            <td colspan="2"></td>
        </tr>
        <tr height="40" align="center">
            <td>联系地址：</td>
            <td colspan="4"></td>
        </tr>
        <tr height="40" align="center">
            <td colspan="5">教育背景</td>
        </tr>
        <tr height="40" align="center">
            <td>毕业院校：</td>
            <td></td>
            <td>最高学历：</td>
            <td colspan="2"></td>
        </tr>
        <tr height="40" align="center">
            <td>主修课程：</td>
            <td colspan="4"></td>
        </tr>
        <tr height="40" align="center">
            <td>校园经历：</td>
            <td colspan="4"></td>
        </tr>
        <tr height="40" align="center">
            <td colspan="5">工作经历</td>
        </tr>
        <tr height="40" align="center">
            <td>实践经验：</td>
            <td colspan="4"></td>
        </tr>
        <tr height="40" align="center">
            <td>自我评价：</td>
            <td colspan="4"></td>
        </tr>
    </table>
</body>
</html>

四、关键知识总结

标签 / 属性	作用与特点	典型场景
`<pre>`	保留文本原始格式（换行、空格）	诗歌、代码片段展示
`<a>`	超链接，`href` 设跳转地址，`target` 控制打开方式	导航、外部链接、锚点定位
`<table>`	表格容器，`colspan`/`rowspan` 合并单元格	请假条、简历、数据报表
`style="color: red;"`	行内样式，快速设置文本颜色	强调重要提示（如请假条免责声明）
`caption`	表格标题，提升语义化	表单、报表标题展示

Python Day27 HTML 核心知识笔记及例题分析