HTML5及响应式布局

HTML5

  • 新结构
    新结构元素：header，nav，content，section，article，aside，footer
  • 音频视频
    1
    2
    3
    4
    <!-- 支持mp3，wav，ogg格式音频文件，controls代表控制条 -->
    <audio src="pp.mp3" controls="controls"></audio>
    <!-- 支持mp4，webm，ogg格式视频文件 -->
    <video><sourcr src="pp.mp4" type="video/mp4"></video>
  • Canvas画布
    1
    2
    <!-- 定义画布，CSS设置样式，JS绘图 -->
    <canvas id="myCanvas" width="800" height="480"></canvas>

响应式布局

响应式布局可以很友好的匹配多种终端设备，用户体验好。

1、布局方式

  • 固定宽度布局：主流宽度有960px，980px，1190px，1210px等
  • 流式布局：百分比设置相对宽度
  • 响应式布局：检测设备信息，设备宽度不同，布局不同

2、响应式布局实现方法

  • Media Query媒体查询
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <head>
        <meta charset="UTF-8">
        <!--视口约定 -->
        <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                background-color: black;
            }
            
            @media screen and (min-width:768px) {
                body {
                    background-color: red;
               }
                 /* 宽度大于等于768px时背景颜色为红色 */
            }
        </style>
    </head>
  • 第三方开元框架-Bootstrap
    开源、移动优先的前端框架，基于HTML,CSS,JavaScript，JQuery等知识，写很少的代码，完成多终端的页面适配。
    bootstrapt中文官网
    1、我们可以通过下载源码的方式来将样式布局应用到自己的网页文件上。
    less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。

    2、也可以通过CDN来引用网站上的文件。
    注意：Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入
    1
    2
    3
    4
    5
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>