Web Front end--html Basic Note No.3

Use UL to add a list of news messages

Ul-li is a list of information that has no back-and-forth order .

< ul >  < Li > Information </li>  <li> Information </ Li >    ...... </ ul >

Example:

<ul>  <Li>Wonderful teenager</Li>  <Li>Beauty suddenly appears</Li>  <Li>The melody that touches the heart</Li></ul>

The default style that Ul-li displays in a Web page is typically: Each li comes with a dot before it, as shown in:

Use OL to add book sales rankings

Grammar:

< ol >   < Li > Information </li>   <li> Information  </li>    ... </ ol >

Example:

Here is a hot course download leaderboard:

<ol>   <Li>Front-end development interview Heart</Li>   <Li>0 Basic Learning HTML</Li>   <Li>JavaScript full guide</Li></ol>

<ol>The default style that is displayed in a Web page is typically: Each item comes <li> with an ordinal, and the sequence number defaults from the 1 beginning, as shown in:

Understanding the role of div in typesetting

Grammar:

<div>…</div>

Determine the logical part:

What is the logical part? It is a set of elements that are related to each other on a page. such as the independent section of the page, is a typical logical part. As shown: The section marked with a red border in the figure is a logical part, and the label can be used <div> as a container.

Name the div to make the logic clearer

< Div   ID = "section name" >... </ Div >

Table tags---recognize tables on a Web page

To display the above table effect on a webpage, you can use the following code:

1, <table>...</table>: The entire table <table> starts with a marker and ends with a </table> marker.

2, <tbody>...</tbody>: When the table content is very long, the form will download a little bit, but if the <tbody> tag is added, the form will be displayed after all the contents of the table have been downloaded. Code in the right-hand code editor.

3, <tr>...</tr>: One row of the table, so there are several pairs of TR tables.

4, <td>...</td>: A cell in a table that contains several pairs in a row <td>...</td> , stating that there are several columns in a row.

5, <th>...</th>: A cell in the head of a table, table header.

6, the number of columns in the table, depending on the number of data cells in a row.

The default style shown in the browser for the above code is:

Small summary:

1, table table before adding CSS style, in the browser display is no table line

2, the table header, that is, the text in the th tag is bold by default and centered

Caption tags, adding titles and summaries to the table

Summary

The content of the summary is not displayed in the browser. Its role is to increase the readability of the table (semantic), so that the search engine to better understand the table content, but also to enable screen readers to better help special users to read the table content.

Syntax:<table summary="表格简介文本">

Title

Used to describe the contents of the table, where the caption is displayed: above the table.

Syntax:

<Table>    <caption>Title text</caption>    <TR>        <TD>...</TD>        <TD>...</TD>... ..</TR>... ..</Table>

Web Front end--html Basic Note No.3