三天熟练掌握HTML5和CSS3
##三天熟练掌握HTML5和CSS3 1.认识html5javascript
-
HTML5并不只仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web作为应用开发平台的HTML语言html
-
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，能够帮助开发者建立富互联网应用，还提供了一系列Javascript API，如地理定位、重力感应、硬件访问等，能够在浏览器内实现类原生应用，甚至结合Canvas咱们可开发网页版游戏，同时结合CSS3的过渡、转换、动画等特性，能够极大的加强用户体验，提高开发功能的可应用性。html5
2.为了解增长语义标签的目的，以及各语义标签所表达的意义，在网页布局中可以合理使用标签。java
标签 语义 <nav> 导航 <header> 页眉 <footer> 页脚 <section> 区块 <article> 文章 <aside> 侧边栏 <progress> 进度条
3.输入类型（这些属性在移动设备上面支持较好，存在兼容性。)git
类型 使用示例 含义 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.表单属性web
属性 用法 含义 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.表单元素chrome
元素 含义 <datalist> 数据列表 <output> 输出结果 <meter> 度量器
6.表单事件api
在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选择器获取元素，以伪数组形式存在。
-
类名操做
-
一、Node.classList.add('class') 添加class 二、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中所提供的绝大部分选择器兼容。
属性选择器 一、E[attr] 表示存在attr属性便可； div[class] 二、E[attr=val] 表示属性值彻底等于val； div[class=mydemo] 三、E[attr*=val] 表示的属性值里包含val字符而且在“任意”位置； div[class*=mydemo] 四、E[attr^=val] 表示的属性值里包含val字符而且在“开始”位置； div[class^=mydemo] 五、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.关于透明度：
一、 opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度； 二、 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转换
一、移动 translate(x, y) 能够改变元素的位置，x、y可为负值；
a) 移动位置至关于自身原来位置
b) y轴正方向朝下
c) 除了能够像素值
例子：
transform:translate(200px,300px);
translateX 沿着水平方向移动
translateY 沿着垂直方向移动
二、缩放 scale(x, y) 能够对元素进行水平和垂直方向的缩放，x、y的取值可为小数；
三、旋转 rotate(deg) 能够对元素进行旋转，正值为顺时针，负值为逆时针；
a) 当元素旋转之后，坐标轴也跟着发生的转变
b) 调整顺序能够解决，把旋转放到最后
四、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能够互换。 一、必要元素： a、指定一个盒子为伸缩盒子 display: flex b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction c、明确主侧轴及方向 d、可互换主侧轴，也可改变方向 二、各属性详解 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>
相关文章
- 1. 熟练掌握各种MQ
- 2. (一)熟练HTML5+CSS3，天天复习一遍
- 3. 【mysql】需熟练掌握的SQL语句
- 4. Windows系统从零学习git到熟练掌握（三）
- 5. 完全掌握CSS3
- 6. 熟练Java,这些基本类和函数一定要掌握
- 7. 掌握numpy(三)
- 8. 熟练的Java程序员应该掌握的技术
- 9. 学习大数据需要熟练掌握的技术（干货）
- 10. 你必须熟练掌握的Java关键字
- 更多相关文章...
- • TCP三次握手建立连接的过程 - TCP/IP教程
- • Spring实例化Bean的三种方法 - Spring教程
- • RxJava操作符（三）Filtering
- • IntelliJ IDEA 代码格式化配置和快捷键
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 熟练掌握各种MQ
- 2. (一)熟练HTML5+CSS3，天天复习一遍
- 3. 【mysql】需熟练掌握的SQL语句
- 4. Windows系统从零学习git到熟练掌握（三）
- 5. 完全掌握CSS3
- 6. 熟练Java,这些基本类和函数一定要掌握
- 7. 掌握numpy(三)
- 8. 熟练的Java程序员应该掌握的技术
- 9. 学习大数据需要熟练掌握的技术（干货）
- 10. 你必须熟练掌握的Java关键字