HTML5+CSS3提升学习笔记

HTML5

广义的HTML5是HTML5本身+CSS3+JavaScript；

HTML5具有兼容性

新增了语义化标签

<header> ：头部标签
<nav> ：导航标签
<article> ：内容标签
<section> ：块级标签
<aside> ：侧边栏标签
<footer> ：尾部标签

HTML5+CSS3提升学习笔记
这种语义化标准主要针对搜索引擎的
在IE9中，需要把这些元素转换为块级元素，所以要在样式里面加上display：block；

新增了多媒体标签

音频标签： <audio>

HTML5+CSS3提升学习笔记

谷歌浏览器把autoplay属性禁用了

因为不同浏览器支持不同的格式,所以要为这个音频准备多个格式:

<audio controls="controls">
    <source src="media/snow.mp3" type="audio/mpeg">
    <source src="media/snow.ogg" type="audio/ogg">
    当前浏览器不支持该格式的音频
</audio>

视频标签： <video>

HTML5+CSS3提升学习笔记
谷歌浏览器把autoplay属性禁用了,添加静音属性就可以

<video autoplay="autoplay" muted="muted" loop="loop" width="300px">
    <source src="media/snow.mp4" type="audio/mp4">
    <source src="media/snow.ogg" type="audio/ogg">
    当前浏览器不支持该格式的视频
</video>

新增了input表单,表单属性

HTML5+CSS3提升学习笔记

新增了Canvas

新增了拖放

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

设置元素为可拖放：

<img draggable="true" />

拖动什么

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。

放到何处 - ondragover

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的event.preventDefault() 方法：

function allowDrop(ev)
{
ev.preventDefault();
}

进行放置 - ondrop

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

preventDefault()阻止默认事件（drop的默认行为是以链接的形式打开）

dataTransfer.getData(“Text”)获得被拖的数据，该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id (“drag1”)

把被拖元素追加到放置元素（目标元素）中

新增了地理定位

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

<script>
var x=document.getElementById("demo");
function getLocation()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="该浏览器不支持获取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="Latitude: "+ position.coords.latitude +
"<br>Longitude: "+ position.coords.longitude;
}
</script>

新增了web存储

Web Storage DOM API 为Web应用提供了一个能够替代cookie的Javascript解决方案

sessionStorage—客户端数据存储，只能维持在当前会话范围内。

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

localStorage—客户端数据存储，能维持在多个会话范围内。

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

对于大量复杂数据结构，一般使用IndexDB

新增了WebSocket协议

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

CSS3

css3是在css2的基础上新增样式

css3新增了边框属性

border-color 为边框设置多种颜色

border-image 图片边框（InternetExplorer不支持border-image属性）

border-radius 圆角边框

box-shadow 阴影效果

css3新增了背景属性

background-clip 规定背景的绘制区域。background-clip:content-box;

background-origin 规定背景图片从哪里开始显示，背景图片可以放置于content-box、padding-box或border-box区域。background-origin:content-box;

background-size 指定背景图片从什么位置开始裁剪

css3新增了过渡效果即transition

css3新增了两种渐变（gradients）

HTML5+CSS3提升学习笔记

css3新增了文字效果

text-shadow：文本阴影

word-wrap：自动换行

css3新增属性选择器

HTML5+CSS3提升学习笔记

<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button disabled="disabled">按钮</button>
<button disabled="disabled">按钮</button>
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜索框">
<input type="search" name="" id="" value="搜索框">
<div class="icon1">图标1</div>
<div class="icon2">图标1</div>
<div class="icon3">图标1</div>
<div class="abcicon">图标1</div>

button {
    cursor: pointer;
}
/* 属性选择器的使用 */
/* 选择的是既是button又有disabled的按钮 */
/* 属性选择器的权重是10 比标签选择器权重大*/

button[disabled] {
    cursor: default;
}
/* 属性等于值 */

input[type="search"] {
    color: pink;
}
/* 以某个值开头的属性值 */

div[class^="icon"] {
    color: red;
}
/* 以某个值结尾的属性值 */

div[class$="icon"] {
    color: rosybrown;
}
<style>

HTML5+CSS3提升学习笔记

css3新增结构伪类选择器

HTML5+CSS3提升学习笔记

关于nth-child()

