十九、 HTML5+响应式布局
- 新结构
- 音频视频
- 绘图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
- 定义画布
- 设置画布样式
- JS准备绘图上下文环境
- 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
六、响应式布局
一个网页在不同的设备上显示
- 布局方式
- 响应式布局
- 媒体查询
布局方式
几种方式混合使用
- 固定宽度布局:主流的宽度有960px/980px/1190px/1210px等
- 流式布局:百分比设置相对:如宽度100%
- 响应式布局(主要使用这个):检测设备信息,设备宽度不同,布局不同阅读体验很好
响应式布局: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框架有两个版本
- 编译:源代码经过编译,不可修改
- 源代码:有源代码也有编译的部分
怎么引用Bookstrap框架?两个方式
- 把下载好的文件引入到我们的站点文件夹里
- 和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教程重要笔记