HTML5 学习准备1

时间 2019-11-11

标签 html5 html 学习准备栏目 HTML5 繁體版

原文原文链接

HTML标签是忽略大小写的，可是class的值是不忽略大小写的，好比你写个class="videoBar"，那么css样式必须得写.videoBar，若是写成videobar那就不行。css

html5：新标签、新属性
<header><nav>
footer section....

语义化搜索引擎html

新标签：有用，国外 ->本身去网上找
'没用':header、nav
至关有用：pc 都是flash
video
audio 播声音 mp3
canvas 画图
文档头：<!doctype html>
页面编码：<meta charset="utf-8">html5

HTML5新标签
经常使用：header、footer、section
不太经常使用：article、menu、nav、aside(侧边栏)、datalist、time...
视频、音频：video、audiojquery

css3:新样式
圆角、渐变、动画、旋转、变形、阴影、蒙板css3

选择器：
document.querySelectorAll('css选择器'); 一组
兼容IE8+
document.querySelector();web

自定义属性：
data-xxx
this.dataset.abc=12; 设置
this.dataset.index 获取ajax

1.向后兼容
2.data-性能高没看出来chrome

如何测一段程序性能？
var s=new Date().getTime();
//测试的代码
alert(new Date().getTime()-s);canvas

localStorage cookie
容量 5M 4K
过时没有有
网络不走网络走网络
兼容不兼容IE6 兼容
共同点：
1. 不安全
2. 不能跨域
3. 不能跨浏览器跨域

5. 交互、通讯
ajax：
客户端 -> 服务器
实时性差
单向
传输速度慢
websocket:双向
客户端 <-> 服务器
实时性高
传输速度快

ajax->服务器传输10M 耗时 17s
websocket ->服务器传输10M 耗时 5s

移动端：
布局：
flex——不实用【无法单独用】
rem——不错【目前最好】
定宽——宽度乱了【抛弃】

rem：相对html的字体大小
设计图——320px/20rem
1rem=16px
一切单位都是rem——不要出现px
JS的clientX之类——也得换算
事件
ontouchstart
ontouchmove
ontouchend

HTML5——标签、属性(input)、选择器
标签：header-头部、footer-底部、aside-侧边栏、article-文章、nav-导航、section-块
语义化
属性：placeholder、type="date,time,email,number..."、date-
date-：自定义属性
1.直接用
oDiv.dataset.xxx
oDiv.getAttribute('xxx')
2.向后兼容
<div data-index="1">
选择器：querySelector/querySelectorAll

移动——屏幕分辨率
rem——相对HTML字体大小的单位
好处：改一个地方，全部大小都变
html {font-size:20px;}
/*量200 -> 100 -> 5rem*/
#div1 {width:5rem;}

用JS调整rem的大小
标准rem/标准屏幕宽=实际rem/实际屏幕宽
20/320=实际rem/clientWidth
实际rem=clientWidth*20/320
实际rem=clientWidth*0.0625

onload、onresize
document.documentElement.style.fontSize=clientWidth*0.0625+'px'

弹性布局
父级：display:-webkit-box; display:flex;
子级：-webkit-box-flex:1 flex:1;

平分空间
1 2 1

1、

HTML5在JS方面新增的东西

document.querySelector(“css选择器”);

document .querySelectorAll(“css选择器”);

var aEle = document.querySelectorAll(“li input[type=text]”);

var obj = document.querySelector(“li input[type=text]”);

aEle[0].style.background = red;

obj.style.background = red;

兼容IE8+

2、

jquery对象就是对原生对象的封装，因此$获得的东西，instanceof Array虽然看起来是数组，可是它不是数组。就像咱们经过document得到的对象，虽然看起来是数组，可是它不是数组！！！

jquery是原生的扩展，它的根就不是数组，因此jquery对象怎么也不会成为数组，除非它把这玩意儿拿出来，再从新弄一边

3、

transition:1s all ease;

时间：1s 500ms

all：属性（width、height等）

ease：运动形式

linear:线性

ease:缓冲

ease-in：加速

ease-out：减速

ease-in-out：先加速后减速

transition:1s width ease, 10s height ease;

#div1{ height:300px; width:300px;}

//transition能够同时使用多个，这些属性都是同时运动的

下面这样写，也能够作到同时支持多个属性

transition:1s all ease; height:100px; width:100px;

#div1{ height:300px; width:300px;}

display没有transition效果

4、

border-radius:10px 20px

左上/右下右上/左下

border-radius:10px;

所有

border-radius:10px 20px 100px;

左上右上/左下右下

border-radius:10px 20px 100px 140px

单位还能够用百分比， pt等

5、text-shadow:水平阴影垂直阴影模糊半径阴影颜色

text-shadow:100px 100px 10px red;

p{ text-shadow:1px 1px 1px red,3px 3px 2px blue,5px 5px 5px yellow;}

6、

box-shadow属性至多有6个参数设置，他们分别取值：

阴影类型：此参数是一个可选值，若是不设值，其默认的投影方式是外阴影；若是取其惟一值”inset”，就是将外阴影变成内阴影，也就是说设置阴影类型为”inset”时，其投影就是内阴影；

X-offset：是指阴影水平偏移量，其值能够是正负值能够取正负值，若是值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边。

Y-offset:是指阴影的垂直偏移量，其值也能够是正负值，若是为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

阴影的模糊半径：此参数可选，但其值只能是正值，若是其值为0时，表示阴影不具备模糊效果，其值越大阴影的边缘就月模糊；

阴影的扩展半径：此参数可选，其值能够是正负值，若是值为正，则整个阴影都将延展扩大，反之值为负值时，则缩小。

