Home > Developer > JavaScript
[Front-end]: HTML,]: HTML
Preface: I recently started to learn about the front-end. This blog mainly introduces some main html tags. After writing this blog, I will use the newly learned html to make a simple login interface ~~
I. Introduction to HTML
HTML (Hyper Text Mark-up Language) is a standard Language for making web pages. It is equivalent to defining a set of rules that everyone can follow. In this way, the browser can explain it according to the rules of the markup language.
The browser (client) sends a request to the server, and the server returnsString, The browser will render the string into the corresponding interface according to its own rules.
Doctype tells the browser what html or xhtml specifications are used to parse html documents.
Ii. Meta
Provides metadata about the page, for example, page encoding, refresh, jump, description and keywords for search engines and update frequency.
Page code:
Currently in most browsers, the direct output of Chinese will appear Chinese garbled, at this time we need to declare the character in the header as a UTF-8:
1 <meta charset="UTF-8">
Refresh Every 2 seconds:
1 <meta http-equiv="refresh" content="2"/>
Jump:
Open the html file. In 5 seconds, the page will automatically jump to www.etiantian.org:
1 <meta http-equiv="refresh" content="5; url=http://www.etiantian.org">
Title:
The tab is displayed as hello: <title> hello </title>
If you want to add a small image before hello, you can copy the image to a computer on another website, and add the following code to the head:
1 <link rel="icon" href="favicon_1c83d380.ico">
:
Note:
Iii. <body>
Labels are generally divided into two types: block-level labels and inline labels.
Block-level labels (will occupy a whole line) eg: Inline label (only the space occupied by the font) eg: <a> </a>
1. p tag
P indicates a paragraph, which is separated by default.
2. br label
Br is a line break <br/>
3. a tag
Click Baidu. The current page will jump to www.baidu.com:
1 <a href = "http://www.baidu.com"> Baidu </a>
Click Baidu to open the new page www.baidu.com:
1 <a href = "http://www.baidu.com" target = "_ blank"> Baidu </a>
Click s2.html in the left-side Navigation Pane:
1 <a href="s2.html" target="_blank">S2</a>
In html, each tag can have an id, which must be unique. Click "view Chapter 2". The current page will jump to the page in Chapter 2:
1 <ahref = "# tt"> see Chapter 2 </a> 2 <divstyle = "height: 1000px; background-color: red; "> Chapter 1 </div> 3 <divid =" tt "style =" height: 1000px; background-color: yellow; "> Chapter 2 </div>
4. div labels
Used for Layout
5. img image tags
Click the image in combination with tag a to jump directly. The title specifies the content displayed after the mouse is placed on the image. The style defines the width and height. alt specifies the display information when the image does not exist.
1 <a href = "https://www.baidu.com"> 2 3 </a>
6. H tag (title)
1
7. select tag
1 <select> 2 <option> Beijing </option> 3 <option> Shanghai </option> 4 <option> Guangzhou </option> 5 <option> Huilai </option> 6 </select> 7 8 <select size = "2"> 9 <option> Beijing </option> 10 <option> Shanghai </option> 11 <option> Guangzhou </ option> 12 <option> Huilai </option> 13 </select> 14 15 <select size = "3" multiple = "multiple"> 16 <option> Beijing </option> 17 <option> Shanghai </option> 18 <option> Guangzhou </option> 19 <option> Huilai </option> 20 </select> 21 22 <select> 23 <optgroup label = "Guangdong Province"> 24 <option> Huilai </option> 25 <option> Guangzhou </option> 26 </optgroup> 27 <optgroup label = "Shanxi Province"> 28 <option> Taiyuan </option> 29 <option> Pingyao </option> 30 </optgroup> 31 </select>Running interface:
Take the first check box as an example. The default value is Beijing if not selected. If you want to use the default value as Huilai, you can add the previous property selected. PS: When submitting data, the value is submitted.
1 <option value = "4" selected = "selected"> Huilai </option>
8. input series labels
Check box (eg: Interest): <input type = "checkbox"/>
Singleton (eg: Male): <input type = "radio"/>
The above two boxes are both unselected by default, and the checked attribute is selected by default.1 <input type="radio" checked="checked"/>If the name of radio is the same, it indicates that the selected IP address is mutually exclusive.
1 <p> male: <input name = "gender" type = "radio"/> </p> 2 <p> female: <input name = "gender" type = "radio"/> </p>Text Box/Password box/button/submit button/Upload File
1 <input type="text"/>2 <input type="password"/>3 4 <input type="button" value="btn"/>5 <input type="submit" value="sub"/>6Running interface:
9. form labels
Form is equivalent to a form. With the input tag submit, the content of the form can be submitted to the specified position. The submitted content is submitted in dictionary form {'user': xx, 'email ': xx, 'pwd': xx}. The key value is the name attribute value.
A button is just a simple button; a submit is a button for submitting a form (submitting data to the background)
1Running interface:
If you want to submit a file, you need to add a special attribute in the form tag where it is located: enctype = "multipart/form-data" method = "POST ".
Action = "A": A indicates the place where data is submitted
1 <form action="A" enctype="multipart/form-data" method="POST">2 <input type="text"/>3 <input type="file"/>4 </form>
10. textarea tag
You can enter a text box with multiple lines
1 <textarea>zcl</textarea>2 <input type="text" value="zcl"/>Running interface:
11. label labels
The for attribute in the label is the same as the id in the input label. The result is that the corresponding checkbox is selected as long as you click the text.
1 <label for = "cb1"> marital status </label> 2 <input id = "cb1" type = "checkbox"/>
12. List tags ul, ol, dl
1 <ul> 2 <li> 111 </li> 3 <li> 222 </li> 4 </ul> 5 <ol> 6 <li> aaaa </li> 7 <li> bbbb </li> 8 </ol> 9 <dl> 10 <dt> title </dt> 11 <dd> content 1 </dd> 12 <dd> content 2 </dd> 13 </dl>Running interface:
13.
<Hr/> horizontal split line
14. table labels
Border = "1": set border colspan: Merge column rowspan: Merge row
1 <table border = "1"> 2 <thead> 3 <tr> 4 <th> first column </th> 5 <th> second column </th> 6 <th> column 3 </th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td colspan = "2"> h1 h2 </td> 12 <td> h3 </td> 13 </tr> 14 <tr> 15 <td rowspan = "2"> hh1 hhh1 </td> 16 <td> hh2 </ td> 17 <td> hh3 </td> 18 </tr> 19 <tr> 20 <td> hhh2 </td> 21 <td> hhh3 </td> 22 </tr> 23 </tbody> 24 </table>Running interface:
15. span tag
Coloring part of Text
1 <p> my mother has <span style = "color: blue"> blue </span> eyes. </P>
Summary:
- Attributes that can be defined by all tags, such as id, style, and name.
- Target, href is a unique attribute of tag.
- Src is a unique attribute of the img label.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
