No.12 HTML5--新增标签

一、HTML5和HTML

  • HTML5是 HTML 最新的修订版本，2014年10月由万维网联盟(W3C)完成标准制定。
  • 在 HTML5出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清浙，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签。

二、div

  • 容器元素，也是页面中见到最多的元素。

2.1 div实现

之前：

  • 常见的div布局：

  •  

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <body>
        <form>
            <div id="header"></div>
            <div id="nav"></div>
            <div id="article">
                <div id="section"></div>
            </div>
            <div id="sidebar"></div>
            <div id="footer"></div>
        </form>
    </body>

之后（H5新标签实现）： 

  • 复制代码
    <body>
    <header></header>
    <nav></nav>
    <article>
        <section></section>
    </article>
    <aside></aside>
    <footer></footer>
</body>
    复制代码

     

 

三、H5新标签

  • <header>...</header> 头部
  • <nav>...</nav> 导航
  • <section>...</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分
  • <aside>...</aside> 侧边栏
  • <footer>...</footer> 页脚
  • <article>...</article>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

 

posted @   百里屠苏top  阅读(2)  评论(0)  编辑  收藏  举报
相关博文：
· No.5 HTML5--图片标签
· No.4 HTML5--标签之段落 换行、水平线
· HTML5新增标签
· H5-14 H5新增标签
· HTML5（三）H5新增标签
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示