HTML语义化的案例分析 | 豆包MarsCode AI刷题

NAGI
143 阅读4分钟

（由于文字代码比例问题，所以代码改为图片）

相关定义：

HTML语义化是关于使用语义化标签，以便让网页内容更具结构性、易读性和可访问性。

优势

  • 提高代码可读性：使用语义化标签可以使代码结构更加清晰。例如，通过 <nav> 标签可以很容易地辨识出网站的导航部分，而非语义化标签则难以做到这一点。

  • 增强SEO效果：搜索引擎爬虫可以通过语义化标签更好地理解网页内容，从而有助于网页的排名。

  • 改进无障碍访问：语义化标签能够帮助辅助技术（如屏幕阅读器）正确解读页面内容，提高网站的可访问性。

  • 便于样式和脚本的管理：语义化标签有助于通过 CSS 和 JavaScript 更轻松地定位和管理页面的不同部分。

在下文我将把上课视频讲到的网站html结构分为是否语义化来进行对比

列表

有序列表

image.png image.png

无序列表

image.png

image.png

key-value形式列表，definitionlist

  • <dl>：定义一个描述列表的容器。

  • <dt>：定义描述列表中的术语或标题。

  • <dd>：定义与 <dt> 相关的描述或定义。

语义化

image.png

image.png

标签

<a>标签使用target属性

不替换原有页面，打开一个新的窗口

<a href="https://www.bytedance.com/" target="_blank"> 字节跳动官网 </a>

<img> 标签：

功能：用于在网页中嵌入图像。

属性：

  • src：指定图像的来源 URL。在这个例子中，图像链接指向一张图片。
  • alt：提供图像的替代文本，如果图像无法加载或用户使用屏幕阅读器，该文本会被读出。在这个例子中，替代文本是 "Metal movable type"。
  • width：设置图像的宽度。浏览器会自动按比例调整图像的高度。

2. <audio> 标签：

功能：用于在网页中嵌入音频文件。

属性：

  • src：指定音频文件的来源。在这个例子中，音频文件路径为 /assets/music.ogg。
  • controls：启用音频播放器的控件，如播放、暂停、音量控制等，让用户可以与音频交互。

3. <video> 标签：

功能：用于在网页中嵌入视频文件。

属性：

  • src：指定视频文件的来源。在这个例子中，视频文件路径为 /assets/video.mp4。
  • controls：启用视频播放器的控件，让用户可以播放、暂停、调整音量等。

表单

image.png

复选框 (<input type="checkbox">)

功能：允许用户选择一个或多个选项。

  • 第一个复选框没有被选中。

  • 第二个复选框是被选中的。checked 属性表示该复选框在页面加载时处于选中状态。

image.png

单选按钮 (<input type="radio">)

  • 功能：允许用户从一组选项中选择一个。

  • 两个单选按钮都使用相同的 name 属性（sport），这意味着用户只能选择其中一个。

<p>
  <label><input type="radio" name="sport" />1</label>
  <label><input type="radio" name="sport" />2</label>
</p>

<body>

<p>
  <span class="radio">
    <span class="radio-circle"></span> 1
  </span>
  <span class="radio">
    <span class="radio-circle"></span> 2
  </span>
</p>

</body>
<style>
.radio {
  display: inline-block;
  cursor: pointer;
  margin-right: 10px;
}

.radio-circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #000;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

.radio-circle.selected {
  background-color: #000;
}
</style>
<script>
document.querySelectorAll('.radio').forEach(item => {
  item.addEventListener('click', () => {
    // 清除所有的选择状态
    document.querySelectorAll('.radio-circle').forEach(circle => {
      circle.classList.remove('selected');
    });
    // 选中当前的按钮
    item.querySelector('.radio-circle').classList.add('selected');
  });
});

</script>

下拉选择框 (<select>)

  • 功能：提供一个下拉列表供用户选择。

  • 下拉列表中包含三个选项，用户可以从中选择一个。

