HTML basic Elements (III)

Last Update:2016-08-04 Source: Internet

Author: User

Tags uppercase letter

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1.HTML Special Characters

Some characters have special meanings in HTML, such as the less than sign (<) and the greater than sign (>) for defining HTML tags. If we want the browser to display these characters correctly, we must insert the character entities in the HTML source.

Another situation is that HTML automatically truncates extra spaces, and if you enter 10 spaces in a document, the HTML will remove 9 of them. Then, you need to use a character entity to implement any space.

Character entities are used to insert special characters into an HTML document in two ways: entity characters and entity numbers , which generally use solid characters .

　　Note : The entity characters are case sensitive!

Common special characters:
Special characters	Entity characters	Entity number
Space		& #160;
Less than sign (<)	<	& #60;
Greater than sign (>)	>	& #62;
and No. (&)	&	& #38;
Quotation marks (")	"	& #34;
Copyright (©)	©	& #169;
Registered Trademark (®)	®	& #174;
Multiplication sign (x)	×	& #215;
Division sign (÷)	÷	& #247;

2. List

　　Lists are used to organize information on Web pages, and HTML can create three types of lists: unordered lists , ordered tables , and custom lists .

1) unordered list

　　Code structure:

<ul>    <Li>......</Li>    <Li>......</Li>    <Li>......</Li></ul>

　　　　* The value of the unordered list's type property is:disc("Default" solid circle),Circle(Hollow circle),Square(square), Used to set the markup in front of the item.

2) list with sequence

　　　　An ordered list uses a numeric or alphabetic system to organize the information contained in the list.

Code structure:

<ol>    <Li>......</Li>    <Li>......</Li>    <Li>......</Li></ol>

* The value of the type attribute of the sequence table is:1("default" number),a(lowercase letter),a(uppercase letter),i(lowercase roman numerals),I (uppercase Roman numerals), used to set the markers in front of the item.

* The value of thestart property is: The starting value of the sort.

3) custom list

　　　　A 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> is the head of the list, often used for headings.

3. Forms

　　The table consists of a <table> tag and one or more tr,th , or TD elements. Cells can contain text, pictures, lists, forms, tables, and so on.

*<table> definition table.

*<tr> Define the rows of the table.

*<th> defines the header, which is usually used in the first row of the table, and the contents are automatically added black .

*<td> define cells.

The code is as follows: (A quick way to create a table with 2 rows and 2 columns:table>tr*2>td*2)

<TableBorder= "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
Property	Value	Description
Width	px,%	Specify the width of the table
Height	px,%	Specify the height of the table
Border	px,%	Specify the width of the table border
cellpadding	Digital	Specify the white space between the border and the content
CellSpacing	Digital	Specify the white space between cells
Align	Left,center,right	Specify alignment
valign	Top,middle,bottom	Vertical arrangement Mode
colspan	Digital	Merge column cells
RowSpan	Digital	Merge row cells

* Set the merge border model for the table:

　　Effect Comparison chart:

The reference code is as follows:

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Document</title>    <styletype= "Text/css">Table{Border-collapse:collapse;        }TABLE,TD{Border:1px solid #000;        }    </style></Head><Body>    <P>To set the merge border model for a table:</P>    <Table>        <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></Body></HTML>

HTML basic Elements (III)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More