前端自学要学多久（前端学习路线及第一天学习）

时间2025-08-04 18:09:14分类IT科技浏览4505

导读：一、学习路线...

一、学习路线

1.HTML5+CSS3　　黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

2.JavaScript　　JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

3.ES6　　ES6 入门教程 - ECMAScript 6入门 (ruanyifeng.com)

4.Vue.js　　【黑马程序员】vue.js从入门到应用_哔哩哔哩_bilibili

最全最新Vue 、Vuejs教程，从入门到精通_哔哩哔哩_bilibili

5.uni-app　uni-app官网 (dcloud.net.cn)　

二、基本概念

1.网页

网页是网站的一页，通常是HTML格式的文件，通过浏览器来阅读。 HTML指的是超文本标记语言，是用来描述网页的一种语言。网页是由网页元素组成的，这些元素是通过html标签描述出来，然后通过浏览器解析来显示给用户的。

2.常用浏览器及内核

浏览器是网页显示、运行的平台。常用的浏览器由IE 、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示网页 浏览器 内核备注 IE Trident IE 、猎豹安全、360急速浏览器、百度浏览器 firefox Gecko 火狐浏览器内核 Safari Webkit 苹果浏览器内核 chrome/Opera Blink chrome/opera浏览器内核。Blink其实是WebKit的分支。

3.Web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。因为浏览器不同，它们显示页面或者排版就有些许差异，所以需要Web标准。 Web标准的构成包括结构、表现和行为三个方面。标准说明结构结构用于对网页元素进行整理和分类，现阶段主要学的是HTML 。表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要是的是CSS。行为行为是指网页模型的定义及交互的编写，现阶段主要学的是javascript 。

三、HTML语法规范

1.基本语法概述

　　1.1基本语法概述

HTML标签是由尖括号包围的关键字，例如<html> 。 HTML标签通常是成对出现的，例如<html>和</html> ，我们称为双标签。标签中的第一个标签是开始标签，第二个是结束标签。有些特殊的标签必须是单个标签（极少情况），例如<br /> ，我们称为单标签。

　　1.2标签关系

双标签关系可以分为两类：包含关系和并列关系。

2.HTML基本结构标签

　　2.1第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基础标签上书写。HTML页面也称为HTML文档。 标签名 定义说明 <html></html> HTML标签页面中最大的标签，我们称为跟标签 <head></head> 文档的头部注意在head标签中我们必须要设置的标签是title <title></title> 文档的标题让页面拥有一个属于自己的网页标题 <body></body> 文档的主体元素包含文档的所有内容，页面内容基本都是放到body里面的

四、开发工具

1.VSCode

打开软件。新建文件。保存为.html文件生成页面骨架结构：输入！按下Tab键。利用插件在浏览器中预览页面：单击鼠标右键，在弹出出口中点击“Open In Default Browser ” 。

2.利用vscode创建第一个页面

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>我利用vscode创建的第一个页面</title> 8 </head> 9 <body> 10 写代码是一件非常快乐的事情 11 </body> 12 </html>

3.推荐安装插件

插件作用 Chinese 中文简体语言包 Open in Browser 右击选择浏览器打开html文件 JS-CSS-HTML Formatter 每次保存，都会自动格式化js css 和html代码 Auto Rename Tag 自动重命名配对的HTML/XML标签 CSS Peek 追踪至样式

五、网页开发工具

1文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。 <!DOCTYPE>声明位于文档的最前位置，处于<html>标签之前。 <!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

2.lang语言种类

用来定义当前文档显示的语言。 en定义语言为英文。 zh-CN定义语言为中文。定义为en就是英文网页，定义为zh-CN就是中文网页。就文档来说，定义为en也可以显示为中文，定义为zh-CN也可以显示英文。

3.字符集

字符集是多个字符的集合，以便计算机能够识别和储存各种文字。在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。 charset常用的值有：GB2312 、BIG5 、GBK和UTF-8 ，其中UTF-8也被称为万国码，基本包括了全世界所有国家需要用到的字符。

六、HTML常用标签

1.标签语义

学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是指标签的含义，即这个标签是用来干嘛的。根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

2.标题标签<h1>-<h6>

<h1>我是一级标题</h1>

3.段落和换行标签<p>

<p>我是一个段落标签</p>

文本在段落中会根据浏览器窗口的大小自动换行。段落和段落之间保有间隙。

<br /> //换行标签

4.文本格式化标签

设置粗体、斜体、下划线等效果。标签语义：突出重要性。语义标签说明加粗 <strong></strong>或者<b></b> 更推荐使用<strong>标签加粗语义更强烈倾斜 <em></em>或者<i></i> 更推荐使用<em>标签倾斜语义更强烈删除线 <del></del>或者<s></s> 更推荐使用<del>标签删除线语义更强烈下划线 <ins></ins>或者<u></u> 更推荐使用<ins>标签下划线语义更强烈

5.<div>和<span>标签

<div>和<span>没有语义，它们就是一个盒子，用来装内容的。 div表示分割；span表示跨度、跨距。 div自己独占一行，一行只能放一个div ，大盒子。 span一行可以有多个，小盒子。

6.图像标签和路径

　　6.1图像标签<img>

<img src="图像URL" /> //src是<img>标签的必须属性，它用于指定图像文件的路径和文件名

属性 属性值 说明 src 图片路径必须属性。 alt 文本替换文字，图像不能显示的文字。 title 文本提示文本，鼠标放到图像上，显示的文字。 width 像素设置图像的宽度。 height 像素

设置图像的高度。

border 像素设置图像的边框粗细。