a 标签及其属性

rel 属性

标签的 rel 属性用于指定当前文档与被链接文档的关系

创建美丽快速的网站
create beautiful and fast websites

loading=’lazy’ 延迟加载

性能提示。使用loading=’lazy’ 属性来推迟图像的加载，直到用户滚动到他们为止

  1. <img src="image.jpg" loading='lazy' alt="Alternative Text" />

电子邮箱、电话和短信链接

  1. <a href='mailto:{email}?subject={subject}&body{content}'>
  2. 发送邮箱
  3. </a>
  4. <a href="tel:{phone}">
  5. 拨打电话
  6. </a>
  8. <a href="sms:{phone}?body={content}">
  9. 发送短信
  10. </a>

start 更改有序列的起点

  1. <ol start='11'>
  2.   <li>html</li>
  3.   <li>css</li>
  4.   <li>javascript</li>
  5. <ol>
  1. html
  2. css
  3. javascript

meter元素显示数量

  1. <lable for="vale">low</lable>
  2. <meter id="vale" min='0' max="100" low="30" hight="75"  optimum="80" value="25" ></meter>

image.png

html 原生搜索

  1. <div class="wrapper">
  2.   <h1>
  3.       Native HTML Search
  4.   </h1>
  5.   <input list="items">
  6.   <datalist id="items">
  7.     <option value="Marko Denic">
  8.   </datalist>
  9.  </div>

image.png

字段集元素

fieldset 标签对lable 表单中多个控件进行分组

  1. <form>
  2.   <fieldset>
  3.     <legend>分组1 </legend>
  4.     <input type='radio' id="javascript" >
  5.     <lable>javascript</lable>
  6.   </fieldset>
  7.   <fieldset>
  8.   <legend>分组2 </legend>
  9.     <input type="radio" id="python">
  10.     <lable>python</lable>
  11.   </fieldset>
  12. </form>

image.png

window.opener

链接打开新的标签 target=”_blank” 页面允许访问原始页面 window.opener 

  1. <a href="https://www.baidu.com" target='_blank' rel='noopener'>
  2.  百度
  3. </a>

让页面a标签都可以重新打开新标签

  1. <head>
  2.  <base target="_blank">
  3. </head>
  4. <a href="https://www.baidu.com">
  5.  百度
  6. </a>

favicon 缓存破坏

要刷新您的网站图标，您可以添加?v=2 到文件名来强制浏览器下载新版本 这在生产中特别有用 可以确保用户获取新版本

  1. <link rel='icon' href="/logo.ico?v=2" />

mark 标签

使用mark标签来突出显示文本

  1. <mark>
  2.     突出显示
  3. </mark>
  1. 突出显示

下载 属性

可以使用download 链接中的属性来下载文件 而不是导航到该文件

  1. <a href="path/to/file" download>
  2.   Download
  3. </a>

视频缩略图

使用 poster 属性在视频下载时或用户点击播放按钮之前显示图像

  1. <video poster="path/to/image">

请求头安全

安全的请求头设置