Article directory
- 1.HTML syntax specifications
- 2.HTML basic structure tags
- 3. Development tools
- 4.HTML common tags
- 5. Comments and special characters in HTML
1.HTML syntax specifications
1.1 Basic syntax overview
- HTML tags are keywords surrounded by angle brackets, for example
<html>. - HTML tags usually appear in pairs, such as
<html>and<html>, which we call double tags. The first tag in a tag pair is the opening tag, and the second tag is the closing tag. - Some special tags must be single tags (rare cases), for example
<br/>, we call them single tags.
1.2 Label relationship
- inclusion relationship
<head>
<title></title>
</head>
- Constellation
<head></head>
<title></title>
2.HTML basic structure tags
2.1 The first HTML web page
Every web page will have a basic structure tag (also called a skeleton tag), and the page content is also written on these basic tags.
HTML pages are also called HTML documents.
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
键盘敲烂，月薪过万
</body>
</html>
| tag name | definition | illustrate |
|---|---|---|
<html></html> |
HTML tags | The largest tag on the page, called the root tag |
<head></head> |
document header | The tag that must be set in the head tag is title |
<title></title> |
The title of the document | Give the page its own title |
<body</body> |
body of document | The content of the page is basically placed in the body. |
3. Development tools
3.1Usage of VScode
- Double-click to open the software.
- Create a new file (Ctrl + N).
- Save (Ctrl + S), note that the move should be saved as a .html file
- Ctrl + plus sign key, Ctrl + minus sign key can zoom in and out the view
- Generate the page skeleton structure.
Enter! Press the Tab key. - Use the plug-in to preview the page in the browser: right-click the mouse and click "Open In Default Browser" in the pop-up window.
3.2 Document type declaration tag
The function of the document type declaration is to tell the browser which HTML version to use to display the web page.<!DOCTYPE html>
The meaning of this code is: The current page uses the HTML5 version to display the web page.
Note:
<!DOCTYPE>Declarations are placed first in the document, before tags.<!DOCTYPE>It's not an HTML tag, it's a document type declaration tag.
3.3 lang language type
- en definition language is English
- zh-CN defines the language as Chinese
To put it simply, a web page defined as en is an English web page, and a web page defined as zh-CN is a Chinese web page.
In fact, for document display, documents defined as en can also display Chinese, and documents defined as zh-CN can also display English.
This attribute is suitable for Browsers and search engines (Baidu, Google, etc.) still work
3.4Character set
Character set (Character set) is a collection of multiple characters. So that the computer can recognize and store various texts. Within <head>the tag, you can <meta>specify which character encoding the HTML document should use through the tag's charset attribute.
<meta charset=" UTF-8" />
Commonly used values of charset are: GB2312, BIG5, GBK and UTF-8, among whichUTF-8Also known as the Universal Code, it basically contains the characters that all countries in the world need to use.
Note: The above syntax is code that must be written, otherwise it may cause garbled code. Under normal circumstances, use "UTF-8" encoding uniformly and try to write it as standard "UTF-8" instead of "utf8" or "UTF8".
4.HTML common tags
4.1 Semantics of tags
Learning labels is tricky, the key is to remember eachtag semantics. A simple understanding refers to the meaning of the label, that is, what the label is used for.
According to the semantics of the tag, giving the most reasonable tag at the appropriate place can make the page structure clearer.
4.2 Title Tag <h1> - <h6>(Important)
In order to make web pages more semantic, we often use title tags in pages. HTML provides 6 levels of web page titles, namely<h1> - <h6>
<h1> 我是一级标题 </h1>
The abbreviation of the word head means head and title.
tag semantics: Used as a title, in descending order of importance.
Features:
- The text with the title will become bold, and the font size will also increase in sequence.
- A title on its own line.
Code:
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
Effect:
There are six levels of title selection,
The text is bolded and displayed in one line.
Decrease in order from large to small,
It changes from heavy to light.
After the grammar specification is written,
See refresh for specific effects.
4.3 Paragraph and line break tags (important)
In a web page, if you want to display text in an orderly manner, you need to display the text in segments. In HTML tags, < p >tags are used to define paragraphs, which can divide the entire web page into several paragraphs.
Abbreviation of the word paragraph [ˈpærəgræf], meaning paragraph.
tag semantics: HTML document can be divided into several paragraphs.
Features :
- Text within a paragraph will wrap automatically based on the size of the browser window.
- Leave gaps between paragraphs.
4.4 Text formatting tags
In web pages, sometimes you need to set bold, italic, or underline effects for text. In this case, you need to use text formatting tags in HTML to
display the text in a special way.
tag semantics: Highlight the importance, more important than ordinary text
| Semantics | Label | illustrate |
|---|---|---|
| Bold | <strong></strong>or<b></b> |
It is more recommended to use <strong>. The semantics are stronger |
| tilt | <em></em>or<i></i> |
More recommended <em>, the semantics are stronger |
| strikethrough | <del></de>or<s></s> |
More recommended <del>, the semantics are stronger |
| Underline | <ins></ins>or<u></u> |
More recommended <ins>, the semantics are stronger |
Remember to bold and italic.
4.5 <div>and <span>tags
<div>and <span>have no semantics, they are just a box used to hold content.
<div> 这是头部 </div>
<span> 今日价格 </span>
div is the abbreviation of division, which means division and partition. span means span, span.
Features:
<div>Tags are used for layout, but now you can only place one per line<div>. big box<span>Tags are used for layout, and there can be multiple on a line<span>. small box
4.6 Image tags and paths (key points)
4.6.1 Image tags
In HTML tags, <img>tags are used to define images in HTML pages.
<img src="图像URL" />
Abbreviation of the word image, meaning image.
src is <img>a required attribute of the tag, which is used to specify the path and file name of the image file.
The so-called attributes: A simple understanding is the characteristics of this image tag.
Additional properties of image tags:
| Attributes | attribute value | illustrate |
|---|---|---|
| src | Image path | Required attributes |
| alt | text | Replacement text. Image cannot display text |
| title | text | Reminder text. When the mouse is placed on the image, the text displayed |
| width | Pixel | Set the width of the image |
| height | Pixel | Set the height of the image |
| border | Pixel | Set the border thickness of the image |
Notes on image tag attributes:
① Image tags can have multiple attributes, which must be written after the tag name.
② The attributes are in no particular order. Tag names and attributes, and attributes and attributes are all separated by spaces. ③ The attributes take the format of key-value pairs, that is, the format of key="value" and attribute="attribute value".
4.6.2 Path (preliminary knowledge)
- Directory folders and root directories
- In actual work, our files cannot be placed randomly, otherwise it will be difficult to find them quickly, so we need a folder to manage them.
- Directory folder: It is an ordinary folder, which only stores the relevant materials we need to make pages, such as html files, pictures, etc.
- Root directory: The first level of the directory folder is the root directory
- VSCode open directory folder
file----Open the folder. Select the directory folder. It is very convenient to manage files later.
There will be a lot of pictures on the page. Usually we will create a new folder to store these image files (images). When looking for images, we need to use the "path" method to specify the location of the image files.
Paths can be divided into:
- Relative path
Relative path: start withThe location of the referenced fileThe directory path established as a reference basis.
To put it simply, the position of the image relative to the HTML page
| Relative path classification | symbol | illustrate |
|---|---|---|
| Same level path | The image file is located at the same level as the HTML file, such as<img src="baidu.gif" /> |
|
| next level path | / | Image files are located one level below the HTML file <img src="images/baidu.gif" />. |
| Previous level path | …/ | Image files are located above HTML files - such as <img src="../baidu.gif"/>. |
The relative path starts from the file where the code is located to find the target file, and the upper level, lower level and same level we are talking about here are
The position of the image relative to the HTML page.
- Absolute path
Absolute path: refers toAbsolute location under directory, directly to the target location, usually the path starting from the drive letter.
For example, "D:\web\img\logo.gif" or the complete network address "http://www.itcast.cn/images/logo.gif".
4.7 Hyperlink tags (key points)
In HTML tags, <a>tags are used to define hyperlinks, which link from one page to another.
4.7.1 Link syntax format
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
Abbreviation of the word anchor [ˈæŋkə®], meaning: anchor.
The functions of the two attributes are as follows:
| Attributes | effect |
|---|---|
| href | Used to specify the URL address of the link target. (Required attribute) When the href attribute is applied to a tag, it has the function of a hyperlink. |
| target | Used to specify the opening method of the linked page, where _self is the default value and _blank is the opening method in a new window. |
4.7.2 Classification of links
- External links: For example < a href="http:// www.baidu.com "> Baidu.
- Internal links: mutual links between internal pages of the website. Just link the internal page name directly, such as < a href="index.html"> home page.
- Empty link: If the link target is not determined at that time, < a href="#"> Home page.
- Download link: If the address in the href is a file or compressed package, the file will be downloaded.
- Web page element links: Hyperlinks can be added to various web page elements in the web page, such as text, images, tables, audio, video, etc.
- Anchor link: Click on the link to quickly navigate to a certain location on the page.
- In the href attribute of the link text, set the attribute value to the form of #name, such as
<a href="#two">第2集</a> - Find the target location label and add an id attribute = the name just now, such as:
<h3 id="two">第2集介绍</h3>
- In the href attribute of the link text, set the attribute value to the form of #name, such as
5. Comments and special characters in HTML
5.1 Notes
If you need to add some comment text to an HTML document that is easy to read and understand but does not need to be displayed on the page, you need to use comment tags.
Comments in HTML “<!--”开头，以“ -->end with ".
<!-- 注释语句 --> 快捷键: ctrl + /
In a word: The content in the comment tag is for programmers to see. This code is not executed or displayed on the page.
Comments are added to better explain the function of the code and facilitate relevant developers to understand and read the code. The program is Comment content will not be executed.
5.2 Special characters
In HTML pages, some special symbols are difficult or inconvenient to use directly. At this time, we can use the following characters instead.
Key points to remember: spaces, greater than sign, and less than sign, the rest are rarely used, just refer back to them if you need to.