Web page basic label

Speaking of the front end , I guess you must have a headache about the memory of labels when you first learn , Today, I'll give you a summary of the label instructions commonly used in front-end web page production .

1. Title Tag （header1~header5）

   <h1> First level label </h1>
   <h2> Secondary label </h2>
   <h3> Three level label </h3>
   <h4> Level 4 labels </h4>
   <h5> Five labels </h5>

   

2. Paragraph Tags （paragraph）

<p></p>

  Without paragraph labels ：

 Run fast    Run fast 
 One has no tail    One has no eyes   It's strange.   It's strange. 

 

  When there is a paragraph label ：

<p> Run fast    Run fast </p>
<p> One has no tail    One has no eyes   It's strange.   It's strange. </p>

 3. Line wrap label （break）

<br/>

The specific usage is consistent with that of paragraph labels .

4. Horizontal label （horizontal）

<hr/>

 5. Bold style labels

• In bold ：strong
• Italics ：em（emphasis）

   bold ： <strong>i love</strong>
   Italics ：<em>i love</em>

  

6. Notes and special symbols

•   notes ：Ctrl+/
• Space ： (non breaking space)
• Greater than ：>(greater than)
• Less than ：<(less than)
• Copyright ：©(copyright)

 7. Image tag

src: Picture path

alt: The text message displayed when the picture is not displayed

<img src="" alt="">

About .../ and ./

.../： Upper level directory , Parent directory

./： Current directory

8. Hyperlinks

herf: Link address

target: Where does the link window open

• -balck: Open in new window
• -self: Open... In the current window

<a href=""target="_blank"> Click me to jump </a><br/>
<a href="https://www.baidu.com"target="-_blank"> Click me to jump to Baidu </a>
<a href="mailto:[email protected]"> Click contact me </a>

 9. Anchor link

Use a Label plus name attribute

name: Set anchor name

<a name="top"> Top </a>

• Use link jumps to specify anchors

 href: You need to jump to the anchor name ,# Followed by the anchor name

<a href="#top"> Back to the top </a>

• Use the link to jump to the specified anchor of the specified page

<a href="https://www.baidu.com"target="-_blank"> Click me to jump to Baidu </a>

 10. Functional links

Email links

stay href Property mailto Followed by specific email

<a href="mailto:[email protected]"> Click contact me </a>

QQ Extension

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt=" Add me , Click me to get the little movie " title=" Add me , Click me to get the little movie "/></a>

11. About block elements and column elements

A block element ： Whatever the content , Monopolize one line

Inline elements ： The width depends on the size of the content , Left and right are elements in a row, which can be arranged in one line

12. list

• Ordered list

  <ol>
      <li>java</li>
      <li> front end </li>
      <li> Back end </li>
  </ol>

  

• Unordered list

<ul>
    <li>java</li>
    <li> front end </li>
    <li> Back end </li>
</ul>

• Custom list

dl: label

dt: List name

dd: List content

<dl>
    <dt> Discipline </dt>
    <dd>java</dd>
    <dd>c</dd>
    <dd>c++</dd>

    <dt> City </dt>
    <dd> Xi'an </dd>
    <dd> Chongqing </dd>
    <dd>c++</dd>
</dl>

 

13. Form and content

table: label

tr: That's ok

td: Column

• colspan: Cross column properties
• rowspan: Cross line properties

<table border="1px">
    <tr>
        <td colspan="3"> Student achievement </td>

    </tr>
    <tr><td rowspan="2"> Liu Ziwen </td>
        <td> Chinese language and literature </td>
        <td>100</td>
    </tr>
    <tr>
        <td> mathematics </td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2"> Liu Fei </td>
        <td> Chinese language and literature </td>
        <td>100</td>
    </tr>
    <tr>

        <td> mathematics </td>
        <td>90</td>
    </tr>
</table>

 

14. Media elements

src : File path

controls : Control

autoplay : Auto play

loop : Loop Playback

