A. What is HTML5

The core language of the World Wide Web, an application HTML in Standard Generalized Markup Language (HTML) is the fifth major revision. To replace HTML4 and
next-generation standard version of XHTML, so called HTML5.
HTML5 is designed for the mobile device supports multimedia on.
It adds new features: a semantic characteristic, a local storage characteristics, compatibility Laid device
, connectivity characteristics, web multimedia features, three-dimensional, graphics and special effects Laid
properties, performance characteristics and integration, CSS3 characteristics.
Abandoned some elements and attributes
broad HTML5 is HTML5 + CSS3 + JavaScript itself

Part two .html5

1. Add semantic standard
header: header tags
nav: navigation tags
articl: Content tab
section: block-level tags
aside: sidebar tag
footer tag tail

2.H5 new multimedia label
Multimedia tab contains two, as follows:
Audio: audio
video: video
using them can easily embed audio and video in a page, rather than go behind the use of flash and other browser plug-ins.

Audio Tags

<audio src="文件地址" controls="controls"></audio>

//解决<audio>在不同浏览器的兼容问题
< audio >
		<source src="happy.mp3" type="audio/mpeg" >
		<source src="happy.ogg" type="audio/ogg" >
 </ audio>

Video Tags

<video src="文件地址" controls="controls"></video>

//解决<video>在不同浏览器的兼容问题
< video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >

3.H5 new input form, Form Properties

Property Value	Explanation
type=“email”	Restrict user input must type Email
type=“url”	Restrict user must enter a URL type
type=“date”	Restrict user must enter a date type
type=“time”	Restrict user input must be time type
type=“month”	Restrict user input must be dated type
type=“week”	Restrict user input must be the type of week
type=“number”	Restrict user input must be numeric type
type=“tel”	Restrict user must enter the phone number type
type=“search”	search bar
type=“color”	Color Picker

Three .css3 part

1. attribute selector

Selectors	Brief introduction
E [to]	E element selected attribute having att
E [to = "selection"]	Selecting a att attribute and the attribute value is equal to the element E of val
E [to = "selection"]	Selecting a att attribute and the attribute value is equal to the element E of val
E [that $ = "selection"]	Att having matching attribute values and element E at the end of val
E [* to = "selection"]	Att having matching attribute, and the value of the val elements containing E

    <style>
        /* 属性选择器使用方法 */
        /* 属性选择器的权重是 10 */
        /* 1.直接写属性 既是button 又有 disabled 这个属性的元素*/
         
        button[disabled] {
             cursor: pointer;
        }
        /* 2. 属性等于值 */
        
        input[type="search"] {
            color: pink;
        }
        /* 3. 以某个值开头的 属性值 */
        
        div[class^="icon"] {
            color: red;
        }
        /* 4. 以某个值结尾的 */
        
        div[class$="icon"] {
            color: green;
        }
        /* 5. 可以在任意位置的 */
        
        div[class*="icon"] {
            color: blue;
        }
    </style
<body>
    <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="text" name="" id="" value="文本框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <input type="search" name="" id="" value="搜索框">
    <div class="icon1">图标1</div>
    <div class="icon2">图标2</div>
    <div class="icon3">图标3</div>
    <div class="iicon3">图标4</div>
    <div class="absicon">图标5</div>
</body>

2. Structure pseudo class selector

Selectors	Brief introduction
E:first-child	Matching the first child element of the parent element E
E:last-child	E match last element of the parent element
E:nth-child(n)	Matching parent element in the n-th element E
E:first-of-type	The first specifies the type of E
E:last-of-type	The last of the specified type E
E:nth-of-type(n)	Specify the type of the n-th E

<style>
     /*匹配ul元素中的第一个子元素li */
        ul li:first-child {
            background-color: pink;
        }
        
        ul li:last-child {
            background-color: deeppink;
        }
        /* nth-child(n)  我们要第几个，n就是几  比如我们选第8个， 我们直接写 8就可以了 */
        
        ul li:nth-child(8) {
            background-color: lightpink;
        }
         /* of-type 选择指定类型的元素 */
        
        div span:first-of-type {
            background-color: purple;
        }
        
        div span:last-of-type {
            background-color: skyblue;
        }
        
        div span:nth-of-type(2) {
            background-color: red;
        }
    </style>


<body>
<div>
        <p>我是一个p</p>
        <span>我是第一个span</span>
        <span>我是第二个span</span>
        <span>我是第三个span</span>
    </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>
</body>

3. pseudo-element selector

Selectors	Brief introduction
::before	Inserts in front of the interior of the element
::after	Insert after the inside of the element

note:

before and after must have a content property
In front of the contents before, after the contents of the back
before and after creating an element, but belong to inline elements.
Because the unseen elements have just created in the dom inside, so we called pseudo-elements and pseudo-elements, like the tag selector, a weight of 1

Four, 2D conversion

Conversion (Transform) is one of the features CSS3 subversive, displacement elements can be achieved, rotation, distortion, scaling.

