The first knowledge of HTML

What is HTML?

HTML is not a programming language, but a markup language

HTML is an abbreviation for the English Hyper Text mark-up Language (Hypertext Markup Language), which is a standard language (tag) for making Web pages. The equivalent of a uniform set of rules, everyone to abide by him, so that you can let the browser according to the rules of the markup language to explain it.

The browser is responsible for translating the label into a user "readable" format, presented to the user!

Basic composition

<! DOCTYPE html>
Head section meta (metadata information)
Provides meta-information about pages, such as page encodings, refreshes, jumps, descriptions and keywords for search engines and update frequency
1. Page encoding
<meta charset= "UTF-8" >
2. Refresh and jump
< meta http-equiv= "Refresh" content= "30″>
< meta http-equiv= "Refresh" content= "5; Url=http://www.autohome.com.cn "/>
3. Key words
The role of keywords: general is to let the crawler such as the collection program, when they crawl your site, if you have keywords, then they will prioritize the keywords into their records, such as Baidu: if they are included, they search your keywords, you can find our site.
<meta name= "keywords" content= "StarCraft 2, star old boy, interview, F91" >
4. Description
Cnblog, for example, is a description:
<meta name= "description" content= "blog Park is a developer-oriented knowledge sharing community. Since its inception, the blog Park has been dedicated and focused on creating a pure technology exchange community for developers, driving and helping developers to share knowledge through the Internet, which will benefit more developers. The mission of the blog Park is to help developers change the world with code. ">
5, X-ua-compatible
X-ua-compatible This is IE8 unique, know can, because the front-end students are very afraid of IE because they are more than the issue of various versions of the problem is very strange, when the IE8 Microsoft wants to unify the various versions, then this parameter appears, he in order to backward compatibility, The following code will run in IE7 mode if IE8 is used.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Title Page Header information
Link
<link rel= "shorcut icon" href= "Favicon.ico" >
4. Style
1. Write CSS styles in the current file
2, in other files to write CSS style similar to Python module import CSS style imported into the current file using
5. Script
1. Write JS in the current file
2, in other files write JS python-like module import method to import JS into the current file using
Body part
1, the body is divided into two categories of tags: block-level labels and inline tags, block-level labels occupy the entire line, the inline label occupies the actual size of his use such as:
Block-level tags & inline tags:
Code:
<div style= "background-color:red;" >aaaaaaaaaaaaaa</div>
<span style= "Background-color:blue" >ddddddddddd</span>
Effect:
2. Special symbol Processing
Effect:
Code:
<p>1&nbsp;&lt;&nbsp;2</p>
<p>2&nbsp;&lt;&nbsp;3</p>
Under normal circumstances, if you enter 
Common tags
P is the paragraph, there is a gap between the default paragraphs!
BR is line break
Code:
<p>******************* paragraph 1</p>
<p>******************* paragraph 2</p>
<p>******************* paragraph 3</p>
<p>******************* paragraph 4</p>
<p>ccccccccccccccccccccccc<br/> Too much, change it ccccccccccccccccc</p>
Effect:
A tag: Jump and Anchor
Code:
<a> my blog </a>          #仅显示文字, without any features
<a href= "Http://cnblogs.com/Z-style" > My blog </a>           #在原网页打开,
<a target= "_blank" href= "Http://cnblogs.com/Z-style" > My blog </a>       #新标签中打

Effect
Anchors act like bookmarks when reading, and when you click on the "anchor" = "Bookmark", you jump to the specified position;
Code:
<a href= "#i1" > First chapter </a>
<a href= "#i2" > Chapter II </a>
<a href= "#i3" > Chapter III </a>
<!--ID does not have a label id attribute value is not allowed to repeat; ID attribute can not be written--
<div id= "I1" style= "height:900px";> the first chapter content </div>
<div id= "I2" style= "height:900px";> Chapter II content </div>
<div id= "i3" style= "height:900px";> Chapter III content </div>
Effect:
H tag
Code:
    Effect:
Select Tags:
Code:
 <p> First effect </p> 
 <select> 
 <option value= "1" > Shanghai </option> 
 <option value = "2" > Beijing </option> 
 <option value= "3" selected= "selected" > Guangzhou </option> 
 <!-- Here the default is Guangzhou because selected= "selected" here Set the default! --> 
 </select> 
 <br/> 
 <br/> 
 <br/> 
 <br/> 
 <br/> 
 <p > Second effect </p> 
 <br/> 
 <select size= "2"; 
 <option> Shanghai </option> 
 <option& gt; Beijing </option> 
 <option> Guangzhou </option> 
 <option> Shandong </option> 
 </select> 
 
 
<p> A third effect, you can select multiple </p>
<select multiple= "multiple" size= "2" >
    <option> Shanghai </option>
    <option> Beijing </option>
    <option> Guangzhou </option>
    <option> Shandong </option>
</select>
<p> fourth effect, can be grouped </p>
<select>
    <optgroup label= "Hebei province" >
        <option> Shijiazhuang </option>
        <option> Handan </option>
    </optgroup>
    <optgroup label= "Shanxi Province" >
        <option> Taiyuan </option>
        <option> Pingyao </option>
    </optgroup>
</select>
Effect:
Input Series label
Code:
######<!--as long as the radio name value is the same for the input tag, they are mutually exclusive--
<p> Gender: Male <input type= "Radio" name= "CC" value= "1"/>
        Female <input type= "Radio" name= "CC" value= "0"/></p>               
# # #checkbox标签-check box
<p> Hobby: Football <input type= "checkbox" Name= "BB" value= "1"/>
    Billiards <input type= "checkbox" Name= "BB" value= "2"/>
    Basketball <input type= "checkbox" Name= "BB" value= "3"/>
    Glass ball <input type= "checkbox" Name= "BB" value= "4"/></p>
Effect:
Code:
<form>
    <p> User name: <input type= "Text"/></p>
    <!--password input box (the input is confidential)--
    <p> Password:  <input type= "password"/></p>
    <!--submit Files--
    <input type= "File"/>
    <!--multiple lines of text--        
    <p> remark: <textarea style= "height:100px;width:100px;" ></textarea></p>
    <br/>
    <br/>
    <br/>
    <input type= "button" value= "buttons"/>
    <input type= "Submit" value= "Submission"/>
    <!--here by submission only, submit is used to submit the current form, of course, there can be more than one form-    <!--However, this submission needs to be written to the form, then commits the current form of the submission---
</form>

Effect:
<form action= "www.baidu.com" method= "Get" >
<!--here the action is to tell the HTML to submit to there--
<!--method is the way to go to the address specified by action--
<p>
User name: <input type= "text" name= "username"/>
<!--here's name= "username" here when we specify the action to receive the data after the county will find out if there is this name tag--
<!--then copy the user's input to name as a dictionary key:value mode--
</p>
<p>
Password: <input type= "password" name= "password"/>
<!--here's name= "username" here when we specify the action to receive the data after the county will find out if there is this name tag--
<!--then copy the user's input to name as a dictionary key:value mode--
</p>
<p>
Department: <select name= "department" >
<option value= "1" >CTO</option>
<option value= "2" >DBA</option>
<!--The selected value is assigned to name after the selection, and when the user clicks Submit, it is submitted to the background--
</select>
</p>
<input type= "Submit" value= "Submission"/>
</form>







The first knowledge of HTML