HTML基础知识 - 属余学习网

一、HTML 基础

1.1 定义

HTML（HyperText Markup Language，超文本标记语言）是一种 标记语言，用于描述网页的 结构和内容。它是 web 页面最基础的组成部分，所有网页都是在 HTML 基础上构建的。

特点：

非编程语言，不包含逻辑运算和控制结构。
标记语言，通过标签（Tag）描述内容的语义和结构。
平台无关，只要有浏览器，就能解析 HTML。
可扩展，与 CSS、JavaScript 结合实现样式和交互。

1.2 HTML 作用

定义网页结构

决定内容的层次，如标题、段落、列表、图片等。2. 提供语义信息

帮助搜索引擎和辅助设备（屏幕阅读器）理解内容。3. 承载多媒体内容

支持图片、音频、视频等。

结合 CSS 和 JS

实现美观的样式和丰富的交互。

1.3 HTML 文档结构

1.3.1 基本结构

<!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="UTF-8"> <title>网页标题</title> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是一个段落。</p> </body> </html>

1.3.2 结构说明

<!DOCTYPE html>

声明文档类型（HTML5），让浏览器按标准模式解析。

<html>

根元素，包裹所有内容。

<head>

文档头部，包含元信息（meta）、标题、样式、脚本等。

<body>

文档主体，包含可见内容。

1.4 标签（Tag）

1.4.1 标签定义

标签是 HTML 的基础语法，用尖括号包围：

<p>这是一个段落</p>

<p>：开始标签
</p>：结束标签
中间的内容是标签作用的对象

1.4.2 标签类型

成对标签（双标签）有开始和结束，如：

单标签（自闭合标签）没有结束标签，如：

1.5 HTML 标签语法与注意点

1.5.1 基本语法

<标签名属性名=”属性值”>内容</标签名>

标签名：如 p, h1, img
属性：附加信息，如 src（图片地址）
内容：标签作用的文字或其他元素

1.5.2 注意点

标签名大小写不敏感，推荐小写。
属性值建议用双引号包裹。
HTML5 中很多标签已废弃（如 <center>），应使用 CSS 或语义化标签替代。
自闭合标签无需结束标签，如 <br>。

1.6 标签分类

结构标签：html, head, body, header, footer
文本标签：h1~h6, p, strong, em, span
媒体标签：img, audio, video
链接标签：a
列表标签：ul, ol, li, dl, dt, dd
表格标签：table, tr, td, th
表单标签：form, input, textarea, select, option
语义化标签：article, section, nav, aside

1.7 HTML 注释

1.7.1 作用

添加代码说明，方便维护。
浏览器不会显示注释内容。

1.7.2 语法

<!– 这是注释 –>

<!– 主标题 –> <h1>网站标题</h1>

二、<head> 内常用标签

2.1 <head> 标签的作用

<head> 标签用于包含网页的元信息（meta information），这些信息不会直接显示在网页内容区，但会影响：

浏览器的解析方式
搜索引擎的收录情况
页面样式与脚本的加载
社交媒体分享时的预览

基本结构

<head> 元信息标签… </head>

2.2 <title> — 网页标题

作用

显示在浏览器标签页上
搜索引擎结果的标题
收藏夹默认名称

用法

<title>我的个人主页</title>

案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML 学习，第二章</title> </head> <body> <h1>HTML 学习</h1> </body> </html>

注意点

每个页面必须有唯一的标题
标题应简洁、准确（建议 ≤ 60 个字符）
有助于 SEO（搜索引擎优化）

2.3 <meta> — 元数据标签

作用

提供网页的额外信息，例如编码、关键字、描述等。

2.3.1 指定字符编码

作用：让浏览器正确解析中文及其他字符
UTF-8 推荐使用，兼容性好

2.3.2 网页描述

搜索引擎结果页的摘要
建议 ≤ 150 字

2.3.3 关键词（旧 SEO 用法）

现代搜索引擎已不再依赖 keywords，但可用于内部搜索系统

2.3.4 视口（移动端响应式）

控制页面在移动设备上的缩放和布局
常用于响应式设计

2.3.5 自动刷新或跳转

作用：5 秒后跳转到指定网址

2.4 <link> — 外部资源链接

引入外部 CSS 样式、字体、网站图标等。

用法

案例

<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF-8″> <title>外部样式示例</title> <link rel=”stylesheet” href=”main.css”> </head> <body> <h1>这是带有外部样式的页面</h1> </body> </html>

常用 rel 属性

stylesheet：CSS 样式文件
icon：网站图标
preload：预加载资源（提升性能）

2.5 <style> — 内联样式

直接在 HTML 内写 CSS 样式。

用法

案例

<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF-8″> <title>内联样式示例</title> <style> p { font-size: 16px; color: darkgreen; } </style> </head> <body> <p>这是一个带有内联样式的段落。</p> </body> </html>

注意点

内联样式适合小规模样式
大项目建议使用外部 CSS 文件（<link>）

