HTML5复习笔记

作者: Juice007 | 来源:发表于2016-04-27 22:59 被阅读731次

这学期学习了HTML5移动应用开发。虽然是叫做移动应用开发，但是老师并没有讲太多关于怎么用H5开发移动APP。更多的是一些H5的基础知识。趁着考试之际，将本学期课程的重难点以及课后作业做一下总结。

HTML4和CSS2复习

常用标签：
标题
<h1></h1> <h2></h2>//注意：h1不一定比h6的字体大
换行 <br>
无序列表(unordered list)[有序列表是ol(ordered list)]

<ul>
   <li>apple</li> //list item
   <li>orange</li>
</ul>

超链接

<a href="www.baidu.com" target="_blank">
    进入Baidu
</a>

图片(alt表示图片不能显示时显示的文字)

<img src="xx.jpg" alt="这是一张图片">

表格

<table>
    <tr>  //定义一行
        <th>定义表头</th>
    </tr>
    <tr>
        <td>定义一个单元格的数据</td>
    </tr>
</table>

div与span

<div></div>称为区域标签用于将若干相邻的html元素组合成一个区域块。属于块元素
<span></span>作用与div类似。主要区别就是一个div独占一行，而span会接着排列。属于内联元素
块元素一般从其他行开始，内联元素一般直接在后面显示
块元素与内联元素之间的转换可以通过css中的display属性值设为block和inline来转换

什么是CSS中的继承和层叠
继承：css中的继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于他的后代。
层叠：层叠允许css的样式进行叠加，优先级高的样式会覆盖优先级低的

层叠规则：ID选择器(id) > 类选择器(class) > 标记选择器(html中的标签)

CSS

css常用属性：
font-family字体
font-size文字大小
color文字颜色
font-wight文字粗体
css边框图像半径和盒子阴影：
css3之前边框的属性：
a. 宽度border-width:2px
b. 颜色border-color:green
c. 风格border-style:dashed//dashed表示虚线
代码含义

border-image-slice //设置边框背景图的切割大小为几像素
border-image-width //表示承接图片的的宽度（用于指定使用多厚的边框来承接被裁减后的图像）
border-width //表示普通边框的宽度（当不写border-image-width时由外部的border-width定义）
border-image-repeat :
//stretch:拉伸（拉伸至充满屏幕）  
//repeat：重复（图片可能不完整，超出边界部分被截断）
//round：平铺（图片一定是完整的，动态调整尺寸以铺满屏幕）
border-radius:20px/20px 40px 80px;
//设置圆角边框：四个角的水平半径都为20px，左上的垂直半径为20px,右上和左下的垂直半径为40px，右下垂直半径为80px
border-radius:20px 40px 80px 100px/20px 40px
//左上，右上，右下，左下的水平半径依次为20,40,80,100.左上，右下的垂直半径都为20px，右上，左下的垂直半径都为40px
box-shadow:10px 20px 30px red
//阴影水平偏移10px，阴影垂直偏移20px，阴影模糊值为30px，阴影颜色为红色

css文本颜色属性：
text-overflow属性的含义：
设定内容溢出状态下的文本处理方式
Clip:裁剪
Ellipsis:显示省略
必须配合以下两个使用，否则看不到效果：
Over-flow:hidden（超出部分隐藏）
White-space:nowrap（禁止换行）
text-align属性取值为left和start效果不一定相等（要看语言的种类）
text-shadow:3px 4px 5px red //阴影水平偏移值阴影垂直偏移值阴影模糊值阴影的颜色
text-stroke-color //文本边框颜色
text-fill-color //文本填充颜色
word-wrap:break-word //内容在边界内换行
color:rgba(0, 0, 255, 0.5) //红，绿，蓝，不透明度（1为不透明，0为全透明）
background:HSL(0, 100%, 50%, 0.3) //色调，饱和度，亮度，不透明度
color:transparent表示透明颜色（另外还可用opacity）
css之2D变形与动画
css3中的4种2D变形(transform)：
a. translate 移动
b. rotate 旋转
c. scale 缩放
d. skew斜切
把一个div块在浏览器的水平和垂直方向都居中(先利用绝对定位将div左顶点居中，再平移50%)

div{
    width:200px;
    height:200px;
    background-color:#090
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);  //以左上角为原点向左移动50%，向上移动50%
}

旋转方法：
transform:rotate(45 deg); 默认以中心点为中心。
在div中添加：
transform.origin:top left； 来修改
transformL:scale(0.5, 2);x轴缩放0.5倍，y轴缩放2倍
斜切是指元素沿着一条轴倾斜：

transform: skew(30deg,20deg);
transform:skewX(8deg);
transform:skewY(10deg);

JQuery相关

待补充

HTML5标签

文档类型声明：

<!doctype html>//指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染

新增的html5结构化标签
<article> 定义一篇文章
<header>定义页面或区域的头部
<nav>定义导航链接
<section>定义一个区域
<aside>定义页面内容部分的侧边栏
<footer>定义页面或区域的底部
<dialog>定义一个对话框
新增的html5多媒体标签
<video>定义一个视频
<audio>定义一个音频
<source>定义媒体资源
<canvas>定义图片（画布）
<embed>定义外部可交互的内容或插件（如：flash）
html5重新定义的标签
<small>表示小字体
<strong>表示重要性（不是强调符号）
标记一个元素的详细元素<details>的时候,<dt>表示标题列表，<dd>表示列表内容

