外观
HTML 笔记
约 1801 字大约 6 分钟
2025-08-16
一、HTML 基础
1.1 什么是 HTML?
HTML(HyperText Markup Language,超文本标记语言)是用于创建网页的标准标记语言。它通过一系列标签来描述网页的结构和内容。
1.2 什么是 HTML5?
HTML5 是 HTML 的最新标准版本,于 2014 年正式发布。它不仅改进了 HTML 语法,还增加了许多新特性,使网页开发更加高效和功能丰富。HTML5 的核心目标是:
- 提供更好的语义化结构
- 原生支持多媒体
- 增强 Web 应用能力
- 提高跨浏览器兼容性
二、HTML 文档结构
2.1 基本文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>关键标签说明:
<!DOCTYPE html>:声明文档类型,必须放在最前面<html>:整个 HTML 文档的根元素<head>:包含页面的元数据(不会显示在页面上)<meta charset="UTF-8">:指定字符编码,避免乱码<meta name="viewport">:移动端适配必备<title>:浏览器标签页上显示的标题<body>:页面的主体内容区域
2.2 常用文本标签
| 标签 | 用途 | 说明 |
|---|---|---|
<h1>-<h6> | 标题 | h1 最重要,h6 最不重要,一个页面建议只有一个 h1 |
<p> | 段落 | 定义文本段落 |
<br> | 换行 | 单标签,强制换行 |
<hr> | 水平线 | 单标签,表示主题分隔 |
<div> | 块级容器 | 无语义的块级容器,用于布局 |
<span> | 行内容器 | 无语义的行内容器,用于文本样式 |
2.3 文本格式化标签
| 标签 | 用途 | 推荐替代方案 |
|---|---|---|
<b> | 粗体文本 | <strong> (有语义) |
<i> | 斜体文本 | <em> (有语义) |
<u> | 下划线文本 | CSS 实现 |
<s>/<del> | 删除线 | <del> (有语义) |
<sup> | 上标 | 如:E=mc² |
<sub> | 下标 | 如:H₂O |
语义化建议:
- 使用
<strong>代替<b>表示"重要" - 使用
<em>代替<i>表示"强调"
2.4 特殊字符
HTML 中有些字符有特殊含义,需要使用转义字符:
| 显示 | 代码 | 说明 |
|---|---|---|
| 空格 | | 普通空格会被浏览器忽略 |
| < | < | 小于号 |
| > | > | 大于号 |
| & | & | 和号 |
| © | © | 版权符号 |
| ¥ | ¥ | 人民币符号 |
三、常用内容元素
3.1 图像
<img src="image.jpg" alt="图片描述" width="300" height="200">关键属性:
src:图片路径(必填)alt:替代文本(非常重要,用于无障碍访问和图片加载失败时显示)width/height:设置尺寸(可选,但建议设置以避免布局抖动)
3.2 超链接
<a href="https://example.com" target="_blank" title="访问示例网站">访问示例网站</a>关键属性:
href:链接目标(必填)target:打开方式(_blank新窗口,_self当前窗口)title:鼠标悬停提示download:下载链接(<a href="file.pdf" download>下载PDF</a>)
特殊链接:
- 邮件链接:
<a href="mailto:user@example.com">发送邮件</a> - 电话链接:
<a href="tel:+8613800138000">拨打电话</a> - 锚点链接:
<a href="#section1">跳转到章节1</a>(需配合<div id="section1">)
3.3 列表
有序列表:
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>无序列表:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>定义列表:
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>四、表格与表单
4.1 表格基础
<table border="1">
<caption>学生信息表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>张三</td>
<td>18</td>
<td>高三一班</td>
</tr>
</table>常用表格标签:
<table>:表格容器<caption>:表格标题<tr>:表格行<th>:表头单元格(加粗居中)<td>:普通单元格
合并单元格:
- 横向合并:
<td colspan="2"> - 纵向合并:
<td rowspan="2">
相关信息
GET 和 POST 的区别:
GET 方式: 将表单数据以键值对形式追加到地址后面。只适合提交少量信息,并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII 字符。
POST 方式: 将表单数据直接发送(隐藏)到指定的处理程序。可以提交海量信息,相对来说安全一些,提交的数据格式是多样的。
4.2 表单元素
基本结构:
<form action="/submit" method="post">
<!-- 表单控件 -->
<input type="submit" value="提交">
</form>常用输入类型:
| 类型 | 代码 | 用途 |
|---|---|---|
| 文本 | <input type="text" name="username"> | 一般文本输入 |
| 密码 | <input type="password" name="pwd"> | 密码输入 |
| 单选 | <input type="radio" name="gender" value="male" id="male"><label for="male">男</label> | 二选一或多选一 |
| 复选 | <input type="checkbox" name="hobby" value="sports" id="sports"><label for="sports">运动</label> | 多选 |
| 下拉 | <select name="city"><option value="bj">北京</option><br/><option value="sh">上海</option></select> | 选择选项 |
| 文本域 | <textarea name="comment" rows="4" cols="50"></textarea> | 多行文本 |
| 按钮 | <button type="submit">提交</button> | 操作按钮 |
| 表单最佳实践: |
- 始终使用
<label>关联表单控件 - 为表单元素添加
name属性(服务器接收数据用) - 使用
required属性标记必填项 - 为输入添加适当的
type以获得移动端优化键盘 - 上传附件时,必须使用
Multipart/form-data编码方式
五、HTML5 重要新特性
5.1 语义化标签
HTML5 引入了语义化标签,使文档结构更清晰:
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<h2>文章标题</h2>
<p>文章内容...</p>
</section>
</article>
<aside>
<h3>相关推荐</h3>
<ul>
<li><a href="#">相关文章1</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 网站名称</p>
</footer>常用语义标签:
<header>:页眉,通常包含标题和导航<nav>:导航链接区域<main>:页面主要内容(每个页面应只有一个)<article>:独立内容区块(如博客文章)<section>:文档中的节或段<aside>:侧边栏内容<footer>:页脚,通常包含版权信息
5.2 多媒体支持
音频:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频元素
</audio>视频:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持视频标签
</video>常用属性:
controls:显示播放控件autoplay:自动播放(现代浏览器通常限制此功能)loop:循环播放muted:静音播放(有助于自动播放)
六、实用技巧与最佳实践
6.1 代码规范
- 使用小写字母编写标签和属性
- 为所有属性值添加引号
- 保持适当的缩进和换行
- 为图片始终添加
alt属性 - 使用语义化标签代替纯 div
6.2 常用全局属性
以下属性适用于几乎所有 HTML 元素:
| 属性 | 用途 |
|---|---|
id | 元素的唯一标识(页面中必须唯一) |
class | 元素的类名(可多个,用于 CSS 和 JS) |
style | 内联 CSS 样式(不推荐大量使用) |
title | 鼠标悬停提示信息 |
data-* | 自定义数据属性(如data-user-id="123") |
6.3 移动端适配
<meta name="viewport" content="width=device-width, initial-scale=1.0">这个 meta 标签对移动端网页至关重要,确保页面在移动设备上正确缩放。
