One .HTML5 New features

HTML5 The new features are mainly aimed at the previous shortcomings , Added some new tags 、 New forms and new form properties, etc .
These new features have compatibility issues , Basic is IE9+ Only browsers of the above versions support , If you don't think about compatibility , You can use it a lot
Some new features .
 
1.HTML5 New semantic tags
Previous layout , We basically use div To do it .div For search engines , There is no semantics .
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
<header>: Head tag
<nav>: Navigation tag
<article>: Content labels
<section>: Define an area of the document
<aside>: Sidebar labels
<footer>: Tail label

Be careful :
This semantic standard is mainly for search engines
These new tags can be used many times in the page
stay IE9 in , You need to convert these elements to block level elements
Actually , We prefer to use these tags on mobile terminals
 
2.HTML5 New multimedia tags
The newly added multimedia tags mainly include two :
Audio :<audio>
video :<video>
Using them, it's easy to embed audio and video in the page , Instead of using flash And other browser plug-ins .
 
HTML5 Without plug-ins , Can also support the original video format file playback , Of course , The supported formats are limited .
 
video <video>:
At present <video> Element supports three video formats : Use as much as possible mp4 Format

 <video src=" File address " controls="controls"></video>
 <video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
Your browser doesn't support <video> Tag play video
</ video >
video <video>—— Common properties :

Audio <audio>:
At present <audio> Element supports three audio formats :

<audio src=" File address " controls="controls"></audio>
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
Your browser doesn't support <audio> label .
</ audio>
Common properties :

3.HTML5 Newly added input type

4.HTML5 New form properties

Two .CSS3 New features

New selector :

1. Attribute selector

Attribute selectors can select elements based on their specific attributes . So you don't have to rely on classes or id Selectors .

2. Structure pseudo class selector

The structure pseudo class selector mainly selects elements according to the document structure , It is often used according to the child elements in the parent selector

3. Structure pseudo class selector
nth-child(n) Select one or more specific child elements of a parent element ( a key )
n It could be a number , Keywords and formulas
n If it's a number , It's choice number two n Sub elements , The numbers come from 1 Start …
n It can be a keyword :even even numbers ,odd Odd number
n It can be a formula : The common formula is as follows ( If n It's the formula , From 0 Start calculating , But the first 0 Elements or more than the number of elements will be ignored )

The structure pseudo class selector mainly selects elements according to the document structure , It is often used according to the child elements in the parent selector
difference :
nth-child Sort and select all the children in the parent element ( The serial number is fixed ) Find the second one first n A child , And see if it's with E matching
nth-of-type Sort and select the specified child elements in the parent element . Match first E , And then based on E Find the first n A child
 
4. Pseudo element selector ( a key )
Pseudo element selectors can help us take advantage of CSS Create a new label element , Without the need for HTML label , Thus simplify HTML structure .

Be careful :
before and after Create an element , But it's an in-line element
The newly created element is not found in the document tree , So we call it pseudo elements
grammar : element::before {}
before and after There has to be content attribute
before Create an element in front of the parent element's content ,after Insert the element after the content of the parent element
Pseudo element selectors are the same as tag selectors , The weight of 1
 
5.CSS3 Box model
CSS3 Through box-sizing To specify the box model , Yes 2 It's worth : Can be designated as content-box、border-box, So that we
The way the box size is calculated changes .
It can be divided into two situations :
box-sizing: content-box The size of the box is width + padding + border ( It used to be the default )
box-sizing: border-box The size of the box is width
If we change the box model to box-sizing: border-box , that padding and border It won't make the box big ( Premise padding
and border Not more than width Width )
 
6.CSS3 Other features ( understand )
The picture blurs :
filter CSS Attribute to apply a graphic effect such as blur or color offset to an element .
filter: function (); for example : filter: blur(5px); blur blurred The larger the value, the more fuzzy 
 
Calculate the width of the box width: calc function :
calc() this CSS Functions let you declare CSS Some calculations are performed when the property is valued .
width: calc(100% - 80px);

7.CSS3 transition ( a key )

transition (transition) yes CSS3 One of the subversive features of , We can use Flash Animation or
JavaScript Under the circumstances , Add an effect to an element when it changes from one style to another .
Transition animations : It's from a state Gradually transition to another state
It can make our page look better , More dynamic , although Older browsers don't support (ie9 The following versions ) But it won't affect
The page layout .
We often talk to :hover Together Use it with .
transition: Properties to transition Spend time Motion curve When to start ;
attribute : Want to change css attribute , Width height The background color Both inside and outside margins are OK . If you want all the attributes to be
Change, transition , Write a all Can .
Spend time : The unit is second ( Must write unit ) such as 0.5s
Motion curve : The default is ease ( It can be omitted )
When to start : The unit is second ( Must write unit ) You can set the delay trigger time The default is 0s ( It can be omitted )
 
 

