什么是 HTML？

超文本标记语言 (HTML) 是设计用于在 Web 浏览器中显示的文档的标准标记语言。它可以借助级联样式表 (CSS) 等技术和 JavaScript 等脚本语言来打辅助。

loading=lazy 属性

性能优化。您可以使用该loading=lazy属性来推迟图像的加载，直到用户滚动到它们为止。

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

电子邮件、电话和短信链接：

  1. <a href="mailto:{email}?subject={subject}&body={content}">
  2.     Send us an email
  3. </a>
  4. <a href="tel:{phone}">
  5.     Call us
  6. </a>
  7. <a href="sms:{phone}?body={content}">
  8.     Send us a message
  9. </a>

有序列表start属性。

使用该start属性更改有序列表的起点。

  1. <ol start="11">
  2.     <li>HTML</li>
  3.     <li>CSS</li>
  4.     <li>JavaScript</li>
  5.     <li>Python</li>
  6.     <li>Go</li>
  7. </ol>

HTML - 图1

meter 元素

您可以使用该<meter>元素来显示数量。不需要 JavaScript/CSS。

  1. <label for="value1">Low</label>
  2. <meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>
  3. <label for="value2">Medium</label>
  4. <meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>
  5. <label for="value3">High</label>
  6. <meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>

HTML - 图2

HTML 原生搜索

  1. <div class="wrapper">
  2.     <h1>
  3.         Native HTML Search
  4.     </h1>
  6.     <input list="items">
  8.     <datalist id="items">
  9.         <option value="Marko Denic">
  10.         <option value="FreeCodeCamp">
  11.         <option value="FreeCodeTools">
  12.         <option value="Web Development">
  13.         <option value="Web Developer">
  14.     </datalist>
  15. </div>

HTML - 图3

字段集元素

您可以使用该<fieldset>元素对<label>Web 表单中的多个控件和标签 ( )进行分组。

  1. <form>
  2.     <fieldset>
  3.         <legend>Choose your favorite language</legend>
  4.         <input type="radio" id="javascript" name="language">
  5.         <label for="javascript">JavaScript</label><br/>
  6.         <input type="radio" id="python" name="language">
  7.         <label for="python">Python</label><br/>
  8.         <input type="radio" id="java" name="language">
  9.         <label for="java">Java</label>
  10.     </fieldset>
  11. </form>

HTML - 图4

Window.opener

打开target="_blank"的页面允许新页面访问原始页面window.opener。这可能会对安全和性能产生影响。包括rel="noopener"或rel="noreferrer"可以防止这种情况发生。

  1. <a href="https://markodenic.com/" target="_blank" rel="noopener">
  2.     Marko's website
  3. </a>

基本元素

如果要在新选项卡中打开文档中的所有链接，可以使用<base>element：

  1. <head>
  2.     <base target="_blank">
  3. </head>
  4. <!-- This link will open in a new tab. -->
  5. <div class="wrapper">
  6.     This link will be opened in a new tab: &nbsp;
  7.     <a href="https://freecodetools.org/">
  8.         Free Code Tools
  9.     </a>
  10.     <p>
  11.         Read more: <br>
  12.         <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
  13.             MDN Documentation
  14.         </a>
  15.     </p>
  16. </div>

HTML - 图5

Favicon 缓存破坏

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

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

拼写检查属性

使用该spellcheck属性来定义是否检查元素的拼写错误。

  1. <label for="input1">spellcheck="true"</label>
  2. <input type="text" id="input1" spellcheck="true">
  3. <label for="input2">spellcheck="false"</label>
  4. <input type="text" id="input2" spellcheck="false">

HTML - 图6

原生 HTML 滑块

您可以使用它 <input type="range"> 来创建滑块。

  1. <label for="volume">Volume: </label>
  2. <input type="range" id="volume" name="volume" min="0" max="20">
  3. <label for="result">Your choice: </label>
  4. <input type="number" id="result" name="result">

HTML - 图7

HTML 手风琴

您可以使用该details元素来创建 HTML 手风琴。

  1. <div class="wrapper">
  2.     <details>
  3.         <summary>
  4.             Click me to see more details
  5.         </summary>
  6.         <p>
  7.             Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
  8.         </p>
  9.     </details>
  10. </div>

HTML - 图8

