web前端 8 HTML5 && bootstrap

2020-04-12

HTML5 && bootstrap

HTML5

HTML5提供新的标签支持网页结构，还可以使用新标签支持音频视频绘图的操作。

header/footer 页眉/页尾可以用在某部分的开头/结尾
nav 导航栏
aside 边栏
content 主体内容
section 主体内容中的某个区域
article 文章正文

audio 添加音频支持mp3 wav ogg格式 controls="controls"表示显示控制条

1	<audio src="音频地址" controls="controls">不支持时显示的文字</audio>

video 添加视频支持mp4 webm ogg格式

1	<video src="视频地址" controls="controls">不支持时显示的文字</video>

或者使用嵌套source标签方式 type="video/mp4" 表示视频是mp4类型添加多个source表示不同的视频类型而不是多个视频文件 width值不需要添加单位

<video width="值">
<source src="视频地址" type="video/mp4" />
...
不支持时显示的文字
</video>

使用js控制视频播放
play() 视频播放方法
pause() 视频暂停方法

canvas 绘图结合js还可以完成小游戏
要使用canvas标签有以下步骤
1）定义画布 width/heiht 不需要带单位

2）设置画布样式

3）JS准备绘图上下文环境相当于画笔
4）JS画图
getContext("2d") 获得画布的上下文
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
lineWidth 定义笔的粗细
strokeStyle 定义笔的颜色
stroke() 表示开始画图

练习：写字板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #myCanvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="860" height="480"></canvas>
</body>
<script>
var canva=document.getElementById('myCanvas');
// 定义画笔
var pen=canva.getContext("2d");
pen.lineWidth=5;
pen.strokeStyle="blue";

// 鼠标是否点击左键的状态
var mousePress=false;
// 定义上次鼠标的坐标位置
var last=null;

function pos(event){
    //定义两个变量获得鼠标坐标
    var ex,ey;
    ex=event.clientX;
    ey=event.clientY;
    return{x:ex,y:ey};
}

function start(event){
    mousePress=true;
}

function draw(event){
    if(mousePress==false) return;
    var xy=pos(event);
    // 测试打印xy值 {x:值, y:值}
    console.log(xy);

    if(last != null){
        pen.beginPath();
        pen.moveTo(last.x,last.y);
        // xy.x只显示x坐标的值
        pen.lineTo(xy.x,xy.y);
        pen.stroke();
    }
    last=xy;
}

function finish(event){
    mousePress=false;
    last=null;
}

// 鼠标点击左键事件执行start 鼠标移动事件执行draw 鼠标放开左键事件执行finish
canva.onmousedown=start;
canva.onmousemove=draw;
canva.onmouseup=finish;

</script>
</html>

效果图

响应式布局

让同一个网页在不同的显示设备上显示不同的布局格式，这样可以匹配不同的终端设备，让用户更加体验和浏览网页。

布局方式

固定宽度布局 移动端用户需要缩放来显示
流式布局 百分比设置宽度排版有可能会出现错位
响应式布局 根据设备不同来显示
或者以上几种混合使用

响应式布局实现方式

使用CSS样式中的Media Query媒体查询实现
使用第三方框架bootstrap

Media Query媒体查询

视口Viewport 显示网页的区域

响应式布局视口规定

布局视口width=设备视觉视口device width
不能缩放

1）在meta标签中添加视口规定width=device-width是规定1布局视口等于设备视觉视口 user-scalable=no 是规定2用户不允许缩放操作在sublime使用meta:vp

1	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2）在style标签中检测不同设备宽度的样式

屏幕	宽度
超小屏	x<768px
小屏	768px<= x<992px
中屏	992px<=x <1200px
大屏	x>=1200px

1	@media screen and (min-width:768px){...}

@media 表示要使用媒体查询
screen and (min-width:768px) 是判断设备的显示屏尺寸大于等于768px
而且媒体查询执行顺序是从上到下执行使用min-width作为判断语句数字从上到下依次放大使用max-width反之

其他判断条件

Bootstrap

Bootstrap框架在做响应式布局时候会优先考虑到移动端设备的兼容性
中文官网 https://www.bootcss.com

