Javascript 第六课笔记

十九、 HTML5+响应式布局

1. 新结构
2. 音频视频
3. 绘图canvas

一、新结构元素
旧页面元素，使用div+css，即div class="nav"的形式
header,nav,aside,content,footer
新页面HTML5直接使用header,nav,aside,content(内嵌section(section里面接着继续嵌套header/article/footer等标签)),footer标签

二、添加音频
支持.mp3 、 .wav 、 .ogg格式音频文件
使用音频添加标签就可以了，不需要第三方插件

<audio src = "peppa.mpa3" controls ="controls">浏览器不支持HTML5:audio</audio>

三、添加视频
支持.mp4 、.webm 、.ogg格式视频文件
HTML4标准下用的是form+input，HTML5直接使用button标签

<video id = "myVideo" width = "420">
  <sourse src = ""course.mp4" type="video/mp4"/>
</video>
 <button onclick = "playPause()">播放/暂停
 </button>

<script>
var v=document.getElementById("myVideo");
function playPause(){
     if(v.paused)
        v.play();
     else
        v.pause();
}
</script>

四、绘图canvas

1. 定义画布
2. 设置画布样式
3. JS准备绘图上下文环境
4. JS绘图

定义画布

<canvas id = "myCanvas" width ="860" height = "480">浏览器不支持画布
</canvas>

设置画布样式

#myCanvas{
   border:1px solid black;
}

加粗样式
绘图部分用JS来完成

<script>
function draw(event){
    var canvas = document.getELementById("myCanvas");//通过文档得到这样一个参数
    var pen = canvas.getContext("2d");//二维绘图
    pen.moveTo(50,50);//起始点
    pen.lineTo(300,300);//终点
    pen.lineWidth = 5;
    pen.strokeStyle ="red";
    pen.stroke();//用stroke()方法来绘图
}
window.onload = draw;//触发事件运行
</script>

五、web语义化
让页面具有良好的结构与语义，从而让人和机器都能快速理解网页内容
结构清晰，利于团队开发、维护
有利于搜索引擎理解
SEO（Search Engine Optimization）搜索引擎优化
容易兼容不同设备

常见语义化标签
<em>斜体</em>
<strong>加粗</strong>

自定义列表dl、列表项dt、描述dd

六、响应式布局
一个网页在不同的设备上显示

1. 布局方式
2. 响应式布局
3. 媒体查询

布局方式
几种方式混合使用

1. 固定宽度布局：主流的宽度有960px/980px/1190px/1210px等
2. 流式布局：百分比设置相对：如宽度100%
3. 响应式布局（主要使用这个）：检测设备信息，设备宽度不同，布局不同阅读体验很好

响应式布局：Media Query媒体查询，它是CSS3当中提出来的一些基本的规则和属性来完成的。例如，现在在设定网页布局方式的时候，是要先检查一下显示设备它的尺寸和宽度，根据不同的显示设备来完成不同样式的设定。

第三方开源框架：Bookstrap
使用Bookstrap这种开源框架来完成响应式布局

Viewport视图（布局视图=设备视觉视口、不可缩放）

1. 媒体查询

body{
    background-color:black;
}
@media screen and (min-width:768px){
    body{
         background-color:green;
   }
}

从上到下执行，覆盖效果；
媒体查询属性：min-height页面最小高度、min-width页面最小宽度、max-height、max-width

2. Bookstrap
Bookstrap概述：来自Twitter公司，Bookstrap4；开源、移动优先的前端框架（优先是指在做响应式布局时候，首先考虑到的是移动端设备的一个兼容性），是基于HTML、CSS、Javascript、JQuery，写很少代码，实现多终端的页面适配

Bookstrap框架有两个版本

1. 编译：源代码经过编译，不可修改
2. 源代码：有源代码也有编译的部分

怎么引用Bookstrap框架？两个方式

1. 把下载好的文件引入到我们的站点文件夹里
2. 和Jquery是相似的，我们还可以使用CDN

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script
     src="https://code.jquery.com/jquery-3.3.1.js"
     integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
     crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

全局CSS样式
栅格系统

<div class="row“>
    <div class="col-md-8">....</div>//合并了八个单元格
    <div class="col-md-4">....</div>//合并了四个单元格
</div>

//四种不同的屏幕尺寸，*表示合并的单元格数
col-xs-*//超小屏，宽度小于768px
col-sm-*//sm宽度大于等于768px小于992px
col-md-*//中等屏，宽度大于等于992px小于1200px
col-lg-*//宽度大于1200px

//兼顾中屏和小屏，当宽度大于992px，8：4显示，小屏以12：6显示
<div class="row“>
    <div class="col-sm-12 col-md-8">....</div>
    <div class="col-sm-6 col-md-4">....</div>
</div>

另外，编写代码时，注意span是一个行内元素，不能设置高度和宽度，一旦你不能设置宽度和高度后，span内的背景图片是不能出现的，所以需要调整它的显示方式display : inline-block

上一节：JavaScript第五课笔记
下一节：JS教程重要笔记