current position:Home>Front end HTML

Front end HTML

2022-04-29 20:24:31SpongeBob's nest

Catalog

HTML Format

Common labels

Comment tags

  Title Tag

  Paragraph Tags

Line wrap label

Format label

  Picture label

Hyperlink label

  Tabular label

Tabs tab

Form labels

  The text box text

Password box password

  Radio buttons radio

Check box checkbox

Button button

file file

The drop-down menu select

  Multiline edit box textarea

No semantic tags : div & span

Special characters

Comprehensive case 1 : Show resume information

  Comprehensive case 2 : Fill in resume information


html It's a markup language , Various tags are used to mark the parts to be displayed in the web page ~

HTML Format

The basic format :

<html>
    <head>
        <title> The first program </title>
    </head>
    <body>
        hello world
    </body>
</html>

html The label is the whole html The root tag of the file ( Top label )
head Write the properties of the page in the tag .
body What is written in the label is the content displayed on the page
title The title of the page is written in the label

among :
head and body yes html The child tag of (html Namely head and body The parent tag of )
title yes head The child tag of . head yes title The parent tag of .
head and body It's brotherhood

The structural relationship between tags , Make up a DOM Trees
DOM yes Document Object Mode ( Document object model ) Abbreviation

vscode Middle shortcut key generation : ! + Tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html> be called DTD ( Document type definition ), Describing the current file is a HTML5 The file of .


<html lang="en"> among lang Property indicates that the current page is a " English page ".


<meta charset="UTF-8"> Describe the character encoding of the page . The absence of this line may lead to Chinese garbled code .


<meta name="viewport" content="width=device-width, initial-scale=1.0">


name="viewport" among viewport It refers to the area on the screen of the device that can be used to display our web pages
Domain .


content="width=device-width, initial-scale=1.0" Set the width of the viewing area equal to the width of the device , and
Set the initial scale to no scale . ( This attribute is more important for mobile terminal development ).
 

Common labels

Comment tags

<!-- This is a comment -->

  Title Tag

    <h1> First level title </h1>
    <h2> Secondary title </h2>
    <h3> Three level title </h3>
    <h4> The fourth level title </h4>
    <h5> Five level titles </h5>
    <h6> Six level title </h6>

  Paragraph Tags

    <p> The first paragraph </p>
    <p> The second paragraph </p>
    <p> The third paragraph </p>

Line wrap label

<br> It's a single label , There is no need to end the tag

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br/> deserunt molestiae voluptatum! Ab hic tempora nisi, eos ipsum quae quia dolor alias, doloribus odio incidunt et blanditiis? <br/>Vitae, eius doloremque.</p>

Format label

In bold <strong></strong>                               <b></b>
tilt <em></em>                                          <i></i>
Delete line <del></del>                                          <s><s/>
Underline <ins></ins>                                          <u></u>
    <strong> In bold </strong>
    <b> In bold </b>
    <em> Italics </em>
    <i> Italics </i>
    <del> Delete line </del>
    <s> Delete line </s>
    <ins> Underline </ins>
    <u> Underline </u>

  Picture label

Picture label <img> It's also a single label : among src Is a required attribute , Indicates the storage location of the picture .

<img src="D:\gitee\one-question-per-day\4_24\1.jpg">

img Other properties of tags :


alt: replace text . When the picture doesn't display correctly ( Wrong path \ Be deleted ), A replacement text will be displayed .

<img src="D:\gitee\one-question-per-day\4_24\12.jpg" alt = " Wrong picture ">


title: Tip text . Mouse on the picture , There will be hints .

<img src="D:\gitee\one-question-per-day\4_24\1.jpg" alt = " Wrong picture " title=" Minions ">


width/height: Control width and height . The height and width are generally changed to one , The other will scale equally . Otherwise, the picture will be out of balance .

<img src="D:\gitee\one-question-per-day\4_24\1.jpg" alt = " Wrong picture " title=" Minions " width="500px " height="600px">


border: Frame , The parameter is the width in pixels . But in general CSS To set .

Hyperlink label

<a> label

among href Properties are required , Indicates which page will jump to after clicking .

target Property is the opening method , The default is self, The representative jumps to... On this page , If it is blank It is opened with a new tab

    <a href="https://www.sogou.com">
        <img src = "D:\gitee\one-question-per-day\4_24\1.jpg">
    </a>

 

    <a href="https://www.sogou.com" target="blank">
        <img src = "D:\gitee\one-question-per-day\4_24\1.jpg">
    </a>

  Tabular label

table label : Represents the entire table
tr: Represents a row in a table
td: Represents a column of cells
th: Represents the header cell . It will be centered and bold

    <table>
        <tr>
            <td> Zhang San </td>
            <td>110</td>
        </tr>
        <tr>
            <td> Li Si </td>
            <td>120</td>
        </tr>
        <tr>
            <td> Wang Wu </td>
            <td>130</td>
        </tr>
    </table>

 

