Cодержание

1- Quotation
2- blockquote
3- q
4- abbr
5- address
6- cite
7- bdo

Руководство HTML Quotation

View more Tutorials:

1- Quotation
2- blockquote
3- q
4- abbr
5- address
6- cite
7- bdo

1- Quotation

В HTML теги (tag) <q>, <blockquote> используются для отметки параграфа текста как цитата. Помимо этого, вам так же может быть интересны другие похожие теги, это  <abbr>, <address>, <cite>, <bdo>.

2- blockquote

Тег  <blockquote> используется для цитирования всего параграфа. Цитированный параграф по-умолчанию будет немного смещен направо. Он также будет вставлять разрывы строк (line break) до и после ​​​​​​​ <blockquote>.
blockquote-example.html
<!DOCTYPE html>
<html>

<head>
    <title>Blockquote</title>
    <meta charset="UTF-8">
</head>

<body>

    <h3>Blockquote Example:</h3>

    I am some normal text
    <blockquote>The blockquote starts here and ends here</blockquote>
    and here is some normal text again

</body>
</html>

 
Вы можете обнаружить, что цитата, созданная​​​​​​​  <blockquote> не очень хороша, но не беспокойтесь об этом. Чтобы получить лучшую цитату, вы должны объединить​​​​​​​ <blockquote> и CSS. Например, вы читаете цитату из​​​​​​​ o7planning, которая была создана с помощью​​​​​​ тегов ​ <blockquote> и CSS.

3- q

Тег  <q> помогает вам создать встроенную цитату (inline quote), которая не вставляет разрывы строк (line break) до и после  <q>.
Большинство современных браузеров используют кавыки (quotation marks -  " " ) чтобы цитировать содержание внутри тега  <q>..</q>.
q-example.html
<!DOCTYPE html>
<html>

<head>
    <title>q quote</title>
    <meta charset="UTF-8">
</head>

<body>

    <h3>q-quote example:</h3>

    I am some normal text
    <q>The q-quote starts here and ends here</q>
    and here is some normal text again

</body>
</html>

 
Ниже является пример использования  CSS для кастомизирования цитаты для тега  <q>:
q-css-example.css
q {
  quotes: "«" "»";
  color: blue;
}
 
q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
}
 
q-css-example.html
<!DOCTYPE html>
<html>

<head>
    <title>q quote</title>
    <meta charset="UTF-8">

    <link href='q-css-example.css' rel='stylesheet'>
 
</head>

<body>

    <h3>CSS q-quote example</h3>

    I am some normal text
    <q>The q-quote starts here and ends here</q>
    and here is some normal text again

</body>
</html>
Другой пример использования  CSS для кастомизации тега  <q>:
q-css-example2.css
q {
  color: blue;
  font-style: italic;
}

q:before {
    content:url('quote-16.png');
    margin-left: 5px;
    margin-right: 5px;
}

q:after {
}
q-css-example2.html
<!DOCTYPE html>
<html>

<head>
    <title>q quote</title>
    <meta charset="UTF-8">

    <link href='q-css-example2.css' rel='stylesheet'>
</head>

<body>

    <h3>CSS q-quote example</h3>

    I am some normal text
    <q>The q-quote starts here and ends here</q>
    and here is some normal text again

</body>
</html>

4- abbr

Используйте тег  <abbr> для предоставления дополнительной информации аббревиатур для браузеров, систем перевода или поисковиков.
abbr-example.html
<!DOCTYPE html>
<html>

<head>
    <title>Tag abbr</title>
    <meta charset="UTF-8">
</head>
<body>
    <h3>abbr example:</h3>

    The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

</body>
</html>

5- address

Тег  <address> используется для предоставления контактной информации (автора/владельца) документа или статьи. Если тег  <address> вставлен в тег​​​​​​​ <body> он будет представлять контактную информацию документа. Если тег​​​​​​​ <address> вставлен в тег  <article>он будет представлять контактную информацию данной статьи (article).
Большинство браузеров будет отображать содержание в теге  <address> курсивом (italic), и вставляют разрывы строк (line break) tдо и после тега ​​​​​​​ <address>.
address-example.html
<address>
    You can contact author at
    <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>

    If you see any bugs, please
    <a href="mailto:[email protected]">contact webmaster</a>.<br>

    You may also want to visit us:<br>
    Mozilla Foundation<br>
    331 E Evelyn Ave<br>
    Mountain View, CA 94041<br>
    USA
</address>

6- cite

Тег  <cite> используется для выделения названия (или названия) книги, песни, фильма, произведения искусства.,...
Точнее тег  <cite> используется для выделения (или названия) для следующих отраслей:
  1. A book
  2. A research paper
  3. An essay
  4. A poem
  5. A musical score
  6. A song
  7. A play or film script
  8. A film
  9. A television show
  10. A game
  11. A sculpture
  12. A painting
  13. A theatrical production
  14. A play
  15. An opera
  16. A musical
  17. An exhibition
  18. A legal case report
  19. A computer program
  20. A web site
  21. A web page
  22. A blog post or comment
  23. A forum post or comment
  24. A tweet
  25. A Facebook post
  26. A written or oral statement
  27. And so forth.
cite-example.html
<p>
       The learning content can be referred from <cite>Data Structures
         & Algorithms in Java</cite>.
<p>

7- bdo

Тег  <bdo> используется изменения содержимого в нем текста .​​​​​​​  BDO это аббревиатура  "Bi-Directional Override".
Атрибут
(Attribute)
Значение Описание
dir ltr (Left to right) Содержание тега <bdo> будет отображено в направлении (direction) слева направо (По-умолчению).
rtl (Right to left) Содержание тега ​​​​​​​<bdo> будет отображено в направлении (direction) ​​​​​​​справа налево.
bdo-example.html
<h4>bdo dir="ltr" (Default)</h4>
<bdo dir="ltr">Tom AND Jerry</bdo>

<h4>bdo dir="rtl"</h4>
<bdo dir="rtl">Tom AND Jerry</bdo>

View more Tutorials: