个人主页：Guiat
归属专栏：HTML CSS JavaScript
文章目录
正文
1. HTML 简介
HTML（HyperText Markup Language，超文本标记语言）是创建网页的标准标记语言。HTML 描述了网页的结构，由一系列的元素组成，这些元素告诉浏览器如何展示内容。
1.1 HTML 文档的基本结构
一个基本的 HTML 文档通常包含以下结构：
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<meta charset="UTF-8">
</head>
<body>
<!-- 网页内容 -->
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
1.2 HTML 元素
HTML 元素通常由开始标签和结束标签组成，中间包含内容：
<标签名>内容</标签名>
一些元素（如 <img>、<br>、<hr> 等）是自闭合的，不需要结束标签：
<img src="图片.jpg">
<br>
<hr>
2. HTML 常用标签
2.1 标题标签
HTML 提供了六个级别的标题，从 <h1> 到 <h6>：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.2 段落与文本格式
<p>这是一个段落</p>
<strong>粗体文本</strong>
<em>斜体文本</em>
<u>下划线文本</u>
<s>删除线文本</s>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->
2.3 链接
<a href="https://www.example.com">链接文本</a>
<a href="https://www.example.com" target="_blank">在新标签页中打开</a>
2.4 图像
<img src="图片路径.jpg" alt="替代文本">
<img src="图片路径.jpg" alt="替代文本" width="300" height="200">
3. HTML 列表
3.1 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
3.2 有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
3.3 定义列表
<dl>
<dt>术语1</dt>
<dd>术语1的描述</dd>
<dt>术语2</dt>
<dd>术语2的描述</dd>
</dl>
4. HTML 表格
4.1 基本表格结构
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>行1列1</td>
<td>行1列2</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
</tr>
</table>
4.2 表格结构化元素
<table border="1">
<caption>表格标题</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注1</td>
<td>脚注2</td>
</tr>
</tfoot>
</table>
5. HTML 表单
5.1 基本表单结构
<form action="/submit-form" method="post">
<!-- 表单元素 -->
<input type="submit" value="提交">
</form>
5.2 常用表单元素
<form>
<!-- 文本输入 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br><br>
<!-- 密码输入 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br><br>
<!-- 单选按钮 -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<!-- 复选框 -->
<input type="checkbox" id="coding" name="hobby" value="coding">
<label for="coding">编程</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">阅读</label><br><br>
<!-- 下拉列表 -->
<label for="country">国家：</label>
<select id="country" name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="japan">日本</option>
</select><br><br>
<!-- 文本区域 -->
<label for="message">留言：</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
6. HTML5 新特性
6.1 语义化标签
HTML5 引入了一系列语义化标签，使文档结构更加清晰：
<header>页头</header>
<nav>导航</nav>
<main>主要内容</main>
<article>文章</article>
<section>节</section>
<aside>侧边栏</aside>
<footer>页脚</footer>
6.2 多媒体标签
<!-- 音频 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频标签。
</audio>
<!-- 视频 -->
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
7. HTML 响应式设计基础
7.1 viewport 设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7.2 响应式图片
<picture>
<source media="(min-width: 650px)" srcset="img_large.jpg">
<source media="(min-width: 465px)" srcset="img_medium.jpg">
<img src="img_small.jpg" alt="响应式图片示例">
</picture>
8. HTML 使用统计与趋势分析
8.1 HTML 版本使用情况
随着技术的发展，HTML 已经经历了多个版本的迭代：
| HTML 版本 | 发布年份 | 当前使用比例(%) |
|---|---|---|
| HTML 2.0 | 1995 | <1% |
| HTML 3.2 | 1997 | <1% |
| HTML 4.01 | 1999 | 5% |
| XHTML 1.0 | 2000 | 8% |
| HTML5 | 2014 | 87% |
8.2 HTML5 特性使用趋势
以下图表展示了不同 HTML5 特性的使用趋势：
热门 HTML5 特性使用率 (2024)
语义化标签 ███████████████████████████ 85%
本地存储 ████████████████████████████████ 95%
视频/音频 ██████████████████████ 75%
Canvas ████████████████ 60%
WebSockets █████████████ 50%
地理位置 ███████████ 40%
[图表说明: █ 代表约 3% 的使用率]
9. 实践示例：创建一个简单的网页
下面是一个完整的简单网页示例，综合运用了本教程中介绍的多种 HTML 元素：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
header {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
nav {
background-color: #333;
color: white;
padding: 10px;
}
nav a {
color: white;
margin-right: 15px;
text-decoration: none;
}
section {
padding: 20px;
}
footer {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>我的个人网站</h1>
</header>
<nav>
<a href="#home">首页</a>
<a href="#about">关于</a>
<a href="#contact">联系我</a>
</nav>
<section id="home">
<h2>欢迎访问我的网站</h2>
<p>这是我使用 HTML 创建的第一个网页。</p>
<img src="https://via.placeholder.com/300x200" alt="示例图片">
</section>
<section id="about">
<h2>关于我</h2>
<p>这里是一些关于我的信息。</p>
<ul>
<li>爱好：编程、阅读</li>
<li>技能：HTML、CSS、JavaScript</li>
</ul>
</section>
<section id="contact">
<h2>联系我</h2>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
<label for="message">留言：</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="发送">
</form>
</section>
<footer>
<p>© 2025 我的个人网站。保留所有权利。</p>
</footer>
</body>
</html>
10. 学习资源与工具
10.1 推荐学习资源
- MDN Web 文档 (Mozilla Developer Network)
- W3Schools HTML 教程
- HTML.com
- freeCodeCamp HTML 课程
10.2 实用工具
- Visual Studio Code (代码编辑器)
- Chrome DevTools (开发者工具)
- HTML Validator (代码验证工具)
- CodePen (在线代码编辑与分享平台)
结语
感谢您的阅读！期待您的一键三连！欢迎指正！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
