HMTL快速入门笔记2

最新推荐文章于 2024-11-12 22:56:44 发布

Fine9548

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量179

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/Fine9548/article/details/106502622

版权

网页结构元素

time元素
定义的格式如下

<time datetime="2020-6-2">2020年6月2日</time>
<time datetime="2020-6-2">6月2日</time>
<time datetime="2020-6-2">今天的时间</time>
<time datetime="2020-6-2T19:00">2020年6月2日晚上7点</time>
<time datetime="2020-6-2T19:00Z">UTC标准时间2020年6月2日晚上7点</time>
<time datetime="2020-6-2T19:00+8:00">中国时间2020年6月2日晚上7点</time>

pubdate元素
pubdate可以用在article元素里面的time上面表示当前文章的发布时间。
使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>llll</title>
</head>
<body>
<header>
    <h1>pubdate演示</h1>
    <p>制作时间:<time datetime="2020-06-02" pubdate="pubdate">2020年6月2日</time></p>
</header>
<p>儿童节<time datetime="2020-06-01">6月1日</time>小朋友的节日</p>
</body>
</html>

代码运行结果
总的来说pubdate元素就是表明该文章完成的时间。
header元素
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等等。

注意：一个页面内并没有限制header的出现次数，也就是说我们可以在同一页面内，不同的内容区块上分别加上一个header元素。网页结构
黑色线框所包裹的就是我们的网页，在网页里面有一个网页标题，在网页标题下面是我们的文章标题和正文内容区域，在这幅图里面我们就可以给我们的网页标题和文章标题都使用header元素。
下面是header的综合实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>llll</title>
    <style>
        {margin :0;
        padding:0;}
        body{font-family: 微软雅黑;
            text-align: center;

        }
        a{
            color: #ff6600;
            text-decoration: none;
        }
        hgroup{margin-bottom: 10px}
        nav{height: 48px;
            background: #ff6600}
        nav li{
            float: left;
            background: #000000;
            border-radius: 5px;
            padding:5px 10px;
            margin: 10px;
            list-style: none;
        }
    </style>
</head>
<body>
<header>
    <hgroup>
        <h1>HTML5视屏教程</h1>
        <a href="/">[手机版]</a>
        <a href="/">[HTML5论坛]</a>
    </hgroup>
    <nav>
        <ul>
            <li>
                <a href="/">首页</a>
            </li>
            <li>
                <a href="/">手机版</a>
            </li>
            <li>
                <a href="/">论坛</a>
            </li>
        </ul>
    </nav>
</header>

</body>
</html>

hgroup元素
hgroup元素是将标题和其子标题进行分组的一个元素，h1——h6元素就会被进行分类。比如一个内容区块的的标题和他的子标题算是一组。
通常情况下，文章只有一个主标题，就不需要hgroup元素了。
footer元素

footer元素一般情况下包括和他有关的区块的注脚信息，比如作者，版权信息等。
address元素
address元素用来在页面中呈现联系信息，包含文档的作者，邮箱，地址，电话信息等。还用来展示和文章的相关的联系人的所有联系方式。 0000
右下角就是address元素所包含的联系人信息等。通常address元素包含在注脚中。
details元素
HTML5 中新增的标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。
用法示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>llll</title>
</header>
<body>
<details>
    <summary>HTML5快速入门</summary>
    <p>HMTL5快速入门笔记由Fine9548制作</p>
</details>
</body>
</html>

未展开

当details元素中没有summary时，系统自动添加“详细信息”

details元素现只有谷歌浏览器支持使用
mark元素
mark元素表示页面中需要突出或高亮显示的内容，在搜索结果中也常常出现，比如检索结果中的关键词高亮显示。