Summary of learning about HTML tags and basic elements

1. Elements and tags in HTML
The element is an inclusive range defined by a single or a pair of tags. A label is a string with a less than sign (<) and a greater than sign (>) on the left and right respectively. The start tag refers to a tag that does not start with a slash (/) and contains a list of allowed attribute-value pairs. The closing tag is a tag that begins with a slash (/). For example:
<body><!—Start tag-->
<font color=”read”>Connection</font> <!—where color=”read” is the attribute - value pair. "Connection" is the content-->
</body><!—End tag-->

2. Four forms of HTML elements
Empty element<br>
Empty element with attributes<hr color=”blue”>
Element with content<title>Connection</title>
Elements with content and attributes<font color=”read”>Connection</font>
To summarize the above examples

<html>//Start symbol. It can also be parsed if there is no browser

##<head>//Start document header <title>
My name is cauthy!/ /Start the title of the document
</title>//End the title of the document
</head>//End the head of the document
<body color="red">//Start Document body
Hello World!//Content displayed by the browser
</body>//End document body
</html>//End HTML document

3. Tags related to paragraph control <palign=”#”> means paragraph, and its function is to create a paragraph. The attribute align indicates the alignment of the segments, which can be leftright justify
<br> indicates linebreak Function: line break
<hrcolor=””> indicates horizontal rule Function: inserts a horizontal line, the attribute indicates color can be used Read green can also use hexadecimal numbers, such as #ffoooo

<html> 
<head>
<title>静夜思</title>
</head> 
<body> 
<p align="center">静夜思</p>
<hr color="#ffoooo"> 
<p align="center">床前明月光，疑是地上霜。举头望明月，低头思故乡。</p> 
</body> 
</html>

4. Tags related to text display
##<center>…</center>: Center the text to display <hn align= "">...<hn>: used to point out the title of the document, n is an integer from 1 to 6, 1 represents the largest title, the attribute align represents the alignment of the title, which can be center, left right
< ;fontsize=”n” color=””>…</font>: used to set the font, size represents the font size, n can be an integer from 1 to 7, the larger the number, the larger the displayed font.
<b>…</b>: Set the text to be bold
<i>…</i>: Set the text to be italic

5. How to enter special characters In HTML documents, symbols such as non-breaking spaces, carriage returns, HTML reserved words, and some characters that do not exist in the keyboard need to be quoted. There are two types of reference in HTML: character reference and entity reference.
Character references and entity references both start with an & and end with a semicolon (;). If you are using a character reference, you need to add a # after &, followed by the decimal code or hexadecimal code of the required character (the encoding of characters in the ISO 10646 character set). If you are using an entity reference, write the character mnemonic after the &.
In HTML, spaces can be entered using full-width spaces.

6. Comments in HTML 

7. Class table - Create a numbered list Use the <ol> and <li> tags to create a numbered list. You can use the type attribute to specify the type of numbering system, A (A, B, C), a (a, b, c), I (III III), i (i ii iii) 1 (1, 2, 3) default
Use the start attribute in the <ol> tag to set the starting sequence number.
Use the value attribute in the <li> tag to change the numbering order in the list.
Create bulleted lists using the <ul> and <li> tags. The type attribute in Ul can be, disc (solid circle) square (solid square) circle (empty circle)
Use <dl> and <dt> tags to create unsigned lists, use <dd> ;Tag substitution<dt> creates an indented list.
Use the <dt> and <dd> tags simultaneously in the <dl> element to create a term list. A list item in a term list consists of two parts, the term and its description. The term is specified by the <dt> tag, and the description is specified by the <dd> tag.

<ol start="10"type="I">
<li>Mathematics
<livalue="20">Chinese
<li>Physics
</ol>
<ul type="circle">
<li>Mathematics
<li>Chinese
<li>Physics
< /ul>
<dl >
<dt>Mathematics
<dd>Chinese
<dt>Physics
<dd>Chemistry
</dl> ;

