前端冷门知识-HTML

刘的娃
127 阅读7分钟

base标签

  • 标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个base标签，而且只能放在head里面。它是单独使用的标签，没有闭合标签
  • 详情见网道
<head>
<base href="https://www.origin.com/files/" target="_blank">
</head>
  • 一旦设置了base，就对整个网页都有效。如果要改变某个链接的行为，只能用绝对链接替代相对链接。尤其需要注意锚点，这时锚点也是针对base计算的

tabindex标签属性

  • 使用 Tab 键,通过tabindex设置网页焦点转移的顺序
  • 详情见网道

属性值

  • -1不参与 Tab 键对网页元素的遍历
  • 0该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置
  • 正整数网页元素按照从小到大的顺序,如果多个元素的tabindex属性值相同，则按照在网页源码里面出现的顺序遍历
<input tabindex="2"/>
<p tabindex="0">这段文字可以获得焦点。</p>

accesskey

  • 指定网页元素获得焦点的快捷键，该属性的值必须是单个的可打印字符。只要按下快捷键，该元素就会得到焦点
  • 详情见网道
<button accesskey="s">提交</button>
  • 注意: 快捷键是“功能键 + 字符键”的组合,必须配合功能键，一起按下才会生效。

contenteditable

  • HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容
  • 详情见网道
<p contenteditable="true">
鼠标点击，本句内容可修改。
</p>

spellcheck

  • spellcheck属性就表示，是否打开拼写检查,拼错的单词下面会显示红色的波浪线
  • 详情见网道
<p contenteditable="true" spellcheck="true">
英语单词 separate 容易写错成 seperate。
</p>
  • 注意:不可编辑的状态下，拼写错误是不提示显示的。对于那些不可编辑的元素，该属性无效

img标签

referrerpolicy

  • 图片加载的 HTTP 请求，默认会带有Referer的头信息。referrerpolicy属性对这个行为进行设置

值

  • no-referrer 表示 HTTP 头部信息将不会发送 referrer 。
  • origin 表示 referrer 只包含策略、主机名、端口等页面源的信息。
  • unsafe-url 这意味着引用者将包括源站和路径（但不包括片段、密码或用户名）。
<img src="" referrerpolicy="no-referrer">

crossorigin

  • 图片和网页属于不同的网站，网页加载图片就会导致跨域请求，对方服务器可能要求跨域认证。crossorigin属性用来告诉浏览器，是否采用跨域的形式下载图片，默认是不采用。

值

  • anonymous：跨域请求不带有用户凭证（通常是 Cookie）。
  • use-credentials：跨域请求带有用户凭证。
<img src="foo.jpg" crossorigin="anonymous">

loading

  • 浏览器的默认行为是，只要解析到<img>标签，就开始加载图片，loading属性改变了这个行为，可以指定图片的懒加载，即图片默认不加载，只有即将滚动进入视口，变成用户可见时才会加载

值

  • auto：浏览器默认行为，等同于不使用loading属性。
  • lazy：启用懒加载。
  • eager：立即加载资源，无论它在页面上的哪个位置。
// 由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。
<img src="image.png" loading="lazy" alt="…" width="200" height="200">

响应式图像

link标签

rel属性

值

  • stylesheet：加载一张样式表。
  • prefetch：要求浏览器提前下载并缓存指定资源，供下一个页面使用。它的优先级较低，浏览器可以不下载。
  • preload：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到。它的优先级较高，浏览器必须立即下载。
  • prerender：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。
  • search：提供当前网页的搜索链接。
  • pingback：接收当前文档 pingback 请求的网址。
  • preconnect：要求浏览器提前与给定服务器，建立 HTTP 连接。

media属性

  • media属性给出外部资源生效的媒介条件
  • 下面代码中，如果屏幕宽度在600像素以下，则只加载第一个资源，否则就加载第二个资源
<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

script标签

