推荐前端学习路线如下:
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> 删除线
特殊符号
  空格
> 大于号
< 小于号
© 版权
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)时,他才会产生视觉上的变化。