Front-end study notes 1--HTML cognition

1. Basic cognition

1.1 Basic concepts

1) The components of a web page
are text, pictures, audio, video, and hyperlinks
2) How to convert the written code into a page?
The browser (rendering and parsing) is converted into a web page
3) The role of the rendering engine
The part of the browser that parses and renders the code, the display effect of the same web page in different browsers is inconsistent.
4) web standard
HTML – structure – page elements and content
CSS – performance – page style (color, size)
JavaScript – behavior – dynamic effects of page interaction

1.2 HTML (Hypertext Markup Language)

1) Fixed structure represented
by HTML tags

<html>
	<head>
		<title>网页的标题</title>
	</head>
	<body>
		网页的主体内容
	</body>
</hyml>

2) Comment
ctrl+/
3) Label composition
a. Labels are composed of <, >, /, English words or letters. And the English words or letters included in <> in the label are called the label name
b. Common labels are composed of two parts, called: double labels . The first part is called the start tag , the second part is called the end tag , and the content between the two parts is wrapped
c. A small number of tags are composed of one part, which we call: single tag . Self-contained, unable to wrap content.
4) Tags
4.1) Typesetting tags
a. Title tags

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

The importance is in descending order, the text is bold, the text becomes larger, and occupies a single line
b. Paragraph tags

<p> 文字</p>

Exclusively on one line, there is a gap between two labels
c. Newline label

<br>

tip: There are spaces before and after it will be automatically filled
d. Horizontal line label

<hr>

4.2 Text formatting tags
insert image description here
4.3 Media tags
a) Image tags

<img src="文件名" alt="替换文本（图片不显示时显示的文字）" title="提示文本（鼠标悬停显示）" width="" height="">

Attributes are separated by spaces
b) path
current position./return
to previous level.../
c) audio tag

<audio src="路径" controls（添加播放按钮） autoplay（自动播放 不是所有浏览器适用） loop 循环播放></audio>

Support mp3, wav, ogg
d) video tag

<video src="路径" controls（添加播放按钮） autoplay（自动播放 不是所有浏览器适用） loop 循环播放></video>

Google Chrome supports autoplay video but must be muted
Supports mp4, wav, ogg
e) link tags

 <a href="跳转地址" target = "_blank”>跳转到目标网页</a>

In the early stage of development, I don’t know the jump URL, so I can write the value of herf as #
target to control the opening of the webpage_blank New tab page opens