type属性

  • module,表示是一个ES6模块,不是传统的脚本
  • nomodule,用于那些不支持 ES6 模块的浏览器。支持 ES6 模块的浏览器，会不加载指定的脚本。这个属性通常与type="module"配合使用，作为老式浏览器的回退方案
<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

form表单

input

type

  • type="color"是一个选择颜色的控件，它的值一律都是#rrggbb格式

datalist

  • <datalist>标签是一个容器标签，用于为指定控件提供一组相关数据，通常用于生成输入提示。它的内部使用<option>，生成每个菜单项
  • <datalist>的数据列表用于输入建议，用户点击输入框的时候，会显示一个下拉菜单，里面是建议的输入项
<label for="ice-cream-choice">冰淇淋：</label>
<input type="text" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">

<datalist id="ice-cream-flavors">
  <option value="巧克力">
  <option value="椰子">
  <option value="薄荷">
  <option value="草莓">
  <option value="香草">
</datalist>

output

  • 行内元素,用于显示用户操作的结果

值

  • for：关联控件的id属性，表示为该控件的操作结果。
  • form：关联表单的id属性。
  • name：控件的名称。
<input type="number" name="a" value="10"> +
<input type="number" name="b" value="10"> =
<output name="result">20</output>

progress标签

  • 行内元素，表示任务的完成进度。浏览器通常会将显示为进度条

值

  • max：进度条的最大值，应该是一个大于0的浮点数。默认值为1。
  • value：进度条的当前值。它必须是0和max属性之间的一个有效浮点数。如果省略了max属性，该值则必须在0和1之间。如果省略了value属性，则进度条会出现滚动，表明正在进行中，无法知道完成的进度

metter标签

  • 一个行内元素，表示指示器，用来显示已知范围内的一个值，很适合用于任务的当前进度、磁盘已用空间、充电量等带有比例性质的场合。浏览器通常会将其显示为一个不会滚动的指示条
  • 详情见网道

dialog标签

  • 一个可以关闭的对话框
  • 默认情况下，对话框是隐藏的，不会在网页上显示。如果要让对话框显示，必须加上open属性
<dialog open>
  Hello world
</dialog>
  • <dialog>元素里面，可以放入其他 HTML 元素
  • 注意,下面代码<form>的method属性设为dialog，这时点击提交按钮，对话框就会消失。但是，表单不会提交到服务器，浏览器会将表单元素的returnValue属性设为 Submit 按钮的value属性（上例是foo）
<dialog open>
  <form method="dialog">
    <input type="text">
    <button type="submit" value="foo">提交</button>
  </form>
</dialog>

方法

  • Dialog.showModal()和Dialog.close()两个方法，用于打开/关闭对话框
const modal = document.querySelector('dialog');

// 对话框显示，相当于增加 open 属性
modal.showModal();

// 对话框关闭，相当于移除 open 属性
modal.close();

事件

  • <dialog>元素有两个事件，可以监听
  1. close：对话框关闭时触发
  2. cancel：用户按下esc键关闭对话框时触发
  • 如果希望用户点击透明层，就关闭对话框，可以用下面的代码
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});

details和summary标签

  • 用来折叠内容，浏览器会折叠显示该标签的内容
  • 详情见网道
<details>
这是一段解释文本。
</details>
  • 标签的open属性，用于默认打开折叠
<details open>
这是一段解释文本。
</details>

summary

  • <summary>标签用来定制折叠内容的标题
<details>
  <summary>这是标题</summary>
  这是一段解释文本。
</details>

方法

  • Details元素的open属性返回<details>当前是打开还是关闭
const details = document.querySelector('details');

if (detail.open === true) {
  // 展开状态
} else {
  // 折叠状态
}

事件

  • Details的toggle事件，打开或关闭折叠时，都会触发这个事件
details.addEventListener('toggle', event => {
  if (details.open) {
    /* 展开状况 */
  } else {
    /* 折叠状态 */
  }
});
avatar
文章
阅读
粉丝