Brain figure as follows

1. The form

1.1 Form Label

: table tag; Double label.

2. : line tag; Double label.

3.< TD > : cell tag; Double label.

Summary: Tables are defined by the

tag. Each table has several rows (defined by the < TR > tag), and each row is divided into several cells (defined by the < TD > tag). The letter TD refers to tabular data, the contents of data cells. Data cells can contain text, images, lists, paragraphs, forms, horizontal lines, tables, and so on. Implementation code:

< HTML > < head > < meta charset = "utf-8" > < title > < / title > < / head > < body > < table > < tr > < td > name < / td > < td > gender < / td > < td > age < / td > < / tr > Lau, a < tr > < td > < / td > < td > m < / td > < td > and < / td > < / tr > < tr > < td > < / td > dawn male < / td > < td > < td > 55 < / td > < / tr > < tr > < td > Aaron kwok < / td > < td > m < / td > 54 < / td > < td > < / tr > < tr > < td > - < / td > < td > m < / td > < td > 55 < / td > < / tr > < / table > < / body > < / HTML >Copy the code

The results are as follows:

4. : table header label; Default add black, bold, center; Double label. The code is as follows:

< HTML > < head > < meta charset = "utf-8" > < title > < / title > < / head > < body > < table > < tr > < th > name < / th > < th > gender < / th > < th > age < / th > < / tr > Lau, a < tr > < td > < / td > < td > m < / td > < td > and < / td > < / tr > < tr > < td > < / td > dawn male < / td > < td > < td > 55 < / td > < / tr > < tr > < td > Aaron kwok < / td > < td > m < / td > 54 < / td > < td > < / tr > < tr > < td > - < / td > < td > m < / td > < td > and < / td > < / tr > < / table > < / body > < / HTML >Copy the code

The results are as follows: 5.<caption>: Table title; Display external center by default; Double header. The code is as follows:

<html>

<body>

<h4>This table has a title and a thick border:</h4>

<table >
<caption>The title of my</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>

Copy the code

The results are as follows:

Not often used (understand)

6. : structure header; Double label.

7. : structure; Double label.

8. : structure bottom; Double label.

1.2 Table Attributes

1. Border: Border of the table

2. Width: the width

3. Height: height

4. Cellspacing: The spacing between cells

5. Align: left/center/right Note: when centering the table, the entire table will be centered (text will not be centered)

6. Cellspadding: The distance between cells and content

The code is as follows:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<! Align = center border= border cellspacing= distance between cell and text -->
		<table align="center" border="1" cellspacing="0" cellpadding="20" width="500px" height="240px">
			<tr><th>The name</th> <th>gender</th> <th>age</th></tr>
			<tr><td>Andy lau</td> <td>male</td> <td>56</td></tr>
			<tr><td>The dawn</td> <td>male</td> <td>55</td></tr>
			<tr><td>Aaron kwok</td> <td>male</td> <td>54</td></tr>
			<tr><td>Jacky cheung</td> <td>male</td> <td>53</td></tr>
		</table>
	</body>
</html>

Copy the code

Running results:

7. Colspan: column merge 8. Rowspan: row merge

The code is as follows:

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="500" height="249" border="1" cellspacing="0">
		<tr>
			<td></td>
			<td colspan="2"></td>
			<! <td></ TD > -->
		</tr>
		<tr>
			<td rowspan="2"></td>
			<td ></td>
			<td></td>
		</tr>
		<tr>
			<! <td></ TD > -->
			<td></td>
			<td></td>
		</tr>
		<! Rowspan =" Number of merged cells "-->
		<! Colspan =" Number of merged cells "-->
		<! -->
		</table>
	</body>
</html>

Copy the code

Running results:

List 2.

1. Unordered lists

<ul><li></li></ul>
Copy the code

The code is as follows:Copy the code

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title>Unordered list</title>
	</head>
	<body>
		<h4>The food you like</h4>
		<ul>
			<! Unordered list items have no order, they are parallel, ul can only put li, li can put any tag -->
			<li>durian</li>
			<li>Stinky tofu</li>
			<li>Herring canned</li>
		</ul>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</body>
</html>

Copy the code

Running results:

2. Ordered lists

<ol><li></li></ol>
Copy the code

The code is as follows:Copy the code

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title>An ordered list</title>
	</head>
	<body>
		<h4>Yummy ranking</h4>
		<ol>
			<! -- ol can only be nested inside li, li can be nested inside any -->
			<li>Durian 1 w</li>
			<li>Stinky tofu 1 k</li>
			<li>Canned herring 100</li>
		</ol>
	</body>
