盛大头条

前端学习路线及第一天学习

2022-12-04 01:10 由 SHUOSHIBUDEERYI 发表于 #前端开发

一、学习路线

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版本来显示网页。
  1. <!DOCTYPE>声明位于文档的最前位置，处于<html>标签之前。
  2. <!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。

2.lang语言种类

  • 用来定义当前文档显示的语言。
  1. en定义语言为英文。
  2. zh-CN定义语言为中文。
  3. 定义为en就是英文网页，定义为zh-CN就是中文网页。
  4. 就文档来说，定义为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> 
  1. 文本在段落中会根据浏览器窗口的大小自动换行。
  2. 段落和段落之间保有间隙。
  • <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 像素 设置图像的边框粗细。

 

热门相关：地球第一剑   网游之逆天飞扬   时间都知道   第一神算：纨绔大小姐   第一神算：纨绔大小姐