前端自学复习总结（一）

陈奕迅雷不及掩耳之势

已于 2022-05-11 11:06:01 修改

阅读量647

点赞数 1

分类专栏： Javaweb 文章标签：前端 javascript html

于 2022-05-07 11:20:48 首次发布

本文链接：https://blog.csdn.net/qq_53474111/article/details/124625515

版权

Javaweb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.1前端技术介绍

一、从“网页制作”到“前端开发”

1、web1.0时代的“网页制作”

web1.0时代，网页主要是静态页面。所谓静态页面，指的是仅仅供用户浏览而无法跟服务器进行数据交互的页面。用户仅仅能够浏览这个网页的文字和图片，而不能在网页上发布评论和交流。“网页三剑客”：Fw、Dw、Fi

2、web2.0时代的“前端开发”

web2.0时代，网页分为两种：一种是“静态页面”；另一种是“动态页面”。动态页面是在静态页面的基础上增加了与服务器交互的功能。

二、从“前端开发”到“后端开发”

1、前端开发

前端开发的三个核心技术：HTML、CSS、JavaScript

HTML，全称Hyper Text Markup Language（超文本标记语言），是一门描述性语言。

CSS，全称Cascading Style Sheet（叠层样式表），用来控制网页外观的一门技术。

JavaScript，我们经常所说的js，是一种嵌入到HTML页面的脚本语言，由浏览器一边解释一边执行。

总之，HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。除上述3种技术外，我们还得学习一些其他技术，例如jQuery、Vue.js、SEO、性能优化等。

2、后端开发

掌握了前端技术，差不多就可以开发一个属于自己的网站了。但他的唯一功能是仅供用户浏览，所以得学习一些后端技术。几种常用的后端技术：

PHP，世界上最通用的开源脚本语言(之一)，语法吸收了C、Java、Perl语言的特点，易于学习，使用广泛，适合于web开发领域。

JSP，它是在传统的网页HTML文件中插入Java程序段（Scriptlet）和JSP标记（tag），从而形成JSP文件。用JSP开发的Web应用是跨平台的，既可以在Windows系统下运行，也能在其他操作系统（如Linux）上运行。

ASP.NET，其前身是我们常说的ASP技术，。
推荐学习路线：
HTML→CSS→JavaScript→jQuery→HTML5→CSS3→ES6→Vue.js→webpack→Node.js

1.2什么是HTML

HTML全称“Hyper Text Markup Language（超文本标记语言）”，是网页的标准语言。HTML并不是一门编程语言，而是一门描述性的标记语言。
所谓超文本，有两层含义：一是它可以加入图片、声音、动画、多媒体等内容，超越了文本限制。二是它可以从一个文件跳到另一个文件，与世界各地主机的文件连接。

        1、基本语法概述：
                <标签符>内容</标签符>
        标签符一般都是成对出现的，包含一个“开始符号”和一个“结束符号”。结束符号只是在开始符号前面多加上了一个斜杠“/”。当浏览器收到HTML文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来。
        2、标签关系
                一般分为两类:包含关系和并列关系
        包含关系：

<head>
    <title></title>
</head>

并列关系：

<head></head>
<body></body>

总而言之，学习HTML就是学习各种各样的标签，然后针对你想显示什么东西，再对应地使用正确的标签。

2.1常用浏览器

网页是通过浏览器来展示的，关于浏览器介绍两点：
1、常用的浏览器：五大浏览器IE、Firefox、Chrome、Safari、opera
2、浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

2.2web标准

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。
        1、为什么需要Web标准
        浏览器不同，它们显示页面或者排版就有些许差异，通过Web标准，展示统一内容。
        2、Web标准的构成
        主要包括:结构(Structure)、表现(Presentation)和行为(Behavior)三个方面
        (1)结构：用于对网页元素进行整理和分类，现阶段主要学的是HTML
        (2)表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要是CSS
        (3)行为：行为是指网页模型的定义及交互的编写，现阶段主要学的是JavaScript
Web标准提出的最佳体验方案:结构、样式、行为相分离，简单的理解:结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

网页开发工具

这里给初学者一个建议：使用HBuilder，因为HBuilder上手最简单，其中HBuilder的下载地址为：www.dcloud.io。后期的话，推荐Vscode、Sublime Text或Webstorm，这几个更能满足真正的前端开发需要。

        VSCode的使用：快速生成骨架输入！，点第一个；
        生成骨架标签新增代码：1、<!DOCTYPE>标签 2、lang语言 3、charset字符集
        1、文档类型声明标签
        <!DOCTYPE>文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页，一定要       位于文档中的最前面位置，处于<html>标签之前，它就是文档类型声明标签。
        2、lang语言种类
        用来定义当前文档显示的语言，en定义语言为英语，zh-CN定义语言为中文
        3、字符集
        字符集（Character set）是多个字符的集合，便于计算机能够识别和存储各种文字在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码，一般使用UTF-8，称为万国码。<meta charset=”UTF-8”/>

内容结合绿叶学习网与B站视频，方便复习参考。

陈奕迅雷不及掩耳之势

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端自学复习总结（一）

1.1前端技术介绍一、从“网页制作”到“前端开发”1、web1.0时代的“网页制作”web1.0时代，网页主要是静态页面。所谓静态页面，指的是仅仅供用户浏览而无法跟服务器进行数据交互的页面。用户仅仅能够浏览这个网页的文字和图片，而不能在网页上发布评论和交流。“网页三剑客”：Fw、Dw、Fi2、web2.0时代的“前端开发”web2.0时代，网页分为两种：一种是“静态页面”；另一种是“动态页面”。动态页面是在静态页面的基础上增加了与服务器...
复制链接

扫一扫