• html5 语义化标签实用指南

    文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

    HTML5 中新增的语义化标签能够更准确地描述文档的结构和内容。这些元素有助于提高页面的可读性、可访问性，并且在搜索引擎优化方面也很有帮助。

    1.

    ：定义文档或区块的页眉，通常包含标题、标志、导航等。这有助于标识内容的起始部分。

    2.

  • function add(a, b) {
  • return a + b;
  • }
  • Example code for adding two numbers

    • 9.<.mark>：用于突出显示文本，常用于搜索结果中的关键字高亮。

    10.：用于表示日期和时间，有助于机器和搜索引擎更好地理解日期信息。

    11.：表示任务的进度，如文件上传、加载等。

    12.：表示一个已知范围内的标量值或分数。

    13.

    和 ：
    标签用于包裹一个可折叠的内容块。用户可以点击折叠内容块的摘要部分（由 summary> 提供），以展开或折叠内容。 summary> 标签用于定义 details> 元素的摘要或标题。它通常是一个用户点击的按钮或标题，以提示用户折叠内容的主题

    代码示例：

    1.   DOCTYPE html>
    4.     
    5.     
    6.     Details and Summary Example
    9.     
    10.         About Us
    11.         
      We are a company that specializes in web development and design.
    12.
  • Services
    • Web Design
    • Front-end Development
    • Back-end Development
    • Contact

    • If you have any questions, feel free to reach out to us.

      • 下面是一个简单的示例，包含上面提到了所有语义化标签：

      1.  
      2. "en">
      4.     "UTF-8">
      5.     "viewport" content="width=device-width, initial-scale=1.0">
      6.     HTML5 Semantic Elements Example
      9.     
      10.         
        My Website
      11.         
      12.             
        •                 
        • "#">Home
        •                 
        • "#">About
        •                 
        • "#">Services
        •                 
        • "#">Contact
        •             
        •         
        •     
        •  
        •     
        •         
        •             
          About Us
        •             
          This is the about section of our website.
        •         
        •  
        •         
        •             
          Services
        •             
          We offer a variety of services to our clients.
        •         
        •     
        •  
        •     
        •         
          Related Links
        •         
          •             
          • "#">Learn More
          •             
          • "#">FAQs
          •         
          •     
          •  
          •     
          •         
            © 2023 My Website. All rights reserved.
          •

          以上就是 HTML5 中语义化标签的内容，这些内容在面试中也可能被问到，在平时写页面时留意下每个标签对应的含义，用在正确的位置才能发挥语义化标签最大的作用。

          希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

          最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。

        • 相关阅读:
          Semantic Kernel 知多少 | 十行代码开发一个AI应用
          以太网 TCP协议（数据交互过程、窗口机制）
          Web缓存
          【软考 系统架构设计师】数据库系统② 分布式数据库
          好的内容回复区
          自定义View的绘制：Xfermode用法解析
          `Executor` 接口
          百万数据 mysql count（*）优化
          关于HTTPDNS，你知道多少？
          java-net-php-python-springboot班级信息系统计算机毕业设计程序
        • 原文地址：https://blog.csdn.net/weixin_40348267/article/details/138171492