HTML网页设计核心知识点笔记

本笔记基于教学截图内容整理，涵盖HTML头部结构、特殊字符实体、描述性列表及语义化标签四大模块，结合实际代码范例与结构化说明，帮助快速掌握前端基础。

一、HTML头部结构与Meta标签

HTML文档的 <head> 区域用于定义页面元信息（metadata），不直接显示在页面上，但对SEO、缓存、跳转、编码等至关重要。

1.1 常见 `<meta>` 标签类型

编号	标签类型	属性	功能说明	示例
1	页面描述	`name="description"`	搜索引擎结果中显示的摘要文本	`<meta name="description" content="Web前端设计基础—HTML文档结构之头部结构">`
2	关键词	`name="keywords"`	定义页面关键词（现已弱化SEO作用）	`<meta name="keywords" content="HTML, CSS, JavaScript">`
3	字符编码	`charset="utf-8"`	设置文档字符集，防止乱码	`<meta charset="utf-8">`
4	页面刷新/跳转	`http-equiv="refresh"`	定时刷新或重定向到其他页面	`<meta http-equiv="refresh" content="5;https://www.baidu.com">`
5	缓存过期	`http-equiv="expires"`	设置页面缓存失效时间	`<meta http-equiv="expires" content="Sunday 15 September 2024 15:00 GMT">`
6	文档生成工具	`name="generator"`	标识创建工具版本	`<meta name="generator" content="WordPress 6.1">`
7	最后修改时间	`name="revised"`	记录文档最后修订时间	`<meta name="revised" content="2024-09-10T22:50:30+00:00">`
8	作者信息	`name="author"`	指明作者或维护者链接	`<meta name="author" content="https://blog.zhujing.net">`
9	爬虫行为控制	`name="robots"`	控制搜索引擎索引行为	`<meta name="robots" content="none">`
10	视口设置	`name="viewport"`	适配移动端屏幕尺寸	`<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no">`

⚠️ 注意：http-equiv 属性模拟HTTP响应头行为；name 属性则用于自定义元数据。

1.2 完整头部结构测试代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面标题 -->
    <title>网页设计基础—头部结构</title>

    <!-- 页面描述 -->
    <meta name="description" content="Web前端设计基础—HTML文档结构之头部结构">

    <!-- 页面关键词 -->
    <meta name="keywords" content="HTML, CSS, JavaScript">

    <!-- 字符编码（推荐使用现代写法） -->
    <meta charset="utf-8">

    <!-- 语言设置（旧式写法，已注释） -->
    <!-- <meta http-equiv="content-language" content="zh-CN"> -->

    <!-- 页面跳转：5秒后跳转至百度 -->
    <meta http-equiv="refresh" content="5;https://www.baidu.com">

    <!-- 缓存控制 -->
    <meta http-equiv="expires" content="Sunday 15 September 2024 15:00 GMT">

    <!-- 文档信息 -->
    <meta name="generator" content="WordPress 6.1">
    <meta name="revised" content="2024-09-10T22:50:30+00:00">
    <meta name="author" content="https://blog.zhujing.net">
    <meta name="robots" content="none">

    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no">
</head>
<body>
    <!-- 页面主体内容 -->
</body>
</html>

二、HTML特殊字符实体（Special Entities）

某些字符（如 <, >, &）是HTML语法保留符，不能直接输入。需使用“字符实体”来表示。

2.1 常用HTML特殊字符对照表

