HTML 学习笔记
前端三大件
- HTML：超文本标记语言（HyperText Markup Language）
- CSS：层叠样式表
- JavaScript：客户端脚本语言
- 常用框架：jQuery + Vue 3(Element plus)
HTML 基本概念
- 超文本：包含图像、音频、视频、脚本等非文本元素
- 标记：不同标记具有不同行为和样式
- 空白处理：所有空白（空格、换行等）都会被渲染为一个英文空格
- 属性：控制标记行为，多个属性用空格分隔，不区分大小写
开发环境
| 工具 | 特点 |
|---|
| VS Code | 轻量高效 |
| HBuilderX | 国产IDE |
| IDEA | 功能强大 |
| VS Code插件：Live Server（实时预览） | |
标记分类
| 类型 | 特点 | 常见标记 |
|---|
| 块标记 (Block) | 独占一行，从上到下排列，可设置尺寸 | <h1>-<h6>, <p>, <div>, <ul>, <ol> |
| 行内标记 (Inline) | 不独占一行，从左到右排列，不可设置尺寸 | <b>, <strong>, <i>, <span> |
| 行内块状元素 | 行内排列，可设置尺寸 | <img>, <input> |
常用标记
1. 基础结构标记
<!DOCTYPE html>
<html>
<head><title>页面标题</title>
</head>
<body>
</body>
</html>
2. 文本标记
| 标记 | 描述 | 类型 |
|---|
<h1>-<h6> | 标题（重要性递减） | 块 |
<p> | 段落 | 块 |
<hr> | 水平分割线 | 块 |
<br> | 换行 | 块 |
<b> | 粗体文本 | 行内 |
<strong> | 强调文本（语义更强） | 行内 |
<i> | 斜体文本 | 行内 |
<em> | 强调斜体（语义更强） | 行内 |
<sub> | 下标文本 | 行内 |
<sup> | 上标文本 | 行内 |
<font> | 字体样式（已废弃，建议用CSS） | 行内 |
<div> | 无样式块容器 | 块 |
<span> | 无样式行内容器 | 行内 |
3. 列表标记
无序列表
<ul><li>项目1</li><li>项目2</li>
</ul>
有序列表
<ol><li>第一项</li><li>第二项</li>
</ol>
定义列表
<dl><dt>术语1</dt><dd>定义1</dd><dt>术语2</dt><dd>定义2</dd>
</dl>
4. 表格标记
<table border="1"><tr><th>表头1</th><th>表头2</th></tr><tr><td>数据1</td><td>数据2</td></tr>
</table>
5. 表单标记
<form action="/submit" method="post"><label for="name">姓名：</label><input type="text" id="name" name="username"><label for="email">邮箱：</label><input type="email" id="email" name="useremail"><input type="submit" value="提交">
</form>
重要属性
| 属性 | 描述 | 适用标记 |
|---|
id | 唯一标识元素 | 所有元素 |
class | 定义CSS类 | 所有元素 |
name | 表单提交时的名称 | 表单元素 |
style | 内联CSS样式 | 所有元素 |
src | 资源路径 | <img>, <script> |
href | 超链接地址 | <a> |
布尔属性：存在即生效（如disabled, readonly） | | |
实体符号
| 实体 | 显示 | 描述 |
|---|
| | 不间断空格 |
< | < | 小于号 |
> | > | 大于号 |
& | & | 与符号 |
" | " | 双引号 |
© | © | 版权符号 |
使用技巧
- 代码格式化：
Ctrl+Shift+F（VS Code） - 语义化：优先使用语义明确的标签（如
<strong>代替<b>） - 响应式设计：结合CSS媒体查询
- SEO优化：合理使用标题标签和meta标签
注意：HTML5已废弃部分标签（如<font>），建议使用CSS替代其功能
