常见的语义化标签
<header>网页的页眉部分
<header>这是一个页面</header>
<main>网页的主要部分
<main>
页面内容
</main>
<footer>网页的页脚部分
<footer>页眉，这个页面是xxx写的</footer>
<aside>可用于侧边栏的广告，链接或者与附近内容相关的内容
<aside>
<h2>I社新作现已发售！</h2>
<p>
拉娜的奇妙洞窟冒险,内容来源:I社游戏-https://isheweiyi.com (滑稽)
</p>
</aside>
<nav> 标签定义导航链接的部分。
<nav>
<a>Home</a>
<a>Other</a>
<a>About</a>
</nav>
<article>定义页面独立的内容，其中可以嵌套<header>,<footer>,<sections>等
<article>
<header>小页面标题</header>
<main>内容</main>
</article>
<section>网页文档部分，长表单或者文章
<section>
<p>xxxx</p>
</section>
<figure>用于文档中的图像
<figure>
<p>黄浦江上的的卢浦大桥</p>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
用一个 div 模拟 textarea 的实现？
.box {
width: 200px;
height: 60px;
border: 1px #000 solid;
outline: none;
}
<div class="box" contenteditable></div>
loading=lazy 属性
性能优化。您可以使用该loading=lazy属性来推迟图像的加载，直到用户滚动到它们为止。
<img src='image.jpg' loading='lazy' alt='Alternative Text'>
电子邮件、电话和短信链接
<a href="mailto:{email}?subject={subject}&body={content}">
Send us an email
</a>
<a href="tel:{phone}">
Call us
</a>
<a href="sms:{phone}?body={content}">
Send us a message
</a>
有序列表start属性。
<ol start="11">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
<li>Go</li>
</ol>
meter 元素
您可以使用该<meter>元素来显示数量。不需要 JavaScript/CSS。
<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>
<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>
<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>
HTML 原生搜索
<div class="wrapper">
<h1>
Native HTML Search
</h1>
<input list="items">
<datalist id="items">
<option value="Marko Denic">
<option value="FreeCodeCamp">
<option value="FreeCodeTools">
<option value="Web Development">
<option value="Web Developer">
</datalist>
</div>
字段集元素
可以使用该<fieldset>元素对<label>Web 表单中的多个控件和标签 ( )进行分组。
<form>
<fieldset>
<legend>Choose your favorite language</legend>
<input type="radio" id="javascript" name="language">
<label for="javascript">JavaScript</label><br/>
<input type="radio" id="python" name="language">
<label for="python">Python</label><br/>
<input type="radio" id="java" name="language">
<label for="java">Java</label>
</fieldset>
</form>
Window.opener
打开target="_blank"的页面允许新页面访问原始页面window.opener。这可能会对安全和性能产生影响。包括rel="noopener"或rel="noreferrer"可以防止这种情况发生。
<a href="https://markodenic.com/" target="_blank" rel="noopener">
Marko's website
</a>
Favicon 缓存破坏
想要刷新您网站的图标，您可以通过添加?v=2到文件名来强制浏览器下载新版本。
这在生产中特别有用，可以确保用户获得新版本。
<link rel="icon" href="/favicon.ico?v=2" />
原生 HTML 滑块
您可以使用它 <input type="range"> 来创建滑块。
<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20">
<label for="result">Your choice: </label>
<input type="number" id="result" name="result">
HTML 手风琴
您可以使用该details元素来创建 HTML 手风琴。
<div class="wrapper">
<details>
<summary>
Click me to see more details
</summary>
<p>
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.
</p>
</details>
</div>
输入 type="search"
将type="search"用于您的搜索输入，您将白嫖“清除”按钮。
<form>
<label for="text">Input Type Text</label>
<input type="text" id="text" name="text">
<label for="search">Input Type Search</label>
<input type="search" id="search" name="search">
</form>
download属性
您可以使用download链接中的属性来下载文件，而不是导航到该文件。
<a href='path/to/file' download>
Download
</a>
视频缩略图
使用该poster属性指定在视频下载时或在用户点击播放按钮之前显示的图像。
<video poster="path/to/image">
