Web Front-end learning-HTML and web Front-end html

Last Update:2017-12-05 Source: Internet

Author: User

Tags id3

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

Web Front-end learning-HTML and web Front-end html

HTML is actually quite easy to learn. It is nothing more than filling in tags and formats. I did Website Design in college, so here we mainly record some common HTML tags, attributes, and writing methods.
I. CommonHTMLFormat
It mainly includes three theme tags: file type, html Tag, head tag, and body tag. The Head mainly contains information such as character set, description, and keyword, while the Body tag is the main content of HTML.

<!DOCTYPE html>
 II,HeADTag
1. self-closing labels
(1) <meta> tag
<Meta charset = "UTF-8" >## set the html content Character Set
<Meta http-equiv = "refresh" content = "3"> # refresh every 3 seconds
<Meta http-equiv = "refresh" content = "3; Url = http://www.hao123.com" >## refresh and redirect values every 3 seconds url specifies the web page
<Meta name = "keywords" content = "test webpage, webpage Header" >## specifying webpage keywords is conducive to SEO and Webpage Search sorting
<Meta name = "description" content = "description"> # specify the webpage description
(2) link
<Link rel = "shortcut icon" href = "image/fac. ico"> # header icon
(3) stype
(4) script
2. Active tag Closure
(1) title
<Title> webpage header title content </title> # webpage header content
Iii. bodyTag
1. a Tag:
Define a hyperlink. The most important attribute is href. Use the hyperlink and anchor.

# Normal hyperlink <a href = "http://www.hao123.com" target = "_ blank"> Chinese </a> # use a label as the anchor <a href = "# id1"> first chapter </a> <a href = "# id2"> Chapter 2 </a> <a href = "# id3"> Chapter 3 </a> <div id =" id1 "style =" height: 100px "> Chapter 1 content </div> <p id =" id2 "style =" height: 300px "> Chapter 2 content </p> <div id =" id3 "style =" height: 500px "> Chapter 3 content </div>
2. p Tag:
Defines a paragraph without line breaks. There is a gap between paragraphs.

<P> paragraph label, no line break </p>
3. br label:
Line feed label

<P> paragraph label, no <br> line feed </p>
4. h labels:
Title label, from h1-h6 indicating font from big to small, bold display

<H1> Chinese 
5. span tag
Whiteboard, intra-row label, with only spaces between segments, without line breaks

<Span> Chinese </span>
6. div labels
Whiteboard, block-level label

<Div> Chinese </div>
7. input tag
Standard input box

<Input type = "text" name = "username" value = "Tom"> <br> <input type = "password" name = "pwd" value = "123456"> <input type = "button" value = "register"> <input type = "submit" value = "submit"> <input type = "reset" value = "reset"> <input type = "checkbox" name = "double-Choice" value = "1" checked = "checkted"> <input type = "radio" name = "single choice" value = "1" checked = "checkted"> <input type = "file" name = "fname" enctype = "multipart/form-data">
8. form labels
The form is used. The data submitted in get mode is spliced and displayed in url. The data submitted in post mode is not spliced and displayed in url (more secure)

<Form action = "http://www.hao123.com" method = "get"> <input type = "text" name = "username" value = "Tom"> <br> <input type = "password "name =" pwd "value =" 123456 "> <input type =" button "value =" register "> <input type =" submit "value =" submit "> <input type = "checkbox" name = "double-Choice" value = "1"> <input type = "radio" name = "single choice" value = "1"> </form>
9. textarea tag
Multiple lines of text input are accepted, where multiple lines of data can be input.

<Textarea name = "username"> default value </textarea>
10. select tag
Drop-down box label, specifying the content of the drop-down box through option

<Select name = "city"> <option value = "1" selected = "selected"> Beijing </option> <option value = "2"> Shanghai </option> <option value = "3"> Nanjing </option> </select> <select name = "city" size = 10 mutiple = "mutiple"> <option value = "1" selected = "selected"> Beijing </option> <option value = "2"> Shanghai </option> <option value = "3"> Nanjing </option> </select> <select name = "city"> <optgroup label = "Province"> <option value = "1"> Beijing </option> <option value = "2"> Shanghai </ option> <option value = "3"> Nanjing </option> </optgroup> </select>
11. img labels
Image Tag

  <a href = "http://www.hao123.com">  </a>
12. ul labels
Unordered list. The corresponding li tag tags the list row.

<Ul> <li> first line </li> <li> second line </li> <li> third line </li> </ul>
13. ol labels
Sorted list, corresponding li tag list

<Ol> <li> first line </li> <li> second line </li> <li> third line </li> </ol>
14. dl labels
Hierarchical list. The title is represented by the dt label and the list content is represented by the dd label.

<Dl> <dt> Layer 1 </dt> <dd> 1. list of the first layer </dd> <dd> 2. list of the first layer </dd> <dd> 3. list of the first layer </dd> <dt> Layer 2 </dt> <dd> 1. list of Layer 2 </dd> <dd> 2. list of Layer 2 </dd> <dd> 3. list of Layer 2 </dd> </dl>
15. table labels
Table tag, which uses tr to represent rows and td to represent a single table

(1) first table Writing Method
<Table border = "1.5"> <tr> <td> table 1 in the first row </td> <td> table 2 in the first row </td> <td> the third table in the first row </td> <td> the fourth table in the first row </td> </tr> <td> the first table in the second row </td> <td> /td> <td> the second table in the second row </td> <td> the third table in the second row </td> <td> the fourth table in the second row </td>/ td> </tr> </table>
(2) method 2
<Table border = "1.2"> <thead> <tr> <th> header 1 </th> <th> header 2 </th> <th> header 3 </th> <th> header 4 </th> </tr> </thead> <tbody> <tr> <td> first column data </td> <td> second column data </td> <td> third column data </td> <td> fourth column data </td> </tr> <td> first column data </td> <td> second column of Data </td> <td> third column of Data </td> <td> fourth column of Data </td> </tr> </tbody> </table>
<Td colspan = "2"> the second table in the first row </td> # merge cells horizontally
<Td rowspan = "2"> fourth table in the first row </td> # vertically merge Cells
16. lable label
Used to mark text input

<Label for = "username"> User name: </label> <input id = "username" type = "text">
 
17. fieldset tag
Used in text box
 
<Fieldset> <legend> login </legend> <label for = "username"> User Name: </label> <input id = "username" type = "text"> <br> <label for = "password"> password & nbsp; Code: </label> <input id = "password" type = "password"> </fieldset>

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