# FinalExam4Html

**Repository Path**: junchuan/FinalExam4Html

## Basic Information

- **Project Name**: FinalExam4Html
- **Description**: 期末考试静态页面
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2015-10-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#HTML5期末考试
##亮点
1. 创建一个自适应网站
    使用了Bootstrap(bootstrap-3.3.5)
2. 用canvas做的Clock（在`关于作者`一栏中）
3. 下载的div 可以拖动更换位置顺序
4. 返回顶部按钮javascript监听+设计；
5. 调用相关api实现自制HTML5播放视频的基本功能：
    |-播放暂停功能
    |-进度条功能（可跳播）
    |-快放慢放忙功能
    |-调节音量大小功能
    |-全屏的功能（调用了WebKit内核的api，Moz不能用)
    |-读取本地文件播放（**可拖放**)

6.运用了HTML5本地存储技术webSQL，实现**增删查改**
##笔记
####什么是viewport
>手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕

宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可

以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网

页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

`<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>`

>width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的

宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

####导航条无法下拉的原因
```html
<!--缩放按钮-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
....
 <!--导航主体-->
 <div class="collapse navbar-collapse" id="navbar"></div>
```
中的`data-target="#navbar"`要与导航主体中的`id=navbar`保持一致
####Tab标签页写法
```html
<ul class="nav nav-tabs">
    <li class="active"><a href="#[ownid]"></a></li>
    <li><a href="#[ownid]"></a></li>
    <li><a href="#[ownid]"></a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="[ownid]">...</div>
    <div class="tab-pane" id="[ownid]">...</div>
    <div class="tab-pane" id="[ownid]">...</div>
</div>
```
####Tab标签页出现淡入淡出的效果
所有标签页内容的`tab-pane`类后面添加`fade`类。在第一个`tab-pane active fade`类中添加`in`类就能有这种效果

###Drop事件不会被触发
添加以下代码，阻止浏览器的默认行为，才能让drop事件成功地被触发
```js
    /*阻止默认行为*/
    document.ondragover = function (e) {
        e.preventDefault();
    };
    document.ondrop = function(e) {
        e.preventDefault();
    }
    /*阻止默认行为*/
    document.ondragover = function (e) {
        e.preventDefault();
    };
    document.ondrop = function(e) {
        e.preventDefault();
    }
```