The HTML < font > tag

Definitions and Usage

<font> specifies the font, font size, and font color for the text.

The instance

Specify text font, size, and color:

1 <font size="3" color="red">This is some text! </font> 2 <font size="2" color="blue">This is some text! </font> 3 <font face="verdana" color="green">This is some text! </font>Copy the code

Differences between HTML and XHTML

In HTML 4.01, the font element is deprecated.

Demonstration effect

The HTML < ul > tag

Definitions and Usage

The <ul> tag defines an unordered list.

The instance

Unordered HTML list:

1 <ul>
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ul>
Copy the code

Differences between HTML and XHTML

In HTML 4.01, the “compact” and “type” attributes of ul elements are deprecated.

In the XHTML 1.0 Strict DTD, the “compact” and “type” attributes of ul elements are not supported.

Demonstration effect

The HTML < ol > tag

Definitions and Usage

The < OL > tag defines an ordered list.

The instance

Ordered HTML list:

1 <ol>
2   <li>Coffee</li>
3   <li>Tea</li>
4   <li>Milk</li>
5 </ol>
Copy the code

Differences between HTML and XHTML

In HTML 4.01, the “compact”, “start”, and “type” attributes of ol elements are deprecated.

In the XHTML 1.0 Strict DTD, the “compact”, “start”, and “type” attributes of OL elements are not supported.

Demonstration effect

The HTML < dl > tag

Definitions and Usage

The < DL > tag defines the definition List.

The < DL > tag is used to combine <dt> (defining items in the list) and < DD > (describing items in the list).

The instance

1 < DL > 2 <dt> computer </dt> 3 < DD > Instruments used to calculate... . </dd> 4 <dt> display </dt> 5 < DD > A device that displays information visually... . </dd> 6 </dl>Copy the code

Differences between HTML and XHTML

NONE

Demonstration effect

The HTML < hr > tag

Definitions and Usage

The <hr> tag creates a horizontal line in the HTML page.

A horizontal rule can visually separate a document into sections.

The instance

Headings and paragraphs separated by horizontal lines:

1 <h1>This is header 1</h1>
2 <hr />
3 <p>This is some text</p>
Copy the code

Differences between HTML and XHTML

In HTML, the <hr> tag has no closing tag.

In XHTML, <hr> must be properly closed, such as <hr />.

In HTML 4.01, all render attributes of the HR element are deprecated.

In the XHTML 1.0 Strict DTD, all render attributes of hr elements are not supported.

Demonstration effect

 

An HTML < table > tag

Definitions and Usage

The <table> tag defines the HTML table.

A simple HTML table consists of a table element and one or more TR, TH, or TD elements.

The TR element defines table rows, the TH element defines table headers, and the TD element defines table cells.

More complex HTML tables may also include caption, Col, colGroup, Thead, Tfoot, and tBody elements.

The instance

A simple HTML table with two rows and two columns:

 1 <table border="1">
 2   <tr>
 3     <th>Month</th>
 4     <th>Savings</th>
 5   </tr>
 6   <tr>
 7     <td>January</td>
 8     <td>$100</td>
 9   </tr>
10 </table>
Copy the code

Differences between HTML and XHTML

In HTML 4.01, the “align” and “bgcolor” attributes of the table element are deprecated.

In the XHTML 1.0 Strict DTD, the “align” and “bgColor” attributes of the table element are not supported.

Demonstration effect

The HTML < caption > tag

Definitions and Usage

The caption element defines the table title.

The Caption tag must follow the table tag. You can define only one title per table. Usually this heading will be centered above the table.

The instance

1 <table border="6"> 2 <tr> My caption </ TR >3 < TR > 4 < TD >100</ TD > 5 < TD >200</ TD > 6 < TD >300</ TD > 7 </tr> 8 <tr> 9 <td>400</td> 10 <td>500</td> 11 <td>600</td> 12 </tr> 13 </table>Copy the code

Differences between HTML and XHTML

In HTML 4.01, the caption element’s align attribute is deprecated.

In the XHTML 1.0 Strict DTD, the caption element’s align attribute is not supported.

Demonstration effect

The HTML < tbody > tags

Definitions and Usage

< tBody > labels the body of the table (body). This tag is used to combine the body content of an HTML table.

The tbody element should be used in conjunction with the thead and tfoot elements.

The thead element is used to group header content in HTML tables, while the tfoot element is used to group table note (footer) content in HTML tables.

Note: If you use thead, tfoot, and tBody elements, you must use all of them. They appear in the order thead, tfoot, and tBody so that the browser can render the footer before receiving all the data. You must use these tags inside the table element.

Tip: By default these elements do not affect the layout of the table. However, you can use CSS to make these elements change the appearance of the table.

A detailed description

The thead, Tfoot, and TBody elements give you the ability to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a total row at the bottom. This partitioning gives the browser the ability to support scrolling of the body of the table independent of the table title and footer. When a long table is printed, the table header and footer of the table can be printed on each page containing table data.

The instance

HTML table with thead, tBody, and tfoot elements:

 1 <table border="1">
 2   <thead>
 3     <tr>
 4       <th>Month</th>
 5       <th>Savings</th>
 6     </tr>
 7   </thead>
 8 
 9   <tfoot>
10     <tr>
11       <td>Sum</td>
12       <td>$180</td>
13     </tr>
14   </tfoot>
15 
16   <tbody>
17     <tr>
18       <td>January</td>
19       <td>$100</td>
20     </tr>
21     <tr>
22       <td>February</td>
23       <td>$80</td>
24     </tr>
25   </tbody>
26 </table>
Copy the code

Differences between HTML and XHTML

NONE

Demonstration effect

The HTML < a > tag

Definitions and Usage

The <a> tag defines hyperlinks that are used to link from one page to another.

The most important attribute of the <a> element is the href attribute, which indicates the target of the link.

In all browsers, the default appearance of links is:

  • Unvisited links are underlined and blue
  • Links that have been visited are underlined and purple
  • Active links are underlined and red

Tip: You may have noticed that links within the W3School site look very different from the default link look. You can use CSS pseudo-classes to add complex and varied styles to text hyperlinks.

The instance

Hyperlinks to W3School:

<a href="http://www.cnblogs.com/ECJTUACM-873284962/">Angel_Kitty</a>
Copy the code

Differences between HTML 4.01 and HTML5

In HTML 4.01, <a> tags can be hyperlinks or anchors. In HTML5, the <a> tag is always a hyperlink, but if the href attribute is not set, it is just a placeholder for the hyperlink.

HTML5 provides some new attributes, and some HTML 4.01 attributes are no longer supported.

Demonstration effect