mark标签

您可以使用<mark>标签来突显文本。
HTML - 图9

download属性

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

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

性能提示

使用.webp图像格式缩小图像并提高网站的性能。

  1. <picture>
  2.     <!-- load .webp image if supported -->
  3.     <source srcset="logo.webp" type="image/webp">
  5.     <!-- 
  6.         Fallback if `.webp` images or <picture> tag 
  7.     not supported by the browser.
  8.     -->
  9.     <img src="logo.png" alt="logo">
  10. </picture>

视频缩略图

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

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

输入 type="search"

将type="search"用于您的搜索输入，您将白嫖“清除”按钮。

  1. <form>
  2.     <label for="text">Input Type Text</label>
  3.     <input type="text" id="text" name="text">
  5.     <label for="search">Input Type Search</label>
  6.     <input type="search" id="search" name="search">
  7. </form>

HTML - 图10

video/audio隐藏下载按钮

  1. <video src="" controlsList="nodownload"></video>

查看video 的内部构造

chrome 下，开发者工具 setting Preferences Elements 勾选 “Show user agent shadow DOM”
HTML - 图11
HTML - 图12

图片懒加载 - 延迟获取资源

通过为图片文件添加loading=”lazy”的属性来实现图片懒加载:

  1. <img src="image.png" loading="lazy" alt="图片" />

输入提示

通过标签来实现。需要注意的是，使用时这个标签的id属性需要和input元素的list属性一致。

  1. <label for="country">请选择喜欢的国家:</label>
  2. <input list="countries" name="country" id="country">
  3. <datalist id="countries">
  4.   <option value="UK">
  5.   <option value="Germany">
  6.   <option value="USA">
  7.   <option value="Japan">
  8.   <option value="India">
  9.   <option value=“China”>
  10. </datalist>

图片展示适配问题-Picture标签

允许我们来添加多张图片资源，并且根据不同的分辨率需求来展示不同的图片。 我们可以定义不同区间的最小分辨率来确定图片素材，这个标签的使用有些类似

标签。

  1. <picture>
  2.   <source media="(min-width:768px)" srcset="med_flower.jpg">
  3.   <source media="(min-width:495px)" srcset="small_flower.jpg">
  4.   <img src="high_flower" style="width: auto;" />
  5. </picture>

简化跳转路径

页面上的所有链接规定默认地址或默认目标

标记必须具有href和target属性。

  1. <head>
  2.   <base href="https://www.weibo.com/" target="_blank">  
  3. </head>
  4. <body>
  5.   <a href="jackiechan">成龙</a>
  6.   <a href="kukoujialing">贾玲</a>
  7. </body>

页面重定向（刷新）

  1. <meta http-equiv="refresh" content="4; URL='https://google.com' />

常用的meta属性设置

  1. <meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转
  2. <meta name="full-screen" content="yes">             //全屏显示
  3. <meta name="browsermode" content="application">     //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
  4. <meta name="x5-orientation" content="portrait">     //QQ强制竖屏
  5. <meta name="x5-fullscreen" content="true">          //QQ强制全屏
  6. <meta name="x5-page-mode" content="app">            //QQ应用模式

电话号码识别

在 iOS Safari （其他浏览器和 Android 均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：

  • 7 位数字，形如：1234567
  • 带括号及加号的数字，形如：(+86)123456789
  • 双连接线的数字，形如：00-00-00111
  • 11 位数字，形如：13800138000

关闭识别

  1. <meta name="format-detection" content="telephone=no" />

开启识别

  1. <a href="tel:123456">123456</a>

邮箱识别（Android）

  1. <meta content="email=no" name="format-detection" />
  2. // or 
  3. <a mailto:123456@163.com">123456@163.com</a>

iframe高度设置

  1. <template>
  2.   <div class="iframe-box" :style="{height}">
  3.     <iframe src="http://34.141.107.30" frameborder="0"></iframe>
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  9.   data () {
  10.     return {
  11.       height: '100%'
  12.     }
  13.   },
  14.   mounted () {
  15.     this.height = document.querySelector('iframe').contentWindow.document.querySelector('html').offsetHeight + 'px'
  16.   }
  17. }
  18. </script>

table字体膨胀

  1. th,td {     -webkit-text-size-adjust: none; }