After HTML5 is finished, I will go to the ground of the world...

Last Update:2017-02-27 Source: Internet

Author: User

Tags border color

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

After HTML5 is finished, I will go to the ground of the world...

The first study involving H5 is completely new. Although tired every day, it is truly unprecedented, and I dare not slack it. I really don't want to waste time. As of today, we have made simple forms and a little sense of accomplishment. I will not talk about it any more. Let's show my study notes for this week! Paste my own small form!

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> lucky games </title>
</Head>
<Body>
<Form action = "_05html-table ticket .html" method = "get">
<Table>
<Tr>
<Td> registered mobile phone number </td>
<Td>
<Input type = "text" name = "tel"/>
</Td>
</Tr>
<Tr>
<Td> Registration password </td>
<Td>
<Input type = "password" name = "password"/>
</Td>
</Tr>
<Tr>
<Td> Backup mailbox </td>
<Td>
<Input type = "text" name = "mail"/>
</Td>
</Tr>
<Tr>
<Td> upload an avatar </td>
<Td>
<Input type = "file"/>

</Td>
</Tr>
<Tr>
<Td>
<Input type = "submit" value = "submit"/>
</Td>

</Tr>
<Tr>
<Td> click to submit the image → </td>
<Td>
<Input type = "image" src = "../img/icon.png"/>
</Td>
</Tr>
<Tr>
<Td> game preferences </td>
<Td>
<Input type = "checkbox" name = "holobby" value = "smoke"/> smoke
<Input type = "checkbox" name = "holobby" value = "fan"/> Delete
<Input type = "checkbox" name = "holobby" value = "success"/> callback
<Input type = "checkbox" name = "holobby" value = "kick"/> kick
</Td>
</Tr>
</Table>
</Form>
</Body>
</Html>

I. meta tag common attributes

