根元素 <html>

文档元数据<head>

<meta charset='utf-8'>

<title>

<base href=''>

<link href='' rel=''>

  • 提供可替换的样式表：
  1. <link href="default.css" rel="stylesheet" title="Default Style">
  • 预加载
  1. <link rel="preload" href="style.css" as="style">
  2. <link rel="preload" href="main.js" as="script">

文档内容<body>

内容分区

文档主体<main>

标题<h1>-<h6>

*头部标题<header>

*独立内容<article>

*侧边栏内容<aside>

*内容导航<nav>

*内容分区<section>

*底部页脚<footer>

文本内容

块级容器<div>

行内容器<span>

块级段落<p>

有序列表<ol>

无序列表<ul>

列表条目<li>

描述列表<dl>、<dt>、<dd>

锚元素<a href='' target='_blank'>

缩写元素<abbr title=''>

图片和多媒体

图片<img src='' alt=''>

  • 使用srcset、sizes属性
  1. <img src="clock-demo-thumb-200.png"
  2.      alt="Clock"
  3.      srcset="clock-demo-thumb-200.png 200w,
  4.              clock-demo-thumb-400.png 400w"
  5.      sizes="(min-width: 600px) 200px, 50vw">

*图片引用<figure>、<figcaption>

*音频<audio src='' autoplay>

*视频<video src='' autoplay poster='' controls>

*多格式资源<source>

表格内容

表格<table>

表格标题<caption>

头部行<thead>

主体行<tbody>

尾部行<tfoot>

单行<tr>

表格头与表格数据<th>、<td>

列组<colgroup>、<col>

  • 跨列样式（span表示该<col>元素横跨列数）
  1. <colgroup>
  2.   <col>
  3.   <col span="2" class="batman">
  4.   <col span="2" class="flash">
  5. </colgroup>

表单内容

表单元素<form>

  • accept-charset 属性：一个空格分隔或逗号分隔的列表，此列表包括了服务器支持的字符编码
  • action 属性：处理此表单信息的程序所在的URL。此值可以被 <button> 或者 <input> 元素中的 formaction 属性覆盖
  • autocomplete 属性：指示 input 元素是否能拥有由浏览器自动补全的一个默认值。可被属于此表单的子元素的 autocomplete 属性覆盖
  • enctype属性：当 method 属性值为 post 时，enctype 就是将表单的内容提交给服务器的 MIME 类型
    • application/x-www-form-urlencoded：未指定属性时的默认值。
    • multipart/form-data：此值用于一个 type 属性设置为 “file” 的 <input> 元素。
    • text/plain：(HTML5)
    • 注：此值可以被 <button> 或者 <input> 元素中的 formenctype 属性覆盖
  • method 属性：浏览器使用这种 HTTP 方式来提交 表单. 可能的值有：
    • post：HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器.
    • get：HTTP GET 方法；表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，得到的 URI 再发送给服务器。通常表单仅包含ASCII字符时，考虑使用这种方法
    • dialog：Use when the form is inside a [<dialog>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog) element to close the dialog when submitted.

