Common html5 basic tags and html5 common tags

Common html5 basic tags and html5 common tags
I. Basic Structure of Html: <! DOCTYPE html> Block-level label: displays as a block, with a line between the front and back (automatically wrapping)Row-level labels: displays rows one by one from left to right.1. Common block-level labels: ① Differences between Strong, em, B, and I1. Strong and em both indicate emphasis, Strong indicates bold, em indicates italic, and Strong indicates a higher degree of emphasis than em.2. both Strong and B can be bold, and both em and I can be skewed. However, Strong and em have an additional semantic layer. H5 requires that labels be semantic as much as possible.<6> q (short reference) <7> small/big (zoom in/zoom in font): small and big are zoom in and zoom out fonts, respectively, you can nest multiple layers until the upper or lower limit <8> a (Hyperlink) 1. href: hyperlink path, which can be a network link or a local file. 2. target: the position where the page is opened. _ Self page, _ blank new page. 3. title: The name displayed on the hyperlink. 4. Rel: Specifies the relationship between the link document and the current document, the search engine uses this attribute to obtain more information about links: rel = "prev" is the previous document of the current document, rel = "next" is the last document of the current document, rel = "icon" The linked document is the icon rel = "stylesheet" of the current document. The linked document is the style sheet 5 and Rev of the current document. (currently, the document is before/after the link .) article) anchor link: ① anchor link on this page: a. set anchor: <a name = "top"> </a> B. Jump anchor: # name ① anchor link between pages: a. set anchor B at the specified position on the page to be redirected. Jump anchor: page address .html # name <a href = "02_character's block level label .html # Hbuilder"> webpage anchor </a> <br/> functional link: mailto is used to send mail files to a specified mailbox: /// e:/aaa.png open the local file te Ncent: // message /? Uin = 1315618220 send messages to the specified QQ <9> s tag, incorrect text: strikethrough <s> This is the text in the S tag </s> <br/> <10> cite Tag: the browser is skewed and is often used to reference books, paintings, and works. <cite> This is the text in cite. </cite> <br/> <11> code: computer code, code Format <pre> <code> </pre> <12> bdo: indicates the text direction. attribute: dir = "ltr" indicates the text direction from left to right, dir = "rtl" indicates from right to left <bdo dir = "rtl"> 1234567 </bdo> <br/> kbd: indicates the content that needs to be input by the user on the keyboard, if the browser is displayed as an equal-width font, enter <kbd> Esc </kbd> to postpone the system <br/> <13> sup: superscript text, sub: subscript text x ₆ <br/> & copy; space & nbsp; <br/> <14> u: underline <u> This is an underline </u> <br/> mark: highlight or mark the text, and the browser displays it as a yellow background <mark> mark </mark> <br/>

 

6. Table: Table row: tr, column in each row: td, table header: common attributes of th table: Table row and column attributes: [tr and td attributes]: 1. width/heigh: cell width and height 2. bgcolor: Cell background color 3. align: horizontal alignment of text in left center right cells 4. valign: top center bottom cell text vertical to its way 5, nowrap: cell text does not wrap [Note] When table attributes conflict with row and column attributes, the column and column attributes have a high priority.7. form (two important attributes): action-server address for form submission method-method for data submission (get/post) Difference between get and post: 1> get uses URL to pass parameters: http: // server address? Name1 = value1 & name2 = value2 (? Indicates passing parameters ,? It is passed in the form of name = value, and multiple parameters are connected with &) ① parameter passing through URL is not safe, and all information can be seen in the address bar, and others can easily inject URLs, to attack your database. ② The amount of parameter data transmitted by URL is limited, and only a small amount of data can be transferred. 2> post: use http requests to transmit data. The URL address does not see the data information. It is secure and there is no limit on the amount of information transmitted. To sum up, most parameters are transmitted using post, but the get parameter is faster than Post.[Input tag and attribute] ① type: type of the input box. Optional values: ② name: alias of the input box. required, this is because the parameter is passed in the form of name = value. ③ Value: the default value of the input box ④ placeholder: The content is displayed. When the input box has value, the content disappears. [Special input attribute values] ① checked = "checked" selected by default ② disabled = "disabled" settings cannot be used, buttons cannot be clicked, the input box cannot be modified, and if the input box is disabled, the input box information is not transmitted to the background ③ hidden = "hidden" to hide. It is equivalent to <input type = "hidden" name = "username" value = "1234"/>. It is equivalent to using a hidden domain to pass information with disabled or based on other needs. [Detailed description of input-type attributes] ① text: text input box ② password: password input box, content is not displayed externally ③ radio: single choice button checkbox: Check button a, single choice button, the name and value Attributes must exist at the same time. At the time of submission, the attribute values in the value are submitted, for example: <input type = "radio" name = "sex" value = "male"/> submit: "sex = male" B. radio uses the name attribute to identify whether the group is the same, only one c or checked = "checked" is selected by default. (only one radio can be selected and multiple checkboxes can be selected.) ④ submit: submit button, submit Form data ⑤ reset: reset button, reset to default status ⑥ file: file upload button 7image: image submit button, function same as submit, you can submit data using button: normal button, there is no soft limit. For other common attribute values, see [select tag] drop-down selection tag Syntax:

<Select name = "= city">
<Option> Qingdao </option>
<Option> Yantai </option>
<Option> Beijing </option>
<Option> New York </option>
<Option> Rome </option>
</Select>

Common attributes

① Name attribute: written in select, all options have only one name
② Attributes of multiple: multiple = "multiple" sets select to multi-choice, which is generally not used
③ Option common attribute: value = "" attribute. When option does not have the value attribute, the text in the middle of <option> </option> is passed to the background,
When the value attribute exists, the value attribute value is passed.
Title = "" property, realistic text behind the mouse
Select = "select" Default Attribute Value
④ Optgroup attribute: used for option attribute grouping. The lable attribute indicates the group name.
<Optgroup label = "China">
<Option> Qingdao </option>
<Option> Yantai </option>
<Option> Beijing </option>
</Optgroup>

Textarea: text field, which has the following attributes:

① Set width and height> fieldset and legend: Border and title of the form
<Fieldset> // border
<Legend> // Title
</Legend>
</Fieldset>
If you want to embed the title into the border, you need to write the title label into the border label.
A form can have multiple groups of titles and border combinations.

H5 smart form]
1. H5 adds the form attribute of input, which is used to specify the id of the specific form. The input can be submitted through the form without being placed in the form tag.
<Form id = foo>
......
</Form>
<Input type = "text" name = "" form = "foo">
2. New attributes of the input element:
Autocomplete: automatically completes the function, records the user's previous input content, and prompts the user to enter
"Attribute value: on/off
"" "Can be used in form again. It can be used in input to automatically complete all controls of the entire form,
Modify a specific input box
"Most browsers are enabled by default
Autofocus: automatically obtains the focus. autofocus = "autofocus" can only obtain one focus.
Form: the Form to which the Form belongs. Use the id to confirm the Form.
Required: required, required = "Required", set to required, otherwise stop submitting
Pattern: Use a regular expression to verify the input mode.
Placeholder: prompt. If value exists, the message is canceled.

[Example-table]

<! DOCTYPE html> <! DOCTYPE html>