04-Front-end technology_HTML and HTML5 commonly used tags

04-Front-end technology_HTML and HTML5 commonly used tags

1. HTML and HTML5 commonly used tags

Pre-school preparation

1) Statistics on usage of operating system on Baidu

Baidu Statistical Traffic Research Institute

2) Google Chrome download

Song browser download site

3) The use of browser skills-WEB front-end helper (FeHelper) The artifact of front-end staff

WEB Front-end Assistant (FeHelper) An artifact of front-end staff

You can refer to the installation instructions on the website to install (suffix crx is changed to zip = "directly drag into more tools/expansion programs)

Installation completed effect:

4) Tool introduction

SublimeText (Advanced Notepad display code highlighting, recommended)




VSCode (lightweight integrated development environment, recommended)



1. Introduction to HTML

1.1 What is HTML

HTML is the abbreviation of HyperText Mark-up Language, meaning supertext markup language

HTML is not a programming language, it is a markup language

Hypertext refers to hyperlinks, and mark refers to tags. It is a language used to make text, and this language consists of a single tag.

The file created in this language is saved as a text file, and the file extension is .html or .htm

An html document is also called a Web page, which is actually a document. The html document is opened with an editor to display the text, and it can be edited in the same way as the text.

If you open it with a browser, the browser will render the file into a text according to the description of the tag, and the displayed text can be jumped from one web link to another

1.2 HTML development history

1.3 Setting of HTML document type

The setting of the document type in different versions of HTML, that is, the corresponding attribute value

(1) HTML, corresponding to the early HTML4.0.1, its basic structure is as follows:

(2) XHTML, its basic structure is as follows:

(3) HTML5, its basic format is as follows

2. HTML basic syntax

2.1 HTML basic structure:

The extension of HTML files is .html or .htm

The structure of HTML text includes a "head" part and a "body" part, where the "head" part provides information about the text (including title, character set, etc.), and the "body" part provides the text Specific content

HTML is composed of: tags and content, each HTML page has two parts (head and body), the outermost layer is...tags

The syntax of HTML tags (tags) is enclosed by <and> (such as head tags, body tags~).

There are two types of HTML tags: double tags: <tag name>....</tag name> and single tags: <tag name/> (double tags:


, Single label:

Attributes can also be added to HTML tags: <tag name attribute name 1="value 1" attribute name 2="value 2" attribute name n="value n">....</tag name>

HTML tag specification: the tag name should be small, the attribute should be double quoted, and the tag should be closed The browser will not report an error if it does not comply with the specification, it will try to parse it, and it will not display the effect.

2.2 Notes

2.3 HTML comments

Comments can be inserted in the html document code. Comments are the description and explanation of the code

<!-- This is the only HTML comment--> Copy code

2.4 HEAD header setting in HTML

The head tag is used for the head of the text, its content will not be displayed in the text, it mainly completes various settings for the current page

The following subtags are often included in the head:

3. HTML text tags

3.1 Commonly used text labels are as follows:

... where n is a value from 1 to 6. Title tag (bold, unique)

... Italic

... Emphasize italics

... bold

... Emphasize and bold (search engines will include this emphasized content and display it first)

Title of the work (cited)

... Subscript ... superscript

... Strikethrough

3.2 Examples

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>H1 title tag</h1> <h2>H2 title tag</h2> <h3>H3 title tag</h3> <h4>H4 title tag</h4> <h5>H5 title tag</h5> <h6>H6 title tag</h6> <u>uUnderline tag</u><br/> <del>del strikethrough label</del><br/> <b>bBold tags</b><br/> <strong>strongly emphasized and bold tags</strong><br/> <i>i italic tag</i><br/> <em>em emphasizes italic tags</em><br/> <br/> <cite>Shanghe on the Qingming Festival</cite> is one of the ten famous paintings handed down in our country<br/><br/> Water molecule: H<sub>2</sub>O <br/> 2<sup>4</sup>=16 </body> </html> Copy code

4. HTML formatting tags

Just used to do a simple typesetting

4.1 Common formatting tags



Horizontal dividing line


    • ...
    Unsequenced list
    1. ...
    Ordered list where the type type value: A a I i 1 start attribute represents the starting value
  • ...
  • List item
  • ...
    Custom list
  • ...
    Custom list header
  • ...
    Customize the content of the list (there will be automatic indentation)
Often used to combine block-level elements to format these elements through CSS (automatically wrap between two tags)

... Usually used in the included text, you can use CSS to style it, or use JavaScript to manipulate it. (There is no line break between the two labels, and the width, height, and size cannot be specified)

4.2 Examples

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>HTML formatting tags</h1> <hr> <div style="width: 600px"> <p> According to today s Russian TV (RT) citing local media reports, Israel s Intelligence and Special Mission Agency (also known as Mossad) has obtained China s new crown pneumonia vaccine and brought it back to start research . </p> <p> Israeli media Channel 12 reported on Monday that Mossad had brought Chinese vaccines to Israel in recent weeks. It is unclear exactly how the intelligence agency obtained the vaccine. </p> </div> my hobby: <ul> <li>Reading</li> <li>Listen to songs</li> <li>Learning</li> <li>Sports</li> </ul> <ul type="circle"> <li>Reading</li> <li>Listen to songs</li> <li>Learning</li> <li>Sports</li> </ul> <ol> <li>Reading</li> <li>Listen to songs</li> <li>Learning</li> <li>Sports</li> </ol> <ol type="a"> <li>Reading</li> <li>Listen to songs</li> <li>Learning</li> <li>Sports</li> </ol> <dl> <dt>Q: What is HTML</dt> <dd>Answer: Hypertext Markup Language</dd> </dl> <div>aaaaa</div><div>bbbbb</div><span>cccccc</span><span>dddddd</span> </body> </html> Copy code

4.3 Tips

1) Quickly generate multiple list items