This is just the simplest form , Want to look good , You have to add some attributes :

align Is the alignment of the table relative to the surrounding elements . align="center" ( Not the alignment of internal elements )
border Represents a border . 1 Indicates that there is a border ( The greater the number , The thicker the border ), "" Indicates no border .
cellpadding: The distance from the content to the border , Default 1 Pixels
cellspacing: Distance between cells . The default is 2 Pixels
width / height: Set dimensions

    <table border="2px " width = "200" height = "300" cellspacing = "0" cellpadding = "0" align="center">  
        <tr>
            <th> full name </th>
            <th> Telephone </th>
        </tr>
        <tr>
            <td> Zhang San </td>
            <td>110</td>
        </tr>
        <tr>
            <td> Li Si </td>
            <td>120</td>
        </tr>
        <tr>
            <td> Wang Wu </td>
            <td>130</td>
        </tr>
    </table>

Tabs tab

type label
Unordered list ul
Ordered list ol
Custom list dl

The elements are juxtaposed


ul/ol You can only put li No other labels , dl You can only put dt ( title ) and dd( Content )


li Other labels can be placed in the

    <h2> Unordered list </h2>
    <ul>
        <li> The computer </li>
        <li> The notebook </li>
        <li> milk </li>
    </ul>

    <h2> Ordered list </h2>
    <ol>
        <li> Apple </li>
        <li> Banana </li>
        <li> pear </li>
    </ol>

    <h2> Custom list </h2>
    <dl>
        <dt> Time arrangement </dt>
        <dd> attend class;class begins </dd>
        <dd> sleep </dd>
        <dd> having dinner </dd>
    </dl>

 

Form labels

Divided into two parts :


Form field : The area containing the form elements . The key is form label .


The form controls : Input box , Submit button, etc . The key is input label

input label :
Various input controls , Single line text box , Button , Radio buttons , Check box .


type( There has to be ), There are many kinds of values , button( Button ), checkbox( Check box ), text( Enter text in one line ), file( file ), image( Photo ), password( Password box ), radio( Radio buttons ) etc. .


name: to input I have a name . Especially for Radio button , Have the same name To choose one more .


value: input Default in .


checked: Selected by default . ( Used for radio buttons and multi-choice buttons )


maxlength: Set the maximum length .
 

  The text box text

    <form>
        <input  type="text">
    </form>

Password box password

    <form>
        <input type="password">
    </form>

  Radio buttons radio

    <form>
        <input type="radio"> male 
        <input type="radio"> Woman 
    </form>

  A mistake , Come again ~

    <form>
        <input type="radio" name = "gender"> male 
        <input type="radio" name = "gender"> Woman 
    </form>

  Use one name Write the same character to bind the two radio boxes ~

upgrade ~

<form>
        <input type="radio" name = "gender" id = "male"> <label for="male"> male </label>
        <input type="radio" name = "gender" id = "female" checked = "checked"><label for="female"> Woman </label>
</form>

checked Female is selected by default , Add a new one id To bind label Medium for The elements in , label So that the selected text can also choose ~

Check box checkbox

    <form >
        <input type="checkbox"> having dinner 
        <input type="checkbox"> sleep 
        <input type="checkbox"> Doudou 
    </form>

You can also match the properties of the radio box above ~

Button button

    <form>
        <input type="button" value=" This is the button " onclick="alert('hello')">
    </form>

onclick To match js Use ~

file file

    <form>
        <input type="file">
    </form>

 

The drop-down menu select

    <select>
        <option>-->  Please select the year  --></option>
        <option>2000</option>
        <option>2001</option>
        <option>2002</option>
        <option>2003</option>
        <option>2004</option>
        <option>2005</option>
    </select>

  Multiline edit box textarea

<textarea cols="30" rows="10"></textarea>

cols Specify the number of columns ,rows Specify the number of lines

No semantic tags : div & span

div label , division Abbreviation , The meaning is Division


span label , It means span


Just two boxes . For web layout


div It's exclusive , It's a big box .


span Don't monopolize a line , It's a small box

    <div>
        <span> Apple </span>
        <span> Banana </span>
        <span> pear </span>
    </div>
    <div>
        <span> Apple </span>
        <span> Banana </span>
        <span> pear </span>
    </div>

Special characters

Space :  &nbsp;
Less than no. : &lt;
More than no. : &gt;
Bitwise AND : &amp;
Semicolons are also ~

    <p>&nbsp;af&nbsp;daf&nbsp;ae&nbsp;ae&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;er</p>
    <p>&lt;&nbsp;&nbsp;&nbsp;&nbsp;&gt;</p>
    <p>&amp;</p>

 

  Reference documents :HTML

