html5 tag learning notes

Posted by squimmy on Wed, 02 Mar 2022 05:38:45 +0100

HTML syntax specification

@Double label

@@Start and end labels:


@Single label
@@There is only one label:

<br />  //There is a space

@Inclusion relation

@@Nested tags in Tags:

Belonging to parent-child relationship

@Juxtaposition relationship:

It belongs to brotherhood

HTML basic structure tag

@There will be a basic structure tag (skeleton tag) in HTML web pages

@@HTML web pages are also called HTML documents

@@HTML is the largest tag in the page (root tag):


@@head tag this is a header tag:


@@The function of title is the page title:


@@The body tag is the subject part of the document, which contains all the page content


@@Full format:

            <title>hello world</title>//Tab section
    <body>first html</body>   


@Open in Browser a plug-in that opens in a browser

@js css html formatter will automatically format the plug-in of js css and html code every time it is saved

@Auto Rename Tag is a plug-in that automatically renames paired HTML/XML tags

@CSS Peek trace to style plug-in

VS CODE writes the first few important lines of code

@! You only need an exclamation point on the first line to jump out, and the options are in the html file

@! DOCTYPE document class declaration tag, which HTML version is used to display web pages

<!DOCTYPE html>
Tell the browser to use HTML5 edition

@<html lang="zh-CH">

<html lang="zh-CH">Tell the browser what language this web page uses

meta charset = "UTF-8" tells the browser what character set is used

<meta ccharset="UTF-8">use UTF-8 Universal code character set

Common HTML tags

Title label

@Title label definition:

<h1>reach<h6>There are six levels of labels

@@h is the abbreviation of head

Paragraph label

@Paragraph label syntax:


##Line feed label br /

<br />
Single label
 The other line is not a paragraph
 Function of interruption and line feed

Text formatting label

@Sometimes in web pages, special effects are added to the text
@@This is called text formatting
@@@Bold label strong or b


@@@Slash label em or i


@@@Delete line label del or s


@@@Underline label ins or u


div and span Tags

@div and span are boxes without meaning


<div></div>//Indicates division and partition
<span></span>//Span, span

@@div can only be placed in one line
@@span a row can hold many small boxes

Image label

@img tag usage:

<img src = "image UCR"/>
src Is a required attribute used to specify the path and file name of the image file

@@Other properties of picture labels:
@@@alt is the replacement text. Text that the image cannot display:

<img src="abcd.jpg" alt="This is abcd"/>

@@@title is the prompt text. When the mouse moves over the picture, the text will be displayed

<img src="abcd.jpg" title="The mouse is on the abcd On the picture"/>

@@@Width sets the width of the image

<img src="abcd.jpg" width="500"/>//The pixel height of the picture abcd is 500

@@@Height sets the height of the image

<img src="abcd.jpg" height="100"/>//The width of the oak tree on picture abcd is 100

@@@Border sets the border thickness of the image

<img src="abcd.jpg"border="15"/>   //Added a 15 pixel wide border

@@Considerations for using attributes
@@@If two attributes are used in an image label, there must be a space between them:

<img src="abcd.jpg"width="500"/> //Error demonstration
<img src="abcd.jpg" width="500"/>  //Correct demonstration


@Directory folder and root directory

@@Directory folder, which stores files related to web pages (the first layer of file directory)

@Relative path

@@The directory path is established based on the location of the reference file

@@Relative path classification:

@@@The same level only refers to the picture name and file format, and there are no other symbols

<img src ="abcd.png" />

@@@/The next level directory / / is the word directory in the root directory, or a subdirectory of a subdirectory of the root directory

<img src="tp/abcd.png" />

@@@... / upper level directory / / it is the upper level directory of a subdirectory. It may be a root directory or a subdirectory

<img src="../abcd.png" />

@Absolute path

@@Direct to target location

@@The absolute path is the directory path in the computer

@@@The absolute path uses \ to reach:

<img src="C:\Program Files (x86)\Microsoft\Edge\Edge.png" />//Consider the icon file of Edge browser as png format

@@@Absolute address on the network:

<img src="" />

Hyperlink label

@The function of hyperlinks is to connect from one page to another

@@Label of hyperlink:

<a href="http://www.bilibili. Com "target =" pop up method of target window "> text or image</a>

@@@Properties of hyperlink labels

@@@@Href is the url address used to specify the link target, (required attribute). When the href attribute is applied to the tag, it has the function of hyperlink

@@@@target is used to specify the opening method of the linked page, where_ self is the default_ blank is the way to open in a new window.

@@@Parameter of target attribute

@@@@_ self / / jump to the current page

@@@@_ blank / / automatically create a new page and jump to the page

@Internal links

Internal links: links between internal pages of a website Directly link the internal page name, for example:

<a href="abcdtp.html">abcd picture</a >

@Empty link


<a href="#"> Home Page</a>

@Download link

@@If the address in href is a file or compressed package, the file will be downloaded

<a href="">File download</a>

@Various elements in the web page can be used as hyperlinks

@@Hyperlinks can be added to text, video, pictures, audio, tables, etc

Anchor link

@Anchor link is to click a keyword in a page to jump to the specified position of the current page

@@The use symbol # of the anchor link is followed by a name:

<a href="#abcd">abcdxinxi</a>

@@Add an id attribute to the tag, which should be the same as the name in href:

<h3 id="abcd">abcdxinxi</h3>

pre tag

@The pre tag will not omit anything. What is in the pre tag will be displayed. If there is a space, it will be realized, and the space line feed will not be omitted

a www w w w w wwwwa
a                 n
  b              l
    c         m 
       d    k
      z      f 
   i           g
w w w w w w w w w 

textarea label text label

@textarea can be written in it or pre input text in it, including line breaks and spaces


@@Parameters of textarea

@@@How many characters can cols hold vertically

@@@How many words can cols horizontal axis hold

@@@Name displays the name of the text box

@@@Warp when warp="off", it means that there is no automatic line feed in the text area

@@@style you can set the background color of the text box
@@@clas is used to call the settings in the external css


<textarea cols=40 rows=10 name=text></textarea>
Set the number of lines and columns of the text box to 40 and 10. Name is text. 

Topics: html5 html