当前位置：首页 > news >正文

HTML02 核心语法与基础标签：构建静态页面的基石

news 2025/10/27 15:39:29

HTML02 核心语法与基础标签：构建静态页面的基石

学会了 HTML 的基础概念和开发工具后，接下来要掌握的是 “如何规范地写代码” 和 “用基础标签搭建页面内容”—— 这就像盖房子时，先搞懂砖瓦的用法和砌筑规则，才能顺利搭建出稳固的 “墙体”。这篇博客会聚焦 HTML 核心语法规范、常用基础标签，以及属性和样式的基础用法，帮你真正上手编写静态页面。

一、HTML 基本语法：写对代码的 “规矩”

HTML 代码看似简单，但遵循语法规范能避免很多浏览器兼容问题，也让代码更易读。核心要掌握 “元素规则”“注释写法”“嵌套逻辑” 这三点。

1. HTML 元素：从 “标签对” 到 “空内容”

HTML 的核心是 “元素”，每个元素对应页面的一个功能块。元素的语法有明确规则：

闭合元素：大多数元素成对出现，由 “开始标签 + 内容 + 结束标签” 组成，比如段落标签<p>这是段落内容</p>、链接标签<a href="#">链接内容</a>。文档中常见的闭合标签还有<h1>-<h6>、<ul>、<li>等。
非闭合元素：部分元素没有内容（空内容），只需单标签即可，标签内用斜杠结尾（HTML5 中斜杠可省略，但推荐保留以兼容旧浏览器）。比如：
```
<input /> 
<img src="baidu.jpg" width="104" height="142" /> 
<hr /> 
```

2. 注释：给代码 “加说明”，不影响运行

注释是写给开发者看的文字说明，浏览器会忽略注释内容。在团队协作或后续维护时，注释能大幅提高代码可读性。

写法：用包裹，快捷键是Ctrl+/（单行注释）或Ctrl+Shift+/（多行注释）。

示例：

<!-- 这是一个百度跳转链接 -->
<a href="https://www.百度.com">跳转到百度</a><!-- 页面标题区域包含网站名称和导航
-->
<div class="header"><h1>我的网站</h1>
</div>

注意：注释会被加载到客户端（但不显示），如果注释过多可能轻微影响页面加载速度，可通过工具在上线前删除冗余注释。

3. 标签嵌套：像 “树” 一样组织结构

HTML 标签不能随意嵌套，必须遵循 “父子层级”—— 闭合标签内部可以包含子标签，整体形成 “多叉树” 结构（根节点是<html>标签）。

正确嵌套示例（文档中<div>与<ul>的嵌套）：

<div style="height: 100%;width:80%; background-color: chartreuse;float: left;"><!-- ul是div的子标签，li是ul的子标签 --><ul style="line-height: 80px;list-style-type: none;"><li>内容1</li><li>内容2</li><li><a href="https://example.com" style="cursor: wait;">链接</a></li></ul>
</div>

错误嵌套：比如<a><p></a></p>，这种交叉嵌套会导致浏览器解析混乱，可能出现样式或功能异常。

4. 约定：标签用小写，提升可读性

HTML 标签对大小写不敏感（<P>和<p>效果一样），但 W3C 在 HTML4 中就推荐用小写标签，HTML5 更是强调这一约定 —— 小写标签能让代码更统一，也方便和 CSS、JS 的语法风格保持一致（后两者通常用小写）。

推荐：<h1>标题</h1>、<img src="pic.jpg" />
不推荐：<H1>标题</H1>、<IMG SRC="pic.jpg" />

二、HTML 基础标签：搭建页面 “内容骨架”

掌握语法后，接下来学习最常用的基础标签 —— 它们是构成页面内容的 “砖瓦”，涵盖标题、段落、链接、图片等核心功能。

1. 标题标签：`<h1>`-`<h6>`，定义内容层级

标题标签用于表示页面的层级关系，<h1>权重最高（通常是页面主标题），<h6>权重最低（次级小标题）。浏览器会默认给标题添加加粗和间距，无需额外设置。

示例：

<h1>这是一级标题（页面主标题）</h1>
<h2>这是二级标题（章节标题）</h2>
<h3>这是三级标题（小节标题）</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

注意：一个页面建议只写 1 个<h1>（帮助搜索引擎识别页面核心），避免多个<h1>导致层级混乱。

