Home > Others

HTML Basics---Knowledge label (UL,OL,DIV,TABLE,CAPTION,DL,DT) __ Database

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
One: Use UL, add no sequence table (unordered list) use the Ul-li tag to complete it. Ul-li is a list of information that is not in order. Li is the abbreviation for the English list item 
<body>
<ul>
    <li> Perfect life </li>
    <li> Blue Lotus </li>
    <li> swing </ li>
</ul>
</body>
Display effect:

quickly write a UL format in Webstorm

Ul>li (then press the TAB key)
Meaning: Generate a pair of UL tags, and then in this to the UL tag and then generate a pair of Li tags

<ul>
    <li></li>
</ul>

Ul>li*3 (then press the TAB key)
Meaning: Generate a pair of UL tags, and then in this on the UL tag to generate 3 pairs of Li tags

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
Second: Use OL, add a sequence table (ordered list) <ol> The default style displayed on the Web page is typically: each <li> has its own ordinal number, which starts with 1 
<body>
<ol>
    <li> Perfect life </li>
    <li> Blue Lotus </li>
    <li> swing </ li>
</ol>
</body>
Display effect:

Three: Div typesetting In the process of Web page production, you can divide some independent logic parts, put them in a <div> tag, the function of this <div> tag is equivalent to a container. 

<div style= "Color:aqua; Background-color:chocolate ">
    
 
Display effect: 

Four: Name the div to make the logic clearer to make the logic clearer, we can set a name for this independent logical part, with the id attribute to provide a unique name for <div>, just as each of us has an ID number. 


<div id= "header" style= "Color:aqua; Background-color:chocolate ">
    
 
Display effect: 

Five: Table label, making table Create a table of four elements table, tbody, tr, TH, TD <table>...</table>: The entire table begins with the <table> tag, and the </table> tag ends. <tbody>...</tbody>: If you do not add <thead><tbody><tfooter>, the table table is not displayed until it is finished loading. In addition to these table structures, Tbody contains the contents of the row to download the first display, do not have to wait for the end of the table after the display, and if the table is very long, with tbody segmentation, can be part of the display. (Popular understanding table can be displayed according to the structure block, not after the entire table is loaded.) <tr>...</tr>: A row of the table, so there are several rows of the TR table. <td>...</td>: A cell in a table that contains several pairs of <td>...</td> in a row, and shows several columns in a row. <th>...</th>: A cell of the head of a table, a table header. The number of columns in the table depends on the number of data cells in a row. The table table is displayed in the browser as a header without a table line before adding a CSS style, meaning that the text in the th label defaults to bold and centered


<table>
    <tbody>
    <tr>
        <th> name </th>
        <th> class </th>
        <th> Age </th>
    </tr>
    <tr>
       <td> xiaoming </td>
       <td>2 class </td>
       <td>12 years </td>
    </tr>
    <tr>
        <td> Xiao Li </td>
        <td>1 class </td>
        <td>11 years </td>
    </tr>
    </tbody>
</table>
 
Display effect: 

Six: Use CSS styles to add a border to a table


<style>
    Table tr td,th{border:1px solid #000}
</style>

<table>
    <tbody>
    <tr>
        <th> name </th>
        <th> class </th>
        <th> age </th>
    </ tr>
    <tr>
       <td> xiaoming </td>
       <td>2 class </td>
       <td>12-Year-old </td>
    </tr>
    <tr>
        <td> Xiao Li </td>
        <td>1 class </td>
        <td>11-Year-old </td>
    </tr>
    </tbody>
</table>
 
Display effect: 

Seven: Caption tags add captions 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 better read the content of the table, but also to enable screen readers to better help special users read the table content. Syntax: <table summary= "Table Introduction text" > title: To describe the contents of the table, the title of the display position: above the table. Syntax:


<table>
    <caption> title text </caption>
    <tr>
        <td>...</td>
        <td> ...</td> ...
    </tr> ...
</table>
 

<table summary= "Class Information table" >
    <caption> table title </caption>
    <tbody>
    <tr>
        <th> name </th>
        <th> class </th>
        <th> age </th>
    </tr>
    <tr >
       <td> xiaoming </td>
       <td>2 class </td>
       <td>12 </td> </tr>
    <tr>
        <td> Xiao Li </td>
        <td>1 class </td>
        <td>11-Year-old </td>
    </tr>
    </tbody>
</table>
 
Display effect: 

Eight: Defining the list Add a list semantics to a data, first define all the headings in the list by using the DT tag, and then add descriptive information to each heading via the DD tab. Syntax information:


<body>
<dl>
    <dt> mobile </dt>
    <dd>iPhone</dd>
    <dd> Huawei, OPPO, Samsung </dd>
    <dt> computer </dt>
    <dd>mac, win</dd>
</dl>
</body>
DT is the abbreviation for definition title, used to define the title DD in the list as the abbreviation for the definition
description, which defines the description of the title corresponding to
 
Display effect:

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.

Related Keywords:
label in html syntax html label name attribute html table from database knowledge database display database table in html inserting contents of html table into database html basics khan academy

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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