一、认识前端

​ 大家好,这里是阿杰从零开始学习WEB系列,由于刚开始学习建站,而建站目的则是记录自己的学习过程。学习内容则是在道廷の博客以及菜鸟等网络上自己寻找资源进行学习。通过道廷の博客记录的内容来整理梳理学习目录。在此感谢道廷の博客以及为自己接下来的学习加油。


1.前端是什么


​ 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,合适的动效设计,给用户带来极高的用户体验。

​ 前端开发的核心部分主要是:HTML,CSS,JavaScript 三个部分。这三个是前端开发中最基本也是最必须的三个技能。

​ 前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。
HTML 是这三者中最基础的部分,相当于是网页的骨架,也就是网页的结构;
CSS 部分是网页的表现形式,也可以说是网页的美化,比如一个图片的大小、位置,文字的大小颜色等;
JavaScript 是一种动态的脚本语言,负责与用户进行交互,增加用户体验的作用。


2.网页组成


​ 一个网页的组成部分主要包括下面几个部分:文字、图片、输入框、视频、音频、超链接等。


3.网页标准


​ 说起网页标准不得不提W3C(万维网联盟),建立于1994年,是一个国际性的联盟,其宗旨是投身于”引领 web 以激发其全部潜能”,是Web技术领域最具权威和影响力的国际中立性技术标准机构。
最重要W3C标准有:

HTML
CSS
XML
XSL
DOM

​ 与之类似的一个组织是「European Computer Manufacturers Association」(ECMA组织),这个组织制定了标准的脚本语言规范 ECMAScript ,而 JavaScript 就参照的这个规范。

​ 那么我们所熟知的HTML网页就由Web标准规范了下面的三个部分:

HTML标准(结构标准),这相当于人体的骨架结构。

CSS标准(表现标准),这相当于化妆师给人化妆变得更漂亮。

JavaScript脚本(行为标准),相当于给工作的人专属的工具,这样可以工作的更轻松。


4.浏览器内核


​ 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。


5.认识HTML


​ HTML称为超文本标记语言,是一种标记语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。


6.HTML结构标准


​ 完整HTML包括html DOCTYPE声明、title标题、head、网页编码声明等内容

​ HTML基本结构如下:

1
2
3
4
5
6
7
8
9
10
HTML
<!DOCTYPE html> 声明文档类型
<html> 根标签
<head> 头标签
<meta charset = "UTF-8"> 编码声明
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>

<!DOCTYPE html> 是告诉浏览器,以下文件用 HTML 哪个版本解析。

<html></html>标签是一个网页的根标签,所有的标签都要写在这一对根标签里面。

<head><head>是头标签,主要是定义文档(网页)的头部,包括完档的属性和信息,文档的标题,还可以引入 JavaScript 脚本,CSS 格式等。

<body></body>是一个文档的主题,里面包含文档的所有内容,比如文本,超链接,图片,表格等内容。


## 7.HTML标签分类

​ HTML中的标签分为两类,单标签和双标签:

单标签:<Doctype html>

双标签:<html></html> <head></head> <title></title>


8.HTML标签关系分类


​ HTML的标签关系大致分为两类:包含和并列

包含(嵌套)关系:<head><title></title></head> 类似父子关系
并列关系: <head></head><body></body> 类似兄弟姐妹的关系


9.开发工具


​ 小白在前期学习web开发时,很多人都建议不要使用webstorm,说是太智能,不利于新手的学习,反而会削弱我们对基础知识的掌握,但是不得不说 JebBrain 全家桶的「 Webstorm 」软件。目前已经被广大 Web 开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。它令人称到的是它智能打代码补全、代码一键格式化、HTML 提示、联想查询、代码重构等强大功能。

​ 我看网上很多人都推荐「Sublime Text 3」 代码编辑器,说它小巧精致,不但有着炫酷的界面,还有大量的插件可以使用,大大提高了代码的编写效率。

​ 本人也是新手小白,也不知道该推荐什么编辑器,所以在电脑上两款编辑器都下载了,在以后的学习中会测评两款产品然后确定自己的编辑器。


10.小结


​ 作为小白,第一次写文章遇到很多问题,如本篇的许多Markdown代码搞不清楚,一遍学习Markdown代码规则,一边写文章。今天的知识点也都是些基础知识,之后将进入到前端的正式学习中。