推荐前端学习路线如下：

HTML、CSS、JavaScript、noodJS、组件库、JQuery、前端框架（Vue、React）、微信小程序和uniapp、TypeScript、webpack 和 vite、Vue 和 React 码源、NextJS、React Native、后端内容。。。。。。

HTML基本结构：

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

<html></html>      根

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

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

<title><title>     标题

网页结构展示：

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

常用标签：

h1~h6

表示一级到六级标签文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距

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

p

标识一个段落(段落与段落之间有段间距)；

默认情况，在网页上，页面上的内容不会按照我们写的代码进行换行。`回车` 会被渲染成一个 `空格`；

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

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

img

image的缩写，img是一个单标签，功能是在一个网页上展示一个图片。

属性

src
source的缩写，表示图片的源，在src可以设置图片地址
alt
当图片加载失败时显示对应的alt中的文本内容
title
当鼠标放在图片上时，显示一段提示文字
width 宽
height 高

src

可以是绝对路径，也可以是相对路径

绝对路径
可以使用电脑中的文件的路径 E:\H5\02_HTML\代码\xxx.jpg
也可以使用网络路径 https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png 未来我们的网页上，最后上线，几乎都是网络地址
相对路径
一般情况下，我们在做静态页面时，页面中的背景图，图标等不常更改的资源。一般存放在项目中，做相对路径引入。

相对路径记住两个概念 ./ 和 ../，分别表示当前目录和上一级目录。一般我们在正常的项目结构中。

推荐一个使用方法，在src中直接输入 ./ 接下来根据提示选择对应的文件夹及对应的文件

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

大小设置

我们可以给图片添加width和height两个属性，设置图片的宽高

数字
百分比

注意！！！宽高只要设置一边，就会等比缩放，如果都设置，除非都是等比例缩放，否者会变形

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

文字的样式属性（强调属性）

em i

可以让文字倾斜，em表示强调，i表示文字斜体。在项目中，很多人把 i 作为图标展示的标签。

stong b

可以让文字加粗，stong表示强调，b表示文字加粗。

br

可以在网页中实现换行，就像是一个回车。
如果我们在项目开发中，主动频繁使用 br，说明写的有问题

hr

分割线，在网页上实现一条横线，也很少使用

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

特殊标签：

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

特殊符号

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

a

超链接，在网页上，存在着很多的超链接。一定要会用

属性

href 必填属性
超链接跳转路径的设置，可以是网址，也可以是相对路径
target 设置窗口的打开方式； _blank 页面打开时在新的窗口中打开，如果不设置，则在当前窗口打开； _self 默认值，打开本窗口
title
当鼠标放在超链接上时，显示一段提示文字

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

列表

有序列表
无序列表
定义列表

无序列表在网页中应用最多

有序列表

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

type类型：

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

start="4"

定义开始位置，属性值必须是数字。

无序列表

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

type类型：

type="disc" 实心圆

type="circle" 空心圆

type="square" 方形

type="none" 没有

定义列表

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

表格（table）

这是一个重要的标签，但是前期我们所做的面向用户的网站中，不常用。

插件：表格宽*高=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>

在写表格时，thead , tbody , tfoot 可以省略不写。

表格的属性

-width="" 表格的宽度

-height="" 表格的高度

-border="" 表格的边框

-bordercolor="" 表格边框的颜色

-bgcolor="" 背景颜色

-cellspacing="" 单元格之间的间距

-cellpadding="" 内容到边框的间距

-aligen="" left center right 水平对齐方式

-valign="" top bottom middle basline 垂直对齐方式

跨行

如果我们想让某一个单元格，跨多行，给这个td添加 `rowspan` 可以实现跨行操作

-rowspan="所要合并单元格的行数" 合并行

跨列

如果我们想让某一个单元格，跨多列，给这个td添加 `colspan` 可以实现跨列操作

-cowspan="所要合并单元格的列数" 合并列

form表单

表单标签未来不太常用，因为form已经逐渐被ajax替代了。但是我们前期写页面时，还是要使用

我们应该把所有的表单内元素包裹在一个form中（非必须）

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

method 方式，方法，定义表单提交的方法。

get是获取

method="get" 从服务器上获取数据，在数据传输的过程中，用可以在地址栏上看到过程，默认传递方式，安全性比较低。

post 是传递数据

method="post" 向服务器传送数据，在数据传递过程，用户在地址栏上看不到，安全性比较高。

<form action=""></form>

action设置数据传递之后给谁？

input(行内块、置换元素)

input有很多种形态，需要通过type属性进行控制

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

type

text
文本输入框，最常用，让用户在文本框中输入我们想要获取的内容
password
密码，让文本以密文显示（不安全）
radio
单选（必须加一个name属性,且同组的属性值必须一样），多个选项只选其一时使用，如性别
checkbox
多选，当有多个选项需要选择时，如爱好
submit
提交按钮，自动显示提交两个字，可以通过value修改
reset
重置按钮，自定显示重置两个字，可以通过value修改
button
普通按钮，没有功能，需要通过value配置显示文本
file
文件上传，可以进行本地文件的上传功能

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

value

一般情况下，value用来获取对应用户输入的值,用来帮助系统显示内容。

name

如果我们要使用表单提交，则所有的表单内元素都需要加name属性

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

placeholder

设置提示信息

button

普通按钮，如果把button放在表单里，则button自动会有提交功能

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

select > option

下拉选择框，需要用select包裹多个option

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

textarea

文本域，用于输入多行文本时使用

<textarea></textarea>

表单内元素的状态

blur
失去焦点
focus
获取焦点
checked 给radio和checkbox添加，用于设置对应选项的选中状态，添加则表示选中
selected 给option添加，用于设置默认被选中的选项
readonly 只读，添加到输入框，无法修改内容，只能查看
disabled 添加到元素上，则对应元素禁用，样式变灰

页面划分

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

两者没有固定的格式表现。对他应用样式（CSS）时，他才会产生视觉上的变化。

【HTML】重点知识内容~快速上手

HTML基本结构：

网页结构展示：

常用标签：

h1~h6

p

img

属性

src

文字的样式属性（强调属性）

em i

stong b

br

hr

特殊标签：

特殊符号

a

属性

列表

有序列表

无序列表

type类型：

定义列表

表格（table）

表格的属性

跨行

跨列

form表单

input(行内块、置换元素)

type

value

name

placeholder

button

select > option

textarea

表单内元素的状态

页面划分

猜你喜欢