本文详细介绍HTML5和CSS3的核心技术，包括新元素、表单优化、多媒体标签、表单事件、DOM扩展等内容，同时深入讲解CSS3的颜色管理、过渡、转换、动画等特性，帮助读者快速掌握现代Web开发的基础。
##三天熟练掌握HTML5和CSS3 1.认识html5
-
HTML5并不仅仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言
-
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一系列Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏，同时结合CSS3的过渡、转换、动画等特性，可以极大的增强用户体验，提升开发功能的可应用性。
2.为了解增加语义标签的目的，以及各语义标签所表达的意义，在网页布局中能够合理使用标签。
标签 语义
<nav> 导航
<header> 页眉
<footer> 页脚
<section> 区块
<article> 文章
<aside> 侧边栏
<progress> 进度条
3.输入类型（这些属性在移动设备上面支持较好，存在兼容性。)
类型 使用示例 含义
email <input type="email"> 输入邮箱格式
tel <input type="tel"> 输入手机号码格式
url <input type="url">
number <input type="number"> 输入手机号码格式
search <input type="search"> 搜索框（体现语义化）
range <input type="rangegt"> 自由拖动滑块
color <input type="color"> 拾色器
time <input type="time">
date <input type="date">
datetime <input type="datetime">
month <input type="month">
week <input type="week">
4.表单属性
属性 用法 含义
placeholder <input type="text" placeholder="请输入用户名"> 占位符
autofocus <input type="text" autofocus> 自动获得焦点
multiple <input type="file" multiple> 多文件上传
autocomplete <input type="text" autocomplete="off"> 自动完成
form <input type="text" form="某表单ID">
required <input type="text" required> 必填项
pattern <input type="text" pattern="\d"> 自定义验证
5.表单元素
元素 含义
<datalist> 数据列表
<output> 输出结果
<meter> 度量器
6.表单事件
在html5 当中，新增了两个事件，一个是oninput 事件，一个是oninvalid
oninput 当输入输入数据的时候触发。
oninvalid 当验证不通过的时候触发
7.音频
<!--controls 控制-->
<audio src="music/See%20You%20Again.mp3" controls></audio>
8.视频
<video controls>
<!--
这个有兼容性
source 资源
-->
<source src="video/movie.mp4">
<source src="video/movie.avi">
<source src="video/movie.rmvb">
</video>
同样，通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
9.DOM扩展
-
获取元素
-
document.getElementsByClassName ('class') 通过类名获取元素，以伪数组形式存在
document.querySelector('selector') 通过CSS选择器获取元素，符合匹配条件的第1个元素。
document.querySelectorAll('selector') 通过CSS选择器获取元素，以伪数组形式存在。
-
类名操作
-
1、Node.classList.add('class') 添加class 2、Node.classList.remove('class') 移除class
-
自定义属性
-
<!-- 自定义属性， 1:怎么为当前元素添加要给属性 2:怎么去获取属性对应的值 自定义属性： data- 固定写法 获取值的话，我们需要使用dataset获取自定义属性的值 -->
<div class="one" data-attr-one="属性"></div> <script> /* var attr=document.querySelector(".one").dataset['attr']; alert(attr);*/ alert(document.querySelector(".one").dataset['attrOne']);
10.选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
属性选择器
1、E[attr] 表示存在attr属性即可；
div[class]
2、E[attr=val] 表示属性值完全等于val；
div[class=mydemo]
3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；
div[class*=mydemo]
4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；
div[class^=mydemo]
5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；
div[class$=demos]
伪类选择器
E:first-child 第一个子元素
E:last-child 最后一个子元素
E:nth-child(n) 第n个子元素
E:nth-last-child(n) 倒数第n个子元素
li:nth-child(2n-1) 选中所有的奇数的li
li:nth-child(7n) 选中所有的7 的倍数的li
li:nth-child(-1n+5) 选中前面五个
li:nth-last-child(-1n+5) 选中后面五个
li:nth-child(even) 所有的偶数
li:nth-child(odd) 所有的奇数
n可是多种形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)
E:empty 选中没有任何子节点的E元素；
伪元素选择器
E::before 往当前元素的子元素的最前面添加一个元素
E::after 往当前元素的子元素的最后面添加一个元素
E::first-letter 获取当前文本的第一个字母或字
E::first-line 获取当前元素里面的文本的第一行
E::selection 可改变选中文本的样式
11.颜色
一种新的颜色的表示方式
RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的色彩空间。
rgba(255,0,0,0.1)
R、G、B 取值范围0~255
H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
12.关于透明度：
1、 opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
2、 transparent 不可调节透明度，始终完全透明，RGBA、HSLA可应用于所有使用颜色的地方。
13.文本 (text-shadow阴影)
例子1：text-shadow: 2px 3px 7px red;
第一个参数：2px
影子水平的偏移位置，如果是正数，向右，如果之越大，越往右
如果是负数，水平向左，绝对值越大，越往左偏移
第二个参数：3px
影子的垂直方向偏移位置，如果是正数，向下，如果值越大，越往下
如果是负数，垂直向上，绝对值越大，越往上
第三个参数：
影子的模糊度
这个模糊度不能是负数。
第四个参数
影子的颜色
例子2：为一个文本添加多个影子
text-shadow: 4px 10px 4px red,-10px -10px 4px green;
14.盒子阴影(box-shadow阴影)
例子：/*我们可以为盒子添加多个阴影*/
/*box-shadow: 3px 3px 3px red, -10px -10px 4px blue;*/
/*内阴影*/
box-shadow: inset 3px 3px 2px #abcdef,inset -4px -4px 2px #ababab;
15.盒模型
通过box-sizing 来指定盒模型:
box-sizing 有两个值:content-box border-box;
content-box:对象的实际宽度等于设置的width值和border、padding之和;
border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width );
16.border-radius 属性
<!--
自定义属性，
1:怎么为当前元素添加要给属性
2:怎么去获取属性对应的值
自定义属性：
data- 固定写法
获取值的话，我们需要使用dataset获取自定义属性的值
-->
<div class="one" data-attr-one="属性"></div>
<script>
/* var attr=document.querySelector(".one").dataset['attr'];
alert(attr);*/
alert(document.querySelector(".one").dataset['attrOne']);
17.多重背景
可以为盒子设置多张背景图片
例子： background: url("images/bg1.png") no-repeat left top,
url("images/bg2.png") no-repeat right top,
url("images/bg3.png") no-repeat right bottom,
url("images/bg4.png") no-repeat left bottom,
url("images/bg5.png") no-repeat center
18.渐变
1.线性渐变
linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果；(a、方向 b、起始色 c、终止色 d、渐变距离)
.linear-gradient {
width: 200px;
height: 200px;
margin: 100px auto;
/* 任务1 如何实现一个最简单的线性渐变 */
/* 1：渐变方向
to right
to top
to bottom
to left
2：起始颜色
3：终止颜色*/
/* background: linear-gradient(
to top,
yellow,
green
);*/
/* 任务3 如何实现一个任意角度的渐变 */
/* background: linear-gradient(
180deg,
yellow,
green
);*/
}
/*在一个盒子实现背景多个距离的渐变。也就是多个起点跟终点。*/
例子：
.box{
width: 1000px;
height: 100px;
margin: 100px auto;
/* background: linear-gradient(
to right,
yellow 0%,
green 25%,
pink 50%,
red 75%,
blue 100%
);*/
background: linear-gradient(
135deg,
#000 0%,
#000 25%,
#fff 25%,
#fff 50%,
#000 50%,
#000 75%,
#fff 75%
);
/*
控制背景的大小，大小都是100px
*/
background-size: 100px 100px;
}
2.径向渐变
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
a) 辐射范围即圆半径
b) 中心点 即圆的中心
c) 渐变起始色
d) 渐变终止色
e) 渐变范围
例子：
background: radial-gradient(
100px at 20px 20px,
yellow,
green
);
19.过渡
过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。关于补间动画更多学习可查看http://mux.alimama.com/posts/1009
1.过渡初体验
- 通过all设置所有属性的过渡效果
- 将过渡属性transition设置在A或B状态
例子：
.box2{
width:200px;
height:200px;
background-color:green;
position:absolute;
top:100px;
left:800px;
cursor:pointer;
/*
使用transition 属性来完成过度
*/
transition:1s;
}
.box2:hover{
width:300px;
}
2.transition属性拆解
- transition:是一个复合属性，它有四个值。
transition-property：all：需要设置的过度的属性
transition-duration：4s 过度的持续时间。
transition-timing-function: ease 默认值。
delay 延迟的意思
transition-delay：过度的延迟时间
/* 任务2 如何让div的过渡速度发生变化呢？ */
/* 过渡时间函数 transition-timing-function 改变属性变化过程中的速率的属性
过度的速度
*/
20.2D转换
1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
a) 移动位置相当于自身原来位置
b) y轴正方向朝下
c) 除了可以像素值
例子：
transform:translate(200px,300px);
translateX 沿着水平方向移动
translateY 沿着垂直方向移动
2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数；
3、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
a) 当元素旋转以后，坐标轴也跟着发生的转变
b) 调整顺序可以解决，把旋转放到最后
4、transform-origin可以调整元素转换的原点
例子： /*
改变选中的中心角的位置。
*/
transform-origin: left bottom;
transform: translate() rotate() scale() ...
例子：/*设置过渡效果*/
.share1 img,.share2 img{
transition: all 0.8s ease-in-out;
}
/*设置变形*/
.share1 img:hover {
transform: rotate(360deg) scale(1.5);
}
.share2 img:hover {
transform: rotate(-360deg) scale(0.7);
}
5，透视：perspective: 100px;
调整的是观察者与目标物的距离，所谓的3d 只是在一个2d 平面实现3d 的效果。
21.CSS中的3D坐标系
1.动画
必要元素：
a、通过@keyframes指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过animation将动画应用于相应元素；
关键属性
a、animation-name设置动画序列名称
b、animation-duration动画持续时间
c、animation-delay动画延时时间
d、animation-timing-function动画执行速度，linear、ease等
e、animation-play-state动画播放状态，running、paused等
f、animation-direction动画逆播，alternate等
g、animation-fill-mode动画执行完毕后状态，forwards、backwards等
h、animation-iteration-count动画执行次数，inifinate等
i、steps(60) 表示动画分成60步完成
参数值的顺序：
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意
例子：
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.box {
width: 200px;
height: 200px;
background-color: green;
/*执行动画的名称*/
animation-name:orbit ;
/*执行动画的持续时间*/
animation-duration: 3s;
/*动画的速度*/
animation-timing-function: linear;
/*动画的延迟时间*/
animation-delay: 0s;
/*
动画执行的次数
iteration 迭代
count 次数
infinite 无数次
*/
animation-iteration-count:2;
/*动画的方向direction*/
/*
1:alternate 动画先正常运行再反方向运行，并交替运行
2:reverse 反方向运行
3：normal
alternate ：会受动画的次数影响，如果动画执行的是无数次，
这个动画持续交替运行。
*/
animation-direction:alternate;
/*
第七个参数。
forwards 动画的状态为结束时候的状态
backwards 动画的状态为开始的时候的状态。
*/
animation-fill-mode: backwards;
/*
暂停动画，开始动画
paused 暂停状态
*/
/* animation-play-state:
;*/
animation-play-state:running;
}
.box:hover {
/*!*设置动画暂停*!
animation-play-state: paused;*/
}
/*定义动画 orbit 轨道*/
@keyframes orbit {
/*
定义动画 的第一种写法
/*from{
}to{
}*/
/*
假设我在这里定义了这个动画，我在上面要使用这个动画，
指定这个动画的执行时间，假设我是指定10s 完成这个动画，0秒
第五秒执行50%，结束的时候执行 100
*/
0%{
width:200px;
width:200px;
}
/*50%{
width: 400px;
height: 400px;
}*/
100%{
width: 400px;
height: 400px;
}
}
22.伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
1、必要元素：
a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴，也可改变方向
2、各属性详解
flex-direction：
调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse
justify-content：
主轴方向对齐，可以调整元素在主轴方向上的对齐方式，包括flex-start、flex-end、center、space-around、space-between几种方式
align-items：
调整侧轴方向对齐方式，包括flex-start、flex-end、center、stretch
flex-wrap：
控制是否换行，包括wrap、nowrap
align-content：
堆栈排列，可对应用flex-wrap: wrap后产生的换行进行控制，以侧轴对齐,包括flex-start、flex-end、center、space-between、space-around、stretch
flex：
控制伸缩项目的伸缩比例 例子：flex:2;
align-self：
同align-items可覆盖父元素设置的algin-items，包括flex-start、flex-end、center、stretch
order：
控制伸缩项目的顺序 例子：order:3;
详见案例：360原版，携程旅行
23.web字体的使用
例子
/*
定义
*/
@font-face {font-family: 'webfont';
src: url('webfont.eot'); /* IE9*/
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* chrome、firefox */
url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
/*
使用。
*/
p{
font-family:"webfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体
http://www.iconfont.cn/
24.Web存储 window.sessionStorage（会话存储） window.localStorage （本地存储）
拖拽元素，事件监听
例子：
<body>
<div class="box" id="box1" draggable="true">
拖拽元素
</div>
<div class="box" id="box2">
目标元素。
</div>
<script>
/*
1：如果我们要在这个元素可以拖拽，我必须给这个元素设置一个属性。
* 学习事件，主要事件什么时候触发。。
* 拖拽元素
* 做这样的拖拽开发，都是在这几个事件的基础上面来的。*/
//拖拽元素
var box1=document.querySelector("#box1");
//目标元素
var box2=document.querySelector("#box2");
//拖拽开始的时候就调用。
box1.ondragstart=function(){
this.style.backgroundColor="#abcdef";
}
//在整个拖拽拖过程当中都会触发。。
box1.ondrag=function(){
/* console.log("在整个拖拽过程当中都会调用");*/
}
/*拖拽结束的时候调用。*/
box1.ondragend=function(){
/* console.log("拖拽结束的时候调用");*/
this.style.backgroundColor="red";
}
/*
*离开拖拽元素的时候调用
* */
box1.ondragleave=function(){
console.log("离开拖拽元素的时候调用");
this.style.backgroundColor="yellow";
}
//这三个事件是作用在目标元素上面的
var i=0;
//进入目标元素的时候触发
box2.ondragenter=function(){
console.log("进入了目标元素。");
this.style.backgroundColor="blue";
}
//停留在目标元素的时候触发
box2.ondragover=function(){
console.log("以及在 目标元素上面悬停。");
}
//应用于目标元素，离开目标元素或者拖拽结束的时候调用。
box2.ondragleave=function(){
console.log("离开目标元素的时候调用或者拖拽结束的时候调用。");
this.style.backgroundColor="green";
}
</script>
25.事件监听
1.网络状态
我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值
window.online用户网络连接时被调用
window.offline用户网络断开时被调用
window.addEventListener("online",function(){
alert("已经建立了网络连接")
})
window.addEventListener("offline",function(){
alert("已经失去了网络连接")
})
26.地理定位 在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service) Position. coords.latitude 纬度 var longitude = position. coords.longitude ; // 经度
例子：
<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak= 0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>
// 提供了一个对象 navigator.geolocation
// 此对象下有一个方法 getCurrentPosition(); 是用来获取用户当前位置
navigator.geolocation.getCurrentPosition(function (position) {
console.log(position);
}, function (error) {
console.log(1);
console.log(error);
});
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude; // 纬度
var longitude = position.coords.longitude; // 经度
//
console.log(position);
/********************/
// 这些都是写死
var map = new BMap.Map("container"); // container表示主到哪个容器
// 把经度纬度传给百度
var point = new BMap.Point(longitude, latitude);
map.centerAndZoom(point, 15);
/****************************/
// 只写上面三行就可出现地图了，并且会定位
// 定义好了一个图片标记
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300, 157));
// 创建标注
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
});
}
</script>
扫一扫
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
