The recommended front-end learning route is as follows:

HTML, CSS, JavaScript, noodJS, component libraries, JQuery, front-end frameworks (Vue, React), WeChat applets and uniapp, TypeScript, webpack and vite, Vue and React code sources, NextJS, React Native, back-end content. . . . . .

HTML basic structure:

<!-- doc document 文档  type 类型   html hyper text markup language 超文本标记语言 -->

<html></html>      根

<head></head>      头部  放置页面相关信息

<body></body>      身体  放置内容

<title><title>     标题

Web page structure display:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- meta  元  charest 字符集   utf-8 字符编码 -->
		<title></title>
		
	</head>
	<body>
		【HTML】重点知识内容~快速上手
	</body>
</html>

Common tags:

h1~h6

Indicates that the label text of level one to level six is bold, has its own text size, and occupies a single line, with default spacing

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

p

Identify a paragraph (there is a paragraph spacing between paragraphs);

By default, on a web page, the content on the page will not wrap according to the code we wrote. `Enter` will be rendered as a `space`;

<p>这是一段文字</p>

<p>
  这是一段文字
</p>

img

The abbreviation of image, img is a single label, the function is to display an image on a web page.

Attributes

The abbreviation of src
source indicates the source of the image, and the image address can be set in src
alt
When the picture fails to load, display the text content in the corresponding alt
title
When the mouse is placed on the picture, a prompt text is displayed
width wide
high

src

Can be an absolute path or a relative path

Absolute path can use the path of
the file in the computer or the E:\H5\02_HTML\代码\xxx.jpg
network path https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
Relative path
In general, when we are doing static pages, resources such as background images and icons in the page do not change frequently. It is generally stored in the project and imported with a relative path.

The relative path remembers two concepts ./ and ../, which represent the current directory and the parent directory respectively. Generally we are in the normal project structure.

Recommend a usage method, enter directly in src and ./ then follow the prompts to select the corresponding folder and corresponding file

- 项目文件夹
  - css
  - img
  - js
  - 网页1.html
  - 网页2.html

size setting

We can add two attributes, width and height, to the picture to set the width and height of the picture

number
percentage

Notice! ! ! As long as the width and height are set on one side, it will be proportionally scaled. If both are set, unless they are all proportionally scaled, otherwise they will be deformed

<img src="图片地址" alt="图片加载失败时显示的文字" title="鼠标悬停后显示的内容" width="100" height="100"/>

Text style attributes (emphasis attributes)

me and

You can make the text italic, em means emphasis, and i means italics. In the project, many people put i the label displayed as the icon.

barrel b

You can make the text bold, stong means emphasis, and b means bold text.

br

Line breaks can be implemented in web pages, just like a carriage return.
If we actively use it frequently during project development, brit means that there is a problem with writing

hr

Dividing line, to achieve a horizontal line on the web page, and rarely used

<em>倾斜</em>
<i>倾斜</i>
<strong>加粗</strong>
<b>加粗</b>
<br>
<hr>

Special tags:

2<sup>3</sup>   上标
0<sub>2</sub>   下标
<del></del>     删除线
<u></u>         下划线
<s><s>          删除线

special symbols

&nbsp   空格
&gt     大于号
&lt     小于号
&copy   版权

a

Hyperlinks, on web pages, there are many hyperlinks. must be able to use

Attributes

href Mandatory attribute
The setting of the hyperlink jump path, which can be 网址, or相对路径
target Set the opening method of the window; _blank When the page is opened, it will be opened in a new window, if not set, it will be opened in the current window; _self Default value, open this window
title
When the mouse is placed on the hyperlink, a hint text is displayed

<a href="链接">超链接</a>
<a href="链接" target="_blank">超链接</a>

the list

ordered list
unordered list
definition list

Unordered lists are the most used in web pages

ordered list

<ol type="" start="">
  <li></li>
  <li></li>
  <li></li>
</ol>

type type:

type="A/a/I/i/1"

start="4"

Define the starting position, the attribute value must be a number.

unordered list

<ul type="">
  <li></li>
  <li></li>
  <li></li>
</ul>

type type:

type="disc" solid circle

type="circle" hollow circle

type="square" square

type="none" None

definition list

