Summary of common HTML tags

study hard and make progress every day

This article has included to my lot DayDayUP:github.com/RobodLee/DayDayUP warehouse, welcome Star

1. Title tags

<h1> </h1> …… <h6> </h6>

In order to make web pages more semantic, we often use title tags in pages. HTML provides 6 levels of page titles namely < H1 >-< H6 >

2. Paragraph and newline tags

In the HTML tag,

The tag is used to define paragraphs, which can divide the entire page into thousands of paragraphs

Newline tag:

In HTML, the text in a paragraph is arranged from left to right, up to the right end of the browser window, and then wrapped. If you want to force a line break for a piece of text, use the line break tag

3. Format labels with text

Bold: or

Tilt: or < I >

Delete line: or

Underline: or

4. <div></div>and<span></span>

is a big box. You can only fit one big box in a row

<div style="background-color: brown;">111</div>
<div style="background-color: bisque;">222</div>
<div style="background-color: aqua;">333</div>
Copy the code

is a small box that can hold more than one line

5. Image labels

6. Hyperlink labels

< a href=" target "target=" target "> text or image </a>

7. Anchor links

<a href="# id"></a>

When a link is clicked, it jumps to the location of the specified element.

8. Comments and special characters

Comments with “<! Start with – and end with ->.

Special characters:

9. Form labels

is the label used to define the table.

The tag is used to define rows in the table and must be nested within the < TABLE >
tag

< TD >
is used to define cells in the table and must be nested within the < tr>
tag

indicates the header of the table. It indicates the first row or column of the table. The text content is displayed in bold and centered

is used to define the header of the table. The < thead> must have a < tr> tag inside, usually on the first line

is used to define the body of the table, which is mainly used to put the data body.

Some common attributes:

<table border="1" cellspacing="0" width="500" height="250">
    <thead>
        <tr>
            <th>1 meter</th>
            <th>2 meter</th>
            <th>3 meter</th>
        </tr>
    </thead>
    <tbody align="center">
        <tr>
            <td align="left" rowspan="2">111</td>
            <td colspan="2">222</td>
        </tr>
        <tr>
            <td>555</td>
            <td>666</td>
        </tr>
    </tbody>
</table>
Copy the code

10. List labels

: defines an unordered list, in which only li tags can be placed. Other tags are not allowed

< OL >
: defines an ordered list, in which only li tags can be placed, other tags are not allowed

: List items in ordered and unordered lists, which act as containers for other labels

: defines a custom list that can only contain dt and DD tags

: Defines items in a custom list

< DD >
: Describes each item in the custom list

<ul>
    <li>Unordered list</li>
    <li>Unordered list</li>
    <li>Unordered list</li>
</ul>

<ol>
    <li>An ordered list</li>
    <li>An ordered list</li>
    <li>An ordered list</li>
</ol>

<dl>
    <dt>Help center</dt>
    <dd>Account management</dd>
    <dd>Shopping guide</dd>
    <dd>Order operation</dd>
    <dt>Service support</dt>
    <dd>After sales policy</dd>
    <dd>self-service</dd>
    <dd>Related to download</dd>
</dl>
Copy the code

11. Form labels

A form usually consists of a large form field that contains form elements and prompts.

: the form field tag. A form field is an area that contains form elements

: Enter form elements

: Bind to a form element. When clicking the text in the Lable tag, the focus is automatically shifted to the corresponding form element. The for attribute of the Lable tag must be the same as the ID attribute of the related element

< SELECT >
: dropdown form element that defines a dropdown list

: element in the drop-down list. When the **selected= “selected” ** attribute is defined, the current item is the default selected item

</ Textarea > text field element that defines a multi-line text input box, with the cols attribute specifying the number of characters per line and the rows attribute specifying the number of lines to display

Common attributes of the tag:

Tag type attribute value:

<form action="xxx.jsp" method="GET">
    <table width="500">
        <tr>
            <td>gender</td>
            <td>
                <input type="radio" id="man" name="sex"/> 
                <label for="man"><img src="images/man.jpg"> 男 </label>
                <input type="radio" id="women" name="sex"/> 
                <label for="women"><img src="images/women.jpg"> 女 </label>
            </td>
        </tr>
        <tr>
            <td>birthday</td>
            <td>
                <select name="year">
                    <option selected="selected">-- Please select year --</option>
                    <option>1990</option>
                    <option>2000</option>
                    <option>2010</option>
                </select>
                <select name="month">
                    <option selected="selected">-- Please select month --</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select name="day">
                    <option selected="selected">Please select the date</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>In the area</td>
            <td>
                <input type="text" value="Anhui province" name="area">
            </td>
        </tr>
        <tr>
            <td>Marital status</td>
            <td>
                <input type="radio" name="marital_status" id="spinsterhood"> 
                <label for="spinsterhood">unmarried</label>
                <input type="radio" name="marital_status" id="married"> 
                <label for="married">married</label>
                <input type="radio" name="marital_status" id="divorce"> 
                <label for="divorce">divorce</label>
            </td>
        </tr>
        <tr>
            <td>Record of formal schooling</td>
            <td><input type="text" name="edu_bg"></td>
        </tr>
        <tr>
            <td>Your Favorite type</td>
            <td>
                <input type="checkbox" name="like_type" id="wumei"> 
                <label for="wumei">enchanting</label>
                <input type="checkbox" name="like_type" id="keai"> 
                <label for="keai">lovely</label>
                <input type="checkbox" name="like_type" id="xiaoxianrou"> 
                <label for="xiaoxianrou">Small meat</label>
                <input type="checkbox" name="like_type" id="laolarou"> 
                <label for="laolarou">Preserved ham</label>
                <input type="checkbox" name="like_type" id="douxihuan">
                <label for="douxihuan">All like</label>
            </td>
        </tr>
        <tr>
            <td>To introduce myself</td>
            <td>
                <textarea cols="30" rows="10" name="self_introduction"></textarea>
            </td>
        </tr>
        <tr>
            <td> </td>
            <td>
                <input type="submit" value="Free registration">
            </td>
        </tr>
    </table>
</form>
Copy the code

Code word is not easy, if you can, give me a like, favorites, follow

If you like my article, please follow the wechat official account “R o B O D”.