HTML basic syntax and semantics

DOCTYPE

DOCTYPE(Document Type)

Before the statement is in the document in front of the location in the html tag that tells the browser HTML or XHTML documents which regulate the use.

DTD(Document Type Definition)

Statement <! DOCTYPE> start, case-insensitive, not preceded by anything, if there are other content (excluding spaces) will open the browser quirks mode (quirks mode) in the IE rendering web pages. Public DTD, the name of the format registered organization // // // type label language, means the registered organization is registered by the International Organization for Standardization (ISO), + represents that - indicates not. Organization, the name of the organization, such as: W3C. Type is generally DTD. Label description is specified disclosure, that disclosure of the referenced unique descriptive name, followed by the version number can be shipped. Finally, language is an ISO 639 language identifier DTD language, such as: EN for English, ZH represents the Chinese. XHTML 1.0 DTD may declare three kinds of types. Respectively strict version, interim version, based on the framework of an HTML document.

HTML 4.01 strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5 document type

<!DOCTYPE html><!-- 使用 HTML5 doctype，不区分大小写 -->

label

Structure definition document, the more semantic markup document.

html5 demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5 demo</title>
    </head>
    <body>
        <header>
            <h1>html5 demo</h1>
            <nav>
                <ul>
                    <li>nav1</li>
                    <li>nav2</li>
                </ul>
            </nav>
        </header>
        <section>
            <h1>article aside</h1>
            <article>article</article>
            <aside>aside</aside>
        <section>
        <footer>footer</footer>
    </body>
</html>

Please refer to the label more w3school

tips

html5 label richer and more complete, the div tag did not seem useless, but if you just want to add some style in your document, this time he sent a div tag in handy.
The default label styles in different browsers have some differences, in order to see the effect of a web page in different browsers, as is usually first look at the label formatting styles

@charset "utf-8";
html{margin:0;padding:0;border:0}a,abbr,acronym,address,article,aside,blockquote,body,caption,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,iframe,img,label,legend,li,nav,object,ol,p,pre,q,section,span,table,tbody,td,tfoot,th,thead,tr,ul{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,dialog,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1.5;background:#fff}table{border-collapse:separate;border-spacing:0}caption,td,th{text-align:left;font-weight:400;float:none!important}table,td,th{vertical-align:middle}blockquote:after,blockquote:before,q:after,q:before{content:''}blockquote,q{quotes:"" ""}a img{border:none}a{text-decoration:none}:focus{outline:0}

If you are using html5 tags do not support html5 browser, you need to add a bit of JavaScript code that

<script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('aside');
    document.createElement('article');
    document.createElement('footer');
</script>

Label editable properties contenteditable

<article contenteditable></article>

DOCTYPE

meta

label

Guess you like