HTML5页面布局前提

1、语义元素概述

一、header：（能够容许多个）。

二、footer：章节的末尾部分（能够容许多个）。

三、nav：构建导航，显示导航连接。

四、aside：定义一个页面的区域，装载非正文类的内容，如广告侧边栏等。

五、article：用来显示一块独立的文章内容。

六、section：定义为文档中的节，如每一章节等。

七、hgroup：定义为对网页或区段的标题元素进行组合，如H1~H6。

八、audio：音频内容。

九、canvas：画布功能。

十、video：视频内容。

...等元素。

2、本地存储

    本地储存的两种存储类型API接口：sessionStorage和localStorage。

    sessionStorage：在会话期间内有效。   localStorage：存储在本地，而且永久储存，除非对其执行删除。

3、部分表单属性

    1.placeholder：做用于文本框处于未输入状态和内容为空时的提示内容。

    2.autofocus：指定控件自动获取焦点。

    3.required：必填属性。

    4.tel：供用户舒服电话号码的文本框。

4、部分选择器

    1.before：在某个元素以前插入内容，通常用于清除浮动。

        语法：content:"内容";(必须添加这个)

    2.after：在某个元素以后插入内容。

        语法：content:"内容";(必须添加这个)

    3.first-child:指定元素列表中的第一个元素的样式

    4.last-child:指定元素列表中的最后一个元素的样式

    5.nth-child 和 nth-last-child:指定某个元素的样式或者从后起某个元素的样式。

5、阴影

    1.box-shadow：让元素具备阴影效果

        语法：box-shadow:  x y z color;(X轴偏移量，Y轴偏移量，发散程度，颜色)

    2.text-shadow：设置文本内容的阴影效果或模糊效果

        语法：text-shadow：x y z color;(X轴偏移量，Y轴偏移量，发散程度，颜色)

6、背景

    1.background-size：设置背景图像的大小

    2.background：

        (1)设置多重背景:background: url(img1.png) no-repeat top center,

                                                    url(img2.png) no-repeat top center;

        (2)设置渐变色:background: linear-gradient(to left, #f80 10%, #ff0 100%);

    3.圆角边框：border-radius: 0 0 0 0;

7、适应移动设备

    1.viewport：容许开发者建立一个虚拟窗口，并自定义其窗口的大小或缩放功能。

        语法:<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

        解释：虚拟宽度width为窗口宽度，初始缩放比例大小为1倍，同事不容许用户使用手动缩放功能。

    2.media：（媒体查询）

        语法：(在全部media前面加上一个@)

                (1)media screen and (max-width:600px){...}(屏幕像素小于600px执行)

                (2)media screen and (min-width:600px){...}(屏幕像素大于600px执行)

                (3)media screen and (min-width:600px) and (max-width:760px){...}(屏幕像素大小在600px~700px执行)