### HTML速查手册知识点解析
#### 一、基础属性(Core Attributes)
- **class**: 用于定义元素的类名,可以被CSS选择器所引用,实现样式统一控制。
- **id**: 唯一标识符,用于单个元素的唯一识别,常用于JavaScript操作或CSS定位。
- **style**: 直接在HTML元素中定义样式,虽然不推荐用于大型项目,但在小范围内快速调整样式非常方便。
- **title**: 提供额外的信息或描述,通常在鼠标悬停时显示为工具提示。
**注意**:基础属性不能用于`base`, `head`, `html`, `meta`, `param`, `script`, `style`, `title`等元素。
#### 二、语言属性(Language Attributes)
- **dir**: 指定文本的方向,如`ltr`(左至右)或`rtl`(右至左),对于多语言网站尤为重要。
- **lang**: 定义元素的语言,如`en`(英语)、`zh`(中文),有助于搜索引擎优化和国际化设计。
**注意**:语言属性不能用于`base`, `br`, `frame`, `frameset`, `hr`, `iframe`, `param`, `script`元素。
#### 三、键盘事件(Keyboard Events)
- **onKeydown**: 当按键被按下时触发。
- **onKeypress**: 当键被持续按下并重复时触发。
- **onKeyup**: 当键被释放时触发。
这些事件主要用于响应用户的键盘输入行为,例如实时搜索功能。
#### 四、窗口事件(Window Events)
- **onLoad**: 页面加载完成时触发。
- **onUnload**: 页面即将卸载时触发。
这些事件对于初始化页面资源或执行清理任务非常关键。
#### 五、表单事件(Form Events)
- **onBlur**: 元素失去焦点时触发。
- **onChange**: 元素内容发生改变时触发。
- **onFocus**: 元素获得焦点时触发。
- **onReset**: 表单重置时触发。
- **onSelect**: 文本被选中时触发。
- **onSubmit**: 表单提交前触发。
表单事件对于数据验证、用户交互反馈至关重要。
#### 六、文档大纲(Document Outline)
- **<!DOCTYPE>**: 声明文档类型,对浏览器渲染方式有直接影响。
- `<html>`: HTML文档的根元素。
- `<head>`: 包含文档元数据,如标题、样式链接、脚本链接等。
- `<body>`: 包含文档的主要内容。
#### 七、常用字符实体(Common Character Entities)
- `"`: 双引号(")
- `&`: 氨基符号(&)
- `<`: 小于号(<)
- `>`: 大于号(>)
- `©`: 版权符号(©)
- `€`: 欧元符号(€)
字符实体用于显示特殊字符,避免HTML语法冲突。
#### 八、链接(Links)
- `<a href="">`: 创建超链接。
- `<a href="mailto:">`: 创建邮件链接。
- `<a name="name">`: 创建命名锚点。
- `<a href="#name">`: 链接到页面内的命名锚点。
链接是网页间导航的基础,也是构建网站结构的关键。
#### 九、空元素(Empty Elements)
- `<br/>`: 换行。
- `<hr/>`: 水平线。
- `<img/>`: 插入图片。
- `<input/>`: 输入字段。
空元素无需闭合标签,但必须以`/>`结尾。
#### 十、表格(Tables)
- `<table>`: 创建表格。
- `<tr>`: 表格行。
- `<td>`: 表格单元格。
- `<th>`: 表格标题单元格。
表格用于展示结构化数据,虽然现代网页设计中逐渐减少使用,但在某些场景下依然不可替代。
#### 十一、表单(Forms)
- `<form>`: 定义表单。
- `<input/>`: 输入控件。
- `<textarea>`: 多行文本输入。
- `<select>`: 下拉列表。
表单是收集用户输入的基本工具,适用于各种数据采集需求。
#### 十二、对象与嵌入(Objects & Embeds)
- `<object>`: 嵌入外部对象,如插件、媒体文件等。
- `<param/>`: 对象参数。
用于集成第三方内容或功能,增强网页的互动性和功能性。
#### 十三、文档结构(Document Structure)
- `<h1>`到`<h6>`: 标题等级,用于组织文档层次。
- `<div>`: 通用容器,用于分组内容。
- `<span>`: 内联容器,用于样式或脚本操作的局部区域。
合理的文档结构不仅提升可读性,也有助于SEO优化。
#### 十四、列表(Lists)
- `<ul>`: 无序列表。
- `<ol>`: 有序列表。
- `<li>`: 列表项。
- `<dl>`, `<dt>`, `<dd>`: 定义列表,用于术语和解释。
列表用于呈现条目清晰的信息,提升页面可读性。
#### 十五、文本标记(Text Markup)
- `<strong>`: 强调文本,通常表现为加粗。
- `<em>`: 强调文本,通常表现为斜体。
- `<abbr>`: 缩写词,可用于定义其完整形式。
- `<acronym>`: 已废弃,使用`<abbr>`代替。
文本标记用于增强文本的表现力和语义信息,有助于提升内容可访问性。