html1, acquaintance html

vs code editor

Install plug

chinese Chinese support
open in browser to quickly preview files
view in browser

hot key

hot key	description
shift + end	Selected from the cursor to the end of
shift + home	Select from the cursor to the beginning of the line
direction vertical shift + alt +	Fast copy and paste the current line
alt + direction / lower	Fast and up / down movement
tab	Backward indent
shift + table	Forward indent
alt + left mouse button	Multi-Cursor Editor
ctrl + d	Select the same next element

three core web technology

HTML
CSS
javaScoript

HTML
HTML

Hypertext: text + non-text content (images, video, audio, etc.)

Initial code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Code	description
<!DOCTYPE html>	H5 document declaration, tells the browser which is a html file
<html>	Outermost tag html file
	lang = "en" represents an English website
	lang = "zh-CN" represents a Chinese website
<meta charset="UTF-8">	Meta-information, some assignment information in the preparation of the page
	charset = "UTF-8" international code, so that the situation does not appear garbled pages
<title>	Title of the page

Note

Writing

<!-- 注释的内容 -->

significance

Tip 1 add the code
Up to 2 code comments for later use

hot key

ctrl+/
In front of the cursor to be annotated, performing ctrl + /

shift + alt + a
Select the content to be annotated, perform shift + alt + a

Title and paragraphs

Title
h tags
in a web page, h1 tag is very important, and a .html file can only appear once h1 tags
h5 and h6 tags are not used

    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

Paragraphs
p label

<p>段落,会自动换行</p>

Text-decoration label

Text-decoration label	description
<strong>	For emphasis, the text will be bold
<em>	For emphasis, gray text in italics
<sub>,<sub>	Subscript text, text insertion
<del>,<ins>	Delete text, insert text

Picture tags

Image tag
img

Attributes	description
src	Introduced picture address
alt	When the picture there is a problem, it can display a text
title	Message, the mouse into the picture, it will display a message
width,height	Picture size (height, width), the default unit is pixels. When the network more slowly, the picture is not loaded when these two attributes can first hold up the position occupied by the picture

<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg" alt="正在努力加载中" title="人生如梦" width="600" height="430">

The introduction of an address path to the file

relative path

. Indicates that the current path in the path
.. showing on a path in the path

Absolute path

C:\Users\inmeditation\Pictures\1.1\1.PNG
https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg

<!-- 插入本地图片 -->
<img src="../../Pictures/1.1/1.PNG" alt="">

Which in the current file 1.png layer on layer of the file directory Pictures

<!-- 插入本地图片 -->
<img src="C:\Users\inmeditation\Pictures\1.1\1.PNG" alt="">

Discovery and backward slashes preview can be normal, but to avoid using a backslash

Jump Links

a label

Attributes	description
href attribute	Link address
The target property	You can change the link to open the way
	_self page open in the current, default
	_blank opens a new window

<!-- 为文字添加链接 -->
<a href="http://www.sunlizhao.cn" target="_blank">我的网站</a>

<!-- 为图片添加链接 -->
<a href="http://www.sunlizhao.cn"><img src="../../Pictures/1.1/1.PNG" alt=""></a>

base label
change a link to the default behavior of the jump
when the entire page of labels, we need to make the new window opens way
you can set a target attribute for each label, the label can also be set by the global base

<head>
    <base target="_blank">
</head>

Jump anchor

And the difference hoplinks

Anchor in the current jump between the inside pages
used in the directory, back to the beginning of the line and end of line operations etc

To achieve a

<a href="#html">html</a>
<a href="#css">css</a>
<a href="#JavaScript">JavaScript</a>

<h2 id="html">html</h2 id="html">
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<h2 id="css">css</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<h2 id="JavaScript">JavaScript</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

Achieve two

<a href="#html">html</a>
<a href="#css">css</a>
<a href="#JavaScript">JavaScript</a>

<a name="html"></a>
<h2>html</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<a name="css"></a>
<h2>css</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

<a name="JavaScript"></a>
<h2>JavaScript</h2>
<p>模拟的段落</p>
...
<p>模拟的段落</p>

Special symbols

Implementation can resolve the conflict, left and right angle brackets, add more spaces

symbol	description	effect
	Blank
©	copyright	©
®	Trademark	®
<	Less than sign	<
>	大于号	>
&	逻辑和	&
¥	人民币	¥
°	摄氏度	°