New features of Html5 and CSS3

What's new in h5?
1. Add some semantic tags <article> <section> <aside><header> <footer><nav> etc.
2.Canvas canvas
3.audio audio video video
4.drag drag
5.Local storage localstorage sessionStorage
localStorage is Long-term storage of data, the data will not be lost after closing the browser
sessionStorage is automatically deleted after closing the browser
6. webSocket long connection
7. Geolocation HTML5 Geolocation API is used to obtain the user's geographic location.
8. Enhanced form input, number, datalist, keygen, output, progress 9.
svg vector drawing
10. webWorker realizes js multi-process.

When executing a script in an HTML page, the state of the page is unresponsive until the script has completed. A web worker is a JavaScript that runs in the background, independent of other scripts, and does not affect the performance of the page. You can keep doing whatever you want: clicks, selections, etc., while the web worker runs in the background. (Equivalent to achieving multi-threaded concurrency)

The new features of h5 are detailed

Added semantic elements:

<nav>

<aside>

HTML5 Audio ( audio ), Video ( video )

HTML5 specifies a standard for embedding audio elements on web pages, using the <audio> element.

HTML5 specifies a standard way to include video through the video element.

HTML5 Canvas

The HTML5 <canvas> element is used for drawing graphics, which is done by script (usually JavaScript).

The <canvas> tag is just a graphics container, you have to use scripts to draw graphics.

    <!-- 
        canvas 绘图接口.
     -->
     <div>
        <canvas width="500" height="500"></canvas>
     </div>
     <script>
         var canvas=document.querySelector("canvas");//获取cnavas元素对象
         var context=canvas.getContext("2d");//获取canvas绘图上下文【环境】2d环境.
            //绘制线段
            context.moveTo(0,0);//设置笔触起点
            context.lineTo(500,500);//线段终点 可以有多个.
            context.lineTo(450,250);
            context.lineTo(250,450);
            context.lineTo(500,500);
            context.lineWidth=10;//设置路径的宽度
            context.strokeStyle="rgba(255,0,0,0.1)";//设置路径的颜色样式

            context.stroke();//绘制 把上面的路径绘制到canvas
     </script>

HTML5 drag and drop

Drag and drop is a common feature where an object is grabbed and then dragged to another location. In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

Set the element to be draggable. To make the element draggable, set the draggable property to true:

What's new in CSS3?
1. Selector
2. Transparency
1. Box transparency notation: opacity: 0.1; filter: alpha(opacity=10) (compatible with IE)
2. rgba(0,0,0,0.1) The first three values represent the color, the first Four values represent the transparency of the color
3. Multi-column layout
4. Multiple background images
5.Word Wrap
6. Text shadow
7 css3 gradients
8. Border (border radius) border

9.animation animation

10 transition transition animation (need to be triggered)
11. box shadow box-shadow: horizontal offset vertical offset feather size expansion size color whether inner shadow
12. box model
13. media query @media screen

14.flex layout

css3 new features section details

1. The new selector of css3

E:nth-child(n) The selector matches the nth child element of its parent element, regardless of element type, n can be a number, keyword, or formula
E:nth-of-type(n) Select the Nth child element of the matching parent element
E:frist-child Relative to the parent, the first child element of "all" child elements, and the "position" should correspond to
E:frist-of-type Referenced relative to the parent, the first child element of a "specific type" (E)
E:empty Selects every E element that has no children
E:target Select the currently active E element
::selection Select the part of the element selected by the user
attribute selector
2. Text
text-shadow:2px 2px 8px #000;Parameter 1 is the offset to the right, parameter 2 is the offset to the left, parameter 3 is the pixel of the gradient, and parameter 4 is the color of the gradient
text-overflow: Specifies what happens when the text overflows the containing element text-overflow: ellipsis (omitted)
text-wrap: Specifies the rules for text wrapping
word-break Specifies line break rules for non-CJK text
word-wrap: Split long undivided words and wrap to the next line
white-space: specifies how to deal with the blank white-space:nowrap in the element specifies that the text in the paragraph does not wrap