<div>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>
   </ul>
</div>

/* 结构伪类选择器的使用 */
/* 选择第一个li */

ul li:first-child {
    color: salmon;
}
/* 选择最后一个li */

ul li:last-child {
    color: seagreen;
}
/* 选择第四个li */

ul li:nth-child(4) {
    color: slateblue;
}
/* 选择偶数个li */
/* ul li:nth-child(even) {
    color:  slateblue;
} */
/* 括号内是公式 n从0开始*/

ul li:nth-child(5n) {
    color: teal;
}
/* ul li:nth-child(n+5) {
    color: yellow;
}

ul li:nth-child(-n+5) {
    color: mediumvioletred;
} */

HTML5+CSS3提升学习笔记

关于nth-of-type()

<div>
    <p>这是一个p标签</p>
    <span>这是一个span标签</span>
    <span>这是一个span标签</span>
    <span>这是一个span标签</span>
</div>

div :nth-child(1) {
    color: mediumvioletred;
}
/* nth-child（n）选择父元素里的第n个元素 不管他的类型 */
/* nth-of-type（n）选择相应类型中的第n个元素 */
/* 注意这种写法 是div span: */
div span:first-of-type {
    color: palevioletred;
}

div span:last-of-type {
    color: peru;
}

div span:nth-of-type(2) {
    color: royalblue;
}

css3新增伪元素选择器

HTML5+CSS3提升学习笔记

css3 为了区分伪类和伪元素，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

HTML5+CSS3提升学习笔记

div {
    width: 300px;
    height: 300px;
    border: royalblue 1px solid;
}

div::before {
    content: "我";
    height: 100px;
    width: 100px;
    background-color: salmon;
    display: inline-block;
}

div::after {
    content: "小小";
    height: 100px;
    width: 100px;
    background-color: salmon;
    display: inline-block;
}

HTML5+CSS3提升学习笔记

css3 新增2D 3D转换

在二维坐标系中的转换;

可以实现元素的位移,旋转,缩放等效果

- 移动:translate

HTML5+CSS3提升学习笔记

<div></div>
<div></div>

div:first-child {
    height: 100px;
    width: 100px;
    background-color: salmon;
    transform: translate(50px, 50px);
    /* transform: translateX(20px);
    transform: translateY(20px); */
}

div:last-child {
    height: 100px;
    width: 100px;
    background-color: sandybrown;
}

HTML5+CSS3提升学习笔记

利用转换实现盒子的水平垂直居中：

/* 之前实现盒子水平垂直居中的方法 */
/* p {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background-color: skyblue;
} */

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: skyblue;
}

可以将

margin-top: -50px; margin-left: -50px;

换成

transform: translate(-50%, -50%);

这个百分比是相对自身的尺寸的百分比。

注意这个要将默认的外边距和内边距设置为0px

HTML5+CSS3提升学习笔记

- 旋转:rotate

HTML5+CSS3提升学习笔记

利用旋转实现框中的小三角，鼠标移上发生旋转：

div {
	position: relative;
	width: 250px;
	height: 35px;
	border: 1px solid black;
}
	
div::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 15px;
	height: 10px;
	width: 10px;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	transform: rotate(45deg);
}
/* 鼠标经过div里面的三角形发生旋转 */
/* 注意这个写法 */
div:hover::after {
	transform: rotate(225deg);
	transition: all 0.2s;
}

HTML5+CSS3提升学习笔记

设置转换的中心点：

HTML5+CSS3提升学习笔记

小案例，实现以下的动态效果：

div {
    /* 注意下面将旋转点设置在了左下角 */
    /* 所以这里要将div放在中间 不然看不见 */
    width: 200px;
    height: 200px;
    border: 1px solid pink;
    margin: 30px auto;
    overflow: hidden;
}

div::before {
    content: "小小";
    /* 注意伪元素是以行内形式显示的，所以要改为块形式显示 */
    display: block;
    width: 100%;
    height: 100%;
    background-color: pink;
    transform: rotate(180deg);
    transform-origin: left bottom;
    transition: all 0.3s;
}

div:hover::before {
    transform: rotate(0deg);
}

HTML5+CSS3提升学习笔记

- 缩放:scale

HTML5+CSS3提升学习笔记

实现图片的放大效果：