video ：

<video src="../"controls autoplay></video>

Audio ：

<audio src="../"controls autoplay></audio>

15.iframe Inline framework
Inline framework is to embed another web page in one web page

src : Pages displayed in the default inline frame

frameborder : Whether the frame displays a border (1 or 0)

width : Set the frame width

height : Set the frame height

name : Set the name of the frame , Can be used to set a Labeled target attribute , send a The page with the label jump is displayed in the inline frame

<iframe src="http://www.baidu.com" name="hello" farmeborder="0" width="1000px" height="800px"  ></iframe>

16. Forms
action : Where to submit the form data

method : How to submit data

• get : We can submit URL See the information we submitted in , unsafe , But efficient
• post : Can't see the information we submitted , But it's safe , Can transfer large files

input : input label

type : input Tags are based on tag properties type Different values of can have different presentation forms

• text : Text type input box
• password : Password type input box
• submit : Submit type input box

name : Every input Identification of the label

<input type="radio" value="boy" name="sex"/> male 
<input type="radio" value="girl" name="sex"/> Woman 

<h1> register </h1>
<form action="" method="get"></form> post It's safer 
<p> name ：<input type="text" name="username" value=" Miss Zou " maxlength="8" size="30"></p>
<p> password ：<input type="password" name="pwd"></p>

17. Radio button

Set up input Labeled type The attribute is radio

checked : Selected by default

Be careful : Radio buttons have the concept of groups , That's more than one type by radio Radio buttons of their name Attribute values need to be the same , Only one can be selected in this way , Otherwise, you can choose more

<input type="radio" value="boy" name="sex"/> male 
<input type="radio" value="girl" name="sex"/> Woman 

18. Selected by default

checked : Selected by default

Set up input Labeled type The attribute is checkbox, Multiple buttons in the same button group need to be set name Property values are the same

<p> hobby ：
    <input type="checkbox" value="sleep" name="hobby"> sleep 
    <input type="checkbox" value="chat" name="hobby"> Chat 
    <input type="checkbox" value="game" name="hobby"> game 
    <input type="checkbox" value="code" name="hobby" checked> Knock on the code 
    <input type="checkbox" value="girl" name="hobby"> The girl 
</p>

19. Other buttons

When input Labeled type When the attribute value is

• button : General button
• submit : Submit button ( Submit form data )
• reset : Reset button ( Reset form data )
• image : Picture button ( The picture is a button )

<P> Button ：
    <input type="button" name="btn1" value=" Click the side length ">

</P>
<p>
<input type="submit">
<input type="reset" value=" Empty the form ">
</p>

 20. A drop-down box

name : Set the name of the drop-down box

value : Set the sub element value of the drop-down box

selected : Default choice

<p> Country ：
    <select name=" List name ">
        <option value="zg"> China </option>
        <option value="us"> The United States </option>
        <option value="en"> The British </option>
        <option value="jn"> Japan </option>
        <option value="cx"> North Korea </option>
    </select>
</p>

21. Text domain

name : The name of the text field

id : Text field id

cols : The width of the text field ( The number of columns )

rows : The height of the text field ( The number of lines )

<p> feedback ：
    <textarea name="textarea" id="" cols="30" rows="10"> Text content </textarea>
</p>

22. File domain

Set up input Labeled type The property value is file when , input The tag will be displayed as a file upload button style

name : Set the name of the uploaded file ( This is not the real name of the file , It's our own definition )

<p>
    <input type="file" name="files">
    <input type="button" value=" Upload " name="upload">
</p>

23.input Simple verification

<p> mailbox ：
    <input type="email" name="email">
</p>
<p>URL:
    <input type="url" namr="url">
</p>
<p> Digital Verification ：
    <input type="number" name="number" max="100" min="0" step="10">
</p>
<p> Slider label ：
    <input type="range" name="voice" min="0" max="100">
</p>
<p> Search for ：
    <input type="search" name="search">

</p>