1. charset: Set character set encoding formats in HTML5: <meta charset = "UTF-8" >>> common character set encoding formats:. GB-2312: international code, simplified Chinese B. GBK: the extended country code c. UTF-8: World code, Unicode 2. http-equiv attribute: write our information to the browser and let the browser execute as required. Optional attribute value: Content-Type (document Type) refresh (regular page refresh) set-cookie (set browser cookie cache) must be used with the content attribute. (The http-equiv attribute only indicates the part to be set. The specific setting content is not included in the content attribute.) 3. name attribute: similar to "http-equiv", you can write our information to the attributes commonly used by search engines: author (author) keywords (webpage keyword) description (webpage description) these two attribute settings are required for webpages --> <! -- Author --> <meta name = "author" content = "http://www.jredu100.com"/> <! -- Webpage keywords, separated by English symbols --> <meta name = "keywords" content = "HTML5, webpage, web Front-end development"/> <! -- Webpage Description: when searching for a website, the explanation text below the title is crucial! --> <Meta name = "description" content = "this is my first web page"> <meta charset = "UTF-8"> Ii. title Tag: the title of a webpage, that is, the text on the webpage Tab<Title> first day of training </title> 3. Use the link label: link to the web page icon (small logo before title)Rel attribute: Declares the type of the connection file. Select the icon type attribute here: bref attribute can be omitted: indicating the path address of the image <link rel = "icon" href = ".. /img/icon.png "/> Iv. Common block-level labels<H1> 5. Common row-level labelsSpan (text): it has no practical significance. It is used to wrap a certain part of text and modify a specific style. q (short reference): Syntax: <q cite = "http: baidu.com "> This is the text in the short reference tag q </q> small (zoom in font): Can be nested multiple times until the smallest font is big (zoom in font): Can be nested until the maximum em (emphasis) strong (emphasis) a (Hyperlink) I (Skew) B (BOLD) *** differences between strong, em, B, And I labels ***: 1. both strong and em indicate emphasis, strong indicates bold, and em indicates tilt. In addition, strong has a higher degree of emphasis than em. 2. strong and B can be bold, and both em and I can be skewed. However, strong and em have an additional emphasis on semantics, HTML5 language, require tags to be semantic as much as possible. Img (image)
1. src: the address of the referenced Image
Path address:
① Relative path: Search for the image address based on the current file
A. Write the image name directly for the image at the same layer as the file
B. The image is at the bottom of the current file: folder name/image name
C. picture on the top of the current file: ../image name
② Absolute path: file: // drive letter:/folder/image. suffix, but it is strictly prohibited to use it!
③ Network Address: The image link on the network. But it is generally not used because of exceptions.
2. height = "" width = "" the width and height of the image. You can use the ccs style (style = "width:; height:;") instead.
3. title: the title of the image, with the cursor over the text displayed.
4. alt: The text displayed when the image cannot be displayed.
5. align: Set the position of the text around the image relative to the image. Top, center, bottom a (Hyperlink): 1. href: hyperlink path, which can be a network link or a local file (path determined by img) 2. target: the position opened by a hyperlink. _ Self page (default), _ blank New Page 3. title: The text displayed after the mouse is clicked. 4. (understanding) rel: used to indicate the relationship between the linked document and the current document; rel = "prev" the link to the document is the previous document rel = "next" the link to the document is the next one (remember) rel = "icon" The linked image is the icon of the current document. rel = "stylesheet" The linked document is pre-loaded by the style table rel = "prefetch" of the current document, after the current document is loaded, use the free time to pre-load the document to be linked. 5. Anchor: ①. the link to this page is. set the anchor: <a name = "top"> </a> B. on the hyperlink, use name to jump to the corresponding anchor <a href = "# top" target = "_ self"> This is an anchor </a> ②. link between pages:. set the anchor B. in the href attribute of the hyperlink, use "page address .html # name" <a href = "t. h Tml # hip "> jump to the new page </a> 6. functional link: mailto: // jianghao@jerei.com is used to send an email to a specified mailbox file: // e:/a.jpg open a local file (only open in local files) tencent: // message /? Uin = qq number to send messages to the specified qq s incorrect text <s> This is the s label text </s> cite Tag: the browser is displayed in italic, often used in books, paintings
<! -- Mark: highlight or mark the text, and the browser displays the yellow background --> <mark> aaaa </mark> 6. Table [Common table attributes]: 1. border: add borders to a table. When the border attribute increases, only the peripheral borders are added, and the cell borders are always 1px2 and cellspacing: the gap distance between cells. When cellspacing = "0", only the gap between cells is 0, but the border line is not merged. [MERGE table borders] style = "border-collapse: collapse;", no need to write cellspacing3, cellpadding: the content of each cell, distance from the border line. 4. width and height: the width and height of the table. 5. align: The table is displayed on the left and right of the screen. left, center, right >>> Note: add the align attribute to the table, this is equivalent to floating the table, which directly breaks the original arrangement of elements following the table. 6. bgcolor: background color, equivalent to style = "background-color" 7. background: background = ".. /img/gx.jpg "background image is equivalent to style =" background-image "and the background image will overwrite the background color 8 and bordercolor =" blue "border color [tr and td-related attributes] 1. width/height: cell width and height 2, bgcolor: Cell background color 3, align: Text in left center right cell, horizontal alignment Mode 4, valign: top center bottom vertical alignment mode 5, nowrap: nowrap = "nowrap" cells do not contain line breaks. Note: 1. When a table attribute conflicts with a row/column attribute, the row/column attribute prevails. (The smaller the scope, the higher the priority, and the closer it is, the higher the priority.) 2. The align attribute of the table controls the align attribute of the row and column in the browser, controls the align attribute of text in cells 3. does not affect the align attribute of text in tables, you can control the horizontal alignment of all cells in a row [cross-row and cross-column of a table] colspan cross-column. When a grid spans N columns, the right N-1 cells of a row need to delete the rowspan cross-row, n-1 cells under a grid that span N rows need to be deleted VII. FormSyntax: <form>... </form> generally, table is used in combination with table. table is responsible for the page architecture. The actual submission function is form, <form action = "form submission address" method = "submission method">... </form> Form1. two important attributes: action-form submitted server address method-form submitted data method (get/post) 2. difference between get and post: ① get: Use url to transmit parameter: http: // server address? Name1 = value1 & name2 = value2 (? Indicates passing parameters ,? The parameter name is passed in the form of name = value, and the parameter & link is used between multiple parameters.) The parameter passing through the url is insecure. All information can be seen in the address bar. Other data can be transmitted through the address bar at will. Url-based data transmission is limited. Only a small amount of data can be transferred. ② Post: use http requests to transmit data. The url address is invisible and safe, and there is no limit on the transmission quantity. To sum up, we usually use post to transmit data. 3. [input tag and attribute] ① type: type of the input box ② name: alias of the input box, which is generally required. Because name = value is used to pass ③ value: the default value of the input box. ④ Placehold: the prompt content of input. When the input box has value, the prompt content disappears. ⑤ (Understanding) tabindex = "1" controls the jump sequence when the tab key is clicked. The focus is obtained one by one from the smallest value. [Special attribute values of input] ① checked = "checked" is selected by default. ② disabled = "disabled" is selected by default. The control cannot be used or clicked on a button, but cannot be modified on the input box. If the input box is disabled, the information in the input box cannot be transmitted to the background. ③ Hidden = "hidden" hidden. It is equivalent to <input type = "hidden"/>. It is often used in combination with disabled or as needed to transmit data using hidden fields.

