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`）