1. Title Label
h refers to headline, meaning label.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Title Label</title>
</head>
<body>
<h1>Title Label</h1>
<h1>There are six levels of Title selection.</h1>
<h2>The text is bold and one line appears.</h2>
<h3>From big to small,</h3>
<h4>The weight changes from heavy to light.</h4>
<h5>After the grammar specification is written,</h5>
<h6>See the effect refresh.</h6>
</body>
</html>
<body>
<h1> Title Level 1</h1>
<h2> Secondary Title</h2>
<h3> Title Level 3</h3>
<h4> Title Level 4</h4>
<h5> Title Level 5</h5>
<h6> Title Level 6</h6>
</body>
2. Paragraph Labels
<p>Paragraph Label</p>
P: refers to paragraph [p rf], meaning a paragraph.
Characteristic:
1. Text wraps automatically in a paragraph according to the size of the browser window.
2. Keep gaps between paragraphs and paragraphs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Label Demo</title>
</head>
<body>
<h2>Essential information</h2>
<p>Liu Dehua ( Andy Lau)，1961 Born in Hong Kong, China on September 27, and born at the Guangdong New Society, Chinese film and television actors, singers, producers and lyricists.</p>
<p>1981 In 1983, he appeared in the movie's maiden work, Cloudy Song. The martial-arts drama "Sculpture and Chivalry Couples" won a 62-point TV record in Hong Kong. [1-2] . 1991 Started Sky Screen Film Company in 2000 [3] . 2000 Best Actor Award of the 19th Hong Kong Film Award in 1997 for the bandit movie Secret War [5] . 2004 Best Actor Award in the 23rd Hong Kong Film Award in 2001 for the feature film Big Bold and Wise [271] ，In the same year, he won the 41st Taiwan Golden Horse Award for Best Actor for the police movie Infinity 3: The Ultimate [6] . 2005 Hong Kong in 2001 UA Hong Kong's highest cumulative box office Hong Kong Actor Award awarded by the Academy Line [7] . 2006 Most Contributing Filmmaker Award in Asia, Pusan International Film Festival [8] . 2012 In 2001, she won the Golden Horse Award and the Golden Image Award for Best Actor for the drama "Sister Peach" [9] ；In the same year he served as the chairman of the 49th Taiwan Golden Horse Award Jury for Films [10] . </p>
<p>1985 Annual release of the first personal album "Just know that you love you now" [11] . 1990 Year gained attention in the music world with album Can't [12] . 1994 In 1995, he sang his masterpiece "Forget Water" on CCTV Spring Night. [13] . 2000 Hong Kong Male Singer Most Awarded by Guinness World Records in 2001 [14] . 2004 Sixth time in 2015, won the Top Ten Golden Songs Most Popular Male Song Star Award. Fifth time in 2015 on CCTV Spring Festival and sang the song "The Way Home" [15] . 2020 Annual release of his first digital album, Performing·Sing [261] . </p>
<p>In addition to performing arts, Liu Dehua cares about public welfare and charity. In 1994, he founded the Liu Dehua Charitable Foundation. In 2000, he was named the top ten outstanding youth in the world. [16] . 2005 Initiated Asia Nova Guide Program in 2001 [17] . 2008 Appointed as a non-official Gentleman of Hong Kong in 1996 [18] . 2010 Year 12th World Outstanding Chinese Award [19] . 2016 Re-elected Vice-President of China Disabled Persons Welfare Foundation in 2001 [16] . </p>
</body>
</html>
3. Line break labels
In HTML, text in a paragraph is arranged from left to right until the right end of the browser window, and then wrapped automatically. If you want a text to force a new line, you need to use the wrap label
<br />
br: Abbreviation for the word break, meaning interruption, line break.
Characteristic:
1,
Is a single label.
2,
Labels simply start a new line, and unlike paragraphs, vertical spacing is inserted between them.
4. Text Formatting Labels
In web pages, sometimes you need to set the effect of bold, italic, underline text, etc., then you need to use text formatting tags in HTML to make the text display in a special way.
Label semantics: Highlight importance, more important than ordinary text.
en refers to the emphasis ['emf sa z], which is emphasize d by tilting.
del refers to delete, meaning delete.
Insert refers to insert. Inserting an ins tag is exactly like inserting a word.
u means underline.
5. Box labels
<div>This is the head</div> <span>Today's price</span>
div refers to division [d vn], meaning division;Zoning;
Span refers to span [spn], meaning span, span.
<div></div> :Used for layout, but now only one line is allowed<div>. Big box <span></span> : Multiple boxes in one row
6. Image labels
<img src="./imags/1.png" alt="Replace Text (Text displayed when the picture cannot be displayed)" title="Tip Text (Mouse over image, text displayed)" />
src is a required property of a tag and is used to specify the path and file of an image file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Label Demo</title>
</head>
<body>
<div>
<img src="./imags/1.png" alt="Replace Text (Text displayed when the picture cannot be displayed)" title="Tip Text (Mouse over image, text displayed)" />
<img src="./imags/2.png" alt="Replace Text (Text displayed when the picture cannot be displayed)">
<img src="./imags/3.png" alt="Replace Text (Text displayed when the picture cannot be displayed)">
<img src="./imags/4.png" alt="Replace Text (Text displayed when the picture cannot be displayed)">
<img src="./imags/5.png" alt="Replace Text (Text displayed when the picture cannot be displayed)">
<img src="./imags/6.png" alt="Replace Text (Text displayed when the picture cannot be displayed)">
</div>
</body>
</html>
Effect:
7. Hyperlink Labels
<a href="Jump Target" target="Pop-up mode of target window">Text or Image</a>
a hyperlink anchor ['darting kvy] anchor point
href hyperlink address hypertext reference [ha p rtekst refr ns] properties of hyperlink a tag
If the address inside the href is a file or a zipped package, the file will be downloaded.
<a href="imags.rar"> <img src="./imags/3.png" alt="Replace Text (Text displayed when the picture cannot be displayed)"> </a>
<div>
<img src="./imags/1.png" alt="Does not support displaying this picture" title="Tip Text Remember to Buy" />
<a href="http://www.igdmfg.com/" target="_blank">
<img src="./imags/2.png" alt="Does not support displaying this picture" title="Tip Text Remember to Buy" />
</a>
<a href="imags.rar"><!-- Hyperlink Download File -->
<img src="./imags/3.png" alt="Does not support displaying this picture" title="Tip Text Remember to Buy" />
</a>
<img src="./imags/4.png" alt="Does not support displaying this picture" title="Tip Text Remember to Buy" />
<img src="./imags/5.png" alt="Does not support displaying this picture" title="Tip Text Remember to Buy" />
<img src="./imags/6.png" alt="Does not support displaying this picture" title="Tip Text Remember to Buy" />
</div>
8. Anchor Point Links
Role: Click on a link to quickly navigate to a location on the page
In the href property of the link text, set the property value to #Name
Find the target location label with an id attribute = the name you just named
<a href = "#Two ">Season 2</a> <h3 id = "two">Introduction to Season 2</h3>
9. Comments
Note shortcut is ctrl + /
Notes to
End
10. Special Characters
Keep in mind: space, greater than sign, less than sign, the rest are rarely used, if you need to look back
11. Form Labels
Table: The label used to define the table
tr:table row is used to define rows in a table and must be nested in a label table
td:table data is used to define cells in a table and must be nested in a tr tag
th:table header is used to define the table header in a table. The contents of the table header cells are bold and centered
<table>
<tr><th>Full name</th> <th>Age</th> <th>Gender</th></tr>
<tr><td>Zhang San</td> <td>20</td> <td>male</td> </tr>
<tr><td>Li Si</td> <td>25</td> <td>male</td> </tr>
<tr><td>Flowers like flowers</td> <td>30</td> <td>female</td> </tr>
</table>
1. Table Properties
Attributes for table labels are not commonly developed because they are basically set using the CSS that follows.
<table border="1" align="center" width="600" cellspacing="0">
<tr><th>Full name</th> <th>Age</th> <th>Gender</th></tr>
<tr><td>Zhang San</td> <td>20</td> <td>male</td> </tr>
<tr><td>Li Si</td> <td>25</td> <td>male</td> </tr>
<tr><td>Flowers like flowers</td> <td>30</td> <td>female</td> </tr>
</table>
Effect:
2. Tabular structure labels
To better represent the semantics of a table, it can be divided into two parts, the table header and the table body.
use <thead></thead> Tags represent the header area of the table.<thead>Internal must have<tr>Label, typically on the first line use<tbody></tbody> Tags represent the main area of a table and are used primarily to place the data body The above labels are all placed on the<table></table>In Label
3. Merge Cells
Cross-line merge: rowspan="Number of merged cells"
Merge across columns: colspan="Number of merged cells"
<td colspan = "2"></td>
<table border="1" width="800" height="250" cellspacing="0" cellpadding="0">
<tr>
<th colspan="5">Curriculum vitae</th>
</tr>
<tr>
<th width="120">Full name:</th>
<td width="200"></td>
<th width="120">Gender:</th>
<td width="200"></td>
<th rowspan="4">Photo</th>
</tr>
<tr>
<th >Marital status:</th>
<td></td>
<th >Date of birth:</th>
<td></td>
</tr>
<tr>
<th>Nation:</th>
<td></td>
<th>Political Face:</th>
<td></td>
</tr>
<tr>
<th>Height:</th>
<td></td>
<th>Education:</th>
<td></td>
</tr>
</table>
The results are as follows:
12. List labels
Tables are used to display data, and lists are used for layout.
The most important feature of a list is its neatness, neatness and orderliness. It will be more free and convenient as a layout.
Lists can be categorized into three categories based on usage scenarios: unordered, ordered, and custom lists.
1. Unordered list
- Tags represent an unordered list of items in an HTML page, typically rendering list items as bullets, while list items use
- The basic syntax format for an unordered list is as follows:
<ul> <li>List Items</li> <li>List Items</li> <li>List Items</li> <li>List Items</li> <li>List Items</li> </ul>
ul refers to unorder list, meaning an unordered list
li refers to list item, meaning list item
Be careful:
1. List items in an unordered list are side-by-side without a sequence level.
2,
- Medium can only be nested
- Directly in
3, - It is equivalent to a container that holds all the elements.
4. Unordered lists have their own style properties, but in practice, we use CSS to set them.
2. Ordered List
3. Custom List
Use scenarios for custom lists:
Custom lists are often used to interpret and describe terms or nouns without any bullets in front of the list items that define the list.
<div>
<dl>
<dt>Shopping Directory</dt>
<dd>
<a href="#">Shopping Process</a>
</dd>
<dd>
<a href="#">Membership Introduction</a>
</dd>
<dd>
<a href="#">Lifestyle Travel/Group Purchase</a>
</dd>
<dd>
<a href="#">FAQ</a>
</dd>
<dd>
<a href="#">Call</a>
</dd>
<dd>
<a href="#">Contact Customer Service </a>
</dd>
<dt>Shopping Directory</dt>
<dd>
<a href="#">Shopping Process</a>
</dd>
<dd>
<a href="#">Membership Introduction</a>
</dd>
<dd>
<a href="#">Lifestyle Travel/Group Purchase</a>
</dd>
<dd>
<a href="#">FAQ</a>
</dd>
<dd>
<a href="#">Call</a>
</dd>
<dd>
<a href="#">Contact Customer Service </a>
</dd>
<dt>Shopping Directory</dt>
<dd>
<a href="#">Shopping Process</a>
</dd>
<dd>
<a href="#">Membership Introduction</a>
</dd>
<dd>
<a href="#">Lifestyle Travel/Group Purchase</a>
</dd>
<dd>
<a href="#">FAQ</a>
</dd>
<dd>
<a href="#">Call</a>
</dd>
<dd>
<a href="#">Contact Customer Service </a>
</dd>
<dt>Shopping Directory</dt>
<dd>
<a href="#">Shopping Process</a>
</dd>
<dd>
<a href="#">Membership Introduction</a>
</dd>
<dd>
<a href="#">Lifestyle Travel/Group Purchase</a>
</dd>
<dd>
<a href="#">FAQ</a>
</dd>
<dd>
<a href="#">Call</a>
</dd>
<dd>
<a href="#">Contact Customer Service </a>
</dd>
<dt>Shopping Directory</dt>
<dd>
<a href="#">Shopping Process</a>
</dd>
<dd>
<a href="#">Membership Introduction</a>
</dd>
<dd>
<a href="#">Lifestyle Travel/Group Purchase</a>
</dd>
<dd>
<a href="#">FAQ</a>
</dd>
<dd>
<a href="#">Call</a>
</dd>
<dd>
<a href="#">Contact Customer Service </a>
</dd>
</dl>
</div>
Effect:
13. Form Labels
1. Why form is needed
The purpose of using forms is to collect user information.
In our web pages, we also need to interact with users, collect user data, and then we need forms.
2. Form Composition
3. Form Fields
A form field is a region that contains form elements.
In HTML tags, tags are used to define form fields for collecting and transferring user information.
<form action="url address" method="Submission Method" name="Name of form field">
</form>
4. Form controls (form elements)
<input type="Attribute Value" />
input Input Form Element
input is a single label, the type property sets different property values to specify different control types (text fields, check boxes, radio buttons, buttons, etc.)
In addition to the type attribute, tags have many other attributes that are commonly used as follows:
name and value are attribute values that each form element has and are primarily used by back-end personnel.
Name is the name of the form element and requires the same name value for both the check box and the radio box
The checked property is mainly for radio boxes and check boxes. It is mainly used to open a page so that a form element can be selected by default.
Example 1:
Note: Radio boxes must all have the same name, otherwise the radio function cannot be implemented Gender: male<input type="radio" name="sex" value="male"/> female<input type="radio"name="sex" value="female"/> <br />
Effect:
Example 2:
Click the Submit button to add form fields form Values in the form elements inside are submitted to the background server <input type="submit" value="Free registration"/>
Effect:
Example 3:
Reset button restores the initial default state of a form element <input type="reset" value="Refill"/>
Effect:
Label label
The label tag defines the label for the input element.
The label tag is used to bind a form element. When you click on the text inside the label tag, the browser will automatically turn the focus (cursor) to or select the corresponding form element to increase the user experience.
Grammar:
<label for="sex">male</label> <input type="radio" name="sex" id="sex" />
Core: The label tag's for attribute should be the same as the related element's id attribute.
<label for="username">User name:</label><input type="text" name="username" id="username"><br />
<label for="passwd">Password:</label><input type="text" name="passwd" id="passwd">
Effect:
select drop-down list
Use scenarios: On a page, if there are multiple options for the user to choose from and want to save page space, we can use the select tag control to define a drop-down list.
Grammar:
<select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> ..... </select>
Characteristic:
1. The select tag contains at least one pair of option s
2. When select = selected is defined in the option, the current item is the default selected item.
<label for="select">Origin:</label>
<select id="select">
<option>Guangdong</option>
<!-- Northeast is selected by default -->
<option selected="selected">Northeast</option>
<option>Shaanxi</option>
</select>
Effect:
textarea text field
Scenarios for use: When a user enters more, we can't use the text box form anymore. Instead, we can use the textarea tag.
In form elements, the textarea tag is a control used to define multiline text input.
With the multi-line text input control, you can enter more text, which is often used in message boards, comments.
Grammar:
<textarea rows="3" cols="20"> Text Content </textarea>
1. textarea tags make it easy to create multi-line text input boxes.
2. cols = Number of characters per line, rows = Number of lines displayed. We will not use this in actual development. We use CSS to change size.
<form>
<label for="mytextarea">Message Board:</label>
<textarea rows="5" cols="30" id="mytextarea"></textarea>
</form>
Effect:
Summary:
Form Elements We learned three groups
input Input Form Element
select drop-down form element
textarea Text Field Form Elements
All three sets of form elements should be contained within the form field and have a name attribute