1 review

1.1 Text Labels

Em emphasizes that the default is italics. Double strong for emphasis, the default is bold. Double del indicates the deleted content. By default, the deletion line is added. Double Ins indicates new content, which is underlined by default. Double SUP superlabel. Double sub subscript. doubleCopy the code

1.2 Image Labels

Img attributes: SRC Specify the address (path) of the image Alt must be specified Specify the text to be displayed after the image fails to load (recommended) border Set the width of the image border width set the width of the image height Social image height  .jpg / .jpeg .png .gifCopy the code

1.3 the path

Absolute path: a complete network address (URL) of a file. You can obtain files on the local server or other servers (files that can be accessed over the network). Relative path: Starts from the source file based on the relative location of the source file and destination file. At the same or lower level:./ begins or leaves out./ at the higher level or above:.. / at the beginningCopy the code

1.4 Hyperlinks and anchors

A tag attribute: href specifies the location of the file to jump to. An A tag is only a hyperlink if it has the href attribute set. Target specifies the window in which the target file is opened. Value: _self This window opens (default); Name specifies the name of the anchor point. The a tag specifies the name attribute, which indicates the anchor point. Hyperlink: Click the hyperlink to jump to the specified page (HTML type file). Click the hyperlink to jump to any type of file. If the browser can open this type of file, open it directly. If the browser can't open this type of file, download it. Click the hyperlink, for special purposes, to open the application on the operating system. The href value is empty. Click the hyperlink to refresh this page. Anchor point: How to set anchor point: First, the A tag sets the name property, and the name specifies the anchor roll. The second way, any tag, sets the ID property, id specifies the anchor name. How to jump to anchor: Use a hyperlink to jump to the anchor specified in this page, starting with the href value # followed by the anchor call to jump to the anchor specified in the page, followed by the anchor call at the end of the specified page pathCopy the code

2 list

2.1 Unordered List

<ul>
    <li>The contents of the list item</li>
    <li>The contents of the list item</li>
    <li>The contents of the list item</li>
    <li>The contents of the list item</li>
</ul>
Copy the code
For news list, article list, commodity list, navigation, etcCopy the code

2.2 Ordered List

<ol>
    <li>List item content</li>
    <li>List item content</li>
    <li>List item content</li>
    <li>List item content</li>
    <li>List item content</li>
</ol>
Copy the code
Used of leaderboardsCopy the code

2.3 Defining a List

<dl>
    <dt>HTML</dt>
    <dd>Hypertext Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading style sheets</dd>
    <dt>JavaScript</dt>
    <dd>A browser scripting language</dd>
</dl>


<dl>
    <dt>How to master HTML tags</dt>
    <dd>Understand the semantics and functions of labels</dd>
    <dd>What attributes does the tag have and how to set their values</dd>
    <dd>Know whether it is single label or double label</dd>
</dl>
Copy the code
Used for a list of proper nouns, containing an explanation of proper nouns.Copy the code

2.4 Summary of List Labels

Tag name Function and semantics attribute Single label or double label
ul Unordered list double
ol An ordered list double
li The list item of an ordered or unordered list double
dl Define a list double
dt Define the title of the list item double
dd Defines the description of a list item double

Note:

Li labels can only be directly nested inside UL or OL.

The DT tag in the definition list can correspond to more than one DD tag.

3 Table Label

3.1 Structure of the table

Table table title CPation Table head THEAD row TR cell TH Table body TBody row TR cell TD Table footnote tfoot row TR cell TDCopy the code
<table>
    <caption>The table header</caption>
    <thead>
        <tr>
            <th>Table header cell</th>
            <th>Table header cell</th>
            <th>Table header cell</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Normal cells</td>
             <td>Normal cells</td>
             <td>Normal cells</td>
        </tr>
        <tr>
            <td>Normal cells</td>
             <td>Normal cells</td>
             <td>Normal cells</td>
        </tr>
        <tr>
            <td>Normal cells</td>
             <td>Normal cells</td>
             <td>Normal cells</td>
        </tr>
    </tbody>
    <tfoot>
    	 <tr>
             <td>Normal cells</td>
             <td>Normal cells</td>
             <td>Normal cells</td>
        </tr>
    </tfoot>
</table>
Copy the code

3.2 Setting the overall style of the table

Border: Sets the width of the table border, usually 1. Width property: Sets the total width of the table. Height property: Sets the total height of the table. Cellspacing property: Sets the spacing between cells. Cellpadding property: sets cellpadding (the distance between the cell border and its contents). Default is 0.Copy the code

3.3 Cell style Settings

① Set the alignment of cell contents