5. HTML image tag

5.1 Introduction

Insert an image in the HTML text, use the img tag, which is a single tag: (You can also use the image as the background and insert the image)

The commonly used attributes in the img tag are as follows:

  • src: image name and url address
  • alt: The prompt message when the image fails to load
  • title: text prompt attribute (prompt message placed by the mouse)
  • width: the width of the image (if only one width/height is specified, the other will be adaptively changed according to the ratio)
  • height: the height of the picture
  • border: the thickness of the border line

5.2 Example

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>HTML image img tag</h1> <img src="./images/11.jpg" alt="picture1" width="600"> <img src="./images/12.jpg" alt="picture 2" width="600"> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="Baidu it" width="200"> </body> </html> Copy code

5.3 Understand absolute path and relative path

Absolute path:

The absolute path is the real path of the file on your homepage or the directory on the hard disk, (URL and physical path)


relative path:

Relative to the path of a reference directory. Contains the relative path of the Web (relative directory in HTML), for example:

  • In web development, "/" represents the root directory of web applications.
  • "./" represents the current directory,
  • "../" represents the parent directory. This similar representation is also a relative path.

5.4 Tips

1) Quickly generate labels

6, HTML hyperlink tags

6.1 Hyperlink label a


<a href="link target url address">display text</a> copy code

a tag attribute

href: Required, refers to the link redirection address

target: Indicates how to open the link:

  • _blank new window
  • _parent window
  • _self This window (default, click back to return to the previous page)
  • _top top window

framename window name

title: text prompt attribute (mouse on it, you can see the details)

Anchor link (you can locate by id and jump within the page)

Define the anchor point: Previously used

Use anchor point: jump to a1

6.2 Examples

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>HTML example-hyperlink a tag</h1> <!-- Anchor hyperlink--> <a href="#girl1">Beauty 1</a><br/><br/> <a href="#girl2">Beauty 2</a><br/><br/> <!-- Normal hyperlink--> <a href="https://ww.baidu.com" title="Baidu link">Baidu (this window opens)</a><br/> <a href="https://ww.baidu.com" target="_blank">Baidu (new window opens)</a> <br/><br/> <a href="./Demo.html" target="_blank" >Picture tag example</a><br/><br/> <a id="girl1"></a> <h4>Beauty 1</h4> <img src="./images/11.jpg" alt="girl1" width="100%"><br/><br/> <a id="girl2"></a> <h4>Beauty 2</h4> <img src="./images/22.jpg" alt="girl2" width="100%"><br/><br/> </body> </html> Copy code

7, HTML table tags

7.1 Labels in the table

Compared with td, th has a bold centering effect by default

7.2 Examples

1) Simple form

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>HTML example-table tag</h1> <table> <!-- Header--> <tr> <th>student ID</th> <th>Name</th> <th>Age</th> <th>Class</th> </tr> <!-- The first row of data--> <tr> <td>100</td> <td>Hagi Kakashi</td> <td>21</td> <td>Class 8</td> </tr> <!-- The second row of data--> <tr> <td>101</td> <td>Naruto Uzumaki</td> <td>15</td> <td>Class 8</td> </tr> <!-- The third row of data --> <tr> <td>102</td> <td>Uchiha Sasuke</td> <td>15</td> <td>Class 8</td> </tr> </table> </body> </html> Copy code

2) Add table line

3) Adjust the width

4) Eliminate gaps

5) Adjust the distance between the content and the border

6) Check the elements

It is found that the browser automatically adds the tbody tag to the table

7) Add title

8) across cells

Span from top to bottom, span from left to right

9) Specify the horizontal position of the table content

10) Specify the vertical position of the table content

11) Span from left to right

7.3 Tips

1) Quickly generate tables

8. HTML form tags (important)

8.1 form form tag

1) Commonly used attributes of form tags:

  • *action attribute: the submitted target address (URL)
  • *method attribute: submission method: get (default) and post
  • The get method is that the URL address bar can be viewed, and the length is limited (IE2k 8k), which is relatively insecure.
  • The post method is that the URL address is not visible, the length is not restricted, and it is relatively safe.
  • enctype: submission type
  • target: Where to open the target URL.
  • name: The attribute gives a name to the form. Use id instead in HTML5.