2. 段落标签：`<p>`，组织文本内容

<p>标签用于包裹段落文本，浏览器会自动在段落前后添加空白间距，实现文本分行。

示例：

<p>这是第一个段落。HTML的段落标签会自动处理文本换行，即使你在代码里写了很多行，浏览器也会合并成一段显示，除非手动添加换行标签。</p>
<p>这是第二个段落。如果需要在段落内换行，可以用<br />标签（后面会讲）。</p>

对比：如果不用<p>标签，直接写文本，浏览器会把所有文本合并成一段，没有间距，可读性差。

3. 链接标签：`<a>`，实现页面跳转

<a>标签是实现 “超链接” 的核心，通过href属性指定跳转目标，点击后可跳转到其他页面、网站，或页面内的指定位置。

核心属性：href（目标地址）、target（跳转方式，默认在当前窗口打开）。

常见用法示例：

跳转到外部网站（完整 URL）：

<a href="https://www.百度.com">跳转到百度</a>

空链接（点击后不跳转，仅滚动到页面顶部）：
```
<a href="#">返回顶部</a>
```

跳转到页面内指定位置（需配合 “锚点”）：

<!-- 锚点：给目标位置加id -->
<h2 id="section1">第一部分内容</h2>
<!-- 链接到锚点 -->
<a href="#section1">跳转到第一部分</a>

补充：可通过style属性修改链接样式，比如cursor: wait（鼠标悬停时显示 “等待” 图标），示例来自文档：
```
<a href="https://example.com" style="cursor: wait;">鼠标悬停显示等待图标</a>
```

4. 图片标签：`<img>`，嵌入图像

<img>是典型的非闭合标签，用于在页面中插入图片，核心是通过src属性指定图片路径。

核心属性：
- src：图片的 URL（本地路径如src="images/baidu.jpg"，或网络路径如src="https://xxx.com/baidu.jpg"）；
- width/height：图片宽度和高度（单位默认是像素px，只需写数字，无需加单位）；
- alt：图片加载失败时显示的文本（提升可访问性，比如屏幕阅读器会读取 alt 内容）。

示例（来自文档）：

<img src="baidu.jpg" width="104" height="142" alt="百度图标" />

注意：如果只设置width或height中的一个，图片会按比例缩放，避免变形；如果两个都设置，需确保比例和原图一致，否则会拉伸变形。

5. 水平线标签：`<hr />`，分隔内容

<hr />标签会在页面中生成一条水平线，用于分隔不同模块的内容（比如段落之间、章节之间），无需额外样式即可显示。

示例：

<p>这是第一个段落</p>
<hr /> <!-- 水平线分隔 -->
<p>这是第二个段落</p>
<hr />
<p>这是第三个段落</p>

三、HTML 属性：给标签 “附加信息”

标签是 “骨架”，属性则是给骨架 “添细节”—— 通过属性可以自定义标签的功能或样式，比如给图片设置尺寸、给链接设置跳转目标。

1. 属性的本质：键值对，写在开始标签

所有 HTML 属性都遵循 “name="value"” 的键值对格式，必须写在标签的开始标签内（非闭合标签也写在单标签内）。

示例：

<!-- a标签的href属性：键是href，值是"https://www.百度.com" -->
<a href="https://www.百度.com">百度</a>
<!-- img标签的src、width、alt属性：多个属性用空格分隔 -->
<img src="pic.jpg" width="200" alt="示例图片" />

2. 常用属性示例与 HTML5 兼容性

有些属性在 HTML4 中常用，但在 HTML5 中已被废弃，需用style属性替代，这是新手容易踩坑的点，务必注意：

标签	HTML4 属性（已废弃）	功能	HTML5 替代方案（用 style）
`<body>`	`bgcolor="yellow"`	背景色为黄色	`<body style="background-color: yellow">`
`<h1>`	`align="center"`	标题居中	`<h1 style="text-align: center">`
`<table>`	`border="1"`	表格边框宽度 1px	`<table style="border: 1px solid black">`

错误示例（HTML5 中无效）：

<body bgcolor="yellow"> <!-- 背景色不生效 --><h1 align="center">居中标题</h1> <!-- 标题不居中 -->
</body>

正确示例（HTML5 支持）：

<body style="background-color: yellow"><h1 style="text-align: center">居中标题</h1>
</body>

3. 属性值的 “引号规则”

