Web语义化及实际应用

沐爸muba

已于 2024-09-02 15:00:58 修改

阅读量1k

点赞数 23

分类专栏：面试题文章标签：前端 html5

于 2024-08-13 12:37:50 首次发布

本文链接：https://blog.csdn.net/m0_37943716/article/details/141160916

版权

面试题专栏收录该内容

31 篇文章 0 订阅

订阅专栏

你好同学，我是沐爸，欢迎点赞、收藏、评论和关注！今天一起了解下Web语义化及其应用吧！

是什么？

使用合适的标签、属性，让页面能“说话“，让人和机器都能快速理解网页内容。

为什么？

有利于被搜索引擎搜索
有利于无障碍阅读
增强代码的可读性、可维护性

怎么做

避免使用<div>或<span>标签来包裹所有内容，而是使用语义化的标签及属性。 例如，用<h1>表示主标题，用<h2>表示副标题，用<a>表示链接，用<img>表示图片并添加alt属性，用<ul>表示无序列表，用<p>表示段落，用<header>表示页眉，用<footer>表示页脚，用<nav>表示导航等等。

语义化标签

<header>：表示一个页面或区域的页眉部分，通常包含导航链接、标志、搜索框等。
<nav>：表示页面中的导航链接部分。
<section>：表示文档中的一个独立的区段，通常包含一个标题（<h1>-<h6>）。
<article>：表示一个独立的、完整的内容区块，如博客文章、新闻报道等。
<aside>：表示与页面主要内容稍微独立的部分，如侧边栏或广告。
<footer>：表示一个页面或区域的页脚部分，通常包含版权信息、作者信息、相关链接等。
<h1> 到 <h6>：表示不同级别的标题，<h1> 是最高级别，<h6> 是最低级别。
<main>：表示文档的主要内容区域，每个页面应该只有一个 <main> 元素。
<figure> 和 <figcaption>：<figure> 表示图像、图表、代码段等独立内容，<figcaption> 表示 <figure> 的标题或说明。
<address>：表示作者或拥有者的联系信息。
<ul>：表示无序列表，列表项使用 <li> 标签。
<ol>：表示有序列表，列表项使用 <li> 标签。
<li>：表示列表项，用于 <ul> 或 <ol>。
<table>：表示表格，用于展示行列数据。
<thead>：表示表格的头部区域，通常包含列标题。
<tbody>：表示表格的主体部分，包含实际数据。
<tfoot>：表示表格的脚部区域，通常包含总结行或注释。
<tr>：表示表格中的行。
<th>：表示表格中的表头单元格。
<td>：表示表格中的单元格。
<caption>：表示表格的标题或说明。
<form>：表示表单，用于收集用户输入。
<fieldset>：表示表单中的一组相关控件。
<legend>：表示 <fieldset> 的标题。
<label>：表示表单控件的标签。
<input>：表示输入控件，如文本框、复选框、单选按钮等。
<textarea>：表示多行文本输入控件。
<button>：表示按钮。
<details> 和 <summary>：<details> 表示可以展开或折叠的内容区块，<summary> 表示 <details> 的标题。
<menu> 和 <command>：<menu> 表示一组命令按钮，<command> 表示菜单中的一个命令项。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Figure Example</title>
</head>
<body>
  <article>
      <header>
          <h1>Example of Figure and Figcaption</h1>
      </header>
  
      <section>
          <h2>图片展示</h2>
          <figure>
              <img src="image.jpg" alt="海南三亚沙滩">
              <figcaption>这里对图片进行说明</figcaption>
          </figure>
      </section>
  
      <section>
          <h2>代码片段</h2>
          <figure>
              <pre>
                  <code>
                      function example() {
                          console.log("Hello, World!");
                      }
                  </code>
              </pre>
              <figcaption>一个执行打印的函数</figcaption>
          </figure>
      </section>
  </article>
</body>
</html>

语义化属性

