• 【HTML5】语义化标签记录

    前言

    防止一个页面中全部都是div，或者ul li，在html5推出了很多语义化标签

    提示：以下是本篇文章正文内容，下面案例可供参考

    常用语义化案例

    一般我用的多的是header，main，footer
    这些标签不难理解，你只要理解为，他们都是div的性质就好了，只为了在页面上区分模块内容，让浏览器理解，你这一段div（footer），是底部信息。

    你这段div（header）是头部栏内容，这样理解就好很多了。

    他们本身没有任何附加样式，跟div没有任何区别，所以在开发中，遇到相对应的情况，用对应的语义化标签。

    DOCTYPE html>
<html>
<head>
  <title>HTML5语义化标签示例title>
head>
<body>
  <header>
    <h1>网页标题h1>
    <nav>
      
    nav>
  header>

  <main>
    <section>
      <h2>第一部分h2>
      <p>这是第一部分的内容...p>
      <time>2023年9月5日16:22:51time>
    section>

    <section>
      <h2>第二部分h2>
      <article>
        <h3>重要文章h3>
        <p>这是一篇重要的文章，使用了<article>标签包裹。p>
        <footer>作者：John Doefooter>
      article>
    section>
  main>

  <aside>
    <h2>侧边栏h2>
    
  aside>

  <footer>
    <p>© 2023 网页作者p>
  footer>

  <section>
    <h2>示例标记h2>
    <p>在这个段落中，<mark>这里的文字被标记为重要mark>，以突出显示。p>
  section>

  <figure>
    <img src="example.jpg" alt="示例图片">
    <figcaption>这是示例图片的说明figcaption>
  figure>

  <section>
    <h2>可折叠内容h2>
    <details>
      <summary>点击展开/折叠内容summary>
      <p>这是可折叠的内容...p>
    details>
  section>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58

    通过一些帖子的学习，发现了很多没用过的语义化标签，案例如下

    1、b和strong加粗

    
<p>This is <b>boldb> text.p>


<p>This is <strong>importantstrong> text.p>

    • 1
    • 2
    • 3
    • 4
    • 5

    2、i与em斜体

    
<p>This is <i>italici> text.p>


<p>This is <em>emphasizedem> text.p>

    • 1
    • 2
    • 3
    • 4
    • 5

    3、u和ins下划线

    
<p>This is <u>underlinedu> text.p>


<p>This is <ins>underlinedins> text.p>

    • 1
    • 2
    • 3
    • 4
    • 5

    4、s和del删除线

    
<p>This is <s>deleteds> text.p>


<p>This is <del>deleteddel> text.p>

    • 1
    • 2
    • 3
    • 4
    • 5

    另外一些案例

    5、mark标签

    <p>这是一段包含<mark>重要信息mark>的文本。p>

    • 1

    在这里插入图片描述

    6、details 和 summary

    <details>
  <summary>点击展开/折叠内容summary>
  <p>这是可折叠的内容...p>
details>

    • 1
    • 2
    • 3
    • 4

    在这里插入图片描述

    7、figure 和 figcaption

    figure用于包含与文档内容相关的媒体元素，figcaption用于为媒体元素添加标题。例如，一张图片可以用这两个标签包裹：

      <figure>
    <img src="example.jpg" alt="示例图片">
    <figcaption>这是示例图片的说明</figcaption>
  </figure>

    • 1
    • 2
    • 3
    • 4

    样式就是图片在上，文字在下，不贴图了，基本不会用到

  • 相关阅读:
    关于Nginx缓存
    老卫带你学---leetcode刷题(221. 最大正方形)
    图解LeetCode——1752. 检查数组是否经排序和轮转得到（难度：简单）
    看完这篇 教你玩转渗透测试靶机Vulnhub——Bluemoon: 2021
    【笔试题】【day16】
    单链表排序
    pNA修饰肽：Z-FLE-pNA，Z-Phe-Leu-Glu-pNA，CAS号: 104634-10-8
    深度解读《深度探索C++对象模型》之C++对象的内存布局
    Linux的vim自动生成开头
    【Vue3】图片未加载成功前占位
  • 原文地址：https://blog.csdn.net/qq_51055690/article/details/132694693