2HTML5 常用标签与语义化

HTML5 常用标签与语义化

一、常用文本标签

html

<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一个段落，用于描述内容。</p>
<strong>重要文本（加粗）</strong>
<em>强调文本（斜体）</em>
<span>行内容器，无默认样式</span>
<br>   <!-- 换行符，自闭合标签 -->
<hr>   <!-- 水平分割线，自闭合标签 -->

标签说明

标签	含义	默认样式	语义化作用
<h1>~<h6>	标题标签	加粗、字号递减	定义内容层级结构
<p>	段落	上下外边距	表示一段文本内容
<strong>	重要性强调	加粗	表示内容具有重要性
<em>	语气强调	斜体	表示语气上的强调
<span>	通用行内容器	无	配合 CSS 进行样式修饰
<br>	换行	换行	表示换行，不表示段落分隔
<hr>	主题分隔	水平线	表示内容主题的切换

---

二、列表标签

1. 无序列表（<ul>）

html

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

2. 有序列表（<ol>）

html

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

3. 自定义列表（<dl>）

html

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，负责网页结构</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，负责网页样式</dd>
</dl>

列表标签对比

标签类型	适用场景	默认样式
<ul> + <li>	导航菜单、内容列表	圆点符号
<ol> + <li>	步骤说明、排行榜	数字序号
<dl> + <dt> + <dd>	术语解释、信息描述	无符号，缩进展示

---

三、链接与图片

超链接 <a>

html

<!-- 绝对路径 -->
<a href="https://www.example.com">访问示例网站</a>

<!-- 相对路径 -->
<a href="about.html">关于我们</a>

<!-- 新窗口打开 -->
<a href="https://www.example.com" target="_blank">新窗口打开</a>

<!-- 锚点链接 -->
<a href="#section1">跳转到章节1</a>
<h2 id="section1">章节1</h2>

图片 <img>

html

<!-- 基本用法 -->
<img src="images/photo.jpg" alt="描述文字">

<!-- 带宽高属性 -->
<img src="images/photo.jpg" alt="描述文字" width="300" height="200">

属性说明

标签	属性	说明
<a>	href	指定链接目标地址
<a>	target	_blank 新窗口，_self 当前窗口
<a>	id / name	配合锚点实现页面内跳转
<img>	src	图片资源路径
<img>	alt	图片无法显示时的替代文本，SEO 重要
<img>	width/height	图片显示尺寸，建议 CSS 控制

---

四、HTML、CSS、JavaScript 结合示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>三者结合示例</title>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="style.css">
    <!-- 内部样式 -->
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>我的网页</h1>
    <p id="demo">这是一段文字，点击按钮改变颜色。</p>
    <button onclick="changeColor()">点击变红</button>

    <!-- 行内样式 -->
    <p style="font-size: 20px;">这是行内样式定义的段落</p>

    <script>
        function changeColor() {
            document.getElementById('demo').style.color = 'red';
        }
    </script>
</body>
</html>

---

五、学习要点总结

• 语义化标签：使用合适的标签表达内容含义，利于 SEO 和可访问性
• 三种样式引入：外部样式用于全局，内部样式用于单页，行内样式用于特殊覆盖
• 链接与图片：掌握路径写法（绝对/相对），alt 属性不可省略
• JavaScript 基础：通过 DOM 操作实现简单交互，体现行为层的作用