alt：用于 <img> 标签，为图像提供替代文本，这对于视觉障碍用户和搜索引擎都是非常重要的。
title：为元素提供额外的信息或解释，当鼠标悬停在元素上时显示。
lang：用于 <html> 标签，指定文档的主要语言，有助于搜索引擎和翻译工具。
dir：指定元素的文本方向，可以是 ltr（从左到右）或 rtl（从右到左）。
id：为元素提供唯一的标识符，通常用于CSS和JavaScript中引用特定的元素。
class：为元素提供类别名称，可以用于CSS中定义样式，也可以用于JavaScript中选择元素。
role：用于ARIA（Accessible Rich Internet Applications）中，提供额外的辅助信息，帮助辅助技术理解元素的作用。
aria-*：是一系列ARIA属性，用于增强网页的可访问性。例如：
- aria-label：提供元素的文本标签。
- aria-labelledby：通过ID引用来指定元素的标签。
- aria-hidden：指示元素是否对辅助技术隐藏。
- aria-live：指示元素是否具有动态内容，以及内容更新的紧急性。
for：与 <label> 标签一起使用，指定与表单控件关联的元素。
type：用于 <input> 标签，指定输入控件的类型，如 text, checkbox, radio 等。
name：用于表单控件，如 <input> 和 <button>，指定控件的名称，这对于表单数据的提交非常重要。
value：指定表单控件的值，如 <input> 的默认值或 <button> 的显示文本。
placeholder：为 <input> 和 <textarea> 提供占位符文本，提示用户输入内容。
pattern：用于 <input>，指定输入字段的正则表达式，用于验证输入值。
required：表示表单控件是否必须填写。
maxlength 和 minlength：分别用于限制 <input> 和 <textarea> 的最大和最小字符长度。
multiple：用于 <input> 和 <select>，指示是否可以选择多个值。
checked：用于 <input type="checkbox"> 或 <input type="radio">，表示控件是否被选中。
selected：用于 <option> 标签，表示是否选中该选项。
autofocus：用于 <input>, <textarea>, 和 <select>，页面加载时自动获得焦点。
readonly：使表单控件为只读状态。
disabled：禁用表单控件。
tabindex：设置元素的Tab键顺序，用于控制元素的焦点顺序。
data-*：自定义属性，用于存储页面或应用程序的私有数据。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic Attributes Example</title>
</head>
<body>

  <!-- 使用 alt 属性为图像提供替代文本 -->
  <img src="image.jpg" alt="A description of the image content">
  
  <!-- 使用 title 属性为元素提供额外信息 -->
  <p title="Hover over this text for more info">Some important information.</p>
  
  <!-- 使用 lang 属性指定页面语言 -->
  <html lang="zh-CN">
  
  <!-- 使用 dir 属性指定文本方向 -->
  <div dir="rtl">这是一个从右到左的文本示例。</div>
  
  <!-- 使用 id 和 class 属性为元素提供唯一标识符和类别 -->
  <div id="unique-section" class="content-block">
      <!-- 内容 -->
  </div>
  
  <!-- 使用 role 属性增强可访问性 -->
  <div role="navigation">...</div>

  <!-- 使用 aria-label 属性为元素提供辅助技术可读的标签 -->
  <button aria-label="Close dialog">X</button>
  
  <!-- 使用 aria-labelledby 属性引用其他元素作为当前元素的标签 -->
  <div id="description">Some descriptive text</div>
  <button aria-labelledby="description">Click me</button>
  
  <!-- 使用 for 属性与 label 标签一起使用 -->
  <label for="user-input">Enter your name:</label>
  <input type="text" id="user-input" name="username">
  
  <!-- 使用 type 属性指定 input 控件的类型 -->
  <input type="email" name="useremail" placeholder="Enter your email">
  
  <!-- 使用 name 属性为表单控件指定名称 -->
  <button type="submit" name="submit">Submit</button>
  
  <!-- 使用 value 属性指定表单控件的值 -->
  <input type="submit" value="Click to send">
  
  <!-- 使用 placeholder 属性为 input 提供占位符 -->
  <input type="text" placeholder="Enter your search term">

  <!-- 使用 pattern 属性为 input 指定正则表达式验证 -->
  <input type="text" pattern="[A-Za-z]{3}" title="Three letter abbreviation">
  
  <!-- 使用 required 属性表示表单控件必须填写 -->
  <input type="text" required>
  
  <!-- 使用 maxlength 和 minlength 属性限制输入长度 -->
  <textarea maxlength="200" minlength="10"></textarea>
  
  <!-- 使用 multiple 属性允许选择多个值 -->
  <input type="file" multiple>
  
  <!-- 使用 checked 属性表示复选框或单选按钮被选中 -->
  <input type="checkbox" checked>
  
  <!-- 使用 selected 属性表示选项被选中 -->
  <select>
      <option value="option1" selected>Option 1</option>
      <option value="option2">Option 2</option>
  </select>

  <!-- 使用 autofocus 属性使元素在页面加载时自动获得焦点 -->
  <input type="text" autofocus>
  
  <!-- 使用 readonly 属性使表单控件为只读状态 -->
  <input type="text" readonly value="Readonly value">
  
  <!-- 使用 disabled 属性禁用表单控件 -->
  <button type="submit" disabled>Submit</button>
  
  <!-- 使用 tabindex 属性设置元素的Tab键顺序 -->
  <a href="https://example.com" tabindex="1">Visit Example.com</a>
  
  <!-- 使用 data-* 属性存储私有数据 -->
  <div data-user-id="123">Some content related to user 123</div>

</body>
</html>