HTML5学习笔记（二）

最新推荐文章于 2024-07-16 08:30:00 发布

striveAgain丶

最新推荐文章于 2024-07-16 08:30:00 发布

阅读量311

点赞数 1

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

本文链接：https://blog.csdn.net/qq_53413759/article/details/120360196

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定义文章块

article 用于定义表示文档中独立的、完整的、可以独自被外部引用的内容块。它可以有自己的 <header> 元素，还可以嵌套使用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<article>
    <h1>使用插件</h1>
    <object>
        <param name="allowFullScreen" value="true">
        <embed src="#" width="600" height="395"></embed>
    </object>
</article>
</body>
</html>

article 是一段独立的内容，因此一般都包含了 header 和 footer 元素。

定义内容块

section 用于对页面中的内容进行分区，一个 section 一般由内容和标题组成。
section 需要一个包含<hn> 的标题元素，但不是 header 哦~~

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<article>
		<header>
			<p>潜行者是一个中国人，是一个帅哥！</p>
		</header>
		<p>潜行者的自我介绍</p>
		<section>
			<h2>评论</h2>
			<article>
				<h3>评论者：潜行者</h3>
				<p>确实</p>
			</article>
			<article>
				<h3>评论者：潜行者</h3>
				<p>今天吃药了没</p>
			</article>
		</section>
	</article>
</body>
</html>

注意：

不要将 article 和 section 当作是 div 来使用。当布局页面中的大块时，div 是更好的选择。
当article、nav 等元素更符合要求是，不要使用section。
没有标题的部分不要使用section。

定义导航块

nav 元素适用于以下几种场合：

传统导航条
侧边栏导航
页内导航
翻页操作

定义侧边栏

aside 元素可以用于定义页面中的侧边栏。

<!DOCTYPE html>
<html>
	<meta charset="utf-8">
</html>
<body>
	<header>
		<h1>HTML5</h1>
	</header>
	<article>
		<h1>HTML5 历史</h1>
		<p>balabala</p>
		<aside>
			<h1>名词解释</h1>
			<dl>
				<dt>WHATWG</dt>
				<dd>balabala</dd>
			</dl>
			<dl>
				<dt>W3C</dt>
				<dd>balabala</dd>
			</dl>
		</aside>
	</article>
</body>

其中 dl，dt，dd 分别表示定义列表、列表中的项目、解释列表中的项目。

定义主要区域

main 元素主要用于定义页面中的主要区域。主要区域为每一个网页所特有的内容，不能包含整个网站的导航条、搜索栏等。

特别注意：

每个网页只能防止一个 main 元素；
不能将 main 元素放置在任何一个 article、aside 等元素内部；
main 不会对网页进行分块；

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>main 元素测试</title>
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">新闻</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<h1>科技新闻</h1>
		<nav>
			<ul>
				<li><a href="#web">互联网</a></li>
				<li><a href="#zmt">自媒体</a></li>
				<li><a href="#cxcy">创新创业</a></li>
			</ul>
		</nav>
		<h2 id="web">互联网</h2>
		<h3>互联网 2016...</h3>
		<p>balabala</p>

		<h2 id="zmt">自媒体</h2>
		<ul>
			<li>balabala</li>
			<li>balabala</li>
		</ul>

		<h2 id="cxcy">创新创业</h2>
		<ul>
			<li>balabala</li>
			<li>balabala</li>
		</ul>
	</main>
	<footer>
		Copyright @...
	</footer>
</body>
</html>

定义标题栏

header 用于防止整个页面或页面内的一个内容区块的标题，同时也可以包含其他内容。类似于 hgroup、table、form、nav等元素只要应该放在头部区域，就可以放在 header 中。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<header>
		<hgroup>
			<h1>我的博客</h1>
			<a href="#">[URL]</a>
			<a href="#">[订阅]</a>
			<a href="#">[手机订阅]</a>
		</hgroup>
		<nav>
			<ul>
				<li>首页</li>
				<li><a href="#">目录</a></li>
				<li><a href="#">社区</a></li>
				<li><a href="#">微博我</a></li>
			</ul>
		</nav>
	</header>
</body>
</html>

定义标题组

hgroup 将标题或者子标题碱性分组，通常与 h1 ~ h6 结合使用。如果文章只有一个标题，就不需要使用 hgroup 来进行分组。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<article>
		<header>
			<hgroup>
				<h1>主标题</h1>
				<h2>副标题</h2>
				<h3>标题说明</h3>
			</hgroup>
			<p>
				<time datetime="2017-6-20">发布时间：2017 年 6 月 20 日</time>
			</p>
		</header>
	    <p>新闻正文</p>
	</article>
</body>
</html>

定义脚注栏

footer 元素用于为内容块添加脚注，它可以作为父级内容的脚注，也可以作为整个网页的脚注。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<article>
		<header>
			<hgroup>
				<h1>主标题</h1>
				<h2>副标题</h2>
				<h3>标题说明</h3>
			</hgroup>
		</header>
		<p>Hello</p>
		<footer>Aricle 的脚注哦~~</footer>
	</article>
	<p>新闻正文</p>
	<footer>
		<ul>关于</ul>
		<ul>导航</ul>
		<ul>联系</ul>
	</footer>
</body>
</html>

定义联系信息

address 元素用于定义联系信息、文档作者、联系方式、email、电话号码等等。

<!DOCTYPE html>
<html>
<header>
	<meta charset="utf-8">
</header>
<body>
	<footer>
		<section>
			<address>
				<a title="作者：MDN" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5">HTML5 - Web开发指南</a>
			</address>
			<p>
				发布于：
				<time datetime="2017-6-1">2017 年 6 月 1 日</time>
			</p>
		</section>
	</footer>
</body>
</html>

定义时间段

time 元素配合上其中的 datetime 属性，用于对机器的日期和时间进行编码。

注意：

datetime 属性中的日期与时间之间要用 “T” 分隔
若要表示另一个地区的时间，可以加上时差

<!DOCTYPE html>
<header>
	<meta charset="utf-8">
</header>
<body>
	<time datetime="2017-11-13">2017 年 11 月 13 日</time>
	<time datetime="2017-11-13">11 月 13 日</time>
	<time datetime="2017-11-13">我的生日</time>
	<time datetime="2017-11-13T20:00">我的生日晚上 8 点</time>

	<!--表示给机器编码时使用 UTC 标准时间-->
	<time datetime="2017-11-13T20:00Z">我的生日晚上 8 点</time>

	<!--添加时差，表示向机器编码另一地区时间；若是本地时间，则不需要加上时差-->
	<time datetime="2017-11-13T20:00+9:00">我的生日晚上 8 点的美国时间</time>
</body>

定义发布日期？

若文章中存在两个日期，因此可以使用 pubdate 来表示哪个才是发布日期，多用在网站的公告等里面。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<article>
		<header>
			<h1>科技公司都变成了数据公司</h1>
			<p>发布日期：<time datetime="2021-9-18" pubdate>2021-9-18</time></p>
			<p>关于<time datetime="2021-9-19">9 月 19 日</time>更正通知</p>
		</header>
		<p>balabala</p>
		<footer>
			<p>https://www.huxiu.com/article/176524.html</p>
		</footer>
	</article>
</body>
</html>

striveAgain丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习笔记（二）

定义文章块article 用于定义表示文档中独立的、完整的、可以独自被外部引用的内容块。它可以有自己的 <header> 元素，还可以嵌套使用。<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body><article> <h1>使用插件</h1> <object>
复制链接

扫一扫