Set horizontal alignment of content in cells: Set td/ TH attribute align, values :left, center, right, set the alignment of text in this cell. Set tr attribute align, values :left, center, right, and set the alignment of all cell text in the line. Set thead/tbody/tfoot attribute align, values :left, center, right, set the alignment of all cell text inside. Set vertical alignment of content in cells: Set td/ TH attribute valign, value :top, middle, bottom, set vertical alignment of text in this cell. Set tr to valign with values top, middle, and bottom, and set the vertical alignment of all cell text in the line. Set thead/ tBody /tfoot to valign, top, middle, bottom, and set the vertical alignment of all cell text inside.Copy the code

② Set the width and height of the cell

Set width: Td/TH allows you to set the width of the cell, and also affects the width of all cells in the same column. Set height: Td/TH can set the height property, you can set the height of the cell, and all the cell height. Set height to tr to set the height of the line. (recommended)Copy the code

If cell padding is present, set height to TD /th and TR to show different heights. Td/TH height does not include padding, padding will be added to the actual display size; The height set to TR is the total height of the row.

3.4 Cells span rows and columns

Rowspan: sets the rowspan property to td/th, specifying the number of rows to span. Span columns: Sets the colSPAN property to TD/TH, specifying the number of columns to span.Copy the code

3.5 Table label summary

Tag name Function and semantics attribute Single label or double label
table form Width attributes:Sets the total width of the table

Height attribute:Sets the total height of the table

Border properties:Sets the border width of the table

Cellspacing attribute:Sets the spacing between cells

Cellpadding:Sets the padding of cells		 double
caption The title title double
thead Form the head The align attribute:Sets the horizontal alignment of all cells inside

** Valign property: ** Sets the vertical alignment of all cells inside		 double
tbody Form the main body The align attribute:Sets the horizontal alignment of all cells inside

** Valign property: ** Sets the vertical alignment of all cells inside		 double
tfoot Table footnote The align attribute:Sets the horizontal alignment of all cells inside

** Valign property: ** Sets the vertical alignment of all cells inside		 double
tr line The align attribute:Sets the horizontal alignment of all cells in a row

** Valign property: ** Sets the vertical alignment of all cells in the row

Height attribute:Sets the height of the row.		 double
td Normal cell The align attribute:Sets the horizontal alignment of this cell

** Valign property: ** Sets the vertical alignment of this cell

Width attributes:Set cell width, the same column of cells are affected

Height attribute:Set the height of a cell to affect all cells in the same row

Rowspan attributes:Specifies the number of rows to span.

Colspan attribute:Specifies the number of columns to span		 double
th Table header cell The align attribute:Sets the horizontal alignment of this cell

** Valign property: ** Sets the vertical alignment of this cell

Width attributes:Set cell width, the same column of cells are affected

Height attribute:Set the height of a cell to affect all cells in the same row

Rowspan attributes:Specifies the number of rows to span.

Colspan attribute:Specifies the number of columns to span		 double

Note: If the thead, tbody, and tfoot tags are omitted, the display will not be affected and the browser will automatically add a tBody tag between table and tr.

4 Form Labels

Users can submit data to the website through forms and interact with the website.

The form allows the user to enter content to select an option and submit the user’s content to the site.

Usually used for search boxes, login, registration, comments, posts, etc.

4.1 General form Settings

The contents of the form are wrapped in the Form tag. The action attribute sets the address to submit (the address of the backend handler). The target attribute specifies where the submission address should be opened (this window or a new window). The method attribute specifies the submission method. The form control needs to specify the name attribute so that the backend program can obtain the data from the value of the name attribute.Copy the code

4.2 Form Controls

① Text input box

<input type="text">
Copy the code

② Password input box

<input type="password">
Copy the code

③ Radio button

<input type="radio" name="sex">female<input type="radio" name="sex">male<input type="radio" name="sex">otherCopy the code

For multiple radios to have a radio effect, the value of their name attribute must be the same.

(4) check box

<input type="checkbox" name="hobbys">Go to bed<input type="checkbox" name="hobbys">eat<input type="checkbox" name="hobbys">A daze<input type="checkbox" name="hobbys">Male (tall, rich and handsome)<input type="checkbox" name="hobbys">Woman (rich woman)<input type="checkbox" name="hobbys">Play the gameCopy the code

(5) the hidden domain

⑥ Submit button

⑦ Reset button

⑧ Common buttons

Pet-name ruby text field

⑩ Drop – down options

4.3 Making form controls unavailable

4.4 Label Usage of labels

4.5 Usage of fieldset tags and Legend tags

4.6 Summary of form labels

Tag name Semantics and functionality attribute Single label and double label