HTML5 and CSS3 More related articles to improve

  1. Web Front end development essays collection (jQuery、HTML5、CSS3)【 Series 17 】

    <Web The front-end development essence is recommended >2013 The fifth issue of ( The 17th issue ) I've met you all . Dream sky blog focuses on   The front-end development   technology , Share various ways to enhance the user experience of the website  jQuery  plug-in unit , Show cutting edge  HTML5  and  C ...

  2. Web Development essays (jQuery、HTML5、CSS3)【 Series 27 】

    <Web The front-end development essence is recommended >2014 In the first 6 period ( Total number 27 period ) I've met you all . Dream sky blog focuses on   The front-end development   technology , Share all kinds of excellent products that can improve the user experience of the website  jQuery  plug-in unit , Show cutting edge  HTML5 ...

  3. Web Front end development essays collection (jQuery、HTML5、CSS3)【 Series 18 】

    <Web The front-end development essence is recommended >2013 Issue 6 ( The 18th issue ) I've met you all . Dream sky blog focuses on   The front-end development   technology , Share various ways to enhance the user experience of the website  jQuery  plug-in unit , Show cutting edge  HTML5  and  C ...

  4. 《web Front end Design Foundation ——HTML5、CSS3、JavaScript》 Zhang Shuming's version Simple answers, simple arrangement

    web Front end Design Foundation ——HTML5.CSS3.JavaScript  A brief answer Chapter one (1) Explain the meaning of nouns :IP Address .URL. domain name   iP Defines how to connect to the Internet , And how data is transmitted between hosts . ...

  5. Html5 And Css3 Pick up the knowledge points ( Two )

    page title Select the text that can briefly summarize the content of the document as title written words ,title The core content comes first 60 Characters Rating title 1. When creating a rating title , Avoid skipping levels , Such as h3 Jump straight to h5, But it's allowed to jump from the low level to the high level . 2. no need ...

  6. HTML5&amp;amp;CSS3 Beginner's Guide

    Introduce The Internet age has come . Now for people , Surfing the Internet every day has become one of the most common behaviors . A typical web page is made up of text . Images and links make up . Remove differences in content , Different websites have different looks and feelings , In order to realize the self establishment on the network ...

  7. HTML5 And CSS3 Authoritative guide to CSS3 Learning record

    title: HTML5 And CSS3 Authoritative guide to CSS3 Learning record toc: true date: 2018-10-14 00:06:09 Learning materials --<HTML5 And CSS3 Authoritative guide >( The first 3 edition ) ...

  8. ( Nearly ten thousand words ) An article will take you to understand HTML5 and CSS3 Development basis and Application - Suitable for front-end interview

    author | Jeskson source | Front end tavern of dada HTML5 and CSS3 Development basis and Application , Detailed instructions HTML5 New features and new added elements of ,CSS3 New features , New selector , New layout , Box model , Text , Frame , The gradient , ...

  9. My favorite HTML5 and CSS3 Online tools 【 turn 】

    I really like HTML5, CSS3, JavaScript Programming , But some of the code still needs some auxiliary tools to do , for example ,CSS3 Of Gradient I'm really upset if I write code by hand , And something like that. animation Animation ...

  10. Web The front-end development essence is recommended (jQuery、HTML5、CSS3)【 Series 12 】

    2012 year 12 month 12 Japan ,[<Web Front end developers and designers must read articles > Series 12 ] I've met you all . Dream sky blog focuses on   The front-end development   technology , Share various ways to enhance the user experience of the website  jQuery  plug-in unit , Show cutting edge  HT ...

Random recommendation

  1. linux environment variable

    The operating system is indispensable in the computer . and Linux It's developing very fast , There's a tendency to catch up with Microsoft . Here are Linux Knowledge , Let you learn to apply Linux System . For example /etc/apache/bin Directory added to PATH in , There are three ways : ...

  2. HDU 5113 dfs prune

    The question : Tell me the grid specifications , Number of colors , And the number of squares each color can paint , Ask whether it is possible to realize that the number of colors of two adjacent lattices is not the same . analysis : Because the data is small , At most 5 * 5 The size of , So you can dfs.TLE After one visit, I started pruning ,31m ...

  3. build Android development environment , First try HelloWorld (win7) ( Next ) ( turn )

    5. establish AVD To make Android The application can run on the simulator , You must create AVD. stay Eclipse The menu , choice  Windows -> Android Virtual Device Manage ...

  4. c++ ANSI、UNICODE、UTF8 Interturn

        static std::wstring MBytesToWString(const char* lpcszString);    static std::string WStringToMBy ...

  5. OpenGL ES How to see the inside of an object and the image 3dmax Only gridlines can be displayed in

    Last one  OpenGL ES Front and back set instructions   In this paper, we analyze the method of distinguishing the positive and negative sides , So what's the use of pros and cons ? Now we're going to introduce a concept called backside elimination . stay 3dmax There's an option in , When you extrude a hollow box with the extrude modifier , stay ...

  6. HTTP and HTTPS What's the difference? ? What is? SSL certificate ? Use ssl Certificate advantages ?

    What is? SSL? SSL Refers to the secure socket layer protocol ( And transport layer protocol TLS), be located TCP/IP Protocol and various application layer protocols , Provide security support for data communication , Is the most widely used security protocol . It's an Internet or intranet connection , The two that operate ...

  7. Use javaMail Realize simple mail sending

    One . The first thing you need to do is send mail qq The mailbox needs to be opened pop3/smtp service , This can be known by Baidu Two . Import what you need jar package , I'm using maven Add dependency <dependency> <gro ...

  8. C# And C#、.NET Framework、CLR The relationship between

    from  https://www.cnblogs.com/cocoon/p/4997005.html Make up the foundation : A lot of people didn't put C#..NET Framework(.NET frame ).CLR(Common La ...

  9. Linux memory management (23) A memory Oops analysis

    project :Linux Memory management topic key word :DataAbort.fsr.pte.backtrace.stack.   In memory related applications , Abnormal memory access is a common problem . In this paper, combined with the exception T32 Stack backtracking .Oops ...

  10. prim Algorithm , Kruskal algorithm --- Minimum spanning tree

    A function of minimum spanning tree , It's the minimum cost . To be in n Laying optical cables between two cities , The main goal is to make this n Any two cities can communicate with each other , But the cost of laying fiber optic cables is very high , And the cost of laying optical cables varies from city to city , So another goal is to make the laying light ...