阴影颜色：此参数可选，若是不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不同，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。

#div1{ width:200px; height:200px; background:red; box-shadow:100px 1px 50px #000;}

其中：100px表明x轴偏移半径，1px表明y轴偏移半径，50px表明模糊半径（不表明扩展半径）

#div1{ width:200px; height:200px; background:red; box-shadow:100px 1px 50px 20px #000;}

其中：100px表明x轴偏移半径，1px表明y轴偏移半径，50px表明模糊半径，20px表明扩展半径

7、

radial-gradient(

　　[<position>,]?

　　[[<shape>||<size>] | <shape-size>{2},]?

　　<color-shape>[,<color-stop>]+)

position:

　　<percentage>一、用百分比指定径向渐变圆心的横坐标。能够为负值

　　<length>一、用长度值指定径向渐变圆心的横坐标值。能够为负值

　　left:设置左边为径向渐变圆心的横坐标值

　　center:设置中间为径向渐变圆心的横坐标值

　　right:设置右边为径向渐变圆心的横坐标值

　　<percentage>二、用百分比指定径向渐变圆心的纵坐标值。能够为负值

　　<length>二、用长度值指定径向渐变圆心的纵坐标值。能够为负值

　　top:设置上边为径向渐变圆心的纵坐标值

　　center:设置中间为径向渐变岩心的纵坐标

　　bottom:设置底部为径向渐变圆心的纵坐标

<shape>

　　　　circle:指定圆形的径向渐变

　　　　ellipse:指定椭圆形的径向渐变

<size>

　　　　closest-side:指定径向渐变的长度为从圆心到离圆心最近的边

　　closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角

　　farthest-side: 指定径向渐变的半径长度为从圆心到离圆心最远的边

　　farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角

　　contain：包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side

　　cover：覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

<shape-size>

　　　　　　<percentage>:用百分比指定径向简便的横向或纵向直径长度，并根据横向和纵向的直径来肯定是圆或者椭圆。不容许负值

　　　　　　<length>：用长度值指定径向渐变的横向或纵向直径长度，并根据横向和纵向的直接来肯定是圆或椭圆。不容许负值。<color-stop

　　　　　　<color>：指定颜色。

　　　　　　<length>：用长度值指定起止色位置。不容许负值。

　　　　　　<percentage>：用百分比指定起止色位置。

8、

线性渐变：

#div1{ width:300px; height:300px; background:-webkit-linear-gradient(top bottom, red 10%, blue 10%, yellow 50%);}

#div1{ width:300px; height:300px; background:-webkit-linear-gradient(180deg, red 20px, blue 10%, yellow 200px);}

#div1{ width:300px; height:300px; background:-webkit-linear-gradient(top bottom, red, blue, yellow);}

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

下述值用来表示渐变的方向，可使用角度或者关键字来设置：
<angle>：
用角度值指定渐变的方向（或角度）。
to left：
设置渐变为从右到左。至关于: 270deg
to right：
设置渐变从左到右。至关于: 90deg
to top：
设置渐变从下到上。至关于: 0deg
to bottom：
设置渐变从上到下。至关于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不容许负值
<percentage>：
用百分比指定起止色位置（起止的意思就是，若是是两个颜色的话，那么第一个位置表示第一个颜色的开始渐变的位置，第二个位置表示第二个颜色结束渐变的位置）。
若是是三个颜色的话，前两个表示颜色开始渐变的位置，最后一个表示结束渐变的位置

一、
移动端几个小事件：
onmousedown ontouchstart
onmousemove ontouchmove
onmouseup ontouchend

二、
css3,从视觉角度变化了，可是本质没变，不会引发重排,性能极高！
*之后作效果的时候，尽可能用css3样式

三、
removeEventListener: 不能解除匿名函数

四、
移动端写运动的时候，会有些卡，是由于没有组织默认事件。

卡->阻止默认事件

return false 遇见绑定(addEventListener) 就阻止不了默认事件了 -（得用）> ev.preventDefault();

发现小问题：手机上小默认是980
<meta name="viewport" content="width=320, user-scalable=0, initial-scale=1.0">
320->device-width

touchstart ->ev.targetTouches[0]
touchmove -> ev.targetTouches[0]
touchend -> ev.changedTouches[0]

五、
box-sizing属性能够为三个值之一：content-box（default），border-box，padding-box。
content-box，border和padding不计算入width以内
padding-box，padding计算入width内
border-box，border和padding计算入width以内，其实就是怪异模式了~

六、
关于class:
obj.classList.add(sClass) 添加class
obj.classList.remove(sClass); 删除class
obj.classList.contains(sClass); 是否包含class
oDiv.classList.add('active');

一、css3 -- calc

2px + 3px

20% - 2px

2px * 5px

100px / 2

100px * 2

记住符号两边应该有空格，好比100px*2是不对的，应该是100px * 2; 2px+3px也是不对的，应该是2px + 3px;

二、盒子模型：

box-sizing:content-box(默认的)

width+padding+border （border、padding往外走）

box-sizing:border-box

border、padding往里走

给布局增长border、padding不受影响。

getStyle() obj.offsetWidth

三、display:inline， inline-block，block，box

box：弹性盒子布局（弹性布局）

父元素：

display:-webkit-box

子元素：

-webkit-box-flex:1;

排列方式：加给父级

-webkit-box-orient:horizontal;

vertical 垂直方向

horizontal 水平方向

排列方向：

-webkit-box-direction:reverse;

垂直方向排列：

-webkit-box-align:center;

水平方向排列：

-webkit-box-pack:center;

注意：

一、弹性和浮动不能一块儿用

二、子级必须块元素