HTML5 基础与常用标签
目录
1. HTML 文档骨架
2. 标签的分类
2.1 按结构分类
2.2 按显示模式分类
3. 常用标签汇总
3.1 文本相关
3.2 链接与图片
3.3 多媒体（HTML5 新特性）
3.4 列表与表格
3.5 表单
4.语义化布局标签（HTML5 推荐）
5.常见误区
1. HTML 文档骨架
每一个网页的开头，都会有一个完整的 HTML 结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>我的第一个网页</title>
</head>
<body><!-- 页面内容写在这里 -->
</body>
</html>
- <!DOCTYPE html>：告诉浏览器这是 HTML5。
- <head>：存放网页的配置，比如标题、字符编码。
- <body>：存放网页的主体内容。
2. 标签的分类
2.1 按结构分类
- 双标签：有开始和结束，例如：
<p>这是一个段落</p>
常见的双标签有：
| 标签 | 用途 | 示例 |
|---|---|---|
<h1>--<h6> | 标题 | <h1>一级标题</h1> |
<p> | 段落 | <p>这是段落</p> |
<a> | 超链接 | <a href="https://www.csdn.net">访问CSDN</a> |
<ul> / <ol> / <li> | 列表 | <ul><li>HTML</li></ul> |
<table> / <tr> / <td> / <th> | 表格 | <table><tr><td>数据</td></tr></table> |
<form> / <label> / <textarea> / <select> / <option> | 表单 | <form><label>姓名</label><input></form> |
<header> | 页头 | <header>头部</header> |
<nav> | 导航 | <nav>导航栏</nav> |
<main> | 主要内容 | <main>这里是主体</main> |
<section> | 章节模块 | <section>章节内容</section> |
<article> | 独立文章 | <article>文章内容</article> |
<aside> | 侧边栏 | <aside>侧边栏内容</aside> |
<footer> | 页脚 | <footer>底部信息</footer> |
<div> | 块级容器 | <div>容器</div> |
<span> | 内联容器 | <span>文字内容</span> |
<strong> | 强调加粗 | <strong>重要</strong> |
<em> | 斜体强调 | <em>强调</em> |
- 单标签：没有结束标签，例如：
<br> <!-- 换行 -->
<img src="logo.png"> <!-- 图片 -->
常见的单标签有：
| 标签 | 用途 | 示例 |
|---|---|---|
<img> | 图片 | <img src="logo.png" alt="Logo"> |
<br> | 换行 | 换行<br>继续 |
<hr> | 水平线 | <hr> |
<input> | 表单输入 | <input type="text" placeholder="姓名"> |
<meta> | 文档信息 | <meta charset="UTF-8"> |
<link> | 外部资源 | <link rel="stylesheet" href="style.css"> |
<script> | 脚本（单标签引用外部JS） | <script src="app.js"></script> |
2.2 按显示模式分类
- 块级标签（block）：独立成行，可设置宽高。例如：<div>, <p>, <h1>。
- 行内标签（inline）：不独立成行，通常不能设置宽高。例如：<a>, <span>, <img>（注意 img 虽是 inline，但可设置宽高）。
- 行内块标签（inline-block）：既能在一行显示，也能设置宽高（通过 CSS display:inline-block）。
3. 常用标签汇总
3.1 文本相关
-
标题标签 h1~h6
<h1>一级标题</h1> <h2>二级标题</h2>特点：加粗，有间距，数字越大字号越小。
-
段落标签 p
<p>这是一个段落。</p>-
换行与水平线
换行<br>这里是新的一行 <hr> <!-- 插入一条水平线 -->-
文本格式化
<strong>加粗</strong>
<em>斜体</em>
<del>删除线</del>
<mark>高亮</mark>
3.2 链接与图片
-
超链接 a
<a href="https://www.csdn.net" target="_blank">点击访问CSDN</a>特点：默认有下划线，鼠标悬停变小手。
-
图片 img
<img src="logo.png" alt="网站Logo" width="200"> alt 属性很重要：图片无法显示时会替代说明。
3.3 多媒体（HTML5 新特性）
-
音频
<audio src="music.mp3" controls></audio>-
视频
<video src="movie.mp4" controls width="400" poster="cover.jpg"></video>3.4 列表与表格
-
无序列表 ul
<ul><li>HTML</li><li>CSS</li><li>JavaScript</li>
</ul>
-
有序列表 ol
<ol><li>第一步</li><li>第二步</li>
</ol>
-
表格 table
<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>20</td></tr>
</table>
3.5 表单
<form action="/submit" method="post"><label for="username">用户名：</label><input id="username" type="text" name="username" placeholder="请输入用户名"><br><label>性别：</label><input type="radio" name="gender" value="male"> 男<input type="radio" name="gender" value="female"> 女<br><input type="submit" value="提交">
</form>
4.语义化布局标签（HTML5 推荐）
这些标签让页面更清晰：
<header>头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<section>章节</section>
<article>文章</article>
<aside>侧边栏</aside>
<footer>底部</footer>
使用场景：
- <header>：网站或文章的头部区域
- <nav>：导航栏
- <main>：主要内容（一个页面只能有一个）
- <section>：章节、模块
- <article>：独立文章
- <aside>：侧边栏，通常是广告/推荐内容
- <footer>：底部版权信息
5.常见误区
-
把所有内容都写在
<div>里（缺少语义化，SEO 不友好）。 -
忘写
<alt>属性（不利于无障碍与 SEO）。 -
用表格
<table>来做页面布局（这是老方法，现在推荐用 CSS）。 -
表单里没有用
<label>绑定输入框（会影响用户体验）。