HTML 5 new elements and CSS

HTML5 new elements

Multimedia elements

Video/audio:

format Examples :

Properties :

Canvas Elements

Canvas label definition graphic for drawing, using JS to draw

Drag and Drop drag and drop

　　Drag-and-drop is a common feature that grabs an object and then drags it to another location.

in the HTML5 , drag and drop are part of the standard, and any element can be dragged and dropped.

Semantic Elements :

　　A semantic element can clearly describe its meaning to the browser and the developer.

No semantics Element Instances : <div> and <span>- No need to consider content .

Examples of semantic elements : <form>, <table>, and - clearly define its contents .

New semantic elements in HTML5

<footer> Define the footer of a section or document

<header> defines the header area of the document

<nav> defines the part of the navigation link

<section > Define sections in a document

css: Cascading Style Sheets beautify the page to modify the style of the label

Classification of the wording:

1. inline : A property name style that is written in a tag as a property

Format example: <span style= "" > </span>

<p style= "Font-size:20pt;color:red;text-align:center" > Typesetting style </p>

Typography Special Tags:<div> <span>

Both tags are used to set up a block that covers a chunk. The chunk is the data that represents more than one row. If not, <span> and </span> the data is not skip before and after it is displayed.

2. Embedded : Write tag name in the head tag style

All style definitions in the inline layout must be in <style> </style> between, and <style> </style> must be in

selector : Find elements in various ways such as: Tag name id attribute value

Selector format

selector {

Style attributes: Style values;

Style attributes: Style values;

}

Selector type

1. Universal selector: *{} selector selects all elements

Example: Selector selects all elements

*{     padding:0px;     margin:0px;}

　　

The selector can also select all elements within another element :

For example:

Div *{           background-color:yellow;  }

　　

2. Tag Selector: Tag name {} find tags by tag name

3. ID selector: #id属性值 {} find element key symbol by id attribute value

<! DOCTYPE html>
　　
The result is:
4.class selector: The. Class Property value {}   to find the element key symbol through the class attribute value
Example:
<! DOCTYPE html>
　　
The result is:
5. Descendant Selector selector 1 selector 2{}
Example:
#div div{             width:50px;            height:50px;            background:red;    }
　　
6. Subclass Selector Selector 1 > Selector 2{}
For example:
#div > div{                width:50px;                height:50px;                  background:red;    }
　　
7. Parallel selector 1, selector 2.. ｛｝
For example:
#dd, #ddd {                  background:red;    }
　　
8. Pseudo-Class selector selector: Pseudo-class hover
For example:
#d: hover a{                  background:red;    }
　　
9. Additional selectors:
Contrast selector:
Example:
Select all <a> elements with the target property
a[target]{                background-color:yellow;  }
　　
   : Last-child
Example: specifies the last of the parent element  P the background color of the element:
p:last-child{                  background: #ff0000}
　　
Priority of "inline" and "in-line" typographic definitions:
CSS rules, the smaller the scope, the higher the priority.
Priority is arranged from small to large:

 
  

  
   
 
    
In-line
 
    
Class and ID definition type
 
    
Tag definition Line
 
   
 
  
ID priority is higher than class class
Weight value:
in-line: Weighted value  + ! 
ID : Weight Value  - ! 
class : Weight Value Ten ! 
tag: Weight value 1 ! 
     * : Weight Value 0 ! 
Weights are stackable, for example:
#div. Class priority is greater than . Class
3. External references  : Introducing external Files
In the head tag, label tag name link
Format:
　　
Advantages of external references:
Better to write CSS style;
Avoid repeating style problems on different pages with the same elements
HTML 5 new elements and CSS