编号	显示字符	描述	实体代码
1	©	版权符号	`©`
2		不间断空格（Non-breaking space）	` `
3	<	小于号	`<`
4	>	大于号	`>`
5	&	和号（And symbol）	`&`
6	"	双引号	`"`
7	—	长破折号（Em dash）	`—`

💡 提示：浏览器会合并连续空格为一个，若需多个空格，请使用  ，但不建议用于排版布局，应优先使用CSS控制间距。

2.2 特殊字符使用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>特殊实体字符</title>
</head>
<body>
    <!-- 版权声明 -->
    <p><small>Copyright &copy; 2024 上海市信息管理学校．保留所有权利．</small></p>

    <!-- 使用不间断空格分隔导航项 -->
    <nav>
        <b>Home&nbsp;&nbsp;Services&nbsp;&nbsp;Contact</b>
    </nav>

    <!-- 显示保留字符 -->
    <p>HTML中小于号写作 &lt;，大于号写作 &gt;，而和号要写成 &amp; 才不会出错。</p>

    <!-- 使用长破折号 -->
    <p>这是——一个使用长破折号的例子。</p>
</body>
</html>

三、描述性列表（Description List）

描述性列表用于展示术语与其定义之间的关系，常见于词汇表、参数说明、FAQ等场景。

3.1 基本结构

<dl>：定义整个描述列表
<dt>：定义术语（term）
<dd>：定义描述（definition）

✅ 一个 <dt> 可对应多个 <dd>；也可多个 <dt> 共享一组 <dd>。

3.2 描述性列表构建范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Description List</title>
</head>
<body>
    <h1>Sample Description List</h1>
    <dl>
        <dt>TCP</dt>
        <dd>Transmission Control Protocol is a method (protocol) used along with the Internet Protocol (IP) to send data in the form of packets.</dd>

        <dt>IP</dt>
        <dd>Internet Protocol is the method or protocol by which data is sent from one computer to another on the Internet. Each computer (host) has a unique IP address that identifies it on the network.</dd>

        <dt>FTP</dt>
        <dd>File Transfer Protocol is a protocol used to exchange files between computers on the Internet.</dd>

        <dt>HTTP</dt>
        <dd>Hypertext Transfer Protocol is the protocol used for exchanging text, graphic images, sound, video, and other multimedia content on the World Wide Web.</dd>
    </dl>
</body>
</html>

四、HTML5语义化标签与结构元素

HTML5引入了一系列语义化标签，使文档结构更清晰，有利于SEO和无障碍访问。

4.1 常用语义化标签一览

编号	标签名	用途说明
1	`<header>`	页面或区段的页眉，通常包含标题、logo、导航等
2	`<nav>`	导航链接区域
3	`<main>`	页面主要内容区域（每页仅一个）
4	`<section>`	文档中的独立章节或区块
5	`<article>`	自包含的内容单元（如博客文章、新闻条目）
6	`<aside>`	侧边栏或与主内容相关但独立的信息
7	`<footer>`	页脚，常含版权、联系方式等信息

4.2 典型页面结构范例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Trillium Media Design</title>
</head>
<body>
    <header>
        <h1>Trillium Media Design</h1>
    </header>

    <nav>
        <b>Home&nbsp;&nbsp;Services&nbsp;&nbsp;Contact</b>
    </nav>

    <main>
        <section>
            <h2>New Media and Web Design</h2>
            <p>Trillium Media Design offers a comprehensive range of services to take your company's Web presence to the next level.</p>
        </section>

        <section>
            <h2>New Media and Web Design</h2>
            <p>Trillium Media Design offers a comprehensive range of services to take your company's Web presence to the next level.</p>
        </section>
    </main>

    <footer>
        <small><i>Copyright &copy; 2022 Your Name Here</i></small>
    </footer>
</body>
</html>

4.3 `<div>` 与 `<span>` 的区别

对比项	`<div>`	`<span>`
显示类型	块级元素（block）	行内元素（inline）
默认换行	是	否
使用场景	布局容器、划分大区块	文本内局部样式修饰
是否语义化	无特定语义（通用容器）	无特定语义（通用行内容器）

🔍 示例：使用 class 和 id 属性增强可维护性

<div id="main-section" class="box" title="这是主要内容区域">
    <p>这是一个 <span class="highlight">强调</span> 的段落。</p>
    <p>在这个 div 元素中包含了两个段落。</p>
</div>

<div class="box">
    <h3><span class="highlight">cMOOC</span> 连接主义</h3>
    <p>连接主义是主流学习理论的一种，主张教学环境<span class="highlight">去中心化</span>。</p>
</div>

📌 id：唯一标识，同一页面中不可重复
📌 class：可复用的类别名，支持多个元素共用

五、输出结果对比示例（Markdown vs 普通文本）

✅ 美化后的Markdown格式（当前形式）

清晰的层级结构
表格直观展示数据
代码块高亮语法
列表条理分明
支持强调、提示、分割线等增强表达

❌ 普通纯文本格式（未美化）

HTML头部结构测试
meta name description content ...
meta name keywords content ...
字符实体 &copy; &nbsp; &lt; &gt;
dl dt dd 示例...
header nav main footer...

明显缺乏结构性与可读性，不利于长期学习与查阅。