HTML基础语法：标签、属性与文档结构
(5) feilong.org 修订于2026-08-15 08:35:09 html css教程什么是HTML？
HyperText Markup Language（超文本标记语言）是构建网页内容的核心技术。通过标签（Tag）定义元素，结合属性（Attribute）描述细节，最终形成浏览器可渲染的页面结构。掌握基础语法是学习前端开发的第一步。
---
HTML文档基本结构
一个完整的HTML文档需遵循标准格式：
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>页面标题</title> </head> <body> <!-- 页面内容 --> </body> </html> |
关键组成部分解析
1.
|
1 |
<!DOCTYPE html> |
：声明文档类型，告知浏览器使用HTML5规范。
2.
|
1 |
<html> |
标签：根元素，包裹整个网页内容，属性lang指定语言（如
|
1 |
zh-CN |
表示简体中文）。
3.
|
1 |
<head> |
部分：包含元信息，如字符编码（
|
1 |
<meta charset="UTF-8"> |
）和页面标题（
|
1 |
<title> |
）。
4.
|
1 |
<body> |
标签：网页主体内容的容器，所有可见元素均放置于此。
---
常用HTML标签与用途
| 标签 | 作用 | 示例 |
|------|------|------|
|
|
1 |
<h1> |
~
|
1 |
<h6> |
| 级别标题（h1最大，h6最小） |
|
1 |
<h1>主标题</h1> |
|
|
|
1 |
<p> |
| 段落文本 |
|
1 |
<p>这是一个段落。</p> |
|
|
|
1 |
<ul> |
/
|
1 |
<ol> |
| 无序/有序列表 |
|
1 |
<ul><li>项目一</li></ul> |
|
|
|
1 |
<a> |
| 超链接 |
|
1 |
<a href="https://example.com">点击这里</a> |
|
|
|
1 |
<img> |
| 插入图片 |
|
1 |
<img src="image.jpg" alt="描述文字"> |
|
标签嵌套规范
HTML标签需正确闭合并遵循嵌套规则。例如：
|
1 |
<p><strong>重要提示：</strong>请仔细阅读说明。</p> |
此处
|
1 |
<strong> |
标签被包含在
|
1 |
<p> |
内，确保语义清晰。
---
属性详解与使用技巧
属性为元素添加额外信息，通常以
|
1 |
name="value" |
形式出现。
常见属性示例
1. id：唯一标识符（用于CSS或JavaScript操作）
|
1 |
<div id="main-content">主要内容</div> |
2. class：类名（可复用，适用于CSS样式定义）
|
1 |
<p class="highlight">高亮文本</p> |
3. href / src：指定资源路径（链接或外部文件）
|
1 2 |
<a href="/about.html">关于我们</a> <img src="logo.png" alt="公司标志"> |
4. 布尔属性：无需值，仅存在即生效（如disabled、checked）
|
1 |
<input type="checkbox" disabled> |
属性值引号规范
属性值需用双引号（
|
1 |
" |
）或单引号（
|
1 |
' |
）包裹。推荐使用双引号以避免与内容冲突：
|
1 |
<a href="https://example.com">链接</a> |
---
实践建议
1. 严格遵循结构：确保所有标签闭合，避免遗漏
|
1 |
<body> |
或
|
1 |
<head> |
。
2. 合理使用语义化标签：如
|
1 |
<header> |
、
|
1 |
<footer> |
提升可读性与SEO优化。
3. 属性命名规范：避免重复ID，类名保持简洁（如
|
1 |
.nav-item |
而非.navigation_item）。
---
参考资料
1. [MDN HTML基础教程](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/)
2. [W3C HTML规范](https://www.w3.org/TR/html5/)
3. 《HTML与CSS设计与构建网站》（Eric A. Meyer 著）
通过掌握本文内容，您已具备创建基础网页的能力。建议动手实践，尝试编写包含标题、列表和图片的完整页面，逐步深入理解标签与属性的组合应用。
更新网址：https://feilong.org/html-basic-syntax
最初发布：20260815 08:35:09 feilong.org 于广州
加入收藏夹，查看更方便。