此值可以被 [<button>](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button)、[<input type="submit">](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/submit) 或 [<input type="image">](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/image) 元素中的 [formmethod](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button#attr-formmethod) 属性覆盖。

按钮<button name=''>

  • form属性：表示button元素关联的form元素(id)
  • type属性
    • sumbit：将表单数据提交给服务器。默认值
    • button：没有默认行为，不向服务器提交数据
    • menu：打开一个由指定<menu>元素进行定义的弹出菜单
  • value属性：与表单数据的提交按钮相关联

多行文本<textarea>

表单输入<input type='' name='' value=''>

  • type属性
    • type=”checkbox”：多选框。value属性必须，可选checked属性
    • type=”date”；日期。可选value属性，设置默认值yyyy-mm-dd
    • type=”number”：浮点数。可选value属性，设置默认值
      • 占位符：placeholder="Multiple of 10"
      • 步进大小：step="10"默认为1，允许小数值
      • 指定最小和最大值：min="0" max="100"
      • 控制输入框：css控制大小、验证
      • 提供建议值：list属性指向datalist元素(id)
    • type=”password”：密码
      • 设置长度：minlength="4" maxlength="8"
      • 设置控件大小：size='10'。以像素为单位，初始控件默认20
      • 指定输入模式：inputmode="numeric"
      • 设置值必须输入：required
    • type=”radio”：单选框
    • type=”text”：单行文本
      • 文本框为空时显示的一个示例值：placeholder=''
      • 指示文本框有多少个字符宽度的数字：size="10"
  • 全局属性
    • form：此元素属于一个<form>表单，表单的 id 就是属性的值
    • list：指向 id 为 list 属性值的<datalist>元素，提供建议值

下拉选项<select name=''>

  • form属性：select所关联的form表单 ，表单的 id 就是属性的值
  • required属性：规定select的值不能为空

*表单可选值列表<datalist>、<option>

  1. <label for="ice-cream-choice">Choose a flavor:</label>
  2. <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
  4. <datalist id="ice-cream-flavors">
  5.     <option value="Chocolate">
  6.     <option value="Coconut">
  7.     <option value="Mint">
  8.     <option value="Strawberry">
  9. </datalist>

交互元素及web组件

*内含信息挂件<details>、<summary>

  • 默认详细信息需click或focus来切换，可使用open全局属性设置为默认打开
  • 可通过设置css自定义控件图标及相应样式
  1. <details open>
  2.     <summary>Details</summary>
  3.     <p>Something small enough to escape casual notice.</p>
  4. </details>

内容模板<template>

  • 特点：元素内容不会被渲染，运行时使用JavaScript实例化

占位符<slot>

  • 特点：Web组件内的一个占位符，可以使用自己的标记填充
  • 具名插槽：拥有name属性的插槽叫具名插槽

canvas

canvas 标签定义画布即图形容器，必须使用脚本( javascript )来绘制图形，默认<canvas> 元素没有边框和内容。

  1. <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
  2. </canvas>

全局属性

  • id：定义了一个全文档唯一的标识符。它用于在链接、脚本和样式中辨识元素
  • class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或DOM方法来选择和访问特定的元素

contenteditable

一个枚举属性，表示元素是否可被用户编辑。若可以，浏览器会修改元素的部件以允许编辑

data-*

自定义数据属性的属性，可在所有 HTML 元素上嵌入自定义数据属性，通过脚本与 HTML 之间进行专有数据的交换

  1. <div id="user" data-id="1234" data-user="ndoe" data-date-of-birth>John Doe
  2. </div>
  4. <script>
  5. var el = document.querySelector('#user');
  6. // el.id == 'user'
  7. // el.dataset.id === '1234'
  8. // el.dataset.user === 'ndoe'
  9. // el.dataset.dateOfBirth === ''
  10. </script>

*draggable

一个枚举类型的属性，用于标识元素是否允许使用拖放操作 Drag and Drop API 拖动。文本选择、图像和链接默认可拖拽，其他的 HTML 元素可拖动必须满足：

  • draggable 属性设置成 true
  • 为拖动事件添加一个监听器dragstart
  • 在定义的监听器中设置拖动数据event.dataTransfer.setData(format, data)
  1. <div draggable="true"
  2. ondragstart="event.dataTransfer.setData('text/plain', 'dragged')">
  3.   This text <strong>may</strong> be dragged.
  4. </div>

is

允许指定标准HTML元素像已注册的自定义内置元素一样工作

tabindex

整数属性，指示元素可否获取输入焦点（可聚焦），是否应该参与顺序键盘导航，如果是，则表示哪个位置

  • 负值：该元素可聚焦的，但不可通过顺序键盘导航到达
  • 0 ：该元素可通过顺序键盘导航到达，但其相对顺序由平台约定
  • 正值：该元素可通过顺序键盘导航到达，聚焦顺序是 tabindex 的增加值。若多个元素共享相同的tabindex，则相对顺序遵循在文档中的相对位置