zltzlt 发表于 2020-1-18 11:15:17

引用

本帖最后由 zltzlt 于 2020-1-18 15:02 编辑

HTML5 引用

1. q 元素

q 元素用于定义剪短的引用,浏览器会在引用内容的两端添加引号。

例如:

<html>
    <head>
      <title>q 元素</title>
    </head>
    <body>
      <p>小甲鱼:<q>让编程改变世界!</q></p>
    </body>
</html>

显示效果:



2. blockquote 元素

blockquote 元素用于引用较长的文本,浏览器会使用缩进显示该段文本。可以通过 cite 属性指定引用的来源。

例如:

<html>
    <head>
      <title>blockquote 元素</title>
    </head>
    <body>
      <p>小甲鱼:
            <blockquote cite="https://fishc.com.cn">让编程改变世界!</blockquote>
      </p>
    </body>
</html>

显示效果:



3. cite 元素

cite 元素用于定义作品的标题,默认以斜体显示作品标题。

例如:

<html>
    <head>
      <title>cite 元素</title>
    </head>
    <body>
      <p><cite>《零基础入门学习 Python》</cite> —— 小甲鱼</p>
    </body>
</html>

显示效果:



4. abbr

abbr 元素用于定义简称和缩写,配合全局属性 title 可以说明缩写的含义。

例如:

<html>
    <head>
      <title>abbr 元素</title>
    </head>
    <body>
      <p><abbr title="FishC 工作室创始人">小甲鱼</abbr></p>
    </body>
</html>

显示效果:



5. dfn

dfn 元素用于定义术语,默认以斜体显示。

例如:

<html>
    <head>
      <title>dfn 元素</title>
    </head>
    <body>
      <p><dfn>HTML5</dfn> 是用于创建网页的标准标记语言</p>
    </body>
</html>

显示效果:



6. address

address 用于定义作者的联系信息,默认以斜体显示。

例如:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>address 元素</title>
</head>
<body>
    <address>
      <strong>联系我们</strong><br>
      邮箱:<a href="mailto:fishc_service@126.com">fishc_service@126.com</a>.<br>
      旺旺:dingdingjiayu<br>
      微信:FishC_Studio(公众号)<br>
    </address>
</body>
</html>

显示效果:



7. ruby、rt、rp

ruby 元素用于定义注音符号。ruby 元素需要与 rt 元素和 rp 元素搭配使用。其中,rt 元素用来标记注音符号,rp 元素则用来标记当浏览器不支持 ruby 元素时所显示的内容。

例如:

<html>
    <head>
      <title>ruby、rt、rp 元素</title>
    </head>
    <body>
      <p>
            <ruby>
                &nbsp;火<rp>(</rp>
                <rt>huǒ</rt>
                <rp>)</rp>
                &nbsp;炎<rp>(</rp>
                <rt>yán</rt>
                <rp>)</rp>
                &nbsp;焱<rp>(</rp>
                <rt>yàn</rt>
                <rp>)</rp>
                &nbsp;燚<rp>(</rp>
                <rt>yì</rt>
                <rp>)</rp>
            </ruby>
      </p>
    </body>
</html>

显示效果:

页: [1]
查看完整版本: 引用