Scale: scale
Mobile: translate
Rotation: rotate
Tilt: skew

1. 2D conversion translate movement of

2D 2D conversion is moving inside a feature may change the position of the element in the page, similarly located.

/* 表示转化过渡时间*/
 transition: all 4s;
/* 语法  transform: translate(x,y) */
transform: translate(30px, 30px);

Features:

2D conversion is defined along the X and Y-axis moving element
translate in percentage units with respect to the element itself translate: (50%, 50%);
translate similarly located, does not affect the position of other elements within the row labels had no effect on

2. 2D conversion of rotational Rotate
2D rotation means is for clockwise rotation or counterclockwise rotation of the elements in the two-dimensional plane.

         /* 设置旋转角度 */
            transform: rotate(360deg);
            
             /* 设置中心的旋转 */
            /* transform-origin: left bottom; */
            /* 2. 默认的是 50%  50%  等价于 center  center */
            /* 3. 可以是px 像素 */
             transform-origin: 50px 50px；

3. 2D scale conversion of the zoom
scaling, zoom in and out. As long as elements are added on to this property will be able to control it to enlarge or reduce without affecting other elements.

            /*语法： transform: scale(x, y); */
            /* transform:scale(1,1)  宽和高都放大一倍，相对于没有放大 */
            /*transform:scale(2,2)  宽和高都放大了2倍*/
            /* transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)*/
            /* transform:scale(0.5,0.5)：缩小*/
            /*  scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
          
            transform: scale(2,2);

2D conversion comprehensive written order

 /* transform: rotate(180deg) translate(150px, 50px); */
            /* 我们同时有位移和其他属性，我们需要把位移放到最前面 */
            transform: translate(150px, 50px) rotate(180deg) scale(1.2);
        }

Fifth, animation

Animation (Animation) is one of the features CSS3 subversive, can be accurately controlled by one or a group of a plurality of animation nodes used to implement complex animations

With the definition animation keyframes (similarly defined class selectors)
Call Animation

 @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }

3. Animation shorthand property
animation: motion animation time when the name of the animation curve to start playing the opposite direction if the number of times the animation or wait for the end of the state;

animation: myfirst 5s linear 2s infinite alternate;

After the box animation, stop at the end location: animation-fill-mode: forwards
Want to go back to animation, rather than directly jump back: animation-direction: alternate
Suspended animation: animation-play-state: puased;

Animation attributes:

Attributes	description
@keyframes	The provisions of animation.
animation	Shorthand property for all animation properties, in addition to animation-play-state property.
animation-name	It specifies the name of @keyframes animation. (Required)
animation-duration	Seconds or milliseconds predetermined animation completes takes one cycle, 0 is the default. (Required)
animation-timing-function	The provisions of the animation speed profile, the default is "ease".
animation-delay	The provisions of the animation when to start, the default is 0.
animation-iteration-count	Specified number of times the animation is played, the default is 1, there are infinite
animation-direction	Whether the provisions of animation reverse play in the next cycle, the default is "normal", alternate reverse play
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"pause"。
animation-fill-mode	规定动画结束后状态，保持forwards回到起始backwards

六、3D 转换

1.三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴：水平向右注意： x 右边是正值，左边是负值
y轴：垂直向下注意： y 下面是正值，上面是负值
z轴：垂直屏幕注意：往外面是正值，往里面是负值

2.3D移动 translate3d
transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
translform:translateX(100px)：仅仅是在x轴上移动
translform:translateY(100px)：仅仅是在Y轴上移动
translform:translateZ(100px)：仅仅是在Z轴上移动（注意：translateZ只能跟px单位）

3.透视 perspective
在父元素添加；

/*perspective越大显示越小*/
 perspective: 500px;

4 translateZ
translform:translateZ(100px)：仅仅是在Z轴上移动。有了透视，就能看到translateZ 引起的变化了
translateZ：单位只能是px
 translateZ：往外是正值，数值越大显示越大
 translateZ：往里是负值，数值越小显示越小
5.3D旋转 rotate3d
语法

transform:rotateX(45deg)：沿着x轴正方向旋转 45度
transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转 deg为角度（了解即）

6 .3D呈现 transfrom-style

控制子元素是否开启三维立体环境。
给父亲添加影响的是子盒子。
Transform-style: preserve-3d; 子元素开启立体空间，默认的值是 flat 不开启

    <style>
        body {
          /* 透视写到被观察元素的父盒子上面 */
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持3d立体空间环境 */
            transform-style: preserve-3d;
        }
        
        .box:hover {
            transform: rotateY(60deg);
        }
        
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: red;
        }
        
        .box div:last-child {
            background-color: blue; 
            /*在x轴旋转60度*/
            transform: rotateX(60deg);
        }
    </style>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

效果：
在这里插入图片描述

六、浏览器私有前缀

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

1. 私有前缀

-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性

2. 提倡的写法

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10

没错，是十三

发布了16 篇原创文章 · 获赞 2 · 访问量 196

私信关注

H5C3 study notes