First, the basic structure of HTML: <! DOCTYPE Html>1. Title Tag: The title displayed on the Browser tab page2. Meta Tags: Its Common properties ①CharSet: Sets the character set encoding format for the document. Character set encoding in HTML5: <meta charset= "UTF-8" > Common Character Set encoding format: A.GB-2312: GB code, Simplified Chinese B.GBK: Extended GB code C.UTF-8: Universal code Unicode Common ②http-equivProperties: Write our information to the browser, let the browser follow the requirements in this, optional attribute values:Content-type(Document Type)Refresh(Page timed refresh)Set-cookie(Set browser cookie cache) need to matchcontentproperty to use. (The Http-equiv property simply indicates which part of the setting needs to be set, the specific settings, and put into the content property) ③nameProperties: Use the same method as "Http-equiv". Write our information to search engines to see the values that are commonly used and need to be mastered:authorAuthorkeywords(page keywords)Description(page description) These two property settings, the Web page is necessary.3. Link Label: Link page icon (small logo before title), its common properties are: ①relProperties: Declares the type of the linked file, where Icon② is selectedtypeProperties: Can omit ③hrefProperties: Represents the path address of the picture three, body part: The text of the webpage, picture and so on information label classification:
Block-level labels: Display as blocks, one line before and after another (wrap line)
row-level labels: displayed by row from left to right. 1. Common block-level tags: ①: Title tag, auto Bold, H1 Max, H6 min. Ii: Horizontal line label, add a horizontal level. ③<p></p>: paragraph label, ④<br/>: Line Wrap tab, ⑤<blockquote/></blockquote>: reference tag, cite attribute, indicates the source of the reference, general reference URL browser default first line indent. ⑥<pre></pre>: A pre-formatted label for overloading code. Browser default display style: 1, display as equal width font. 2. Elements such as line breaks and spaces in the code can be displayed in the browser. "Supplemental" HTML file: 2, layout-based block-level tag list: Unordered list, ordered list, definition list ① sequence table:<ol></ol> list Item:<li></li>② unordered list:<ul></ul> list Item:<li></li>③ definition list (for graphic blending):<dl></dl>List title:<dt> generally has only one </dt>List description Items:<dd> can have many items </dd>3. Combination Label:<figure></figure>For displaying pictures and image titles he has two sub-tags:Image<figcaption></figcaption>Title of the picture for example: <figure><figcaption> Explorer Ezreal </figcaption></figure>4, Partition Tags:<div></div>5. Common line-level labels<1>span (Text): Meaningless, used to wrap a section of text, modify a particular style, for example: This is <span style= "COLOR:RED;FONT-SIZE:36PX;" >span</span> text img (image): Its Common properties: ①src: Represents the address of the reference picture. Path Address: Relative path: The current file is the most accurate, to find the image address A, the same layer of the file picture, directly write the picture name B, the picture in the current file next layer: File name/Picture name C, the picture on the current file layer:.. /Picture Name absolute path: file:///drive letter:/folder/Picture name, but is strictly forbidden to use the image URL: The network image link, but generally do not ②Height and Width: the height and width of the picture. You can use CSS styles instead of ③title: Picture label. When the mouse pointer is displayed after the text ④alt: When the picture cannot be displayed, the text displayed<2>em(tilt emphasis)<3>strong(bold emphasis)<4>b(bold)<5>iTilt
the difference between strong, EM, B, I
1, strong, EM are emphasized, strong is bold, EM is italic, and strong emphasis on the degree of tease than Em high
2, strong and B can be bold, both em and I can tilt, but strong and em more than a layer of emphasis on the semantics. H5 requires tags to be as semantic as possible. <6>q(short quote)<7>small/big(Zoom in/out font): Small and big are both scaled and enlarged, and can be nested in multiple layers up to the upper or lower limit<8>a(hyperlink) 1, href: The path of the hyperlink, which can be a network link or a local file. 2. Target: The location where the jump page opens. _self own page, _blank new page. 3, Title: The mouse refers to the name displayed on the hyperlink. 4, Rel (link is the current pre/Post): Specify the relationship between the linked document and the current document, the search engine will use this property to obtain more information about the link: rel= "prev" is a linked document is the previous document of the current document, rel= "Next" linked document is the current document After a document, rel= "icon" is linked to the document is the icon of the current document Rel= "stylesheet" is linked to the document is the current document style sheet 5, Rev (currently linked to the previous/next article) Anchor Link: ① This page anchor link: A, set anchor point: < ; a name= "top" ></a> B, jump anchor: #name名 ① link between pages: A, set anchor B, jump anchor point at the specified location of the upcoming Jump page: page address. Html#name Name <a href= "02_ common block-level labels. Html#hbuilder" > links between pages </a><br/> functional link: mailto used to send mail to a designated mailbox File:///e:/aaa.png hit Open local file tencent://message/?uin=1315618220 to the designated QQ send interest<9>stags, error text: Strikethrough <s> This is the text in the S tag </s><br/><10>citeTags: browser display as italic, commonly used in books, paintings, works of reference <cite> This is the text in cite </cite><br/><11>code: Computer code, code format not preserved <pre><code></code></pre><12>bdo: Indicates text direction, properties: dir= "ltr" means left to right, dir= "RTL" means right to left <bdo dir= "RTL" >1234567</BDO><BR/>kbd: Indicates what the user needs to enter with the keyboard , the browser appears as a width font please enter "<kbd>Esc</kbd>" to postpone the system <br/><13>sup: Superscript text,Sub: Subscript text x<sub>6</sub><br/>? © Space; © Space <br/><14>u: Underline <u> This is an underscore </u><br/>mark: Highlight or mark text, the browser appears as a yellow background <mark>mark</mark><br/>
6. Table: Table row: TR, column in each row: TD, Table header: Th table's Common properties: Table row and Column properties: [TR and TD Properties]: 1,Width/heigh: Width height of cell 2,bgcolor: The background color of the cell 3,Align: The horizontal alignment of text in the right cell of the left center 4,valign: Top center Bottom The text in the cell vertically to its way 5,nowrap: Text in cell does not wrap
"Note" When table properties conflict with row and column properties, the row and column attributes have high precedence7. Forms (form"Two important properties": action-the form submits the server address method-form submission data method (Get/post)
get/post Differences:
1>get Use URL parameter:/HTTP server address? name1=value1&name2=value2
(?), which is passed in the form of Name=value, followed by A & connection between multiple parameters. ①url is not secure, all information can be seen in the address bar, and others can easily inject URLs to attack their own databases.
the ②url parameters are limited and only a small amount of data can be transmitted.
2>post: Passing data using HTTP requests. URL address does not see data information, security and the amount of information transmitted is not limited
in summary: Most of the post parameters are used, but the get pass is faster than post【inputTags and properties "①type: Input box type, optional values are: ②name: The alias of input box is required, because it is passed in the form of Name=value when the parameter is transmitted. ③value: The default value of input box ④placeholder: Tip content, when the input box has value, the prompt content disappears. "Input special attribute value" ①checked= "CheckedThe default check ②disabled= "Disabled"The settings control cannot be used, the button cannot be clicked, the input box cannot be modified, and if the input box is disabled, the input box information is not passed to the background ③hidden= "hidden"Hide. Equivalent to <input type= "hidden" name= "username" value= "1234"/> is equivalent to mate disabled or, depending on other needs, using hidden fields to pass information. "Input-type Property Details" ①text: Text input Box ②Password: Password input box, the content is not displayed externally ③Radio: Radio buttoncheckbox: The Check button A, radio button, name and Value property need to be present at the same time, when committing, the property value in value is submitted for example: <input type= "Radio" name= "Sex" value= "male"/> Commit shown as "s Ex= "B, radio by the name attribute is the same group, name is the same group, and can only select one C, checked=" checked "by default, (radio can select only one, the checkbox can be selected more) ④Submit: Submit button to submit form data ⑤Reset: Reset button, reset to default state ⑥file: File Upload button ⑦Image: Picture Submit button, function with submit, can submit data ⑧Button: Normal button, nothing soft ⑨ other commonly used property values: See "Select Label"Drop-down to select the label notation:
<select name= "=city" >
<option> Qingdao </option>
<option> Yantai </option>
<option> Beijing </option>
<option> New York </option>
<option> Rome </option>
</select>
Common Properties
①name property: Written in Select, all options have only one name
②multiple property: multiple= "multiple" setting select as multiple selection, generally not
③option Common Properties: Value= "" property, when option does not have the Value property, the back of the table is passed the <option></option> intermediate text,
When there is a Value property, the property value of value is passed.
Title= "" Property, after the actual text on the mouse
select= "Select" Default property value
④optgroup property: Used for the option attribute grouping, with the lable attribute representing the grouping name.
<optgroup label= "China" >
<option> Qingdao </option>
<option> Yantai </option>
<option> Beijing </option>
</optgroup>
"textarea": Text field, its common properties:
① Set width height style= "width:150px;height:200px;
②readonly= "ReadOnly": Read-only mode, editing is not allowed
③style= "Resize:none;" Set to width height does not allow modification
④style= "overflow:;" When setting text out of range, the common attribute values are:
Hidden out of range text, hidden cannot be displayed
Scroll scrolling is displayed regardless of the number of words
Auto automatically determines whether or not it will appear as a scroll bar depending on how much text
fieldset, legend form
<fieldset>/Border
<legend> Title
</legend>
</fieldset>
If you want the title to be embedded in the border, you need to write the caption label inside the border label
A form can have multiple sets of labels Title Plus border combination
"H5 smart form"
1, H5 added the form attribute of input, used to specify the ID of the special form form, implementation of input can not be placed in the form label, the form to submit
<form ID=foo>
......
</form>
<input type= "text" name= "" form= "foo" >
2. New attribute of INPUT element:
Autocomplete: AutoComplete to record what users have entered before and prompt the user to enter the next time they enter
"" Property value: On/Off
"" can be used again form form, the entire form of all controls to complete the switch can also be used on input,
To modify a specific input box
"" Most browsers are turned on by default
Autofocus: Automatically get focus, autofocus= "Autofocus" can only get one focus
form: The form that belongs to, and the ID to confirm which form belongs to
Required: Required, required= "Required", set required, otherwise stop the submission
Pattern: Validating the mode of input using regular expressions
Placeholder: Tip, Cancel prompt when value is available.
"Example-table"
<! DOCTYPE html>
"Example-form"<! DOCTYPE html>
HTML5 Common Basic Tags
