Basic HTML elements (3) and html elements
1. Special HTML characters
Some characters have special meanings in HTML. For example, the lower sign (<) and the greater sign (>) are used to define HTML tags. If we want the browser to correctly display these characters, We must insert character entities in the HTML source code.
In another case, HTML automatically removes unnecessary spaces. If you input 10 spaces consecutively in the document, HTML removes 9 of them. The character entity is used to implement any space.
Character entities are used to insert special characters into HTML documents in two ways:Entity characterAndEntity ID, Generally usedEntity character.
Note::Entity characterCase Sensitive!
Common special characters:
Special characters |
Entity character |
Entity ID |
Space |
& Nbsp; |
& #160; |
Minor sign (<) |
& Lt; |
& #60; |
Greater than (>) |
& Gt; |
& #62; |
And number (&) |
& Amp; |
& #38; |
Quotation marks (") |
& Quot; |
& Amp; #34; |
Copyright (©) |
& Copy; |
& #169; |
Registered Trademark (®) |
& Reg; |
& #174; |
Multiplication number (×) |
& Times; |
& #215; |
Division (distinct) |
& Divide; |
& #247; |
2. List
Lists are used to organize information on webpages. HTML can create three types of lists:Unordered list,Ordered listAndCustom list.
1)Unordered list
Code structure:
<ul> <li>……</li> <li>……</li> <li>……</li></ul>
*Unordered listTypeAttribute values include:Disc("Default" solid circle ),Circle(Hollow circle ),Square(Square), used to set the tag before the project.
2)Ordered list
An ordered list uses a number or a letter system to organize information contained in the List.
Code structure:
<ol> <li>……</li> <li>……</li> <li>……</li></ol>
* Ordered listTypeAttribute values include:1("Default" number ),A(Lowercase letters ),A(Uppercase letters ),I(Lowercase roman numerals ),I(Upper-case roman numerals), used to set the tag before the project.
*StartAttribute values are sorted.Start PointValue.
3)Custom list
The definition list is used to organize terms and their definitions.
Any information that contains multiple terms and corresponding interpretations can be organized using a custom list.
Code structure:
<dl> <dt>……</dt> <dd>……</dd> <dd>……</dd></dl>
*<Dt>YesHeader, Often used as the title.
3. Table
Table<Table>Tag and one or moreTr,ThOrTdElement. Cells can contain text, images, lists, forms, tables, and so on.
*<Table>Define a table.
*<Tr>Defines the rows of a table.
*<Th>Define the header, indicatingTitleIs generally used in the first row of the table.Bold and black.
*<Td>Define cells.
The Code is as follows: (create a quick table with two rows and two columns:Table> tr * 2> td * 2)
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Description
Attribute |
Value |
Description |
Width |
Px, % |
Specify the table width |
Height |
Px, % |
Table height |
Border |
Px, % |
Specify the Border width of a table |
Cellpadding |
Number |
Blank between border and content |
Cellspacing |
Number |
Blank between cells |
Align |
Left, center, right |
Specify alignment Mode |
Valign |
Top, middle, bottom |
Vertical arrangement |
Colspan |
Number |
Merge column cells |
Rowspan |
Number |
Merge row Cells |
*Set the merge border model for the table:
Comparison chart:
<! DOCTYPE html>