2.6 <script> — JavaScript 脚本

引入或编写 JavaScript，用于网页交互和逻辑。

用法

或直接写：

案例

<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF-8″> <title>脚本示例</title> <script> function sayHello() { alert(“你好，欢迎学习 HTML！”); } </script> </head> <body> <button onclick=”sayHello()”>点击问候</button> </body> </html>

注意点

脚本可以放在 <head> 或 <body> 末尾
放在末尾可避免阻塞页面渲染

2.7 <base> — 基准 URL

设置页面内相对链接的基准地址。

用法

案例

<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF-8″> <base href=”https://mysite.com/“> </head> <body> <a href=”page.html”>跳转到页面</a> <!– 实际链接是 https://mysite.com/page.html –> </body> </html>

2.8 综合案例：完整 <head> 标签

<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF-8″> <meta name=”description” content=”这是一个 HTML 第二章示例”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>HTML 第二章 — head 标签</title> <link rel=”stylesheet” href=”style.css”> <link rel=”icon” href=”favicon.ico”> <style> body { font-family: Arial; } </style> <script> console.log(“页面加载成功”); </script> </head> <body> <h1>欢迎来到 head 标签</h1> </body> </html>

三、<body> 内常用标签详解

3.1 <body> 标签的作用

<body> 是 HTML 文档的主体标签，放置用户在浏览器中可以直接看到和交互的内容。
所有可见元素（文字、图片、视频、表格、表单、按钮等）都要写在 <body> 内。

基本结构

3.2 HTML5 语义化标签

HTML5 引入了一些新的结构性标签，让网页结构更有意义，方便搜索引擎理解，也提高代码可读性。

常见语义化标签及作用

标签	作用
<header>	页眉，通常包含标题、logo、导航
<nav>	导航菜单
<section>	区块，用于划分内容主题
<article>	独立内容，如文章、博客帖子
<aside>	侧边栏，补充信息
<footer>	页脚，通常包含版权信息、联系方式

案例

<body> <header> <h1>我的网站</h1> <nav> <a href=”#”>首页</a> <a href=”#”>关于</a> <a href=”#”>联系</a> </nav> </header> <section> <article> <h2>文章标题</h2> <p>这是文章内容…</p> </article> </section> <aside> <h3>相关链接</h3> <ul> <li><a href=”#”>HTML 教程</a></li> <li><a href=”#”>CSS 教程</a></li> </ul> </aside> <footer> <p>版权所有 © 2024</p> </footer> </body>

3.3 文本标签

3.3.1 标题标签 — <h1> ~ <h6>

作用

定义标题层级，<h1> 最大，<h6> 最小。
搜索引擎高度关注 <h1> 与 <h2>。

用法

3.3.2 段落标签 — <p>

作用

定义普通文本段落，浏览器会自动在段落前后添加空行。

用法

<p>这是一个段落。</p>

3.3.3 强调标签 — <strong> 和 <em>

<strong>：加粗，表示重要内容。
<em>：斜体，表示强调。

用法

<p>请注意：<strong>安全第一</strong>！</p> <p>我<em>真的</em>很喜欢学习 HTML。</p>

3.3.4 行内容器 — <span>

行内标签，不会独占一行。
常用于包裹部分文字以应用样式。

用法

3.4 图片标签 — <img>

在网页中插入图片。

语法

注意点

alt 属性用于屏幕阅读器和图片加载失败时提示。
支持相对路径和绝对路径。
可以用 CSS 控制大小。

3.5 链接标签 — <a>

创建超链接，可跳转到其他页面、文件、邮箱、电话等。

语法

常用属性

href：目标地址
target=”_blank”：新窗口打开
mailto:：邮件链接
tel:：电话链接

案例

<a href=”https://example.com” target=”_blank”>访问 Example</a> <a href=”mailto:test@example.com“>发邮件给我</a> <a href=”tel:123456789“>拨打电话</a>

3.6 综合案例：语义化页面

<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF-8″> <title>HTML 第三章 — body 标签详解</title> <style> header, footer { background: #f0f0f0; padding: 10px; } nav a { margin-right: 10px; } </style> </head> <body> <header> <h1>我的网站</h1> <nav> <a href=”#”>首页</a> <a href=”#”>关于</a> <a href=”#”>联系</a> </nav> </header> <section> <article> <h2>欢迎</h2> <p>这是一个示例网页，展示了 HTML5 语义化标签的用法。</p> <img src=”photo.jpg” alt=”风景图” width=”400″> <p>更多信息请访问 <a href=”https://example.com” target=”_blank”>示例网站</a></p> </article> </section> <aside> <h3>推荐阅读</h3> <ul> <li><a href=”#”>HTML 教程</a></li> <li><a href=”#”>CSS 教程</a></li> </ul> </aside> <footer> <p>版权所有 © 2024</p> </footer> </body> </html>

2025 年 10 月
周一	周二	周三	周四	周五	周六	周日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31