1. The first step: open the development tool and open the specified folder;
2. Step 2: Save the index.html file to the disk, .html is a web suffix;
3. Step 3: Start writing the basic format of HTML5.
<! Doctype html> // Document type Declaration <html lang = zh-cn> // indicates that the html document begins. 1. <head> // Including document metadata start to start <meta charset = UTF-8> // Declars character encoding </title> // Set document title </head> // <body> // means the content of html documents <a href = http://www.baidu.com> Baidu </a> // A hyperlink element (tag) </body> // indicates html </html>// /Express the end of the html documenttwo. Document structure analysis 1.DOCTYPE
Document type declaration (Document Type Declaration, also known as DOCTYPE). It mainly tells the browser
The file type of view. In the previous HTML4.01 and XHTML 1.0, it indicates the specific HTML version and style.
Now HTML5 does not need to represent the version and style.
<! Doctype html> //
2.html elementFirst of all, the element means the label, and the HTML element is the HTML label. HTML elements are elements that start and end the document. It is a double label, echoed and tail, including content.
This element has a attribute and value: LANG = ZH-CN,
It means that the document uses language: simplified Chinese.
<html lang = zh-cn> // If it is English, it is EN '
Simplified Chinese page: html lang = zh-cmn-hans
Traditional Chinese page: html lang = zh-cmn-hant
English page: HTML LANG = EN
3.Head elementUsed to include metadata content, metadata data includes: <link>, <Meta>, <noscript>, <script>, <Script>,
<Style>, <Title>. These contents are used to provide information for browsers, such as Link provides CSS information, script
Provide JavaScript information, Title provides page title.
<head> ... </head> // This information is not visible on the page
<noscript> Elements are used to define the alternative content (text) when the script is not executed.
This tag can be used to recognize the browser that can recognize the <script> label but cannot support the script.
4. Meta elementThis element is used to provide information about documentation. The starting structure has an attribute: charSet = UTF8. express
Tell the browser page what codes are used. Generally speaking, we use UTF8. Of course, the file is preserved
UTF8, and the browser also sets UTF8 to display Chinese correctly.
<meta charset = UTF-8> // In addition to setting codes, there are other
5.tital elementThis element is very simple, as the name suggests: set the title in the upper left corner of the browser.
<Title> Basic Structure </Title>
6.BODY elementElements used to contain document content, that is, the area part of the browser. All visible content should be here
Add the elements internally.
<body> ... </body>
7.A elementA hyperlink will discuss it in detail later.
<a href = http://www.baidu.com> Baidu </a>
three. Elemental label discussionHTML is a mark language, and we have discussed in detail the structure just now. Here, let's analyze these again
Labels or labels often call it what is composed of things as elements in writing.
1. ElementsElements are a set of labels that tell the browser how to handle some content. Each element has a keyword, such as
<body>, <Title>, <Meta> are elements. Different label names represent different meanings, and will involve paragraph labels, text tags, link labels, picture labels, etc.
Elements are generally divided into two types: single tags (air elements) and dual tags. Single label is generally used to declare or insert a certain yuan
For example, the character encoding of the statement is used <Meta>, and <IMG> is inserted into the picture; the dual label is generally used to set the content of a section of the area to include it, such as the paragraph <p> ... </p>.
2. Properties and valuesIn addition to a single and double division, the internal attributes and values of the element can be set. These attribute values are used to change the elements
Act. For example, hyperlinks: <a> HREF attributes, replace the URL in which you can link to different websites.
Four. entityThe HTML entity is displayed by special meaning characters through the physical code.
Display the results of the entity name of the entity number description
Space
<<<<<<<2
>> Greater than number
& & & And number
quotation marks
'' '
￠ ¢ ¢ ¢
镑 镑 £ £
圆 圆 ¥ ¥ ¥ ¥
元 元 € euro
§ § § Small Festival
权 权 © copyright
® ® ® registered trademark
™ ™ ™ trademark
× × × multiplication number
÷ ÷ except number
5. New structural labelArticle element
Represents an independent content that is not related to the context in the page. For example, an article, a blog post, a forum post, you can use it
section element
Represents a content block in the page, such as chapters, header, footer or other parts of the page. It can be used in combination with H1, H2 ... and other elements to indicate the document structure. Example: <section> ... </section>; <div> ... </div> in html4.
ASIDE element
Express the auxiliary information related to the content of the Article element in addition to the content of the Article element.
header element
Represents the title of a content block or a real page in the page.
hgroup element
Indicate a combination of the title block of the real page or page.
FOOTER element
Indicates the footnote of the content block in the entire page or page. Generally speaking, he will include the creator's name, creative date, and contact information of the creator.
NAV element
Represents the part of the navigation link on the page.
Figure element
Indicates a section of independent stream content, which generally represents an independent unit in the content of the document. Use the Figcaption element to add a title to the FIGURE element group. For example:
<figure> <Figcaption> PRC </figcaption> <p> The PeOPELE's Republic of China Was Born in 1949 </p> </Figure>five. Metadata
<Meta> Elements can define various metadata in the document, and one HTML page can contain multiple <META>
element.
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, response> <meta name = Gen = Gen Erator Content = Sublime Text 3>
Metropolitan data name description
Author of Author current page
description of the current page of description
Keywords current page keyword
The encoding tool of the generator current page
2. Declarize character coding<meta charset = UTF-8>
3. Simulation HTTP header field// 5 seconds jump to the specified URL <meta http-equiv = refresh content = 5; http://li.cc> // Another statement character encoding <meta http-equiv = conype conype contes/html charset = UTF-8>
Attribute value description
Refresh reloads the current page, or specifies a URL. The unit seconds.
Content-Type another way to declare character coding
six. Global attributeBefore that, the elements we involved explained its local data, and of course we also know some global attributes, such as
ID. Global attributes are the common behavior of all elements. HTML5 also provides some other global attributes.
1.id attribute<p ID = abc> paragraph </p>
Explanation: The ID attribute allocates an unique identifier to the element. This identifier is usually used to give CSS and JavaScript
Call the selection element. There is only the same ID name once a page.
2.class attribute<p class = abc> paragraph </p> <p class = abc> paragraph </p> <p class = abc> paragraph </p>
Explanation: The class attribute is used to classify elements. Set CSS -like at the same time through one or more elements in the document
Mode.
3.Accesskey attribute<input type = text name = user accountkey = n>
Explanation: The shortcut operation, the alt+specified key under Windows, premise that the browser ALT does not conflict.
4.Contenteditable attribute<p Contenteditable = True> Can I modify </p>
Explanation: Let the text be in a editable state. Setting True can be edited, and False cannot be edited. Or directly
Set the attribute.
5.Dir attribute<p dir = rtl> text to the right </p>
Explanation: Let text from left to right (LTR), or from right to left (RTL).
6.Hidden attribute<p hidden> text to the right </p>
Explanation: Hide elements.
7. LLANG attribute<p lang = EN> HTML5 </p>
Explanation: You can set language locally.
8.tital attribute<p Type = Application/X-SHOCKWAVE-FLASH> </Object>3. Range 4.Autofocus 5. Mark
<mark> is mainly used to present those words that need to be prominent visually. A more typical application of the <mark> label is to display search keywords to users in the search results.
Html5: <mark> </mark>
Html4: <span> </span>
6. SummaryThe <summary> tag contains the title of the Details element, and the Details element is used to describe the details of the relevant document or document fragment. The Summary element should be the first sub -element of the Details element.
Html5: <details> <summary> HTML 5 </Summary> This Document Teaches You Everything you have to leave html 5. </Details>
Html4: None
7. Detalist<DataList> Label defines optional data list. With the input element, you can make the drop -down list of input values.
DataList and its options will not be displayed, it is just a legal input value list.
Please use the list property of the Input element to bind DataList.
<input list = cras /> <datalist id = cars> <option value = bmw> <option value = form> <option value = volvo> < /dataList>9. Command
Express the command button
Only when the Command element is in the menu element, the element is visible. Otherwise, this element will not be displayed, but you can use it to specify the keyboard shortcut keys
<Menu> <Command OnClick = ALERT ('Hello World')> Click Me! </Command> </Menu> eight. Abandoned labelExpression element
basefont
big
center
FONT
S
strike
TT
U
It is recommended to replace them with correct semantics and use CSS to ensure the effect after rendering
Frame -like element
Due to the many availability and accessibility of the framework, the HTML5 specification removes the following elements.
frame
frameset
noframes
But HTML5 supports iframe.
Attribute class
Many expressive attributes are also removed by new specifications, as follows:
align
Link, Vlink, Alink, Text attributes on body tags
bgcolor
height and width
Scrolling property on iframe element
Valign
hspace and vSpace
Cellpadding, Cellspacing and Border attributes on Table labels
PROFILE attributes on header label
The target attribute on the link tag A
LONGDESC attributes of img and iframe elements
ABBR replaces Acronym (used to represent abbreviation)
Object replaced Applet
UL replaced DIR
other
The above described is the document structure and new label of the HTML5 introduced by the editor to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!