4. [Detailed description of input-type attributes] ① text: text input box ② password: password input box, the input content is displayed as a small black dot ③ radio: single choice button, checkbox: check button> the name and value Attributes must exist at the same time. When submitting, the attribute values in the value are submitted. For example: <input type = "radio" name = "sex" value = "male"/> displayed as "sex = male" >>> radio uses the name attribute to identify whether the group is the same, same name, same group, only one in the same group can be selected. >>> Checked = "checked" is selected by default (only one radio can be selected, and multiple checkbox can be selected) ④ file: file upload button ⑤ submit: submit button, submit form data. ⑥ Reset: reset button. reset the form data to the initial state. 7. image: The graphic submit button. The function is the same as that of submit. You can submit data using the reset button: normal button, which has no effect. <Input type = "submit" value = "register"/> <input type = "submit"/> <input type = "text" name = "username" placeholder = "Enter username "/> <input type =" radio "name =" sex "value =" male "checked =" checked "/> male <input type =" radio "name =" sex "value =" "/> female <input type =" text "name =" username "value = 123 disabled =" disabled "/> 5. drop-down box control select: <select> <option> </option> // there can be N more </select> ② name attribute: written on select, all options have only one name ③ multiple = "multiple" set s Select multiple elect controls. You can press ctrl on the settings page to select multiple instances. Generally not required

④ Option common attribute: value = "": When option does not have the value attribute, the text in the <option> </option> label is passed to the background. When option has the value attribute, the following is an example of the value Attribute passed to the backend: <td> <select name = "city"> <option value = "1"> Qingdao </option> <option value = "2"> Hubei </option> <option value = "3"> Jinan </option> <option value = "4"> Yantai </option> </select> </td> http: // 127.0.0.1: 8020/A % E6 % 9C % 80% E9 % 87% 8D % E8 % A6 % 81% E7 % 9A % 84H5/% E4 % BD % A0 % E7 % AE % A1 % E6 % 88% 91% E8 % B5 % B7 % E4 % BB % 80% E4 % B9 % 88% E5 % 90% 8D/HTML --/_ 01 html --Head.html 111? City = 3 title = "" selected = "selceted": 5 <optgroup label = "Shandong Province"> </optgroup>: the option label is used for grouping. The label attribute indicates the group name. Note: When a name is named, it cannot start with a number or use Chinese characters. It cannot contain special titles other than underscores or spaces.

6. [Text Field textarea] ① Writing Method: <textarea> </textarea> ② setting width and height style = "width: 200px; height: 100px; "You have two attributes: cols =" "rows =" "but not commonly used. ③ readonly =" readonly "is set to read-only mode and cannot be edited. ④ Style = "resize: none;" setting to width and height does not allow modification ⑤ style = "overflow:;" setting how to deal with text when the text exceeds the area (not exclusive to textarea, you can also set the div) >>> You can also set the horizontal and vertical display mode through overflow-x/overflow-y >>> common property value: the text with the hidden value exceeding the area, hide scroll. No matter how much text is displayed, scroll will be displayed (default style) 7. [border and title of the Form] <fieldset> // form border <legend> </legend> // form title </fieldset> If You Want To embed the title into the border, you need to write the title label to the border label. >>> A form can contain a combination of borders and titles.

8. [HTML5 smart form] ① H5 adds the form attribute of input, which is used to point to the id of a specific form. The input can be submitted through the form without being placed in the form tag. <Form id = foo>... </form> <input... form = "foo"/> ② add attribute View table ③ new attribute of input element: Autocomplete: Automatic completion function: record the content previously entered by the user, and at the next input, the system automatically prompts you to complete the input. >>> Attribute Value: on/off >>> can be used on the form to automatically switch all controls of the entire form. You can also use it on input to modify a specific input box. >>> Most browsers are enabled by default. Autofocus: automatically obtains the focus. autofocus = "autofocus" indicates that only the input element can automatically obtain the focus. Form: form: the id of the Form to which the input belongs. Required: required = "Required" indicates that the input is required. Otherwise, the Pattern cannot be submitted: use a regular expression to verify the input mode Placeholder: the prompt content. When there is a value, the prompt content disappears. Well, it's almost like that. I hope you can give me more advice. Please point out some mistakes. Time is simply how you live your life

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More