HTML5+CSS3提升学习笔记

<style>
	div {
	    overflow: hidden;
	    height: 100px;
	    width: 200px;
	    margin: 10px;
	    float: left;
	}
	
	div img {
	    height: 100px;
	    width: 200px;
	}
	
	div img:hover {
	    transform: scale(1.1);
	    transition: all 0.4s;
	}
</style>

<body>
    <div><img src="images/img-8abb811f1ef51ff04e869f85b9869349.jpg" alt=""></div>
    <div><img src="images/img-8abb811f1ef51ff04e869f85b9869349.jpg" alt=""></div>
    <div><img src="images/img-8abb811f1ef51ff04e869f85b9869349.jpg" alt=""></div>
</body>

小案例：分页按钮

HTML5+CSS3提升学习笔记

li {
    width: 30px;
    height: 30px;
    float: left;
    border: 1px solid pink;
    text-align: center;
    border-radius: 50%;
    line-height: 30px;
    margin: 10px;
    list-style: none;
    transition: all 0.4s;
    cursor: pointer;
}

li:hover {
    transform: scale(1.2);
}

2D转换综合写法

HTML5+CSS3提升学习笔记

transition过渡属性

HTML5+CSS3提升学习笔记

transition-property 规定设置过渡效果的 CSS 属性的名称。

transition-duration 规定完成过渡效果需要多少秒或毫秒。

transition-timing-function 规定速度效果的速度曲线。

transition-delay 定义过渡效果何时开始。

例如：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
	width:100px;
	height:100px;
	background:blue;

}

div:hover
{
	width:300px;
	height:300px;
	/*只为width属性设置过渡的话，鼠标移上高度会立刻增加没有过渡
	为all属性设置过渡的话，高度和宽度都会过渡增加*/
	transition:width 2s;
	-moz-transition:width 2s; /* Firefox 4 */
	-webkit-transition:width 2s; /* Safari and Chrome */
	-o-transition:width 2s; /* Opera */
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

css3新增动画

HTML5+CSS3提升学习笔记

基本使用：

/* 定义动画 */
    
@keyframes move {
    /* 开始状态 */
    0% {
        transform: translate(0px);
    }
    /* 结束状态 */
    100% {
        transform: translate(1000px);
    }
}

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 调用动画 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 2s;
}

HTML5+CSS3提升学习笔记

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 调用动画 */
    animation-name: move;
    /* 持续时间 */
    animation-duration: 4s;
    /* 运动曲线 */
    animation-timing-function: ease;
    /* 何时开始 */
    animation-delay: 1s;
    /* 重复次数 */
    animation-iteration-count: infinite;
    /* 是否逆向播放 默认的是normal*/
    animation-direction: alternate;
    /* 动画结束后的状态  */
    animation-fill-mode: forwards;
}

div:hover {
    /* 规定动画是否运行或暂停 */
    animation-play-state: paused;
}

HTML5+CSS3提升学习笔记

案例：热点图

HTML5+CSS3提升学习笔记

.city {
    position: relative;
    width: 400px;
    height: 400px;
    border: royalblue solid 1px;
}

.dotted {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: pink;
    border-radius: 50%;
}
/* 这里用到了属性选择器 */
/* 这里注意权重的设置 下面对于palse2和palse3提高了权重，不然显示不了 */
/* 类选择器 属性选择器和结构伪类选择器的权重都为10
标签选择器和为元素选择器权重是1 */
.city div[class^="palse"] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 12px salmon;
    animation: palse 1.2s linear infinite;
}

.city div.palse2 {
    animation-delay: 0.4s;
}

.city div.palse3 {
    animation-delay: 0.8s;
}

@keyframes palse {
    0% {}
    70% {
        width: 40px;
        height: 40px;
        opacity: 1;
    }
    100% {
        width: 70px;
        height: 70px;
        opacity: 0;
    }
}

<div class="city">
    <div class="dotted"></div>
    <div class="palse1"></div>
    <div class="palse2"></div>
    <div class="palse3"></div>
</div>

案例：打字机

这里用到了动画的step（）属性，step（）可以用图片帧实现动画

HTML5+CSS3提升学习笔记