2) Examples

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>HTML example-form tags: form, input, select, textarea</h1> <form action="a.html" method="GET"> Name: <input type="text" name="uname"/> <br/><br/> Password: <input type="password" name="upass"/> <br/><br/> <input type="submit" value="Submit"/> <input type="reset" value="reset"/> </form> </body> </html> Copy code

8.2 input form item label input defines the input field

1) Input common attributes

The user can enter data in it. In HTML 5, the type attribute has many new values.

*type attribute: indicates the type of form item: the value is as follows:

text: Single text box

password: password input box

checkbox: multi-select box pay attention to provide value value

radio: Please provide value for the radio button

file: File upload selection box

button: normal button

submit: submit button

image: image submit button

reset: reset button, the effect of restoring to the beginning (when it is opened for the first time) (if there is a default value, it will be restored to the default value, not the meaning of emptying)

hidden: The main form hides the field, if the information is submitted together with the form, but it does not need to be modified by the user

HTML5 new attributes

email is used for input fields that should contain an e-mail address

url is used for input fields that should contain the URL address

number is used for input fields that should contain numeric values.

  • max specifies the maximum value allowed
  • min specifies the minimum allowed value
  • step specifies the legal number interval (if step="3", the legal number is -3,0,3,6, etc.)
  • value specifies the default value

range is used for input fields that should contain numeric values within a certain range, displayed as a slider

  • max specifies the maximum value allowed
  • min specifies the minimum allowed value
  • step specifies the legal number interval (if step="3", the legal number is -3,0,3,6, etc.)
  • value specifies the default value

Date pickers

  • date-select , , year
  • month-select month, year
  • week-select week and year
  • time-the selected time (hours and minutes)
  • datetime-select time, day, day, year (UTC time)
  • datetime-local-select time, day, day, year (local time)

search is used for search domains, such as site search or Google search

color selection

*name attribute: the name of the form item, used to store the content value

*value attribute: input value (default specified value)

*placeholder: a short reminder of the expected value

size attribute: the width of the input box

maxlength attribute: the maximum length of the input content of the input box

readonly attribute: read-only attribute for the input box (cannot be modified, but will still be submitted)

*disabled attribute: disabled attribute (cannot be modified, will not be submitted)

*Checked attribute: Specify the default option for the select box (single choice, if multiple options are added checked, the default is the last one)

accesskey attribute: Assign shortcut key (not often used) (IE: alt+key fox: alt+shift+key)

tabindex attribute: Specify the switching order of the tab key by number (not often used)

src and alt are set for the image button

Note: The reset button is to restore the form data to the state when it was opened for the first time, not to clear it.

The image button has the function of submitting the form by default.

2) Example-type attribute


0/1 is to be sent to the background. The reason why 0/1 is chosen instead of male/female is because the number is more efficient in query speed and space occupied than Chinese characters.


Other attribute values


Set default value

After reset

8.3 select tag to create a drop-down list

1) Common attributes

name attribute: defines the name, used to store the drop-down value

size: defines the number of items available in the menu, html5 does not support

disabled When this attribute is true, the menu will be disabled.


/form> </body> </html> 8.4 textarea Multi-line text input area 1) Commonly used attribute name: defines the name, used to store the value in the text area. cols: Specifies the number of columns that can be viewed in the text area. rows: Specifies the number of rows that can be viewed in the text area. disabled: Whether to disable readonly: read-only... The default value is between two tags. 2) For example, there is no value attribute, but content is added between the beginning and the end of the tag, as shown in the figure: 8.5 button The label definition button can be in Place content in the button element, such as a document or image. This is the difference between this element and the button created by the input element. 8.6 The fieldset element can group related elements in the form (circled box). Disabled attribute: defines whether the fieldset is visible. Form attribute: Define one or more forms to which the fieldset belongs. 8.7 legend - The label defines the title for the fieldset, figure and details elements 8.8 optgroup html5 label - defines the option group This element allows you to combine options and allows grouping 8.9 datalist html5 label - defines a list of optional data and With the use of the input element, you can make a drop-down list of input values. 9, HTML frame tags 1) Common attributes: src: specifies the URL of the document displayed in the iframe name: specifies the name of the iframe height: specifies the height of the iframe. width: defines the width of the iframe. frameborder: Specifies whether to display the border around the frame. For example: 2) Example <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=" width="400" height="400"> Your browser does not support the video video tag</video> <br/><br/> <video controls="controls" width="400" poster="./images/11.jpg" height="400"> <source src="./images/fun.mp4" type="video/mp4"/> Your browser does not support the video video tag</video> <br/> <br/> <embed src="./images/haowan.swf" width="300" height="300"/> </body> </html> Due to different browser manufacturers, the display effect of the default controls may be Not consistent, so some manufacturers will customize the video playback control chapters are summarized here ( 3 ) @&bye bye firefly& 04-Front-end technology Students who are interested in learning Java are welcome to join the QQ learning exchange Group: 1126298731 If you have any questions, you are welcome to ask questions. Let's fight and upgrade on the way to learning Java! (o )o [BINGO!]