去官网起步下载编译版本或者源代码版本
源代码版本目录结构如下 less js fonts目录是源代码部分分别是css样式 js 和文字图标目录 dist目录是编译后的代码目录 docs目录是说明文档

引用bootstrap框架

直接把下载的bootstrap目录中的编译目录dist里面的css，js复制到本地目录下
引用cdn上的bootstrap的css，js文件要引用bootstrap的js文件前先引用jQuery的js文件参考文档 https://v3.bootcss.com/getting-started

栅格系统

bootstrap使用实现响应式布局方式。

整体思路
外层名为.container 每行放在.row里每行默认是12个单元格，可以用class名字设定来合并任意单元格，使用 class="col-md-8" 说明该容器在中等设备（大于等于992px）显示长度占8个单元格

属性	屏幕	宽度
col-xs-*	超小屏	x<768px
col-sm-*	小屏	768px<= x<992px
col-md-*	中屏	992px<=x <1200px
col-lg-*	大屏	x>=1200px

设置在中屏设备显示的一行宽度如果再小屏显示为两行

同时设置中屏和小屏显示的宽度

练习：课程主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 设定视口规定 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    
    <!-- 复制bootstrap官网代码 https://v4.bootcss.com/docs/getting-started/introduction/ -->
    <!-- 引用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">
    <!-- 引用jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <!-- 引用bootstrap的js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<body>
<!-- 设置导航条 复制bootstrap官网代码 https://v3.bootcss.com/components/#navbar -->
<nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Web前端开发</a>
        </div>


        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">视频<span class="sr-only">(current)</span></a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">资料<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">ppt</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">源代码</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">扩张阅读</a></li>
              </ul>
            </li>
            <li><a href="#">作业</a></li>
            <li><a href="#">讨论</a></li>
          </ul>
          <form class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
          </form>
        </div>
      </div>
</nav>


<!-- 主体内容左边占9个单元格 右边占3个 -->
<div class="container">
    <div class="row">
        <div class="col-sm-9">
            <!-- 设置巨幕 https://v3.bootcss.com/components/#jumbotron -->
            <div class="jumbotron">
              <h1>Web前端开发</h1>
              <p>Web前端开发是创建网页或APP界面呈现给用户的过程。Web前端开发技术主要包括HTML，CSS及JavaScript、JQuery以及衍生出来的各种技术、框架。本课程由高校与企业联合打造，百度前端技术学院做技术支持，将坚实的基础、实用的案例以及企业级的应用贯通交融，可以作为Web前端开发入门课程。</p>
              <p><a class="btn btn-primary btn-lg" href="#" role="button">加入学习</a></p>
            </div>
            <div class="row">
                <!-- 超小屏为两列 大屏为三列 -->
                <div class="col-xs-6 col-lg-4">
                    <h2>HTML</h2>
                    <p>HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
                    <p><a class="btn btn-default" href="#">开始学习</a></p>
                </div>
                <div class="col-xs-6 col-lg-4">
                    <h2>CSS</h2>
                    <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
                    <p><a class="btn btn-default" href="#">开始学习</a></p>
                </div>
                <div class="col-xs-6 col-lg-4">
                    <h2>JavaScript</h2>
                    <p>JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式。</p>
                    <p><a class="btn btn-default" href="#">开始学习</a></p>
                </div>
                <div class="col-xs-6 col-lg-4">
                    <h2>JQuery</h2>
                    <p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。</p>
                    <p><a class="btn btn-default" href="#">开始学习</a></p>
                </div>
                <div class="col-xs-6 col-lg-4">
                    <h2>Ajax</h2>
                    <p>Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。</p>
                    <p><a class="btn btn-default" href="#">开始学习</a></p>
                </div>
                <div class="col-xs-6 col-lg-4">
                    <h2>Bootstrap</h2>
                    <p>Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。</p>
                    <p><a class="btn btn-default" href="#">开始学习</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <!-- 设置列表组 https://v3.bootcss.com/components/#list-group -->
            <ul class="list-group">
              <li class="list-group-item">最新公告</li>
              <li class="list-group-item">最新讨论</li>
              <li class="list-group-item">最新作业</li>
            </ul>
        </div>    
    </div>
</div>
</body>
</html>

效果图