HTML5表单

html4中常见的表单标签<input>,<textarea>,<select>,<button>必须嵌套使用
在html5中为了方便排版，可以使form中的表单标签脱离form的嵌套。方法：为form方法指定ID，所有表单标签均添加form= id属性
<range>表示一定数字范围。最大范围max，最小范围min
<number>限制用户输入必须为数字类型。step表示每次单击增加的步长
placeholder提示文字
文本框要求必填：required = "required"
限制文本框只能输入长度为5的数字：pattern = "\d{5}"
自动完成功能可以减少用户输入。实现方式：

<datalist id="search">
<option>衣服</option>
<option>裤子</option>
</datalist>

HTML画布

canvas标签在页面中只显示一个设定背景色的画布，如果要产生新内容或者进行画图操作，需要借助canvas的API和JavaScript
设置绘图环境：

//获取画布对象
var canvas = document.getElementById('canvas')
//设置绘图环境(获取上下文)
var cxt = canvas.getContext('2d')

为避免笔画牵连，开始新画一个图形beginPath()。结束一个图形closePath()
画图形的两种方式
fillStyle()有填充
strokeStyle()无填充
绘制圆形、矩形

cxt.arc(200, 100, 50, 0, 360, false);
//绘制弧线。圆心坐标，半径大小，圆弧度数，逆时针旋转
cxt.rect(300, 20, 100, 100);
//绘制矩形。左上角坐标，矩形宽度高度

在绘图时如果要对绘图环境进行旋转或者缩放等变换之前应该保存状态（调用save()方法）
之后应该恢复状态（调用restore()方法）
重点：看绘图章节的代码

HTML5音频视频

常见的音频编码
ACC
MP3
Vorbis
常见的视频编码
H.264
Theora
VP8
H5支持的视频格式（不使用插件也可进行播放）
ogg
mepg4
webm
H5中的音频标签：<audio>
H5中的视频标签：<video>
H5中播放视频不支持时提示文字：

<video src="movie.webm" controls="controls">
您的浏览器不支持video标签！
</video>

H5中当浏览器不支持第一个视频格式让其播放第二个视频格式，如果都不支持给出一段抱歉文字：(音频同样适用，将video标签改为audio标签)

<video controls="controls" width="300">
    <source src="move.ogg" type="video/ogg">
    <source src="move.mp4" type="video/mp4">
    您的浏览器不支持video标签！
</video>

自动播放和循环播放：

autoplay="autoplay" //自动播放
loop="loop" //循环播放

视频出现播放面板和等待画面(音频同样适用)

controls="controls" //出现播放面板
poster="xx.jpg" //出现等待画面

视频播放控制相关

video.play(); //播放
video.pause(); //暂停
video.currentTime += 10; //快进10秒
video.currentTime -= 10; //快退10秒
video.muted=true; //静音
video.muted=false; //取消静音
video.playbackRate=3; //快3倍播放，1为正常速度
video.playbackRate=1/3; //慢3倍播放
video.volume += 0.2;//调大声音20%(声音值得范围是0-1)
video.volume -= 0.2;//调小声音20%

H5支持的音频格式
ogg
mp3
wav

WEB存储

WebStorage与cookie比较：
cookie：简单易用。但存储容量有限，上限为4K，可以禁用
WebStorage:提供了易用的API，存储容量更大至少为5M，存储内容不会发送到服务器。但仍具有安全性隐患。

安全隐患：域B中嵌入的域A的脚本依然可以访问域B中的webstorage数据；localstorage未加密永不过期，容易泄露隐私

WebStorage的种类
localStorage：用于持久的本地存储，除非主动删除否则永不过期
sessionStorage:会话级别的存储，浏览器关闭就消失
检查浏览器是否支持webStorage

<script type="text/javascript">
if (typeof localStorage == 'undefined') {
    window.alert("您的浏览器不支持localstorage");
} else {
    window.alert("您的浏览器支持localstorgae");
}
</script>

设置和获取webstorage：

//读取(2种方式)
window.localStorage.getItem("myname");
window.localStorage.myname;
//写入(2种方式)
window.localStorage.setItem("myname","张三");
window.localStorage.myname = "张三";

webStorage的onStorage事件在存储空间中数据发生变化时触发

workers多线程处理

workers多线程可以解决什么问题？

使用JS创建单线程，如果脚本运行时间太长，程序界面会停止响应。而workers多线程可以将耗时的操作交给后台线程去做，前台可以继续操作

workers多线程的局限性：

局限性是后台线程不能访问前台window对象，而且仍然要占用cpu，导致系统变慢

主副线程发送数据，接收消息的方法：

workers.postMessage(message);//发送数据
workers.onmessage=function(event){} //接收消息

未完待补充

网友评论

Web前端之路

本文标题：HTML5复习笔记

本文链接：https://www.haomeiwen.com/subject/acgcrttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！