从0开始构建HTML页面
目录
从0开始构建HTML页面的技术文档
一、简介
二、常用标签与属性
三、事件处理与交互性
一、简介
（HyperText Markup Language）是一种用于创建网页的标准标记语言。它允许开发者使用标签来描述网页的结构，并定义网页的外观和内容。是互联网的基础，几乎所有的网页都是用编写的。
1.1 HTML 的基本结构
一个典型的文档包括以下部分：
<!DOCTYPE >
<>
<head>
<title>页面标题</title>
</head>
<body>
<! 页面内容 >
</body>
<!DOCTYPE >: 声明文档类型为5。
<>: 根元素，包含整个文档。
<head>: 包含元信息，如标题、样式表链接等。
<title>: 定义浏览器工具栏上的标题。
<body>: 包含可见的页面内容，如文本、图像、链接等。
1.2 元素与属性
元素是由开始标签、结束标签和内容组成的。例如：
<p class="text">这是一个段落。</p>
在这个例子中，<p>是一个元素，而class="text"是一个属性，用于给元素添加额外的信息或样式。
1.3 语义化
语义化是指使用正确的标签来表示文档结构，使页面更易于理解和维护。常见的语义化标签有：
<header>: 定义页面或区域的头部。
<nav>: 定义导航链接的部分。
<main>: 定义页面主要内容。
<article>: 定义独立的内容块，如博客文章或新闻故事。
<section>: 定义文档中的一个独立部分。
<footer>: 定义页面或区域的底部。
二、常用标签与属性
2.1 文本格式化标签
<h1>至<h6>: 定义不同级别的标题。
<p>: 定义段落。
<strong>: 强调文本，通常显示为粗体。
<em>: 表示强调文本，通常显示为斜体。
<mark>: 突出显示文本。
<small>: 定义小号文本。
<del>: 定义被删除的文本。
: 定义下划线文本。
<sub>: 定义下标文本。
<sup>: 定义上标文本。
<pre>: 保留文本格式，通常用于代码块。
<code>: 定义计算机代码文本。
<samp>: 定义样本输出文本。
<kbd>: 定义键盘输入文本。
<var>: 定义变量文本。
<abbr>: 定义缩写词或首字母缩略词。
<address>: 定义联系信息。
<cite>: 定义引用或引文。
<q>: 定义短引用。
<blockquote>: 定义长引用。
<dfn>: 定义术语的定义。
<time>: 定义日期或时间。
<data>: 定义机器可读的翻译。
2.2 列表标签
<ul>: 无序列表。
<ol>: 有序列表。
<li>: 列表项。
<dl>: 定义列表的描述列表。
<dt>: 定义描述列表中的项目名称。
<dd>: 定义描述列表中的项目描述。
2.3 链接与图片标签
<a>: 定义超链接。
<img>: 插入图像。
<figure>: 定义独立的流内容，如图像、图表等。
<figcaption>: 定义图像的说明文字。
<video>: 嵌入视频内容。
<audio>: 嵌入音频内容。
<source>: 指定媒体资源的不同源。
<track>: 为媒体元素提供字幕或其他类型的跟踪数据。
2.4 表格标签
<table>: 定义表格。
<thead>: 定义表格的表头部分。
<tbody>: 定义表格的主体部分。
<tfoot>: 定义表格的页脚部分。
<tr>: 定义表格行。
<th>: 定义表头单元格。
<td>: 定义表格数据单元格。
<caption>: 定义表格的标题。
<colgroup>: 定义表格列的组。
<col>: 定义表格列的属性。
2.5 表单标签
<form>: 定义表单。
<input>: 定义输入控件。
<textarea>: 定义多行文本输入控件。
<button>: 定义按钮。
<select>: 定义选择列表。
<option>: 定义选择列表中的选项。
<label>: 定义表单元素的标签。
<fieldset>: 组合表单相关元素。
<legend>: 为<fieldset>元素定义标题。
<datalist>: 为输入控件提供预定义的选项列表。
<output>: 显示计算结果的值。
2.6 其他常用标签
<div>: 定义文档中的一个区域或节。
<span>: 内联元素，用于对文本进行分组或应用样式。
<iframe>: 嵌入另一个页面。
<object>: 嵌入外部内容，如Flash动画或PDF文件。
<embed>: 嵌入外部应用程序或插件。
<map>: 定义客户端图像映射。
<area>: 定义图像映射中的区域。
<svg>: 定义矢量图形。
<canvas>: 绘制图形，如图表、游戏等。
<progress>: 显示任务的完成进度。
<meter>: 显示测量值的范围或比率。
<details>: 创建一个可以展开和折叠的内容区域。
<summary>: 为<details>元素提供标题。
<dialog>: 定义对话框或窗口。
<menu>: 定义菜单列表。
<menuitem>: 定义菜单项。
<style>: 内联样式表或外部样式表链接。
<link>: 定义文档与外部资源的关系，如样式表、图标等。
<meta>: 提供关于文档的元信息。
<base>: 定义页面上所有相对URL的基本URL或目标。
<script>: 嵌入或引用JavaScript代码。
<noscript>: 定义在不支持脚本的浏览器中显示的内容。
<template>: 存储供以后使用的客户端内容。
<slot>: 插槽，用于分发内容到模板中的位置。
<keygen>: 生成密钥对的表单控件（已废弃）。
<wbr>: 建议换行符的位置（非标准）。
三、事件处理与交互性
事件是浏览器或用户自身执行的某种行为，如点击按钮、加载页面等。通过JavaScript，我们可以对这些事件进行监听和响应，从而实现交互性功能。以下是一些常用的事件及其用法：
3.1 鼠标事件
onclick: 当用户点击元素时触发的事件处理器。
ondblclick: 当用户双击元素时触发的事件处理器。
onmousedown: 当用户按下鼠标按钮时触发的事件处理器。
onmouseup: 当用户释放鼠标按钮时触发的事件处理器。
onmousemove: 当鼠标指针移动时触发的事件处理器。
onmouseover: 当鼠标指针移入元素时触发的事件处理器。
onmouseout: 当鼠标指针移出元素时触发的事件处理器。
oncontextmenu: 当用户右键单击元素时触发的事件处理器。
3.2 键盘事件
onkeydown: 当用户按下键盘键时触发的事件处理器。
onkeyup: 当用户释放键盘键时触发的事件处理器。
onkeypress: 当用户按下并释放键盘键时触发的事件处理器（适用于字符输入）。
3.3 表单事件
onsubmit: 当用户提交表单时触发的事件处理器。
onreset: 当用户重置表单时触发的事件处理器。
onchange: 当元素的值改变时触发的事件处理器。
onfocus: 当元素获得焦点时触发的事件处理器。
onblur: 当元素失去焦点时触发的事件处理器。
3.4 触摸事件（移动端）
ontouchstart: 当手指触摸屏幕时触发的事件处理器。
ontouchmove: 当手指在屏幕上移动时触发的事件处理器。
ontouchend: 当手指离开屏幕时触发的事件处理器。
ontouchcancel: 当系统取消触摸事件时触发的事件处理器。
3.5 其他常见事件
onload: 当页面完全加载后触发的事件处理器。
onunload: 当页面卸载后触发的事件处理器。
onresize: 当浏览器窗口大小改变时触发的事件处理器。
onscroll: 当滚动条滚动时触发的事件处理器。
onerror: 当发生错误时触发的事件处理器。
onabort: 当用户中止加载资源时触发的事件处理器。
onreadystatechange: 当文档状态改变时触发的事件处理器（已废弃）。
onhashchange: 当URL的哈希部分改变时触发的事件处理器。
onpopstate: 当活动历史记录条目更改时触发的事件处理器。
ononline: 当浏览器恢复在线状态时触发的事件处理器。
onoffline: 当浏览器离线时触发的事件处理器。
onpagehide: 当用户即将离开当前页面时触发的事件处理器（已废弃）。
onpageshow: 当用户返回到当前页面时触发的事件处理器（已废弃）。
onbeforeunload: 当页面即将卸载前触发的事件处理器。
onafterprint: 当打印文档完成后触发的事件处理器（已废弃）。
onbeforeprint: 当打印文档之前触发的事件处理器（已废弃）。
onmessage: 当接收到来自其他窗口的消息时触发的事件处理器。
onshow: 当元素成为可见状态时触发的事件处理器（已废弃）。
ontoggle: 当用户打开或关闭元素的可见状态时触发的事件处理器（已废弃）。
onwheel: 当用户滚动鼠标滚轮时触发的事件处理器（非标准）。
onpointerdown, onpointermove, onpointerup, onpointercancel, ongotpointercapture, onlostpointercapture: 针对指针设备（如触摸屏或鼠标）的事件处理器（非标准）。
