HTML5网页编排规范

最新推荐文章于 2022-01-07 20:53:33 发布

daisy_Hawen

最新推荐文章于 2022-01-07 20:53:33 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/sinat_25127047/article/details/51010809

版权

html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言：虽说自己一直在用H5，但是写代码的风格还是div+div+div，根本没有把H5的新元素用进来。这一篇做一个小结，总结H5的新元素，以及如何优雅的排版，从此抛弃div…..

新增元素

主体结构元素

article
section
nav
aside
time
具体就不说了，懂英文的应该就懂了。
就说一下time

        <time datetime="2016-5-7">2016年5月7日</time>
        <time datetime="2016-5-7T12:00">2016年5月7日</time>
        <time datetime="2016-5-7T12:00Z">2016年5月7日</time>
        <time datetime="2016-5-7T12:00+08:00">2016年5月7日</time>

编码时机器读到的部分在datetime属性里的，datetime属性中T用来隔离时间和日期，Z加在后面表示编码时采用UTC标准时间，最后+08：00表示时差8个小时。

非主体结构元素

header
hgroup
footer
address
也没啥好说的，用在article或者section里面

编码结构

<body>
    <!-- 网页标题 -->
    <header>
        <h1>网页标题</h1>
        <!-- 网站导航链接 -->
        <nav>
            <li>
                <a href="example.html"></a>
            </li>
            <li>
                <a href="example.html"></a>
            </li>
        </nav>
    </header>
    <!-- 文章正文 -->
    <article>
        <hgroup>
            <h1>文章主标题</h1>
            <h2>文章子标题</h2>
        </hgroup>
        <p>文章正文</p>
        <!-- 文章评论 -->
        <section class="comment">
            <h1>评论标题</h1>
            <p>评论正文</p>
        </section>
    </article>
    <!-- 版权信息 -->
    <footer>
        <small>版权所有：hawen</small>
    </footer>

</body>

贴在这里，仅供参考。

daisy_Hawen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5网页编排规范

前言：虽说自己一直在用H5，但是写代码的风格还是div+div+div，根本没有把H5的新元素用进来。这一篇做一个小结，总结H5的新元素，以及如何优雅的排版，从此抛弃div…..新增元素主体结构元素articlesectionnavasidetime 具体就不说了，懂英文的应该就懂了。就说一下time <time datetime="2016-5-7">2016年5月
复制链接

扫一扫

专栏目录