</html>

Copy the code

Running results:

3. Customize a list

<dl><dt></dt><dd></dd></dl>
Copy the code

The code is as follows:Copy the code

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title>Custom list</title>
	</head>
	<body>
		<dl>
			<! -- There is no limit to the number of dd and dt in a dt -->
			<! -- DL tag is used to define description list (or definition list) DT (define item/name) DD (Describe item/name) -->
			<dt>Pay attention to our</dt>
			<dd>Sina weibo</dd>
			<dd>The official WeChat</dd>
			<dd>Contact us</dd>
		</dl>
	</body>
</html>

Copy the code

Running results:

3. The form

3.1 input attribute

A text box, a password box, a radio button, a checkbox, a button, a common button, a reset button, a form, and a submit button. Submit button 8. SRC 9. File button Upload image ## ** Attribute Description ** name attribute 1. Send background...... 2. You can select only one name for the radio buttonCopy the code

Value: indicates the text displayed by default in the text box

Checked: By default, you can write an attribute or attribute name = attribute value

1. Please enter < input type=”text”>

2. ` < label for = "a" > ` please enter ` < / label > ` ` < input type = "text" id = "a" > ` code is as follows:Copy the code

<! DOCTYPEhtml>
<head>
    <meta charset="UTF-8">
    <title>Input form element</title>
</head>
<body>
    <form action="xxx.php" method="get">
         <! The user can enter any text in the text box -->User name:<input type="text" name="username" value="Please enter user name" maxlength="6">   <br> 
        <! The user cannot see the entered password -->Password:<input type="password" name="pwd" >  <br> 
        <! -- Radio radio button allows multiple selections -->
        <! -- name is the name of the form element. The gender radio button must have the same name.
        <! -- Radio buttons and check boxes can be set to checked properties, which are checked when the page is opened by default -->Gender: male<input type="radio" name="sex" value="Male"> 女  <input type="radio" name="sex" value="Female" checked="checked">transvestite<input type="radio" name="sex" value="Freak">   <br> 
        <! -- Checkbox allows multiple selections -->Hobbies: Eating<input type="checkbox" name="hobby" value="Eat">Go to bed<input type="checkbox" name="hobby">Play doug<input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <! Click the submit button to submit the value of the form element in the form field to the background server.
        <input type="submit" value="Free registration">
        <! The reset button restores the original default state of the form element -->
        <input type="reset" value="Fill in again">
        <! -- Common button button later combined with JS collocation -->
        <input type="button" value="Obtain SMS verification code"> <br>
        <! -- File domain Application Scenario -->Upload profile picture:<input type="file" >
    </form>
</body>
</html>
Copy the code

Running results:

3.2 text field

: user message; Double label; You can set the number of characters displayed on each line. After several lines of text are displayed, you need to slide down to see the following text.

Attribute Description:

Cols =”50″ : each line contains 50 characters.

Rows =”5″ : displays 5 rows.

The code is as follows:

<! DOCTYPEhtml>
<head>
    <meta charset="UTF-8">
    <title>Textarea text field</title>
</head>
<body>
    <form>Feedback today:<textarea cols="50" rows="5">I'll leave a message</textarea>
    </form>
</body>
</html>
Copy the code

3.3 Drop-down form

Properties:

Selected: Changes the content to the default selected content.

The code is as follows:

<! DOCTYPEhtml>
<head>
    <meta charset="UTF-8">
    <title>Select dropdown form</title>
</head>
<body>
    <form>Native place:<select>
        <option>shandong</option>
        <option>Beijing</option>
        <option>tianjin</option>
        <option selected="selected">Mars</option>
    </select>
</form>
</body>
</html>
Copy the code

Running results:

Day two is over. Day to day. Go!

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Teach yourself the front end – HTML day two

Brain figure as follows

1. The form

1.1 Form Label

1.2 Table Attributes

List 2.

3. The form

3.1 input attribute

3.2 text field

3.3 Drop-down form

Teach yourself the front end – HTML day two

Brain figure as follows

1. The form

1.1 Form Label

1.2 Table Attributes

List 2.

3. The form

3.1 input attribute

3.2 text field

3.3 Drop-down form

Related Posts

Some attempts at static page code highlighting

Typescript type anchoring in complex scenarios (2) —– generics and type derivation

HTTP protocol principles + practice