Getting Started with HTML

HTML is the base language for web development, and it is used to customize the elements of various web pages. For example, input boxes, buttons, text, headings and so on are all HTML-defined elements.

First look at an HTML framework

<! DOCTYPE html>
<! DOCTYPE html> is telling the server that this page is an HTML code document. This must be, although there are other document formats, but this is the best compatibility.

<meta> tags provide meta-information about pages, such as page encodings, refreshes, jumps, descriptions and keywords for search engines and update frequency

Page encoding (tells the browser what encoding)
< meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >

Refresh and jump
< meta http-equiv= "Refresh" content= "30″>

< meta http-equiv= "Refresh" content= "5; Url=http://www.autohome.com.cn "/>

Keywords
< meta name= "keywords" content= "StarCraft 2, star old boy, interview, F91, small color, JOY" >

Describe
Example: Cnblogs

X-ua-compatible
Microsoft's IE6 is through the XP, Win2003 and other operating systems released, as the dominant desktop operating system, also makes IE occupy the notice status, many Web site development, in accordance with the standards of IE6 development, and IE6 own standards is also within the Microsoft Company defined. To IE7 out of the time, the adoption of the Microsoft internal standards and some of the standard, this time many sites to upgrade to IE7 time, it is more painful, a lot of code must be adjusted to be able to run normally. And to Microsoft's IE8 this version, basically the Microsoft internal definition of the standard abandoned, and comprehensive support standards, because based on the changes to the standard, so that the original IE8 version can visit the site, in the IE8 to the normal access, there will be some typographical disorders, text overlap, Display not equal to various compatibility errors.

Internet Explorer 8 provides tighter support for industry standards than any earlier browser version. As a result, sites designed for older browsers may not appear as expected. To help mitigate any problems, Internet Explorer 8 introduces the concept of document compatibility, which allows you to specify the version of Internet Explorer that your site supports. Document compatibility adds new patterns to Internet Explorer 8, which tells the browser how to interpret and render the site. If your site does not display correctly in Internet Explorer 8, you can update the site to support the latest WEB standards (preferred), or you can force Internet Explorer 8 to display content in the same way that you view the site in an older version of the browser. You can do this by adding the X-ua-compatible header to the Web page by using the META element.

When Internet Explorer 8 encounters a webpage that does not contain a x-ua-compatible header, it uses directives to determine how to display the Web page. If the directive is missing or does not specify a standard-based document type, Internet Explorer 8 displays the page in IE5 mode (Quirks mode). More

<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>

Title

Web header information

Link

Css
< link rel= "stylesheet" type= "Text/css" href= "Css/common.css" >

Icon
< link rel= "shortcut icon" href= "Image/favicon.ico" >

Style

Write a style on a page

For example:
< style type= "Text/css" >
. bb{
background-color:red;
}
</style>
Script

Introduction of documents
< script type= "Text/javascript" src= "Http://www.googletagservices.com/tag/js/gpt.js" > </script >

Write JS code
< script type= "Text/javascript" > ... </script >



From the code we can see a standard HTML page file consisting mainly of 2 parts
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7A/E2/wKiom1bBat_iK7PWAADdvU8SSs0547.jpg "title=" Qq20160215140525.jpg "alt=" Wkiom1bbat_ik7pwaaddvu8sss0547.jpg "/>
Now we open the file through the browser to see that the label page has a title
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7A/E2/wKiom1bBa6Dyl0lnAABTOGSMyzY326.jpg "title=" Qq20160215140848.jpg "alt=" Wkiom1bba6dyl0lnaabtogsmyzy326.jpg "/>

The content between the <body></body> tags is used to define the content of the page
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7A/E1/wKioL1bBbjnhXrHVAAB8rawH-00649.jpg "title=" Qq20160215141809.jpg "alt=" Wkiol1bbbjnhxrhvaab8rawh-00649.jpg "/>
Refresh the page just now and we'll see that the text is already on the page.
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7A/E2/wKiom1bBbm-guWpCAABI11u3XyQ993.jpg "title=" Qq20160215142026.jpg "alt=" Wkiom1bbbm-guwpcaabi11u3xyq993.jpg "/>
Common tags

P and BR tags
P is a paragraph and there is an interval between two lines of characters
Both P and BR can be the result of string wrapping, but there is a slight difference in the presentation.
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7A/E2/wKiom1bBezSxgWeMAAFd9w6EQxM454.jpg "title=" Qq20160215150817.jpg "alt=" Wkiom1bbezsxgwemaafd9w6eqxm454.jpg "/>
The results after the refresh are as follows
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7A/E2/wKioL1bBfViQuhklAACqAqwPeWk445.jpg "title=" Qq20160215152308.jpg "alt=" Wkiol1bbfviquhklaacqaqwpewk445.jpg "/>

