一、学习路线
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也被称为万国码，基本包括了全世界所有国家需要用到的字符。
-
<meta charset="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 像素 设置图像的边框粗细。