你应该知道的 5 大 HTML 技巧

HTML 是 Web 开发中最基础的语言，下面介绍你应该知道的 5 大 HTML 技巧。

1. 使用语义化标签

语义化标签是指具有语义含义的标签，如 <header>、<nav>、<article>、<section>、<footer> 等。使用语义化标签可以增加代码的可读性和可维护性，也有利于 SEO。

<header>
  <h1>这是标题</h1>
  <nav>
    <ul>
      <li><a href="#">导航 1</a></li>
      <li><a href="#">导航 2</a></li>
      <li><a href="#">导航 3</a></li>
    </ul>
  </nav>
</header>

<article>
  <h2>文章标题</h2>
  <p>文章内容</p>
</article>

<footer>
  <p>版权信息等</p>
</footer>

2. 使用 data-* 属性

data-* 属性是 HTML5 新增的自定义属性，可以用于存储元素的数据。它的好处在于，可以通过 JavaScript 程序轻松地读取和修改元素的数据，而不需要使用额外的 DOM 操作。

<div id="my-div" data-count="10" data-color="#ff0000"></div>

const div = document.querySelector('#my-div');
const count = div.dataset.count;
const color = div.dataset.color;
div.dataset.count = 20;
div.dataset.color = '#00ff00';

3. 使用 aria-* 属性

aria-* 属性是无障碍功能中常用的属性，可以用于描述元素的状态和角色。它的好处在于，可以帮助视觉障碍用户更好地理解页面内容，提高访问性。

<div role="button" tabindex="0" aria-pressed="false" aria-label="按键"></div>

4. 使用 srcset 属性

srcset 属性是用于响应式图片的属性，可以根据浏览器窗口的大小自动切换图片。它的好处在于，可以减少页面加载时间，提高用户体验。

<img src="image-800x600.jpg"
     srcset="image-800x600.jpg 800w,
             image-1200x900.jpg 1200w"
     alt="响应式图片">

5. 使用 input 的 type 属性

input 的 type 属性有多个取值，实现了以下不同的表单输入功能：

• text: 单行文本输入
• password: 密码输入
• email: 邮箱输入
• tel: 电话号码输入
• number: 数字输入
• checkbox: 多选框
• radio: 单选框
• date: 日期输入
• time: 时间输入

<form>
  <label>用户名：<input type="text"></label>
  <label>密码：<input type="password"></label>
  <label>邮箱：<input type="email"></label>
  <label>电话：<input type="tel"></label>
  <label>数量：<input type="number"></label>
  <label><input type="checkbox">同意协议</label>
  <label><input type="radio" name="sex" value="male">男</label>
  <label><input type="radio" name="sex" value="female">女</label>
  <label>日期：<input type="date"></label>
  <label>时间：<input type="time"></label>
  <button type="submit">提交</button>
</form>

以上就是你应该知道的 5 大 HTML 技巧，希望对你有所帮助。