HTML基础
本文最后更新于 2025年7月30日 下午
- 基础
- 声明
<!doctype html>
- 开头
<html></html>
- 头部
<head></body>
- 页面
<body></body>
- 数据
<meta>
- 题目
<title></title>
- 标题
<h1></h1>
- 页眉
<header></header>
- 导航
<nav></nav>
- 主区
<main></main>
- 文章
<article></article>
- 区块
<section></section>
- 附注
<aside></aside>
- 页脚
<footer></footer>
- 通用
<div></div>
- 注释
<!---->
- 声明
- 文本
- 新的段落
<p></p>
- 行内通用
<span></span>
- 细则旁注
<small></small>- 元素内文本小字号显示，行内文本小块短语
- 输入表示免责声明、注意事项、法律限制、版权信息、署名、注解等文本
- 重要文本
<strong></strong>- 元素内文本粗体显示，可以嵌套
- 提醒注意
<b></b>- 元素内文本粗体显示
- 强调文本
<em></em>- 元素内文本斜体显示，可以嵌套
- 不同常规
<i></i>- 元素内文本斜体显示
- 创建图类
<figure></figure>- 可选图类标题
<figcaption></figcaption> - 用于图表、照片、视频、插图、代码片段等独立内容
- 可选图类标题
- 引用参考
<cite></cite>- 元素内文本斜体显示
- 指明对某内容源的引用或参考，不用于人名
- 块级引述
<blockquote></blockquote>- 元素内文本缩进，可以嵌套
- 单独存在的引述，可长可短
- 属性
- cite：引述来源地址
- 行内引述
<q></q>- 元素内文本加引号，可以嵌套
- 短的引述，不可跨段
- 属性
- cite：引述来源地址
- 指定时间
<time></time>- 指定准确时间、日期或时间段
- 属性
- datetime
- 时间格式：YYYY-MM-DDThh:mm:ss
- datetime
- 解释缩写
<abbr></abbr>- 元素内文本有虚线下划线显示
- 鼠标移到其上后显示解释
- 定义术语
<dfn></dfn>- 元素内文本英语斜体显示汉语黑体显示
- 只包围术语词而非整个定义
- 创建上标
<sup></sup>- 元素内文本字号减少几磅，会轻微扰乱行间距
- 创建下标
<sub></sub>- 元素内文本字号减少几磅，会轻微扰乱行间距
- 联系作者
<address></address>- 元素内文本斜体显示
- 新插文本
<ins></ins>- 元素内文本显示下划线
- 属性
- cite：说明编辑原因
- datatime：提供编辑时间
- 已删文本
<del></del>- 元素内文本显示删除线
- 属性
- cite：说明编辑原因
- datatime：提供编辑时间
- 无用文本
<s></s>- 元素内文本显示删除线
- 标记代码
<code></code>- 默认为等宽字体
- 预格式化
<pre></pre>- 保持文本固有的换行和空格，一般用于代码
- 默认为等宽字体
- 荧光突出
<mark></marl>- 元素内文本荧光笔样式背景显示
- 创建换行
<br>- 需要换行地方使用
- 测量结果
<meter></meter>- 表示分数的值或已知范围的测量结果
- 不提供定义好的单位，但可用 title 属性指定单位
- 属性
- value
- optimum
- from
- min
- max
- low
- high
- 完成进度
<progress></progress>- 指示某项任务的完成进度，显示为进度条
- 属性
- value
- max
- 添加旁注
<ruby></ruby>- 表示生僻字的发音，出现在标注字符的上方或右方
- 注解旁注
<rt></rt>- 使用前有
<ruby> - 对基准字符进行注解的旁注字符
- 使用前有
- 辅助旁注
<rt></rt>- 使用前有
<ruby>和<rt> - 在不支持 ruby 浏览器的旁注文本周围显示括号
- 使用前有
- 新的段落
- 链接
- 指向网页
<a></a>- 属性
- href：设置目标网页的 URL
- 可以使用井号和 id 属性值连接到特定锚
- target：打开连接时跳转到一个新网页
- 可以设置新网页的窗口题目
- href：设置目标网页的 URL
- 属性
- 指向其它
<a></a>- 属性
- href：设置目标类型的 URL
- 可以指向文件，浏览器不会处理时便会下载它
- href：设置目标类型的 URL
- 属性
- 外部资源链接
<link></link>
- 指向网页
- 列表
- 有序列表
<ol></ol>
- 无序列表
<ul></ul>
- 列表项目
<li></li>
- 嵌套列表
- 多个
<ol>或<ul>或<dl>
- 多个
- 描述列表
<dl></dl>：专门用于描述成组出现的名称（术语）<dt></dt>：名称或术语<dd></dd>：名称或术语的值
- 有序列表
- 媒体
- 图像
<img>
- 视频
<video></video>
- 音频
<audio></video>
- 多个播放源
<source>- 使用前有
<video>或<audio>
- 使用前有
- 图像
- 表单
- 创建表单
<form></form>- 包含一个或多个表单元素
- 属性
- accept-charset：规定服务器可处理的表单数据字符集
- action：设置提交表单时向 URL 发送表单数据
- autocomplete：是否启用表单的自动填写功能
- on
- off
- enctype：规定在向服务器发送表单数据之前如何对其进行编码（适用于 method=”post” ）
- method：发送表单数据的 HTTP 方法
- get
- post
- name：规定表单的名称
- novalidate：使用该属性则提交表单时不验证
- target：规定在何处打开 action 的 URL
- 表单分组
<fieldset></fieldset>- 对表单中的相关表单元素分组，会在相关表单元素周围绘制边框
- 属性
- disabled：禁用本组中的某个表单元素
- form：规定本组所属的一个或多个表单
- name：规定本组的名称
- 分组标题
<legend></legend>- 为
<fieldset>元素定标题
- 为
- 定义按钮
<button></button>- 属性
- type：规定按钮的类型
- button
- reset
- submit
- autofocus：当页面加载时自动获得焦点
- disabled：禁用按钮
- form：规定按钮属的一个或多个表单
- name：规定按钮的名称
- value：按钮的初始值
- type：规定按钮的类型
- 属性
- 定义输入域
<input><label>为<input>定标注，<input>的 id 属性与<label>的 for 属性通过相同值来绑定- 属性
- type：提交元素的类型
- text：单行的文本区域，输入中的换行会被自动去除。默认值。
- button：没有默认行为的按钮，上面显示 value 属性的值，默认为空
- checkbox：复选框，可设为选中或未选中
- color：用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器
- date：输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时会打开日期选择器或年月日的数字滚轮
- datetime-local：输入日期和时间的控件，不包括时区。在支持的浏览器激活会时打开日期选择器或年月日的数字滚轮
- email：编辑邮箱地址的区域。类似 text ，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘
- file：让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型
- hidden：不显示的控件，其值仍会提交到服务器
- image：带图像的 submit 按钮。显示的图像由 src 属性规定。若 src 缺失，alt 属性显示
- month：输入年和月的控件，没有时区
- number：用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘
- password：单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户
- radio：单选框，允许在多个拥有相同 name 值的选项中选中其中一个
- range：此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间值
- reset：此按钮将表单的所有内容重置为默认值。不推荐。
- search：用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标
- submit：用于提交表单的按钮
- tel：用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘
- time：用于输入时间的控件，不包括时区
- url：用于输入 URL 的控件。类似 text ，但有验证参数，在支持动态键盘的设备会上有相应的键盘
- week：用于输入以年和周数组成的日期，不带时区
- id：规定 input 控件与哪个 label 标注绑定
- form：规定 input 控件所属的一个或多个表单
- name：input 表单控件的名字。以名字/值对的形式随表单一起提交
- value：input 表单控件的值。以名字/值对的形式随表单一起提交
- autocomplete：是否启用表单的自动填写功能
- autofocus：当页面加载时自动获得焦点
- disabled：规定表单控件是否被禁用
- readonly：布尔值。存在时表示控件的值不可编辑
- required：布尔值。表示此值为必填项或者提交表单前必须先检查该值
- max：规定允许的最大数
- min：规定允许的最小数
- maxlength：规定允许的最多字符数
- minlength：规定允许的最少字符数
- multiple：规定允许用户输入的多个值
- placeholder：当表单控件为空时，控件中显示的内容
- checked：用于控制控件是否被选中
- type：提交元素的类型
- 输入域标注
<label></label><label>为<input>定标注，<input>的 id 属性与<label>的 for 属性通过相同值来绑定- 属性
- for：规定 label 标注与哪个 input 控件绑定
- form：规定 label 标注所属的一个或多个表单
- 定义文本域
<textarea></textarea>- 定义一个多行的文本输入控件
- 属性
- autofocus：当页面加载时自动获得焦点
- cols：规定文本区域内可见的宽度
- disabled：禁用文本区域
- form：规定文本区域属的一个或多个表单
- maxlength：规定文本区域允许的最大字符数
- name：规定文本区域的名称
- placeholder：提示，描述文本区域期望的输入值
- readonly：规定文本区域为只读
- required：规定用户提交表单前文本区域必填
- rows：规定文本区域内可见的行数
- wrap：规定当提交表单时，文本区域中怎样换行
- 定义下拉列表
<select></select>- 属性
- autofocus：当页面加载时自动获得焦点
- disabled：禁用本按钮
- form：规定按钮属的一个或多个表单
- multiple：属性为 true 时可选择多个选项
- name：规定下拉列表的名称
- required：规定用户提交表单前必须选一个下拉列表中的项
- size：规定下拉列表中可见选项的数目
- 属性
- 下拉列表选项组
<optgroup></optgroup>- 把相关的选项组合在一起
- 属性
- disabled：禁用该选项组
- label：标注值
- 列表选项
<option></option>- 为
<select>或<datalist>使用 - 属性
- disabled：禁用选项
- label：标注值
- selected：规定选项表现为选中状态
- value：选项值
- 为
- 定义预定项
<datalist></datalist>- 为
<input>提供”自动完成”的特性
- 为
- 创建表单
- 表格
- 创建
<table></table>
- 标题
<caption></caption>- 为整个表格添加一个标题
- 行头部
<thead></thead>- 将一行或多行标题标记为表格的头部，不影响表格布局
- 行数据
<tbody></tbody>- 用于包围所有数据行，不影响表格布局
- 行尾部
<tfoot></tfoot>- 将一行或多行标记为表格的尾部，不影响表格布局
- 行
<tr></tr>
- 标题单元格
<th></th>- 属性
- scope：告诉辅助设备当前标题是列的还是行的
- col：列的标题单元格
- row：行的标题单元格
- scope：告诉辅助设备当前标题是列的还是行的
- 属性
- 数据单元格
<td></td>- 属性
- colspan：跨多行
- rowspan：跨多列
- 属性
- 创建
- 标签全局属性
- accesskey
- autocapitalize
- class
- contenteditable
- data-*
- dir
- draggable
- dropzone
- exportparts
- hidden
- id
- inputmode
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- part
- slot
- spellcheck
- style
- tabindex
- title
- translate
HTML基础
https://xuekeven.github.io/2023/01/02/HTML基础/