属性值必须用引号包裹，双引号（"）是首选，单引号（'）也可使用 —— 当属性值本身包含双引号时，必须用单引号，避免解析错误。

常规用法：name="张三"、src="images/pic.jpg"

特殊情况（属性值含双引号）：

<!-- 正确：用单引号包裹属性值 -->
<p name='Bill "HelloWorld" Gates'>比尔·盖茨</p>
<!-- 错误：双引号嵌套双引号，浏览器会解析失败 -->
<p name="Bill "HelloWorld" Gates">比尔·盖茨</p>

4. 单位差异：HTML 属性 vs CSS 样式

在设置尺寸（宽度、高度）时，HTML 属性和 CSS 样式的 “单位写法” 不同，这是新手容易混淆的细节：

HTML 属性（如width、height）：无需写单位，默认是像素（px），比如<img width="200" />等同于 “宽度 200px”；
CSS 样式（如style="width: ..."）：必须写单位（除非值为 0），否则样式无效，比如<img style="width: 200px;" />（正确）、<img style="width: 200;" />（错误，无单位）。

四、HTML 样式：让页面 “变好看” 的基础

HTML 本身只负责 “结构”，样式（颜色、字体、间距等）需要通过 CSS 实现。CSS 与 HTML 结合的方式有 3 种，新手先掌握基础的 “内联样式”“内部样式” 和 “外部样式”。

1. 内联样式：标签内直接写样式

内联样式通过标签的style属性实现，样式只作用于当前标签，适合给 “单个元素” 设置特殊样式。

示例（来自文档）：

<!-- 标题背景色为红色 -->
<h2 style="background-color:red">这是带红色背景的标题</h2>
<!-- 段落：字体为Arial、颜色红色、字号20px -->
<p style="font-family:arial;color:red;font-size:20px;">这是带样式的段落</p>

缺点：如果多个元素需要相同样式，需重复写代码，维护成本高。

2. 内部样式：`<head>`内集中写样式

内部样式通过<head>标签内的<style>标签实现，样式作用于整个 HTML 文件，适合给 “单个页面” 设置统一样式。

示例：

<head><style type="text/css">/* 所有body内的文本用楷体14px */body{font-family: '楷体_GB2312';font-size: 14px;}/* 所有p标签左外边距20px */p{margin-left: 20px;}</style>
</head>

注意：type="text/css"在 HTML5 中可省略，浏览器默认识别<style>标签为 CSS 样式。

3. 外部样式：引入独立 CSS 文件

外部样式是最推荐的方式 —— 将 CSS 代码写在独立的.css文件中，通过<link>标签引入 HTML，样式可作用于多个页面，便于统一维护。

步骤：

创建 CSS 文件（如css/index.css），写入样式：

/* index.css文件内容 */
body{background-color: #f5f5f5;font-size: 14px;
}
h1{color: #333;
}

在 HTML 的<head>中引入 CSS 文件（来自文档）：

<head><link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>

优点：一次修改 CSS 文件，所有引用该文件的 HTML 页面都会同步更新样式，适合大型项目。

4. 废弃标签的 “样式替代”

HTML4 中有很多用于设置样式的标签（如<center>、<font>），HTML5 已完全废弃这些标签，全部改用 CSS 样式替代，具体对应关系如下：

废弃标签	功能	CSS 替代方案
`<center>`	内容居中	`style="text-align: center"`
`<font color="red">`	文本红色	`style="color: red"`
`<s>`/`<strike>`	文本加删除线	`style="text-decoration: line-through"`
`<u>`	文本加下划线	`style="text-decoration: underline"`

示例：

<!-- 废弃写法：<font color="red" size="5">红色大文本</font> -->
<!-- 正确写法：用style属性 -->
<p style="color: red; font-size: 20px;">红色大文本</p>

小结

这篇博客我们掌握了 HTML 的 “核心实操能力”：从语法规范（元素、注释、嵌套），到基础标签（标题、段落、链接、图片），再到属性用法和 CSS 样式的 3 种结合方式。这些内容是所有静态页面的基础 —— 下一篇博客，我们会进入 “进阶阶段”，学习如何用表格、列表、语义化标签组织复杂页面结构，以及如何实现表单交互和多媒体嵌入，让页面从 “静态内容” 升级为 “功能丰富的交互页面”。

查看全文

http://www.dtcms.com/a/533883.html