html目录 - 技术栈

标签列表

基础

<!DOCTYPE> ：文档类型

<html>：HTML 文档

<title> ：文档标题

<body>：文档主体

<h1> to <h6>：HTML 标题

<p> ：段落

<br>：换行

<hr>：水平线

：注释

<style>：文档样式

<div>：行容器

<span>：行内容器

<head>：文档信息

<meta>：文档元信息

<script>：客户端脚本

格式

<b>：<strong>：文本加粗

<blockquote>：块引用

特点：

（1）<blockquote> 元素的内容通常会被浏览器默认地左缩进；

（2）浏览器通常会对 <blockquote> 提供默认的样式，文字倾斜，加边框什么的；

（3）相比较 <div>，搜索引擎可能会更注重 <blockquote> 中的内容；

<cite>：引用

特点：

（1）一些浏览器会对其应用一些默认样式，如斜体字体等，以突出显示引用的内容；

（2）搜索引擎可能会将 <cite> 元素中的内容视为重要信息，从而影响搜索结果的排序；

（3）<cite> 和 <div> 的差别之一，屏幕阅读器读取数据的语音和音调可能不一样；

<del>：<s>：删除线

<em>：<i>：文本倾斜

<ins>：<u>：下划线

<mark>：文本背景色

<meter>：显示数据占比

<pre>：保留空行/空格

<sub>：下标

<sup>：上标

表单

<form>（常用）

属性

action

url，向何处发送表单数据；非必填项，默认提交表单数据到当前页面

用途：可以在不同的情况下，使用不同的提交地址。比如，在一个页面中有两个表单，一个用于保存，另一个用于删除，你可以通过设置不同的 formaction 来区分它们的提交目的地

在许多情况下，可以在前端处理表单数据，然后通过 JavaScript 将数据发送给后端，而不必使用 action 属性。这种方式通常用于使用 AJAX 或 Fetch API 进行异步数据传输的情况，特别是在单页应用（SPA）或前端框架中

autocomplete

on 或 off，展示/不展示表单元素曾经填写过的数据

method

get 或 post，用于发送表单数据的 HTTP 方法；非必填项，默认表单的提交方法为 GET 方法

name

表单的名称

元素

<input>（常用）

属性

属性值：audio/* 或 video/* 或 image/* 或 MIME_type （*可替换为具体的文件类型）

示例：<input type="file" name="" accept="image/png,video/*">

autocomplete：on 或 off 是否应该启用自动完成功能

autofocus：当页面加载时，自动获得焦点

checked：在页面加载时，被预先选定

disabled：禁用

height：高度

max：min：最大值/最小值

适用类型：number、range、date、datetime、datetime-local、month、time 和 week

示例：<input type="date" name="" min="1979-12-31" max="2000-01-02">

<input type="number" name="" min="1" max="5">

maxlength：最大字符数

multiple：可上传多个文件

name：名称

作用：方便form拿值，js更改值

示例：<input type="text" name="username" value="John">

// 获取的是包含了所有具有指定名称的元素的类数组NodeList 对象，故加[n];

var usernameInput = document.getElementsByName('username')[0];

usernameInput.value = "Jane";

pattern：验证值的正则表达式

示例：<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="">

适用类型：text、search、url、tel、email 和 password

其它：可以输入任何字符，只在提交的时候，提示格式不匹配

placeholder：提示信息

readonly：只读

required：必填

size：以字符数计的可见宽度

其它：可见字符数不是指字符的数量，比如size=3时，可以看见7个数字或3个汉字

src：图像的 URL

示例：<input type="image" src="submit.gif" alt="Submit" width="48" height="48">

step：合法数字间隔

示例：<input type="number" name="points" step="3">

type：元素类型

可取值：button、checkbox、color（颜色选择器）、date（年月日）、datetime、datetime-local（年月日时分）、email（格式为x@x）、file、hidden、image、month（年月）、number、password、radio、range、reset、search、submit、tel、text、time（时分）、url、week

value：实际的值

其它：传给form的值

width：宽度

<textarea>（常用）

属性

autofocus、cols、disabled、form、maxlength、name、placeholder、readonly、required、rows、wrap

<button>（常用）

属性

autofocus、disabled、form、name、type（button/reset/submit）、value、

formaction：向哪个页面提交form的数据，与type="submit" 配合使用；和form的action作用一样

formenctype：规定在向服务器发送表单数据之前如何对其进行编码，与type="submit" 配合使用；

formmethod、formmethod、formnovalidate、formtarget

<select>

属性

autofocus、disabled、form、name、required、

multiple：对于 windows：按住 Ctrl 按钮来选择多个选项；对于 Mac：按住 command 按钮来选择多个选项

size：下拉列表中可见选项的数目：默认值 1；如果使用了 multiple 属性，默认值是 4

<optgroup>选项组合

属性

disabled、label（选项组描述）

<option>（常用）

使用场景

作为 <select> 或 <optgroup>或<datalist> 一个元素使用

属性

disabled、selected、value 、label

<label>（常用）

属性

for、form

使用说明

（1）不会向用户呈现任何特殊效果；

（2）在 label 元素内点击文本（选择该标签）时，浏览器就会自动将焦点转到和标签相关的表单控件上。

（3）"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

框架

<iframe>（常用）

定义内联框架（页面里嵌套页面）；

图像

<img>（常用）

属性

src 、alt（图像替代文本）、loading（浏览器是应立即加载图像还是延迟加载图像）、height、width

<map>

解释说明

图像映射指带有可点击区域的一幅图像（点击图片指定位置，打开该位置携带的图片）

<area>

解释说明

图像映射内部的区域；<area> 元素始终嵌套在 <map> 标签内部

<canvas>（常用）

使用说明

必须通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）

Audio/Video

<audio>声音

属性

src、autoplay、controls、loop（音频结束后重新播放）、muted、preload

<source>媒体资源

定义media元素 (<video> 和 <audio>)的媒体资源

<video>（常用）

属性

src、autoplay、controls、height、loop、muted、preload、width、poster（用户点击播放按钮前显示的图像）

链接

<a>（常用）

属性

href、download（下载链接）

target

取值：_blank：新窗口打开；_parent：在父窗口中打开链接；_self：默认，当前页面跳转；_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)

<link>（常用）

使用说明

定义文档与外部资源的关系

示例

链接到外部样式文件

<head>
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>

属性

rel：stylesheet（要导入的样式表的 URL）、alternate（链接到该文档的替代版本（比如打印页、翻译或镜像））、author（链接到该文档的作者）

列表

<ul>无序列表（常用）

<ol>有序列表

<li>列表项（常用）

<dl><dt><dd>自定义列表（常用）

表格

<table><caption>

所有属性HTML5 不支持

<caption>表格标题

<th>表头单元格

<tr>行

<td>单元

<thead>表头内容

<tbody>主体内容

全局属性

accesskey：访问元素的键盘快捷键

class：元素类名

contenteditable：是否可编辑元素的内容

data-*：存储页面的自定义数据

dir：元素中内容的文本方向；ltr：默认，从左向右的文本方向；rtl：从右向左的文本方向

draggable：元素是否可以拖动

id：元素的唯一 id

style：元素的行内样式

title：元素的额外信息（可在工具提示中显示）

事件

表单事件

onblur

当元素失去焦点时运行脚本

onchange

当元素改变时运行脚本

onfocus

当元素获得焦点时运行脚本