HTML - Summary of basic knowledge points

Keywords: html

HTML summary

1, Introduction to HTML
1.HTML
HTML(HyperText Markup Language), a hypertext markup language, uses various tags to represent the structure of documents and information identifying hyperlinks.
2.HTML document
html documents contain tags and text content, and html documents are also called web pages.
2, HTML basic structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Rookie tutorial( runoob.com)</title>
<body>

</body>
</html>

<! DOCTYPE HTML > declared as an HTML document
<html>Is the root element of the HTML page
< head > contains the metadata of the document
< title > the title displayed in the browser title bar
<body>It is the main body of the web page and the main display part of the web page content
be careful:
1. Marks are generally used in pairs, including start marks and end marks
2. Tags can be nested, but not cross used
3. Multiple attributes are separated by spaces. Different tag attributes may be the same or different
4. The tags used in the attribute can only affect the content of the subject matter
3, HTML
1. Title label

<h1>This is Title 1</h1>
<h2>This is Title 2</h2>
<h3>This is title 3</h3>
<h4>This is title 4</h4>
<h5>This is title 5</h5>
<h6>This is title 6</h6>

The title tag makes the font bold with auto wrap
Among levels 1-6, the title of level 1 is the largest

2. Paragraph labels

 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>

Paragraph labels display the content in sections and wrap the line automatically

3. Line feed label

<br/>Is a single tag, no end tag is required

4. Link label

<a></a>Hyperlink marker

Property: herf sets the access address of the hyperlink

5. Image label

<img>It is a single label and has no end tag

Property: src sets the path of the picture
Width and height set the width and height of the picture

6. Format label
Text formatting includes bold font, italic text, computer automatic output, subscript and superscript

<b>Bold font</b>
<big>Enlarge font</b>
<em>Italic Font</em>
<i>Italic Font</i>
<small>Reduce font</small>
<sub>subscript</sub>
<sup>Superscript</sup>
<del>Delete word</del>
<ins>Insert word</ins>

7. Note label

<!--notes-->

8. Form label

<table>Define table
<th>Defines the header of the table
<tr>Define the rows of the table
<td>Define table cells
<caption>Define table title
<colgroup>Define groups of table columns
<col>Define attributes for table columns
<thead>Defines the header of the table
<tbody>Defines the body of the table
<tfoot>Defines the footer of the table

9. List label

<ol>Defined sequence table
<ul>unordered list 
<li>Define list items
<dl>Definition list
<dt>Custom list items
<dd>Defines the description of the custom list item

10.

and

<div>Element is a block level element that can be used to combine other elements HTML Another common use of element containers is document layout

<span>Element is an inline element. It can be used as a container of the composition book and has no specific meaning

11. Form label

Form elements allow users to enter content in a form
For example:

Text areas
Radio buttons
Check box (Checkboxs)
Drop down list
Submit button

<form>Define forms for user input
<input>Define input fields
<textarea>Define text fields (A multiline input control)
<label>Defined <input> The label of the element, usually the input title
<fieldset>Defines a set of related form elements and contains them with an outline
<legend>Defined <fieldset> The title of the element
<select>A drop-down list of options is defined
<optgroup>Define option groups
<option>Define the options in the drop-down list
<button>Define a click button

12. Script label

<script>Client script defined
<noscript>Defined text that does not support script browser output

13.value attribute

The value attribute is used in submit, reset, and customize buttons

input Tagged value Property is used by input Tagged type Determined by the value of the property

When type The value of is button,reset,submit When one of the value The value of the property represents the text displayed on the button

When type The value of is text,password,hidden When one of the value The value of the property represents the initial value displayed in the input box, which can be changed, and when the form is submitted, value The value of the property is sent to the server (both the initial value and the value submitted to the server)

When type The value of is checkbox,radio When one of the value The value of the property represents the value submitted to the server

The value used in the button refers to the text to be displayed on the button, such as "OK", "delete", etc
The value of the check box refers to the value of the check box
The value of the radio box is the same as that of the check box
The value used in the drop-down menu is the value of each sub item in the list
The value used in the hidden field is the content displayed in the box

14.name attribute

The name attribute specifies the name of the input element

The name attribute is used to identify the form data submitted to the server, or to reference the form data through JavaScript on the client

Only the form elements with the name attribute set can pass their values when submitting the form, because the server obtains the data submitted by the form through the value of the name attribute of the form element. Without the name attribute, the value submitted by the form element to the server cannot be obtained
nature
**4, Web job source code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marriage!(runoob.com)</title>
</head>
<body>
<h4>Youth doesn't often exist. Hurry up and fall in love</h4>
<table>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="sex" value="male">male<input type="radio" name="sex" value="female">female
</td>
</tr>
<tr>
<td>birthday</td>
<td>	
<select>
<option>--Please select a year--</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<optio>1998</option>
</select>
<select>
	<option>--Please select month--</option>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	<option>8</option>
	<option>9</option>
	<option>10</option>
	<option>11</option>
	<option>12</option>
<select>
<select>
	<option>--Please select a day--</option>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	<option>8</option>
	<option>9</option>
	<option>10</option>
	<option>11</option>
	<option>12</option>
	<option>13</option>
	<option>14</option>
	<option>15</option>
	<option>16</option>
	<option>17</option>
	<option>18</option>
	<option>19</option>
	<option>20</option>
	<option>21</option>
	<option>22</option>
	<option>23</option>
	<option>24</option>
	<option>25</option>
	<option>26</option>
	<option>27</option>
	<option>28</option>
	<option>29</option>
	<option>30</option>
	<option>31</option>
</select>
</td>
</tr>
<tr>
<td>Location</td>
	
	<td>
	<input type="text" name=" ">
</td>
</tr>
<tr>
<td>marital status</td>
	<td>
	<input type="radio" name="marry" value="Unmarried">Unmarried
	<input type="radio" name="marry" value="Married">Married
	<input type="radio" name="marry" value="Divorced">Divorced

</td>
</tr>
<tr>
<td>education</td>
<td>
	<input type="text" name=" ">
</td>
</tr>
<tr>
<td>Favorite type</td>
<td>
	<input type="checkbox" name="type" value="Charming">Charming
	<input type="checkbox" name="type" value="lovely">lovely
	<input type="checkbox" name="type" value="little fresh meat">little fresh meat
	<input type="checkbox" name="type" value="Old Bacon">Old Bacon
	<input type="checkbox" name="type" value="I like all of them">I like all of them
</td>
</tr>
<tr>
<td>self-introduction</td>
<td>
<textarea>self-introduction</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit"value="Free registration">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox">I agree to the terms of registration and membership criteria
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#"> I'm a member, log in now</a>
</td>
</tr>
<tr>
<td></td>
<td>
<ul>
<h5>I promise</h5>
<li>Over 18 years old, single</li>
<li>Take a serious attitude</li>
<li>Sincerely looking for the other half</li>
</ul>
</td>
</tr>
</body>
</html>

Posted by inversesoft123 on Fri, 29 Oct 2021 22:25:36 -0700

Programmer Group

HTML - Summary of basic knowledge points

HTML summary

Hot Keywords