div {
    overflow: hidden;
    /* 使文字在一行内显示 在这里可以不写*/
    /* white-space: nowrap; */
    height: 30px;
    width: 0px;
    background-color: pink;
    animation: move 4s forwards steps(10);
    font-size: 20px;
}

@keyframes move {
    0% {
        width: 0px;
    }
    100% {
        width: 200px;
    }
}

添加多个动画，中间用逗号分隔

css3 新增3D转换

HTML5+CSS3提升学习笔记

css3 3D旋转

HTML5+CSS3提升学习笔记

perspective是添加给要翻转的盒子的父盒子

transform-style是添加给要翻转的这个盒子

案例：两面翻转的盒子：

这里是在一个父盒子里面添加两个子盒子，翻转的是父盒子，同时要保留子盒子的3d效果。里面两个div是叠在一起的，最里面的div要提前翻转好，这样再次翻转后就是正确的，不然是反的

HTML5+CSS3提升学习笔记

.box {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0px auto;
    background-color: wheat;
    transition: all 0.4s;
    /* 让子盒子保留立体效果 在父级上添加*/
    transform-style: preserve-3d;
    perspective: 500px;
}

.front,
.back {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    line-height: 300px;
}

.front {
    background-color: pink;
    z-index: 1;
}

.back {
    background-color: purple;
    /* 使方块背靠背旋转 */
    transform: rotateY(180deg);
}

.box:hover {
    transform: rotateY(180deg);
}

<div class="box">
    <div class="front">这是前面</div>
    <div class="back">这是后面</div>
</div>

案例：3d导航栏：

跟上面方法类似，用两个子div实现，注意对2d转换的综合使用要注意将tranlate转换写在最前面，

HTML5+CSS3提升学习笔记

ul {
    margin: 100px;
}

li {
    width: 120px;
    height: 35px;
    list-style: none;
    perspective: 500px;
}

.box {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.front,
.bottom {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.front {
    background-color: pink;
    z-index: 1;
    /* 这里不能写百分比 因为这个div在z方向上是没有值的 */
    transform: translateZ(17.5px);
}

.bottom {
    background-color: purple;
    /* 如果有多种样式 必须先写移动 */
    transform: translateY(50%) rotateX(-90deg);
}

.box {
    transition: all 0.4s;
}

.box:hover {
    transform: rotateX(90deg);
}

<ul>
    <li>
        <div class="box">
            <div class="front"></div>
            <div class="bottom"></div>
        </div>
    </li>
</ul>

案例：旋转木马：

和以上思路类似，在一个section里面放置6个div，对这几个div进行摆放，再旋转section整体，用到了结构伪类选择器

body {
    perspective: 1500px;
}

section {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 150px auto;
    transform-style: preserve-3d;
    animation: rotate 10s linear infinite;
}

section:hover {
    animation-play-state: paused;
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

section div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url(images/3.jpg) no-repeat;
}
/* 结构伪类选择器 */

section div:nth-child(1) {
    transform: translateZ(300px);
}

section div:nth-child(2) {
    transform: rotateY(60deg) translateZ(300px);
}

section div:nth-child(3) {
    transform: rotateY(120deg) translateZ(300px);
}

section div:nth-child(4) {
    transform: rotateY(180deg) translateZ(300px);
}

section div:nth-child(5) {
    transform: rotateY(240deg) translateZ(300px);
}

section div:nth-child(6) {
    transform: rotateY(300deg) translateZ(300px);
}

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

浏览器私有前缀

浏览器私有前缀为了兼容老版本的写法，比较新版本的浏览器无需添加

HTML5+CSS3提升学习笔记

HTML5+CSS3提升学习笔记

HTML5

新增了语义化标签

新增了多媒体标签

新增了input表单,表单属性

新增了Canvas

新增了拖放

新增了地理定位

新增了web存储

新增了WebSocket协议

CSS3

css3新增了边框属性

css3新增了背景属性

css3新增了过渡效果 即transition

css3新增了两种渐变（gradients）

css3新增了文字效果

css3新增属性选择器

css3新增结构伪类选择器

css3新增伪元素选择器

css3 新增2D 3D转换

- 移动:translate

- 旋转:rotate

- 缩放:scale

transition过渡属性

css3新增动画

css3 新增3D转换

css3 3D旋转

浏览器私有前缀

继续阅读

css3新增了过渡效果即transition