HTML syntax specification
@Double label
@@Start and end labels:
<html></html>
@Single label
@@There is only one label:
<br /> //There is a space
@Inclusion relation
@@Nested tags in Tags:
<head> <title></title> </head> Belonging to parent-child relationship
@Juxtaposition relationship:
<head></head> <title></title> 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):
<html></html>
@@head tag this is a header tag:
<head></head>
@@The function of title is the page title:
<title></title>
@@The body tag is the subject part of the document, which contains all the page content
<body></body>
@@Full format:
<html>
<head>
<title>hello world</title>//Tab section
</head>
<body>first html</body>
</html>
VS CODE HTML plugin
@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 <h1><h1/> <h2><h2/> <h3><h3/> <h4><h4/> <h5><h5/> <h6><h6/>
@@h is the abbreviation of head
Paragraph label
@Paragraph label syntax:
<p></p>
##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
@@Italics
@@Bold
@@Underline
@@This is called text formatting
@@@Bold label strong or b
<strong></strong> <b><b>
@@@Slash label em or i
<em></em> <i></i>
@@@Delete line label del or s
<del><del> <s></s>
@@@Underline label ins or u
<ins></ins> <u></u>
div and span Tags
@div and span are boxes without meaning
@Usage:
<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
route
@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="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" />
Hyperlink label
@The function of hyperlinks is to connect from one page to another
@@Label of hyperlink:
<a>
<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="abcd.zip">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
<pre>
a www w w w w wwwwa
a n
b l
c m
d k
e
z f
i g
h
w w w w w w w w w
</pre>
textarea label text label
@textarea can be written in it or pre input text in it, including line breaks and spaces
@@Usage:
<textarea></textarea>
@@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
@@@Demo:
<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.