html basic syntax and usage
01 Template
- When using VScode to create html files, you can type! How to quickly get html template
- Note: These are English symbols! Number
02 comments
- The shortcut key is Ctrl+/
03 Label type
- Divided into single label and double label
- double label
- single label
04 Label attributes
1. Double tags can be nested with other tags
- renderings
2. Attributes can be added after the tag name
- Common attributes:
id,class,title, etc.
05 Opening method
- Download the plug-in Live Server in VScode
- Right click and select open with Live Server
- Advantages: The browser automatically updates after saving the code, no manual update is required.
06 title tag
-
<h1> - <h6>Fonina-de-Fontaine
Fonina-de-Fontaine
Fonina-de-Fontaine
Fonina-de-Fontaine
Fonina-de-Fontaine
Fonina-de-Fontaine
-
renderings
07 paragraph tags
<p> </p>
Used to quickly set paragraph text, with built-in indentation effect for the first line of the paragraph.
<p>芙宁娜，米哈游出品的游戏《原神》及其衍生作品中的角色，魔神名芙卡洛斯，“尘世七执政”中的末任水神，众水、众方、众民与众律法的女王，曾经统治着水之国枫丹 ，深受民众喜爱 。</p>
- renderings
08 Text modification tag
1. Bold text
-
<strong> </strong>Used to quickly set the text bold effect.
2. Italic text
<em> </em>
Used to quickly set the text italic effect
3. Superscript text
<sup> </sup>
Used to quickly set text as a superscript effect
4. Subscript text
<sub> </sub>
Used to quickly set text as a subscript effect.
5. Delete text
<del> </del>
Used to quickly set text to have a strikethrough effect to describe deletions in the document.
6. Add text
<ins> </ins>
Used to quickly set text to have an underline effect to describe updates and corrections in the document.
- Case
<p>
<strong>芙芙</strong>
<em>芙芙</em>
芙芙<sup>2</sup>
芙芙<sub>2</sub>
<del>芙芙</del>
<ins>芙芙</ins>
</p
- renderings
09 Image Tags
<img src="" alt="">
Quote an image.
- **src: **The file address of the image [disk address (relative path/absolute path), network address].
- **alt:** When the picture cannot be displayed normally, the text prompt will be displayed instead.
<img src="image-20231212183411453.png" alt="图片加载失败">xxxxxxxxxx <img src="image-20231212183411453.png" alt="图片加载失败">
- renderings
10 file path
- Divided into local path and network path
- Local paths are divided into relative paths and absolute paths
- The relative path is the image path relative to the project file (commonly used)
- The absolute path is the location of the image on the local computer
- The network path is the location of the image on the network
11 link tags
<a href="" target=""> </a>
Jump from one page to another (can be other URLs or local html).
-
href
Jump address (a link or other html file).
-
target
How to open the link (
_self- open in the current page [default value]_blank- open in a new tab).
12 anchor points
-
<a href="#id" > </a> -
The cooperative use of tags and attribute ids
-
If a scroll bar appears on the page, you can jump to the specified label position in this page.
-
href
jumping eyes 标标签的【id值】.