HTML元素应用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/min_mmax/article/details/76216053

html

对于文本类型，不应使用html元素作为样式选择，而应该作为内容的描述，用css设置样式。
例如：em元素用于标识强调的文本，cite元素用于标识对艺术作品等内容引用。浏览器通常会为其添加不同样式。

开始新的段落

输入<p>
结束</p>

添加作者信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Author Contact Info</title>
</head>
<body>

<article>
    <h1>Museum Opens on the Waterfront</h1>
    <p>The new art museum not only introduces a range of contemporary works to the city, it’s part of larger development effort on the waterfront.</p>

    <p>. . . [rest of story content] . . .</p>

<!-- the article's footer with address information for the article -->
    <footer>
        <p>Tracey Wong has written for <cite>The Paper of Papers</cite> since receiving her MFA in Art History three years ago.</p>
        <address>
            Email her at <a href="mailto:traceyw@thepaperofpapers.com">traceyw@thepaperofpapers.com</a>.
        </address>
    </footer>
</article>

<!-- the page's footer with address information for the whole page -->
<footer>
    <p><small>&copy; 2011 The Paper of Papers, Inc.</small></p>

    <address>
        Have a question or comment about the site? <a href="site-feedback.html">Contact our Web team</a>.
    </address>
</footer>

</body>
</html>

创建图：
figure指的是由文档主要内容引起的一块独立的内容，可选的figcaption是figure的标题，只能出现在figure元素里的第一个或最后一个，且只允许有一个。

指定时间：html5新增元素
包含pubdate属性的time元素表示最近的祖先article元素的发布日期
忽略datetime属性，必须使用合法的格式表示日期和时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Specifying Time</title>
</head>
<body>

<p>The train arrives at <time>08:45</time> and <time>16:20</time> on <time>2012-10-04</time>.</p>

<p>We began our descent from the peak of Everest on <time datetime="1952-06-12T11:05:00">June 12, 1952 at 11:05 a.m.</time></p>

<p>They made their dinner reservation for <time datetime="2011-09-20T18:15:00">tonight at 6:30</time>.</p>

<p>The record release party is on <time datetime="2011-12-09"></time>.</p>

</body> 
</html>

显示为：
The train arrives at 08:45 and 16:20 on 2012-10-04.

We began our descent from the peak of Everest on June 12, 1952 at 11:05 a.m.

They made their dinner reservation for tonight at 6:30.

The record release party is on .

datetime格式:
YYYY-MM-DDThh:mm:ss
例如：
2017-07-27-T17:57:00
T用来将日期和时间隔开
如果包含时间，秒是可选的。也可以使用hh:mm.sss表示毫秒

标记重要文本strong
强调文本em

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Importance and Emphasis</title>
</head>
<body>

<p><strong>Warning: Do not approach the zombies <em>under any circumstances</em>.</strong> They may <em>look</em> friendly, but that's just because they want to eat your arm.</p>

</body> 
</html>

这里写图片描述
通常strong粗体显示，em斜体显示。
b显示粗体，i显示斜体，不表示特殊含义。

指明引用或参考

cite元素可以指明对某内容源的引用或参考
默认以斜体呈现
适用于标记艺术作品，音乐，图书的标题

引述文本：
blockquote表示单独存在的引述，默认显示在新的一行，q则用于短的引述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Quoting Text</title>
</head>
<body>

<p>He enjoyed this selection from <cite>The Adventures of Huckleberry Finn</cite> by Mark Twain:

<blockquote cite="http://www.marktwainbooks.edu/the-adventures-of-huckleberry-finn/">
    <p>We said there warn't no home like a raft, after all. Other places do seem so cramped up and smothery, but a raft don't. You feel mighty free and easy and comfortable on a raft.</p>
</blockquote>

<p>It reminded him of his own youth exploring the county by river.</p>

</body> 
</html>

blockquote可长可短，块级引述。可以包含cite属性。浏览器不会显示cite内容
默认对blockquote内容缩进。
q会对引述文本添加双引号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Quoting Text</title>
</head>
<body>

<p>And then she said, <q>Have you read Barbara Kingsolver's <cite>High Tide in Tucson</cite>? It's inspiring.</q></p>

<p>She tried again, this time in French: <q lang="fr">Avez-vous lu le livre <cite>High Tide in Tucson</cite> de Kingsolver? C'est inspirational.</q></p>

</body> 
</html>