Comprehensive case 1 : Show resume information

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1> So and so </h1>
    <h2> essential information </h2>
    <img src="D:\gitee\one-question-per-day\4_24\1.jpg" width="200" height="200">
    <p><span> Employment intention :</span>Java Development Engineer </p>
    <p><span> contact number :</span>xxx-xxx-xxx</p>
    <p><span> mailbox :</span>[email protected]</p>
    <p><a href="https://github.com"> my  github</a></p>
    <p><a href="https://csdn.com"> My blog </a></p>
    <h2> educational background </h2>
    <ol>
        <li>2002 year -2008 Tipper kindergarten </li>
        <li>2008 year -20011 Tipping bucket </li>
        <li>2011 year -2014 Tipping bucket high school </li>
        <li>2014 year -2018 Tumbling University </li>
    </ol>
    <h2> Expertise </h2>
    <ul>
        <li> Have a good command of JavaSE grammar </li>
        <li> skilled Java The data structure is as follows : The order sheet , Linked list , Binary tree </li>
        <li> Have a good command of Java operating system , Multithreaded programming , Multithreading security issues </li>
        <li> master web Ability , Independently develop the function of message wall </li>
    </ul>
    <h2> My project </h2>
    <ol>
        <li>
            <h3> Message wall </h3>
            <p> Development time :2008 year 9 month -2008 year 11 month </p>
            <p> Function is introduced :
                <ul>
                    <li> Support message publishing </li>
                    <li> Support anonymous message </li>
                </ul>
            </p>
        </li>
        <li>
            <h3> Learning Assistant </h3>
            <p> Development time :2008 year 9 month -2008 year 11 month </p>
            <p> Function is introduced :
                <ul>
                    <li> Support wrong question retrieval </li>
                    <li> Support students to discuss </li>
                </ul>
            </p>
        </li>
    </ol>
    <h2> Personal evaluation </h2>
     during school days , Excellent academic performance , Many Scholarships 
</body>
</html>

  Comprehensive case 2 : Fill in resume information

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Fill out your resume </title>
</head>
<body>
    <table>
        <h1> Please fill in your resume </h1>
        <tr>
            <td> full name </td>
            <td><input type="text"></tr>
        </tr>
        <tr>
            <td> Gender </td>
            <td>
                <label for="male">
                    <input type="radio" name = "gender" id = "male"><img src=" male .png" width="15px"> male 
                </label>
                <label for="female">
                    <input type="radio" name = "gender" id = female><img src=" Woman .png" width="15px"> Woman 
                </label>
            </td>
        </tr>

        <tr>
            <td> Date of birth </td>

            <td>
                <select>
                    <option>-- Please select the year --</option>
                    <option value="">1998</option>
                    <option value="">1999</option>
                    <option value="">2000</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                </select>
                <select>
                    <option>-- Please select the month --</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                </select>
                <select>
                    <option>-- Please select a date --</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                    <option value="">4</option>
                    <option value="">5</option>
                    <option value="">6</option>
                    <option value="">7</option>
                    <option value="">8</option>
                    <option value="">9</option>
                    <option value="">10</option>
                    <option value="">11</option>
                    <option value="">12</option>
                    <option value="">13</option>
                    <option value="">14</option>
                    <option value="">15</option>
                    <option value="">16</option>
                    <option value="">17</option>
                    <option value="">18</option>
                    <option value="">19</option>
                    <option value="">20</option>
                    <option value="">21</option>
                    <option value="">22</option>
                    <option value="">23</option>
                    <option value="">24</option>
                    <option value="">25</option>
                    <option value="">26</option>
                    <option value="">27</option>
                    <option value="">28</option>
                    <option value="">29</option>
                    <option value="">30</option>
                    <option value="">31</option>
                </select>
            </td>
        </tr>
        <tr>
            <td> Go to school </td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td> Apply for a position </td>
            <td>
                <input type="checkbox" id = "a">
                <label for="a"> The front-end development </label>
                <input type="checkbox" id = "b">
                <label for="b"> The backend development </label>
                <input type="checkbox" id = "c">
                <label for="c"> Operations and development </label>
                <input type="checkbox" id = "d">
                <label for="d"> Test Development </label>
            </td>
        </tr>
        <tr>
            <td> Skills acquired </td>
            <td>
                <textarea cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td> Project experience </td>
            <td>
                <textarea cols="30" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" id = "e">
                <label for="e"> I have carefully read the company's application requirements </label>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#"> Check my status </a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h3> Please confirm </h3>
                <ul>
                    <li> The above information is true and valid </li>
                    <li> Be able to practice in the company as soon as possible </li>
                    <li> Can accept the company's overtime culture </li>
                </ul>
            </td>
        </tr>
        
    </table>
</body>
</html>

 

copyright notice
author[SpongeBob's nest],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291605560407.html

Random recommended