A label
A tag is used to define a jump link
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7A/E2/wKioL1bBha2DOHX2AAE-gmuX1gI355.jpg "title=" Qq20160215155836.jpg "alt=" Wkiol1bbha2dohx2aae-gmux1gi355.jpg "/>
The effect of the implementation is as follows
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7A/E2/wKioL1bBhiOgh2HsAAC7hJvIDys953.jpg "title=" Qq20160215160031.jpg "alt=" Wkiol1bbhiogh2hsaac7hjvidys953.jpg "/>

Another function of the <a> tag is to define the anchor point. That is, when we read a novel on the Internet, we directly switch to the specified section by clicking the link <a> tag. This needs to configure the CSS <div> tag to define a specified ID name, and then invoke the <a>a tag's href attribute to the ID of the <div> to implement the anchor point jump
650) this.width=650; "src=" http://s5.51cto.com/wyfs02/M02/7A/E3/wKiom1bBiC_DRlB8AACsAkkPAPM071.jpg "style=" float: none; "title=" qq20160215161026.jpg "alt=" Wkiom1bbic_drlb8aacsakkpapm071.jpg "/>
650) this.width=650; "src=" http://s2.51cto.com/wyfs02/M00/7A/E3/wKioL1bBiJLi5dsCAAJqpzMCX_A824.jpg "style=" float: none; "title=" qq20160215161044.jpg "alt=" Wkiol1bbijli5dscaajqpzmcx_a824.jpg "/>

H tag
The H tag is a bold, black font that identifies the paragraph headings. and the H tag takes one line
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7A/E3/wKiom1bBi86TYrRVAADNqSPLkqY561.jpg "title=" Qq20160215162359.jpg "alt=" Wkiom1bbi86tyrrvaadnqsplkqy561.jpg "/>
The difference is that the font size is not the same
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7A/E3/wKiom1bBi_CzU8S5AABNc8_sBFU727.jpg "title=" Qq20160215162530.jpg "alt=" Wkiom1bbi_czu8s5aabnc8_sbfu727.jpg "/>

Select Label drop-down menu
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7A/E4/wKiom1bBkUXCMVREAAGocv6FD7c885.jpg "title=" Qq20160215164925.jpg "alt=" Wkiom1bbkuxcmvreaagocv6fd7c885.jpg "/>
Run results
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7A/E3/wKioL1bBkgqDFiT1AAArq3AxWbg016.jpg "title=" Qq20160215165116.jpg "alt=" Wkiol1bbkgqdfit1aaarq3axwbg016.jpg "/>
Select also has another drop-down menu
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7A/ED/wKioL1bB4vzjrAYHAAHc0z12Ha4905.jpg "title=" Qq20160215223634.jpg "alt=" Wkiol1bb4vzjrayhaahc0z12ha4905.jpg "/>
Run results
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7A/EE/wKiom1bB4ubR68y7AAA8JjMslGw586.jpg "title=" Qq20160215223810.jpg "alt=" Wkiom1bb4ubr68y7aaa8jjmslgw586.jpg "/>

CheckBox Multi-Select label
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7A/EE/wKiom1bB5KfQb61UAAEU46eBfYo146.jpg "title=" Qq20160215224516.jpg "alt=" Wkiom1bb5kfqb61uaaeu46ebfyo146.jpg "/>
Run results
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7A/EE/wKioL1bB5V-iQ4XiAAAmbg91r1k340.jpg "title=" Qq20160215224705.jpg "alt=" Wkiol1bb5v-iq4xiaaambg91r1k340.jpg "/>

Redio Radio Box
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7A/EF/wKiom1bB51ejkkTzAAKzNw8qdgQ192.jpg "title=" Qq20160215225531.jpg "alt=" wkiom1bb51ejkktzaakznw8qdgq192.jpg "/> Note If the value of the Name property of the radio box is the same, you can only select one option at a time. If you do not specify a value for the Name property. You can select multiple options at the same time. The effect is as follows:
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7A/EF/wKioL1bB6E-Tc_zJAAAwtpGmiI0136.jpg "title=" Qq20160215225941.jpg "alt=" Wkiol1bb6e-tc_zjaaawtpgmii0136.jpg "/>

Text input Box
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7A/F0/wKiom1bB6NbgL4NAAACZUr_GS6U536.jpg "title=" Qq20160215230336.jpg "alt=" Wkiom1bb6nbgl4naaaczur_gs6u536.jpg "/>
When type= ' password ', entering text inside the box is hidden. Use the <label></label> tab in front of the label to display the box body description in front of the box body
650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M02/7A/F0/wKioL1bB6l_yQiKNAAEpy8lDcbg898.jpg "style=" float: none; "title=" qq20160215230824.jpg "alt=" Wkiol1bb6l_yqiknaaepy8ldcbg898.jpg "/>
650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/7A/F0/wKiom1bB6f7xPpm8AABYavuTapY756.jpg "style=" float: none; "title=" qq20160215230635.jpg "alt=" Wkiom1bb6f7xppm8aabyavutapy756.jpg "/>

