html中的语义相关元素介绍

最新推荐文章于 2020-09-19 00:12:51 发布

第十七签

最新推荐文章于 2020-09-19 00:12:51 发布

阅读量803

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html html5

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/u012868077/article/details/51524220

HTML 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了HTML5中的多种语义化元素及其应用场景，包括引用、代码、缩写、地址、变量等元素的使用方法，并展示了这些元素在浏览器中的默认样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直以来，对html5中的语义相关元素都不太了解，今天有空，总结一下。
主要也就如下几种：

<html>
    <head>
        <title>语义相关元素</title>
    </head>
    <body>
       <p> <q cite="http://blog.youkuaiyun.com/u012868077">q表示一段短的引用文本，会给这段文字自动添加引号,其中cite指定了文本引用的url</q> <p>
       <blockquote>blockquote表示一段长的文本，浏览器会对这段文本进行缩进</blockquote>
      <p> <cite>《鬼吹灯》</cite>cite用于表示作品，像电影、书籍及歌曲等，浏览器会用斜体来显示cite所包含的文本</p>
      <p><code>public static void main(){<br/>
          &nbsp;&nbsp;private String name;<br>
      }</code>&nbsp;&nbsp;code用来表示一段计算机代码，但是代码的换行及缩进还需要配合其他html5元素一块使用才可以</p>
      <p>
          <pre>
             class Test(){
                 private int age;    
             }
             pre中所包含的如空格、回车等字符格式都会被保留
          </pre> 

      </p>
      <p>
          <abbr title="显示全称">表示缩写，当鼠标移动到该文字时，会显示它的全称</abbr>
      </p>
      <p>
          <address>使用address来定义地址,显示出来的就是这种稍微倾斜的字体</address>
      </p>
      <p>
          <dfn>使用dfn来定义专业术语，从显示来看跟address的没有太大区别</dfn>
      </p>
      <p>
          <kbd>kbd是用来定义键盘文本，
          表示文本是通过键盘输入的</kbd>
      <p>
      <p>
          <samp>
              samp是用来定义
              示范文本内容的，个人感觉跟kbd的字体什么的都差不多
          </samp>
      </p>
      <p>
          <var>var用来表示变量，如i,j，它会用斜体显示所包含的文本</var>
      </p>
      <p>
          <del>del用来定义文档中被删除的文本，浏览器中会以中划线的形式显示被包含的文本</del><br/>
          <ins>ins定义文档中插入的文本，会以下划线的形式来显示ins中包含的文本</ins>
      <p>
    </body> 
</html>

这里写图片描述