HTML-HTML5+CSS3 authoritative Guide Read (i)

The difference between HTML5 and HTML4

1. DOCTYPE statement

1). HTML4 in <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd ">

2). HTML5 in <! DOCTYPE html>

2. Specify character encoding

1). HTML4 <meta http-equiv= "Content-type" content= "text/html; charset=utf-8"/>

2). HTML5 in <meta charset= "Utf-8"/>

PS: starting from HTML5, it is recommended to use UTF-8 for the character encoding of the file

3. Properties with Boolean values (such as disabled and READONLY, etc.)

True

1). Write only property names without specifying property values

2). Property value assignment is an empty string or property value

False

Do not write property names

 　　 <!--write-only property does not write property value represents property is True - 　　 <inputtype= "checkbox"checked/> 　　 <!--No write property is represented as false -　　 <inputtype= "CHECKOBX" /> 　　 <!--Property Value = Property name, which represents a property of true - 　　 <inputtype= "checkbox"checked= "Checked" /> 　　 <!--Property value = Empty string, which represents a property of true - 　　 <inputtype= "checkbox"checked="" />

4.HTML5 New Tags

HTML5 in order to better explain the DOM, so that the HTML code more accurate semantics, enabling a lot of similar div-like tags, its functions and div similar, but in favor of SEO ( from the SEO perspective the following tags will be much better )

<section> Tags: it is used to represent ordinary document content or application chunks , usually composed of content and its title, but the section element tag is not a common container element, it represents a thematic content, usually with a title ; When we describe a specific thing, we usually encourage the use of article instead of section, and when we use section, we can still use H1 as the title, without worrying about where it is and whether it is used elsewhere; When a container needs to be defined directly or defined by a script, it is recommended to use a DIV element instead of a section, a typical scenario for a an article, a tab in a label dialog box, or a numbered part of a paper.

< Section>    <H1>What is section?</H1>    <H2>A new chapter</H2>    <article>        <H2>About Section</H1>        <P>Introduction to Section</P>    </article></ Section>

<article> Tags: is a special section tag , which has more explicit semantics than section, it represents a separate, complete block of related content , which can be used independently of other contents of the page. For example, a full forum post, a blog post, a user comment, and so on; In general, article will have a title section (usually included in the header), sometimes also contains footer, article can be nested, the inner layer of the article external layer of the article tag has affiliation, such as a blog post can be used article Display, and then some comments can be embedded in the form of article

<article>    <Header>        <Hgroup>            <H1>This is an article that introduces the structure tag of HTML 5</H1>            <H2>The innovation of HTML 5</H2>        </Hgroup>        < Timedatetime= "2011-03-20">2011.03.20</ Time>    </Header>    <P>Article content details</P></article>

<nav> Tags: This block semantics is clearly highlighted when compared to Div

<nav>    <ul>        <Li>With Wincome 1</Li>        <Li>With Wincome 2</Li>        <Li>With Wincome 3</Li>    </ul></nav>

<aside> Tags: used to load non-text content, is considered to be a separate part of the page, it contains content and the main content of the page is separate, can be deleted, without affecting the content of the page, chapters or pages to convey information , such as ads, groups of links, sidebar, and more

 <  aside     >  <  h1  >,  author profile </ h1     >  <  p  >  with wincome </ p  >  </ aside  >  

defines the header of the document, usually some guidance and navigation information, it is not limited to writing in the page header, it can also be written in the content of the Web page, usually the

<Header>    <Hgroup>        <H1>Site Title</H1>        <H1>Website subtitle</H1>    </Hgroup></Header>

<footer> Tags: defines the footer of a section or document, contains information about the page, article, or part of the content, such as the author or date of the article, as the page footer, usually contains copyright, related files and links, it and

< Footer >     [email protected] with wincome </footer>

combinations of header elements (H1-H6) for Web pages or section sections , for example, if you have sequential H-series label elements in a section, you can enclose them in hgroup.

< Hgroup >    < H1 > This is an article about HTML 5 structure tags </H1>    <H2  >Innovation in HTML 5 </h2></hgroup>

<figure> Tags: used to group elements, more than a combination of pictures and picture description

 <  figure 　　>  <  img  src  = "Img.gif"   Alt  = "Figure label"   title  = "Figure label" 　　/>  <  figcaption  >  here is a description of the picture </ figcaption  >  </ figure  >  

Summary: Div does not have any semantics, just as a style or scripted hook (hook), for a theme of content, then apply section, and if the content can be detached from the context, as a complete independent existence of a piece of content, then apply article, in principle, can use a Rticle, you can also use section, but in fact, if the use of article more appropriate, then do not use section, the use of NAV and aside is also the case, these two tags are special section, in the use of Nav And aside is more appropriate, do not use section.

<mark> Tags: highlighting a paragraph of text

< span > I am <Mark> highlight </mark> tag </  span>

<video> Tags: Video tags

<src= "Movie.ogg"  controls= "Controls">      </video>

The following are implemented in HTML4

<type= "Video/ogg"  data= "MOVIE.OGV">     <name= "src"  value= "MOVIE.OGV">  </Object>

<audio> Tags: Audio tags

<src= "Audio.wav">     Your browser does not support audio tags </ Audio >

The following are implemented in HTML4

<type= "Application/ogg"  data= "Audio.wav">    <  name= "src"  value= "Audio.wav"></  object>

<embed> Tags: used to insert a variety of multimedia, format can be Midi, Wav, AIFF, AU, MP3, etc.

<embed src= "Horse.wav"/>

5.

HTML-HTML5+CSS3 authoritative Guide Read (i)