Home > Developer > Web Develop
A HTML5 Document Structure
1. First step: Open the development tool, open the specified folder;
2. Step two: Save the index.html file to disk,. html is the page suffix;
3. Step three: Start writing the basic format of the HTML5.
<! DOCTYPE html>//Document type declaration
<meta charset= "Utf-8" >//Declaration character encoding
<title> basic Structure </title>//Set document title
<body>//representing HTML document content
<a href= "http://www.baidu.com" > Baidu </a>//A hyperlink element (tag)
</body>//Representing HTML
Two Document Structure resolution
1.Doctype
Document type declaration (Doc type Declaration, also known as Doctype). It mainly tells the browser
The type of file you are viewing. In previous HTML4.01 and XHTML1.0, it represents the specific HTML version and style.
And now HTML5 don't need to show the version and style.
<! DOCTYPE html>//non-partitioned case
2.html elements
First, the element is the meaning of the tag, and the HTML element is the HTML tag. HTML elements are the beginning and ending elements of a document. It is a double-label, tail-to-echo, containing content.
This element has an attribute and value: lang= "ZH-CN",
Indicates that the document is in the language: Simplified Chinese.
Simplified Chinese page: HTML Lang=zh-cmn-hans
Traditional Chinese page: HTML lang=zh-cmn-hant
English page: HTML lang=en
3.head elements
Used to contain metadata content, metadata including:<link>, <meta>, <noscript>, <script>,
<style>, <title>. This content is used by the browser to provide information, such as link to provide CSS information, script
Provides JavaScript information, Title provides page titles, and so on.
The <noscript> element is used to define alternative content (text) when the script is not executed.
This tag can be used for browsers that recognize <script> tags but cannot support scripts in them.
4.meta elements
This element is used to provide information about the document, with a property of the starting structure: charset= "UTF8". Said
Tell the browser page what encoding to use, in general we use UTF8. Of course, when the file is saved,
UTF8, and the browser is set UTF8 to display Chinese correctly.
<meta charset= "Utf-8" >//In addition to setting the code, there are other
5.title elements
This element is simple, as the name implies: Set the title of the upper-left corner of the browser.
<title> Basic Structure </title>
6.body elements
The element used to contain the contents of the document, which is the part of the browser visible area. All the visible content should be in this
Elements to be added inside of an element.
<body>...</body>
7.A elements
A hyperlink, which is discussed in more detail later.
<a href= "http://www.baidu.com" > Baidu </a>
Three Discussion on element tags
HTML is a markup language, the structure we have just discussed in detail. Here, let's dissect these
"Mark" or "label", what is often called "element" in writing is how to make up.
1. Elements
An element is a set of tags that tell the browser how to handle some content. Each element has a keyword, such as
<body>, <title>, <meta> are all elements. Different label names represent different meanings and will be followed by paragraph labels, text labels, link labels, picture tags, and so on.
Elements are generally divided into two categories: single label (empty Element) and double label. A single label is typically used to declare or insert a meta
, such as the declaration of character encoding with <meta>, insert a picture with ; double-label is used to set up a section of the content, including paragraph <p>...</p>.
2. Properties and Values
Elements can also be set to properties and values in addition to a single-pair element. These attribute values are used to change the elements of some
Aspects of the behavior. For example, the href attribute in hyperlink:<a>, in which a replacement URL can be linked to a different website.
Four Entity
The HTML entity displays characters that have special meaning through the entity code.
Display result entity Name entity number description
Space
< < < less sign
> > > Greater Than
& & & and number
"" "quotation marks
"' Apostrophe
￠￠￠ min
￡￡￡ pound
￥￥￥ yen
€€€ EUR
§§§ Bar
? ? ? Copyright
? ? ? Registered trademarks
? ? ? Trademark
XXX multiplication Sign
÷÷÷ Division Sign
Five. New structure tag
article Elements
Represents a piece of independent content in the page that is not relevant to the context. such as an article, a blog post, a forum post, you can nest the use of
Section element
Represents a chunk of content in a page, such as a chapter, header, footer, or other part of a page. Can and H1, H2 ... Such elements are used to represent the document structure. Example: <section>......</section>; in HTML5 HTML4 <div> ......</div>.
aside elements
Represents the secondary information that is related to the content of the article element outside the content of the article element.
Header Element
Represents the title of a content block or a page in a page.
Hgroup Elements
Represents a combination of the title of a chunk of content in a page or page.
Footer Elements
A footnote that represents a chunk of content in an entire page or page. In general, he will include the creator's name, date of creation, and the author's contact information.
nav Element
Represents the part of a navigation link in a page.
Figure element
Represents a separate stream content that typically represents a separate unit in the content of the document body flow. Use the Figcaption element to add a caption to the group of figure elements. For example:
<figure>
<figcaption>PRC</figcaption>
<p>the people ' s Republic of China is born in 1949</p>
</figure>
Five Meta data
The <meta> element can define various metadata in the document, and an HTML page can contain multiple <meta>
Elements.
1. Specify the name / value metadata pair
<meta name= "Author" content= "Bnbbs" >
<meta name= "description" content= "This is a HTML5 page" >
<meta name= "keywords" content= "html5,css3, Responsive" >
<meta name= "generator" content= "Sublime text 3" >
Meta Data name Description
Author the author of the current page
Description Description of current page
Keywords keywords for the current page
Generator encoding tool for current page
2. Declaring character encoding
<meta charset= "Utf-8" >
3. Analog HTTP header fields
5 Seconds jump to the specified URL
<meta http-equiv= "Refresh" content= "5;http://li.cc" >
Another type of declarative character encoding
<meta http-equiv= "Content-type" content= "text/html charset=utf-8" >
Property Value Description
Refresh to reload the current page, or specify a URL. Unit seconds.
Content-type another way to declare character encodings
Six. Global Properties
Before that, the elements we covered were all about its local data and, of course, some global properties, such as
Id. Global properties are common to all elements, and HTML5 also provides some additional global properties.
1.idProperty
<p id= "ABC" > Paragraph </p>
Explanation: The id attribute assigns a unique identifier to the element. This identifier is often used to give CSS and JavaScript
Invokes the selection element. A page can only appear once for the same ID name.
2.classProperty
<p class= "ABC" > Paragraph </p>
<p class= "ABC" > Paragraph </p>
<p class= "ABC" > Paragraph </p>
Explanation: The class attribute is used to categorize elements. A CSS sample is set by one or more elements in the document
Expression
3.accesskeyProperty
<input type= "text" name= "user" accesskey= "n" >
Explanation: Shortcut key operation, under Windows ALT + Specify key, if the browser Alt does not conflict.
4.contenteditableProperty
<p contenteditable= "True" > Can I modify </p>
Explanation: Make the text editable, set true to edit, and false to not be editable. or directly
Set properties.
5.dirProperty
<p dir= "RTL" > Text to the right </p>
Explanation: Let the text go from left to right (LTR) or right to left (RTL).
6.hiddenProperty
<p hidden> text to the right </p>
Explanation: Hides the element.
7.langProperty
<p lang= "en" >HTML5</p>
Explanation: You can set the language locally.
8.titleProperty
<p title= "HTML5 Tutorial" >HTML5</p>
Explanation: Extra hints for the content of the element.
9.tabindexProperty
<input type= "text" name= "user" tabindex= "2" >
<input type= "text" name= "user" tabindex= "1" >
Explanation: Press the TAB key in the form to achieve the order in which the focus is taken. If it is-1, it will not be selected.
10.styleProperty
<p style= "color:red;" >CSS style </p>
Explanation: Sets the element inline CSS style.
Seven Other New tags
1.detailsDefinition and usage
<details> tags are used to describe the details of a document or part of a document.
Currently only Chrome supports <details> tags.
2.embed
<embed> tags define embedded content, define external interaction content, or plug-ins.
HTML5: <embed src= "Horse.wav"/>
HTML4:
<object data= "flash.swf" type= "Application/x-shockwave-flash" ></object>
3.range 4.autofocus 5. Mark
<mark> is used primarily to visually present to users those words that need to be highlighted. A more typical application of <mark> tags is to highlight search keywords to users in search results.
HTML5: <mark></mark>
HTML4: <span></span>
The <summary> tag contains the title of the details element, which is used to describe the details of the document or document fragment. The "Summary" element should be the first child element of the "details" element.
HTML5: <details><summary>html 5</summary>this document teaches you everything Learn about HTML 5.</details>
HTML4: None
<datalist> Tags define a list of optional data. In conjunction with the INPUT element, you can make a drop-down list of input values.
DataList and its options are not displayed, it is just a valid list of input values.
Use the List property of the input element to bind the DataList.
<input list= "Cars"/>
<datalist id= "Cars" >
<option value= "BMW" >
<option value= "Ford" >
<option value= "Volvo" >
</datalist>
9. CommandRepresents a command button
This element is visible only if the command element is inside a menu element. Otherwise, this element is not displayed, but it can be used to specify keyboard shortcuts
<menu>
<command onclick= "alert (' Hello World ')" >
Click me!</command>
</menu>
Eight Discarded labels
expressive ElementsSuggest the correct elements to replace them, and use CSS to ensure the effect after rendering
Framework class elementsBecause the framework has a lot of usability and accessibility issues, the HTML5 specification removes the following elements.
But HTML5 supports IFRAME.
Attribute ClassMany of the performance attributes are also removed from the new specification as follows:
Document structure and new tags for HTML5
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