8. Table
The table uses <table border= n align=”” bgcolor=””>…< /table>, where border is the width of the table, and the default is 0, which means the width of the table is not displayed.
<caption>…</caption>: Used to define the title of the table
<tralign=”” valign=”” >…</br>: The attribute align specifies the horizontal direction of this row For its method, you can specify the vertical alignment method for leftcenter right .valign, which can be top, middle, bottom
<th>…</th>: used to set the header
<td> ;...</td>: used to define cells

<html> 
<head><title>表格</title></head> 
<body> 
<table border="5"align="center" bgcolor="bule"> 
<caption>考试成绩</caption> 
<tr align="center"valign="middle"> 
<th>语文</th> 
<th>数学</th> 
<th>英语</th> 
</tr> 
<tr align="center"valign="middle" > 
<td>80</td> 
<td>70</td> 
<td>60</td> 
<tr align="center"valign="middle" > 
<td>60</td> 
<td>70</td> 
<td>80</td> 
</table> 
</body> 
</html>

9. Form creation
<form method=”get or post ”action=”URL”>: The attribute method specifies when sending data to the server The HTTP method used can be the get or post method. Get is the default method. When the get method is used to submit a form, the submitted data is appended to the end of the URL (specified in the attribute action) and sent to the server as part of the URL. For example, we specify the action as reg.asp, When the form is submitted, in the browser address, we will see, http://localhost:8080/reg.asp?user=zhangsan&pwd=1234
The Post method is to send the information in the menu as a data block To the server, no matter which method is used, the encoding of the data is the same, and the format is: name1=value1&name2=value2
The attribute action specifies the address of the script that processes the form, that is, after the form is submitted to the server , who will handle it, specify the URL of the handler in the action.
<inputtype=”” name=”” size=”” value=””>: type specifies the type of control to be created. The name attribute is used to specify the name of the control. The server-side script that processes the form can obtain the form data represented by the name-value pair. Using the name, the corresponding value can be retrieved. The Name property is not displayed in the form, and the size property is used to set the initial width of the controls in the form. The value attribute specifies the initial value of the control.
Single-line text input control (type="text") Submit button (type="submit")
Reset button (type="rest") Password input control (type="password")
Single Select button (type=”radio”) Check box (type=”checkbox”) Hidden control (type=”hidden”)
Create multi-line text input<textarea name=”” rows=”” cols=” ” >…</textarea>
The following example uses a table to control the form

<html> 
<head>
<meta charset="utf-8"> 
<title>表单</title>
</head> 
<body> 
<form method="get"action=""> 
<table border="0"> 
<tr valign="middle"></tr> 
<td>用户名：</td> 
<td><input type="text" size="20" name ="user"></td> 
<tr align="left" valign="middle"></tr> 
<td>密码：</td> 
<td><input type="password"></td> 
<tr align="left" valign="middle"> </tr> 
<td>兴趣</td> 
<td><input type="checkbox" name="interest" value="football">足球 
<input type="checkbox" name="interest"value="basketball">篮球 
</td> 
<tr align="left"valign="middle"></tr> 
<td>性别</td> 
<td><input type="radio" name="sex" checked value="1">男 
<input type="radio" name="sex" value="0">女 
</td> 
</select></td> 
<tr align="left" valign="middle"></tr> 
<tdvalign="top">个人简介：</td> 
<td><textarea name="personal" rols="5" cols="20">个人简介</textarea>
</td> 
<tr align="left"valign="middle"></tr> 
<td></td> 
<td><input type="hidden" value="001" name="id"></td> 
<tr align="left" valign="middle"></tr> 
<td></td> 
<td><input type="reset" value="重置"><input type="submit" value="提交"></td> 
</table> 
</form> 
</body> 
</html>

10. Hyperlink

##<a href="URL">...Link text</a> <a href="form.html">Current directory</a>
< ahref=../”form.html”>The directory one level above the current directory</a>
<ahref=”E://form.html”>Absolute path</a>
<ahref=”http://www.baidu.com”>World Wide Web Address</a>

##11. Embed image

Continuing Learning