Button buttons
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7A/F0/wKioL1bB7CahsVwWAADYkfm7sM8741.jpg "title=" Qq20160215231556.jpg "alt=" Wkiol1bb7cahsvwwaadykfm7sm8741.jpg "/>
When the type= "submit" time with the <form> tag can achieve form submission function. After the concrete implementation of the ~
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7A/F0/wKiom1bB7EjjeG2rAAA0n1F5fro536.jpg "title=" Qq20160215231817.jpg "alt=" Wkiom1bb7ejjeg2raaa0n1f5fro536.jpg "/>

Upload File button
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7A/F0/wKiom1bB7-uAHFj1AAEWSD2aoio224.jpg "title=" Qq20160215233321.jpg "alt=" wkiom1bb7-uahfj1aaewsd2aoio224.jpg "/> operation results are as follows
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7A/F0/wKiom1bB8CngD4GOAABcXyyHPmo644.jpg "title=" Qq20160215233445.jpg "alt=" Wkiom1bb8cngd4goaabcxyyhpmo644.jpg "/>

Multi-line text input box
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7A/F0/wKioL1bB8TOSCRB-AADmKDQlJEw738.jpg "title=" Qq20160215233723.jpg "alt=" Wkiol1bb8toscrb-aadmkdqljew738.jpg "/>
The CSS style property allows you to set the width and height of the input box.
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7A/F0/wKiom1bB8RjxR1htAABDcHqA3mk390.jpg "title=" Qq20160215233844.jpg "alt=" Wkiom1bb8rjxr1htaabdchqa3mk390.jpg "/>


Multilevel Catalog Labels
650) this.width=650; "src=" http://s5.51cto.com/wyfs02/M02/7A/F0/wKioL1bB8yHQmMUtAADPJkCjG2s466.jpg "style=" float: none; "title=" qq20160215234447.jpg "alt=" Wkiol1bb8yhqmmutaadpjkcjg2s466.jpg "/>
650) this.width=650; "src=" http://s2.51cto.com/wyfs02/M02/7A/F0/wKioL1bB8yGSgiumAAChppwPD4M859.jpg "style=" float: none; "title=" qq20160215234512.jpg "alt=" Wkiol1bb8ygsgiumaachppwpd4m859.jpg "/>
650) this.width=650; "src=" http://s5.51cto.com/wyfs02/M02/7A/F0/wKiom1bB8sDTPOCaAAEhx07psto791.jpg "style=" float: none; "title=" qq20160215234529.jpg "alt=" Wkiom1bb8sdtpocaaaehx07psto791.jpg "/>
Run results
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7A/F0/wKiom1bB8u6C-wLgAABboDja1_M571.jpg "title=" Qq20160215234626.jpg "alt=" Wkiom1bb8u6c-wlgaabbodja1_m571.jpg "/>

FieldSet label
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7A/F0/wKiom1bB-RyCn6auAADw91G9ji0296.jpg "title=" Qq20160216001249.jpg "alt=" Wkiom1bb-rycn6auaadw91g9ji0296.jpg "/>
Run results
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7A/F0/wKioL1bB-gyRQTxLAABBORiVp98801.jpg "title=" Qq20160216001521.jpg "alt=" Wkiol1bb-gyrqtxlaabborivp98801.jpg "/>

Form form
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7A/F0/wKioL1bB-zKxxJirAALWAiEXnuY980.jpg "title=" Qq20160216001953.jpg "alt=" Wkiol1bb-zkxxjiraalwaiexnuy980.jpg "/>
Run results
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7A/F0/wKioL1bB-0Hgs68gAABltAdEOdk133.jpg "title=" Qq20160216002007.jpg "alt=" Wkiol1bb-0hgs68gaabltadeodk133.jpg "/>




Note
Common symbols in HTML statements
&gt; for greater than sign

&lt; for less than sign

Spaces between characters &nbsp;
Examples are as follows
650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M01/7A/F0/wKiom1bB_NuTFzAKAACNtgRUb3Q367.jpg "style=" float: none; "title=" qq20160216002837.jpg "alt=" Wkiom1bb_nutfzakaacntgrub3q367.jpg "/>
650) this.width=650; "src=" http://s1.51cto.com/wyfs02/M00/7A/F0/wKiom1bB_Nui2HBwAAAj6pQICc8084.jpg "style=" float: none; "title=" qq20160216002849.jpg "alt=" Wkiom1bb_nui2hbwaaaj6pqicc8084.jpg "/>
For other symbols, please refer to: http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

The various codes described in HTML above are as follows
<! Doctype html>




















This article from "Thunderbolt Tofu" blog, declined reprint!
Getting Started with HTML