一、学习路线

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等。
  • 浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示网页
  • 浏览器内核备注
    IETridentIE、猎豹安全、360急速浏览器、百度浏览器
    firefoxGecko火狐浏览器内核
    SafariWebkit苹果浏览器内核
    chrome/OperaBlinkchrome/opera浏览器内核。Blink其实是WebKit的分支。

    　　

3.Web标准

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

　　

三、HTML语法规范

1.基本语法概述

　　1.1基本语法概述

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

　　1.2标签关系

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

2.HTML基本结构标签

　　2.1第一个HTML网页

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

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

2.lang语言种类

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

3.字符集

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

六、HTML常用标签

1.标签语义

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

2.标题标签

–

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

3.段落和换行标签

  • <p>我是一个段落标签</p>
  1. 文本在段落中会根据浏览器窗口的大小自动换行。
  2. 段落和段落之间保有间隙。
  • <br />  //换行标签

4.文本格式化标签

  • 设置粗体、斜体、下划线等效果。
  • 标签语义：突出重要性。
  • 语义标签说明
    加粗或者更推荐使用标签加粗 语义更强烈
    倾斜或者更推荐使用标签倾斜语义更强烈
    删除线或者更推荐使用标签删除线语义更强烈
    下划线或者更推荐使用标签下划线语义更强烈

5.

和标签

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

6.图像标签和路径

　　6.1图像标签

  • <img src="图像URL" />  //src是标签的必须属性，它用于指定图像文件的路径和文件名
  • 属性属性值说明
    src图片路径必须属性。
    alt文本替换文字，图像不能显示的文字。
    title文本提示文本，鼠标放到图像上，显示的文字。
    width像素设置图像的宽度。
    height像素

    设置图像的高度。

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