一、列表元素
ul(无序列表)，ol(有序列表)，dl(描述列表)，不同类型的列表之间可以嵌套
1、描述列表元素dl(dt：项目，dd：描述)
作用：标记一组项目及其相关描述
使用场景：术语和定义，或者是问题和答案
默认样式：描述列表的术语及其定义之间产生缩进
2、列表常见的应用
2-1、导航条(用nav元素把ol元素包裹)
<nav class="crumbs">
<ol>
<li class="crumb"><a href="#">Bikes</a></li>
<li class="crumb"><a href="#">BMX</a></li>
<li class="crumb">Jump Bike 3000</li>
</ol>
</nav>
.crumb {
display: inline-block;
}
.crumbs ol {
list-style-type: none;
padding-left: 0;
}
.crumb a::after {
display: inline-block;
color: #000;
content: ">";
font-size: 80%;
font-weight: bold;
padding: 0 3px;
}
二、表单相关元素
表单元素设置form属性等于form元素的id属性(form元素与表单元素关联)，可以让表单元素置于form元素之外
1、label(标签)元素
扩展表单控件的点击区域，方式一：使用label元素包裹控件元素，方式二：使用label元素的for属性与控件元素的id相关联(建议这种)
// label元素包裹控件元素
<div>
<label>同意协议<input name="input" type="radio" /></label>
</div>
// label元素的for属性与控件元素的id相关联
<div>
<label for="test">同意协议</label>
<input name="input" type="radio" id="test" />
</div>
2、input元素--type=file
解决原生input元素(type=file)长的丑：设置input元素(type=file)的透明度0，覆盖在别的元素(按钮元素)上。当去点击别的元素(按钮元素)，实际上点击是input元素
// 代码实现下载
3、input元素--type=number
step属性的验证机制：指定有min，则由min属性决定，否则，使用value属性的值，可以输入的值=min(或者value) + step * n
4、input元素--type=submit或者image
input元素(type=submit/image)的formaction属性，formenctype属性，formmethod属性，formnovalidate属性，formtarget属性可以覆盖form元素的action属性，enctype属性，method属性，novalidate属性，target属性
input元素(type=submit/image)如果设置formaction属性，则点击回车触发formaction属性
如果是js的submit()，则触发的是form元素的action属性
5、fieldset元素
fieldset元素结合legend元素给表单中的元素进行分组，默认会用边框把表单的元素包裹
6、禁用表单的全部input元素
6-1、方式一：循环设置表单的input元素设置disabled
表单元素的样式会改变。键盘也无法响应。可以触发鼠标的事件
6-2、方式二：设置CSS:pointer-events:none
表单元素的样式不会改变。原理是阻止鼠标行为，键盘可以访问，可以通过Tab键索引，回车都能触发表单行为。
6-3、方式三：input元素用fieldset元素包裹
表单元素的样式会改变。键盘也无法响应
6-4、方式四：form元素设置inert属性
表单元素的样式不会改变。键盘也无法响应
7、input元素--type=time
设置value/step/min/max属性的值必须是00:00或者00:00:00格式，如果是个位数需要把前面的0必须补全
设置value为00:00:00格式，时间选择会精确到秒，如果step属性值是60的倍数，但是秒默认值置灰
8、showPicker()
调用showPicker()类似于为input(类型为date month week time datetime-local color file)手动触发点击事件
9、事件监听
9-1、submit事件
submit事件绑定在form元素上，不会执行浏览器内置的表单验证，会刷新页面或者跳转
9-2、requestSubmit事件
requestSubmit事件绑定在form元素上，会执行浏览器内置的表单验证，页面不会跳转
<form id="form">
<div>
<label for="name">姓名：</label>
<input name="name" id="name" required />
</div>
<div>
<label for="age">年龄：</label>
<input name="age" id="age" value="20" />
</div>
<input type="button" value="提交" id="main-submit"></input>
</form>
let myForm = document.querySelector("form");
let submitButton = myForm.querySelector("#main-submit");
submitButton.addEventListener("click", function (event) {
console.log("click");
// requestSubmit()会校验表单，submit()不会校验表单
// requestSubmit()会触发submit事件，submit()不会触发submit事件
form.requestSubmit();
// form.submit();
});
form.addEventListener("submit", function (event) {
event.preventDefault();
console.log("submit");
// submitter属性：表单提交是点击那个按钮触发的
// 是type属性为submit的input元素或者type属性为submit的button元素
// 是其他元素则返回为null
const submitter=event.submitter;
console.log("submitter：",submitter);
});
9-3、formdata事件
formdata事件绑定在form元素上，在表单提交之前，改变表单的数据
<form id="form">
<div>
<label for="name">姓名：</label>
<input name="name" id="name" value="张三" required />
</div>
<div>
<label for="age">年龄：</label>
<input name="age" id="age" value="20" />
</div>
<button type="submit">提交</button>
</form>
form.addEventListener("submit", function (event) {
event.preventDefault();
// 获取FormData的数据
let formData = new FormData(this);
for (const [key, value] of formData) {
console.log(`key:${key} value:${value}`);
}
});
form.addEventListener("formdata", (event) => {
// 监听formdata事件，往表单添加额外的数据
event.formData.append("author", "MDN");
});
三、文本相关元素
1、块引用(blockquote)
作用：块级内容从其他地方引用，则需要用块引用元素包裹起来表示，并且在cite属性里用URL来指向引用的资源
使用场景：引用论文的出处
默认样式：呈现为缩进的段落，作为引用的指示
2、行内引用(q)
作用：行内内容从其他地方引用，则需要用行内引用元素包裹起来表示，并且在cite属性里用URL来指向引用的资源
使用场景：
默认样式：将其作为普通文本放入引号内表示引用
3、缩略语或缩写(abbr)
作用：包裹一个缩略语或缩写，并且提供缩写的解释
使用场景：描述相当简短的术语(HTML或者奥运会)，则应提供该术语的完整扩展，作为title属性的值
默认样式：有间隔的虚线
4、上标(sup)和下标(sub)
使用场景：数学方程式，化学方程式
默认样式：在正常文本的上方和下方
5、保留空白字符(pre)
默认样式：文本包含在pre标签中，那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来，不会被忽略
6、small元素
让文本的字体变小1号，可以用来表示注释和附属细则，包括版权和法律文本
7、strong元素
作用：表示文本十分重要，强调重要性
使用场景：
默认样式：粗体
8、b元素
使用场景：不推荐使用，可以采用CSS的font-weight属性来实现粗体
默认样式：粗体
9、em元素
作用：表示强调或重读的文本
使用场景：
默认样式：斜体
10、i元素
作用：表示区分普通文本的一系列文本
使用场景：技术术语、外文短语或是小说中人物的思想活动
默认样式：斜体
11、cite元素
作用：表示作品的引用，且必须包含作品的标题
使用场景：可以作为元素使用，也可以作为blockquote元素和q元素的属性
默认样式：斜体
12、dfn元素
作用：表示术语的定义
使用场景：
默认样式：有点倾斜
13、mark元素
作用：表示相关性的文本
使用场景：
默认样式：黄色的背景
14、del元素
作用：一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个元素
使用场景：
默认样式：带有删除线
15、ins元素
作用：一些已经被插入文档中的文本
使用场景：
默认样式：带有下划线
注：
经验法则：只有在没有更合适的元素时，才适合使用b元素 i元素 u元素来表达传统上用粗体、斜体或下划线表达的意思；而通常是有的。strong元素 em元素 mark元素 span元素可能是更加合适的选择
四、其他元素
1、details元素和summary元素
summary元素提供标题或者标签，details元素提供详情，点击summary元素展示details元素(具体效果可以看官方文档)
2、progress(进度条)元素
上传文件用progress元素知晓上传的进度
3、a元素
3-1、链接到文档的特定部分(需要给链接的元素设置id)
<h2 id="Mailing_address">邮寄地址</h2>
<p>要提供意见和建议，请将信件邮寄至
<a href="contacts.html#Mailing_address">我们的地址</a>
</p>
<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a></p>
3-2、下载功能(download属性)
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
download="firefox-latest-64bit-installer.exe">
下载最新的 Firefox 中文版 - Windows（64 位）
</a>
//代码实现下载
3-3、ping属性
a元素的ping属性可以直接调用接口请求，通常用于跟踪
4、map元素与area元素
用来定义一个图像的不同映射区域(可以是不规则区域)
5、wbr元素
wbr元素可以用于英文字符的精准换行，特别是URL地址换行
6、img元素
img元素设置loading属性为lazy可以实现懒加载
7、picture元素配合source元素
source元素media属性，srcset属性，type属性设置不同的值加载不同的图片，但是都有替代方案，media属性可以用CSS替代，srcset属性可以用img元素的srcset属性替代，type属性可以交给云服务厂商处理
8、hgroup元素
hgroup元素用于标题和与标题相关联的内容，将一个h1-h6元素与一个或者多个p元素组合在一起
9、figure元素与figcaption元素
figure元素用来表示图片和图片相关联的标题(说明)，figcaption元素设置标题(说明)
五、全局属性
1、accesskey
访问当前元素的快捷键，如果设置css的display属性为none，快捷键依然有效。多个元素使用相同的accesskey属性，Chrome和Edge只能触发后面一个，Firefox无效果
2、autocapitalize
控制文本在用户输入/编辑时的大小写
3、autofocus
设置元素自动获取焦点
4、class
元素类名
5、contenteditable
设置元素是否允许编辑
6、data-*属性
设置自定义属性
<a id="myA" class="data_custom" data-hover-response="My Value" href="#">链接</a>
// js获得自定义属性值
var theA = document.getElementById("myA");
var customAttr = theA.getAttribute("data-hover-response");
// CSS获得自定义属性值
.data_custom:hover:after {
content: attr(data-hover-response);
}
7、dir
设置文档流的水平流动方向
8、draggable
设置元素是否可以被拖拽
9、enterkeyhint
修改软键盘中回车键(enter键)的文案或UI
10、exportparts
和Shadow DOM相关
11、hidden
设置元素隐藏，相比类名或者style设置display:none的优先级要低
12、id
设置元素的id
13、inert
14、inputmode
设置虚拟键盘的类型，设置值为numeric，数字软键盘弹出
15、item*(itemid,itemprop,itemref,itemscope,itemtype)
微数据特性中的属性
16、is
设置自定义的内置元素属性
17、lang
定义元素的语言
18、nonce
19、part
和Shadow DOM相关
20、slot
和Shadow DOM相关
21、spellcheck
设置拼写检查属性
22、style
设置元素样式
23、tabindex
设置元素是否能被Tab键索
tabindex值为0、非法值、或者没有tabindex值的元素应该放置在tabindex值为正值的元素后面
tabindex为正数时，兄弟元素需要按照从小到大排序，父子级别需要从父到子由小到大
24、title
设置元素标题，在PC端，鼠标hover会显示相关的提示
25、translate
表示是否允许浏览器对当前元素进行翻译
六、API
1、event.target属性 event.currentTarget属性
event.target：表示点击的元素，event.currentTarget：表示绑定事件的元素。event.currentTarget和this是相等的
<a href="###" id="element"><img src="**.jpg" /></a>
element.addEventListener("click", function (event) {
event.target.style.border = "10px solid #ff0000";
event.currentTarget.style.border = "10px solid #0000ff";
});
// a元素边框为蓝色，a元素为绑定事件的元素
// img元素边框为红色，img元素为点击的元素
2、document.currentScript属性
currentScript属性：返回当前正在运行的脚本所属的script元素
3、Animation.currentTime属性
Animation.currentTime属性：返回或设置动画的当前时间值(以毫秒为单位)，无论动画正在运行还是已暂停
4、HTMLMediaElement.currentSrc属性
HTMLMediaElement.currentSrc属性：包含所选媒体源的绝对URL路径。img audio、video有多个source时可以用来获取当前加载的资源
七、注意点
1、块级元素只能嵌套在另一个块级元素里面，不能嵌套在内联元素里面，但是a元素除外，a元素可以嵌套块状元素，但是a元素不能嵌套a元素
2、元素的布尔属性只能有一个值，这个值一般与属性名称相同
<input type="text" disabled="disabled" />
<!-- 也可以这样 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />
<!-- 下面这个输入框不包含disabled属性，所以用户可以向其中输入 -->
<input type="text" />
3、不同引号之间可以互相嵌套，单引号可以嵌套双引号，双引号可以嵌套单引号
<a href="https://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>
4、元素的内容中使用多少空格(一个或多个空白字符或换行)，渲染时会将连续出现的空白字符减少为一个单独的空格符，pre元素会把内容的空白符(空格和换行符)都会显示出来
<!-- 两个代码片段渲染效果是等价的 -->
<p>狗 狗 很 呆 萌。</p>
<p>狗 狗 很
呆 萌。</p>
