HTML学习笔记

2024-10-14 45 阅读3分钟

usemap是<img>标签的一个属性，用作指明所使用的map标签的name。map标签定义一个图像映射，点击图像映射的特定区域时，就可以触发相应的操作或链接。area标签是映射区域；它的属性有：shape是区域的形状；coords是矩形区域的左上角坐标和右下角坐标；href是对应区域所链接的内容。

<img src="example.jpg" alt="Example Image" usemap="#exampleMap">

<map name="exampleMap">
  <!-- 矩形区域 -->
  <area shape="rect" coords="10, 20, 150, 100" href="region1" alt="Region 1">
  
  <!-- 圆形区域 -->
  <area shape="circle" coords="200, 150, 50" href="region2" alt="Region 2">
  
  <!-- 多边形区域 -->
  <area shape="poly" coords="300, 100, 350, 150, 400, 100" href="region3" alt="Region 3">
</map>

图片懒加载：img标签的属性loading：lazy；监听滚动事件，当图片和视口接近到一个计算得到的距离（由浏览器定义），图片才会开始加载。

在不支持loading：lazy属性的浏览器中，可以通过为img标签添加一个自定义data-src属性，用于存放图片的真实路径，而src中暂时放置一个占位符图片，监听浏览器滚动事件，当图片和视口接近时，通过dom.dataset.src获取到真实路径赋值给dom.src，从而实现懒加载。

src和href的区别：

src全称 source，它通常用于img、video、audio、script等元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js 脚本、img 图片、frame 等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是将 js 脚本放在底部而不是头部的原因。
href是超链接，指向网络资源，浏览器识别到它指向的文件时，只是建立一个链接关系，不会停止对当前文档的处理，通常用于a、link等。

<label>元素的for属性可以用来关联一个特定的<input>元素，这样当用户点击<label>文本时，会自动将焦点移到对应的<input>元素上。
<pre>标签用于定义预格式化的文本。它能够保留文本中的空格和换行符，并且通常以等宽字体显示文本。这使得<pre>标签非常适合用来展示计算机代码、命令行输出或其他需要保持原有格式的文本内容。
<!DOCTYPE>位于文档最前面的位置，用于告知浏览器文档是使用哪种 HTML 版本编写的。HTML5 的标准声明：<!DOCTYPE html>。
当<input>元素的type属性设置为"password"时，浏览器通常会提供自动填充功能。为了防止浏览器自动填充密码字段，可以使用autocomplete: new-password避免意外填写现有密码。

JS 能力检测判断是否支持该属性，创建一个input标签，为其设置该属性及对应属性值，检查其属性及属性值是否被正确设置。
如果浏览器不支持该属性，可在表单之前创建一个隐藏的密码输入框，浏览器只会对第一个密码输入框进行自动填充。