文档章节

三天熟练掌握HTML5和CSS3

JSON_P
 JSON_P
发布于 2016/09/28 15:28
字数 812
阅读 72
收藏 4

##三天熟练掌握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>

© 著作权归作者所有

JSON_P
粉丝 7
博文 18
码字总数 9688
作品 0
闵行
前端工程师
私信 提问
【北京】7K7K招聘高级JS前端/高级AS3程序(20K左右)

7K7K是目前国内做大的休闲网页游戏平台之一,参见网站:www.7k7k.com 高级JS前端: 1、专科及以上学历,计算机相关专业; 2、有5年以上前端开发的相关开发经验,熟悉JavaScript、ajax、XML、...

猎头jack
2012/04/11
1K
9
微信服务号手机端点餐网页开发

要求 -精通jquery、zepto或其他javascript框架; -精通模块化开发,熟练掌握requirejs或seajs其中一种; -精通HTML5、css3及移动端的web前端开发,熟练掌握响应式开发;...

122260878
2017/08/12
13
0
HTML 5不得不重视的七个传说:背后真相

【IT168 评论】正如 Opera 的布道者 Bruce Lawson 讲的那样,“每个人都在谈论 HTML5”,它被传的很神,很玄。事实上有很多人所说的 HTML5 实际上只是古老的 DHTML 或者 Ajax。把所有的信息混...

作者:虫虫
2012/03/31
0
0
关于 HTML5 的七个传说

正如 Opera 的布道者 Bruce Lawson 讲的那样,“每个人都在谈论 HTML5”,它被传的很神,很玄。事实上有很多人所说的 HTML5 实际上只是古老的 DHTML 或者 Ajax。把所有的信息混在一起就是一堆...

虫虫
2012/03/29
7.2K
17
#年前面试,年后入职# 淘宝技术部html5开发工程师 8k-16k

岗位职责: 负责部分pc web html5开发任务与业务组件开发 利用HTML5等相关技术开发移动平台的Web前端产品 开发HTML5业务组件 任职要求: 熟悉html/js/css/ajax等技术,懂得如何分离html、js和...

小小胖
2013/12/24
1K
5

没有更多内容

加载失败,请刷新页面

加载更多

关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0
面试套路题目

作者:抱紧超越小姐姐 链接:https://www.nowcoder.com/discuss/309292?type=3 来源:牛客网 面试时候的潜台词 抱紧超越小姐姐 编辑于 2019-10-15 16:14:56APP内打开赞 3 | 收藏 4 | 回复24 ...

MtrS
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部