<dl>
  <dt>标题  关键词（可以插图片和文本）</dt>
  <dd>对内容的详细解释</dd>
  <dd></dd>
  <dd></dd>
  <dd></dd>
  <dd></dd>
<dl>

table

This is an important label, but it was not commonly used in the user-oriented websites we made in the early days.

Plug-in: table width*height=table>tr*n>td*n

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>

  </tfoot>
</table>

When writing a table, thehead, tbody, tfoot can be omitted.

properties of the form

-width="" the width of the table

-height="" the height of the table

-border="" table border

-bordercolor="" the color of the table border

-bgcolor="" background color

-cellspacing="" Spacing between cells

-cellpadding="" spacing from content to border

-aligen="" left center right horizontal alignment

-valign="" top bottom middle basline vertical alignment

Interbank

If we want a certain cell to span multiple rows, add `rowspan` to this td to achieve cross-row operation

-rowspan="The number of rows to merge cells" Merge rows

across columns

If we want a cell to span multiple columns, add `colspan` to this td to achieve cross-column operations

-cowspan="The number of columns to merge cells" Merge columns

form form

Form tags will not be commonly used in the future, because form has been gradually replaced by ajax. But when we wrote the page in the early stage, we still had to use

We should wrap all form elements in a form (not required)

<form method="post"></form>

method method, method, defines the method of submitting the form.

get is to get

method="get" Gets data from the server. During data transmission, users can see the process on the address bar. The default transmission method is relatively low security.

post is to pass data

method="post" transmits data to the server. During the data transmission process, the user cannot see it on the address bar, and the security is relatively high.

<form action=""></form>

Who is the action set to after the data is passed?

input (inline block, replaced element)

There are many forms of input, which need to be controlled by the type attribute

<form>
  <input type="text">
</form>

type

text
text input box, the most commonly used, let users enter the content we want to get in the text box
password
password, let the text be displayed in ciphertext (unsafe)
Radio
single selection (a name attribute must be added, and the attribute values of the same group must be the same), and multiple options are only selected for temporary use, such as gender
Checkbox
multi-choice, when there are multiple options to choose, such as hobbies
submit
Submit button, automatically display the word submit, which can be modified by value
reset
reset button, custom display reset two words, can be modified by value
button
is an ordinary button, has no function, and needs to display text through value configuration
file
file upload, you can upload local files

<form>
  <input type="text" name="" value="" placeholder="这是一个提示文本，输入内容后消失">
</form>

value

In general, value is used to obtain the corresponding user input value, which is used to help the system display the content.

name

If we want to use form submission, all elements in the form need to add the name attribute

<input type="radio" name="sex" id="qita"><label for="qita">不明</label>    点击文字即可选中
<label for=""><input type="radio" name="sex" checked>男</label>       方便修改文本样式

placeholder

Set reminder information

button

Ordinary button, if the button is placed in the form, the button will automatically have the submit function

<button>按钮</button>
<input type="button">            两种的作用相同

select > option

The drop-down selection box needs to wrap multiple options with select

<select>
  <option value="123">选项2</option>
  <option value="123">选项3</option>
  <option value="123">选项1</option>
  <option value="123">选项4</option>          选项显示在浏览器，123是提交给服务器的数据
</select>

textarea

Text field, used when entering multiple lines of text

<textarea></textarea>

The state of elements within the form

blur
loses focus
focusGet
the focus
checked is added to radio and checkbox, used to set the selected state of the corresponding option, added means selected
selected is added to option, used to set the option that is selected by default
readonly read-only, added to the input box, cannot modify the content, only view
disabled is added to the element, the corresponding element is disabled, and the style becomes gray

page division

<div>用来划分页面区域的</div>
<span>修饰独立小部分内容</span>

Both do not have a fixed format representation. He only changes visually when styles (CSS) are applied to him.

[HTML] Key knowledge content ~ quick start

HTML basic structure:

Web page structure display:

Common tags:

h1~h6

p

img

Attributes

src

Text style attributes (emphasis attributes)

me and

barrel b

br

hr

Special tags:

special symbols

a

Attributes

the list

ordered list

unordered list

type type:

definition list

table

properties of the form

Interbank

across columns

form form

input (inline block, replaced element)

type

value

name

placeholder

button

select > option

textarea

The state of elements within the form

page division

Guess you like