3. Border

border-raduis border rounded corners
1. Set the rounded corner of a certain corner: border-radius: upper left corner, upper right corner, lower right corner, lower left corner;
For example, set the rounded corner of the upper left corner: border-top-left-radius: 30px 60px;
Set four corners at the same time: border-radius: 30px 20px 10px 50px;
Set the four corners to be the same (commonly used): border-radius: 20%; border-radius: 50%; (is a perfect circle)

border-image border image

.border-image {
    border-image-source:url(images/border.png-600);
    boder-image-slice:27;
    border-image-width:10px;
    border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角，只适应与四边  
}

4. Gradient

linear-gradient

background-image:linear-gradient(90deg,yellow 20%,green 80%)

redial-gradient

background-iamge:radial-gradient(120px at center center,yellow,green)

Five, multi-column layout

column-count
column-width
column-gap
column-rul

6. Transition

transition: transition attribute time motion mode animation delay

1. transition-delay: 5s; the transition is delayed for 5s.
2. transition-property sets the properties of the transition, such as: width height background-color (whether to animate on the width or on the height or on the background) 3.
transition- duration Set the transition time, for example: 1s 500ms
4, transition-time-function: ease; set the transition movement mode

7. Animation

To create CSS3 animations, you need to understand the @keyframes rule. The @keyframes rule is to create animations. Specify a CSS style within the @keyframes rule and the animation will gradually change from the current style to the new style

     /* animation: myfirst 1.2s linear infinite;  写在css样式 */ 

        @keyframes myfirst {
            0% {
                background: red;
            }

            25% {
                background: yellow;
            }

            50% {
                background: blue;
            }

            100% {
                background: green;
            }
        }

transform ：translate（x,y) rotate(deg) scale(x,y)
translate
scale
rotate
skew(tilt)

Eight, css3 multi-column

Attributes	describe
column-count	Specifies the number of columns by which the element should be split.
column-fill	specifies how to populate columns
column-gap	Specify the gap between columns
column-rule	Shorthand for all column-rule-* attributes
column-rule-color	Specifies the color of the border between two columns
column-rule-style	Specifies the style of the border between two columns
column-rule-width	Specifies the thickness of the border between two columns
column-span	Specifies how many columns the element should span
column-width	specify the width of the column
columns	Shorthand for setting column-width and column-count

Nine, CSS3 multimedia query

@media all and(min-width:800px){...}

@media all is the media type, that is, apply this CSS to all media types.

(min-width:800px) is an expression containing a media query that tells the browser to only apply the following CSS if the browser has a minimum width of 800 pixels.

  <!-- min-width 当视窗大于等于1200px时候9.css才生效 -->
    <!-- 给link标签添加媒体查询 -->
    <link rel="stylesheet" href="./9.css" media="(min-width:1200px)"/>

    <!-- max-width:1200px 当视窗小于等于 1200px -->
    <link rel="stylesheet" href="./9.1.css" media="(max-width:1200px)"/>


  <!-- style标签上面的媒体查询 -->
    <style media="screen and (min-width:1200px)">
        .box{
            color:white;
           font:bold 30px "微软雅黑";
        }
    </style>


and 条件
@media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}

or  关键词   
@media(min-width:800px)or(orientation:portrait){...}

not 关键词
 @media(not min-width:800px){...}

Ten, css3 box model

In CSS3, some new user interface features were added to adjust element size, box size and outer border.
Mainly include the following user interface attributes: resize: none | both | horizontal | vertical | inheritbox-sizing: content-box | border-box | inheritoutline: outline-color outline-style outline-width outline-offset
The box-sizing property allows you to define exactly how specific content fits into an area.
The outline-offset property offsets the outline and draws it beyond the edge of the border.
The resize attribute specifies whether an element should be resized by the user.

Eleven, box-shadow

The box-shadow property can set one or more drop-down shadow boxes.

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 30px #888888;  // x轴 y轴 模糊程度 颜色
}

New features of Html5 and CSS3

Guess you like