<p>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</p>
image.png image.png image.png image.png

数据列表 (<datalist>)

  • 功能：提供一个输入框，用户可以输入文本，同时显示预定义的选项供选择。

  • input 标签的 list 属性指向了一个 datalist 元素的 ID（countries），这样用户在输入时会看到与输入内容相关的建议。

<input list="countries" />
<datalist id="countries">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</datalist>

image.png

image.png image.png

引用

(<blockquote> 和 cite 属性)：

  • 功能：<blockquote> 标签用于引用一段较长的文本。通常用于引述他人的观点或话语。

  • cite 属性：提供引用来源的 URL，指向一个链接

书名和引用 (<cite> 和 <q>)

  • <cite> 标签：用于表示书名、电影名等的引用。

  • <q> 标签：用于短引用，通常会在浏览器中自动添加引号。

代码片段 (<code> 和 <pre>)

  • <code> 标签：用于表示代码片段，这里显示了 JavaScript 的 const 关键字。

  • <pre> 标签：表示预格式化文本，保持空格和换行。

强调和强调文本 (<strong> 和 <em>)

  • <strong> 标签：表示重要的文本，通常会加粗。

  • <em> 标签：表示强调的文本，通常会斜体显示。

CSS

[]属性选择器

属性选择器允许你根据元素的属性和属性值来选择元素。在这个例子中，[disabled]是一个属性选择器，它选择所有具有disabled属性的元素，无论这个属性的值是什么。

//1
[attribute] {
  /* 样式规则 */
}
//1.1
<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

//2
<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<p><a href="#bottom">回到底部</a></p>
<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

我的疑问+豆包回答

1.[disabled]和.disabled的区别

在CSS中，[disabled]属性选择器和.disabled类选择器并不完全等价，尽管它们的目的都是为了选择被禁用的元素。

  • [disabled]属性选择器选择所有具有disabled属性的元素，无论这些元素的类型是什么。这意味着它会选择<input disabled>、<button disabled>、<select disabled>等任何带有disabled属性的元素。
  • .disabled类选择器则专门选择具有class="disabled"的元素。这意味着只有那些被明确赋予了disabled类的元素才会被选中。

在你的代码中，如果你想要确保只有被禁用的输入框受到样式影响，你可以使用[disabled]属性选择器，因为它会精确地选择那些被禁用的输入框。如果你使用.disabled类选择器，你需要确保所有被禁用的输入框都被赋予了disabled类，这可能需要额外的JavaScript代码来动态添加或移除这个类。

所以，虽然[disabled]和.disabled都可以用来选择被禁用的元素，但它们的使用场景和效果略有不同。在你的代码中，使用[disabled]属性选择器是合适的，因为它直接选择了具有disabled属性的输入框，而不需要额外的类名。

2.href后面的$和^作用是什么

在CSS中，^和$是两个特殊的字符，它们在属性选择器中用于匹配属性值的开头和结尾。

  • ^ 表示匹配属性值的开头。例如，a[href^="#"] 选择所有 href 属性值以 # 开头的 <a> 元素。这通常用于选择内部链接，即链接到同一文档中的某个锚点。
  • $ 表示匹配属性值的结尾。例如，a[href$=".jpg"] 选择所有 href 属性值以 .jpg 结尾的 <a> 元素。这通常用于选择指向图片文件的链接。

在你的代码中，这两个属性选择器用于为不同类型的链接设置不同的样式：

  • a[href^="#"] 用于为指向文档内部锚点的链接设置样式，例如 回到顶部 和 回到底部 链接。这些链接的 href 属性值以 # 开头，后面跟着锚点的名称。
  • a[href$=".jpg"] 用于为指向图片文件的链接设置样式，例如 查看图片 链接。这些链接的 href 属性值以 .jpg 结尾，表示它们指向的是JPEG图片文件。
avatar
文章
阅读
粉丝