HTML5 and CSS3 authoritative guide. Pdf2

Chapter III Structure of the HTML5

Article elements emphasize independence, section elements emphasize fragmentation, div elements emphasize CSS, aretcle elements and section elements can be swapped in case of verification

The nav element is used as a link group for page navigation, usually containing <ul><li><a> elements

The aside element represents the part of a page or article, which can be a reference to the current page or content, a noun explanation

The time element represents a time or date in the 24 hour <time datetime= "2014-8-6t19:53-14:00" > Times </time> Date and time with T interval, and Z after 19:53 for UTC Standard Time, -14:00 means time difference, not add

The Pubdate property represents the published date of the article or page <time datetime= "2014-8-6" pubdate>....</time>

New non-principal structure elements

The

Hgroup elements, grouping headings and their subheadings (with multiple heading elements)

Footer element, as the root foot of the upper parent content Area (more semantically than the previous div add Id=footer)

Address element, which represents information such as the author's name, can be used with other elements such as footer

HTML5 structure

Content blocks can be organized into "explicit orchestration" (explicitly using elements such as sections) and "implicit orchestration" (without using elements such as section), using explicit orchestration as far as possible

Use styles for new structural elements:

Many browsers do not provide support for HTML5 new elements, so you can set

Article,aside,dialog,figure,footer,header,legend,nav,section{display:block;}

nav{float;left;width:20%};

article{float:right;width:79%};

In addition IE8 and previous browsers do not support CSS methods, you need to use JavaScript script

<script>

Document.createelement (' header ');

...

Document.createelement (' Nav ');

</script>

<style>

nav{float;left;width:20%};

</style>

Fourth chapter form and document

New elements and attributes

Form property (The following textarea element subordinate form Element)

<form id= ' Testform ' >

<input type= ' text ' >

</form>

<textarea form= ' Testform ' ></textarea >

FormAction property, all form elements in HTML4 can only be submitted uniformly to a page through the form's Action property, HTML5 may add different submission addresses to all the submit buttons

<form id= "Testform" action= "serve.jsp" >

<input type= "Submit" Name= "S1" value= "v1" formaction= "s1.jsp" > Submit to S1

<input type= "Submit" Name= "S1" value= "v1" formaction= "s2.jsp" > Submit to S2

...

</form>

FormMethod attribute, same as formaction, adds different submission methods

<input type= "Submit" Name= "S1" value= "v1" formaction= "s2.jsp" formmethod= "get" > Submit to S2

Placeholder property, text box is not entered, the prompt text is displayed

Autofocus Property

List property, the value of the property is the ID of the DataList element, and the effect is similar to <select>

AutoComplete property, you can specify "on" "Off" "(not specified), and when auto-complete, the data in the DataList element can be used as alternate data

<input type= "text" name= "greeting" autocomplete= "on" list= "Greetings" >

Greatly increased and improved the type of INPUT element

<input name= "url1" type= "url" value= "http://www.baidu.com" >

Use styles for new form elements

An output element that defines different types of outputs, such as the result of a calculation or the output of a script (which is subordinate to a form)

<form>

<input name= "Range1" Type=range min=0 max=100 step=5/>

<output onforminput= "Value=range1.value" >50</output>

</form>

The above example outputs a numeric value that indicates that the user dragged the values of the range element