css+div的结构：

 

 

 

HTML5的结构

 

 

 

 传统网页布局：

<!-- 头部 -->
<div class="header">
    <ul class="nav"></ul>
</div>

<!-- 主体部分 -->
<div class="main">
    <!-- 文章 -->
    <div class="article"></div>
    <!-- 侧边栏 -->
    <div class="aside"></div>
</div>

<!-- 底部 -->
<div class="footer">

</div>

H5网页经典布局：

<!-- 头部 -->
<header>
    <ul class="nav"></ul>
</header>

<!-- 主体部分 -->
<div class="main">
    <!-- 文章 -->
    <article></article>
    <!-- 侧边栏 -->
    <aside></aside>
</div>

<!-- 底部 -->
<footer>

</footer>

H5新增的语义标签：

  • <section> 表示区块

  • <article> 表示文章。如文章、评论、帖子、博客

  • <header> 表示页眉

  • <footer> 表示页脚

  • <nav> 表示导航

  • <aside> 表示侧边栏。如文章的侧栏

  • <figure> 表示媒介内容分组。

  • <mark> 表示标记 (用得少)

  • <progress> 表示进度 (用得少)

  • <time> 表示日期

H5新增表单类型：

  • email 只能输入email格式。自动带有验证功能。

  • tel 手机号码。

  • url 只能输入url格式。

  • number 只能输入数字。

  • search 搜索框

  • range 滑动条

  • color 拾色器

  • time 时间

  • date 日期

  • datetime 时间日期

  • month 月份

  • week 星期