113 lines
5.8 KiB
Markdown
113 lines
5.8 KiB
Markdown
|
## 1、什么是前端
|
|||
|
|
前端对于网站来说，通常是指网页，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。
|
|||
|
|
|
|||
|
|
前端设计一般可以理解为网站的视觉设计，比如 UI 设计；
|
|||
|
|
前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
|
|||
|
|
|
|||
|
|
前端开发的核心部分主要是：HTML，CSS，JavaScript 三个部分。
|
|||
|
|
|
|||
|
|
**HTML** 是这三者中最基础的部分，相当于是网页的骨架，也就是网页的结构；
|
|||
|
|
**CSS** 部分是网页的表现形式，也可以说是网页的美化，比如一个图片的大小、位置，文字的大小颜色等；
|
|||
|
|
**JavaScript** 是一种动态的脚本语言，负责与用户进行交互，增加用户体验的作用。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 2、网页组成
|
|||
|
|
|
|||
|
|
一个网页的组成部分主要包括下面几个部分：**文字、图片、输入框、视频、音频、超链接** 等。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 3、Web 标准
|
|||
|
|
|
|||
|
|
说道 Web 标准，不能不说 W3C 组织（World Wide Web Consortium），全程为「万维网联盟」。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。
|
|||
|
|
|
|||
|
|
W3C 最重要的工作是发展 Web 规范（称为推荐，Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。简单的说就是就是确定 Web 页面的语法格式和规范的。
|
|||
|
|
|
|||
|
|
与之类似的一个组织是「European Computer Manufacturers Association」（ECMA组织），这个组织制定了标准的脚本语言规范 ECMAScript ，而 JavaScript 就参照的这个规范。
|
|||
|
|
|
|||
|
|
那么 Web 标准规范了下面三个部分：
|
|||
|
|
|
|||
|
|
- HTML 标准（结构标准 ），相当人的骨架结构。
|
|||
|
|
- CSS 样式（表现）标准 ， 相当于给人化妆变的更漂亮。
|
|||
|
|
- JavaScript 行为标准 ， 相当与人在唱歌，页面更灵动。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 4、浏览器内核
|
|||
|
|
|
|||
|
|
浏览器内核是一个浏览器的核心部分，也就是「**渲染引擎**」。它的主要作用是决定一个浏览器如何显示网页的内容及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。
|
|||
|
|
|
|||
|
|
这里涉及到一个「**兼容性问题**」，浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以我们在编写代码的时候，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**内核和对应的浏览器：**
|
|||
|
|
|
|||
|
|
<u>`trident`</u>: IE windows
|
|||
|
|
<u>`gecko`</u>: firefox 跨平台
|
|||
|
|
<u>`webkit`</u>: safari/chrome
|
|||
|
|
<u>`presto`</u>: opera 渲染速度最快
|
|||
|
|
<u>`blink`</u> : google/opera 共同开发
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 5、认识 HTML
|
|||
|
|
HTML 全程为：**超文本标记语言**（Hyper Text Markup Language）。这里超文本就是超链接的意思，就是可以实现页面的跳转。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 6、HTML 结构标准
|
|||
|
|
|
|||
|
|
HTML 基本结构如下：
|
|||
|
|
```html
|
|||
|
|
<!DOCTYPE html> <!-- 文档声明 -->
|
|||
|
|
<html> <!-- <html></html> 定义文档整体 -->
|
|||
|
|
<head> <!-- <head></head> 对页面进行设置，定义标题，外链css,js文件等 -->
|
|||
|
|
<meta charset="UTF-8"> <!-- 定义网页的编码格式 -->
|
|||
|
|
<title>Document</title> <!-- 定义页面标题 -->
|
|||
|
|
</head>
|
|||
|
|
<body> <!-- 编写网页上显示的内容 -->
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
- `<!DOCTYPE html>` 是告诉浏览器，以下文件用 HTML 哪个版本解析，这里是 HTML5 版本。
|
|||
|
|
- `<html></html>` 标签是一个网页的根标签，所有的标签都要写在这一对根标签里面。
|
|||
|
|
- `<head></head>` 是头标签，主要是定义文档（网页）的头部，包括完档的属性和信息，文档的标题，还可以引入 JavaScript 脚本，CSS 格式等。
|
|||
|
|
- `<body></body>` 是一个文档的主题，里面包含文档的所有内容，比如文本，超链接，图片，表格等内容。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 7、html 标签分类
|
|||
|
|
|
|||
|
|
**单标签** 没有闭合标签 单标签内以 /结尾
|
|||
|
|
|
|||
|
|
` <! Doctype html>`
|
|||
|
|
**双标签** 双标签 由开始标签+内容+结束标签 构成
|
|||
|
|
|
|||
|
|
`<html> </html> ，<head></head>， <title></title>`
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
##8、html 标签关系分类
|
|||
|
|
|
|||
|
|
包含（嵌套关系）` <head><title></title></head>` 父子关系
|
|||
|
|
并列关系 `<head></head><body></body>` 兄弟姐妹
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 9、开发工具
|
|||
|
|
|
|||
|
|
前期学习一种语言的时候，开发工具很重要。Web开发工具有很多。最简单的一个开发工具就是 Windows 系统自带的记事本了，但是又难用又难看，没有语法高亮、代码补全等功能。
|
|||
|
|
|
|||
|
|
那么我推荐大家使用的是「[Sublime Text 3](https://www.sublimetext.com/)」 代码编辑器，它虽小巧精致，但有着炫酷的界面，并且有大量的插件可以使用，大大提高了代码的编写效率。
|
|||
|
|
|
|||
|
|
提到 Web 开发工具不得不提到 JebBrain 全家桶的「 [Webstorm](http://www.jetbrains.com/webstorm/) 」软件。目前已经被广大 Web 开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。它令人称到的是它智能打代码补全、代码一键格式化、HTML 提示、联想查询、代码重构等强大功能。
|
|||
|
|
|
|||
|
|
还有近些年来崛起的【visual studio code】，已经成为前端开发的主流工具。
|
|||
|
|
|
|||
|
|
建议初学者初期使用Sublime等文本编辑器，太过于智能的编辑器确实会带给我们极大地便利，但是在带给我们便利的同时，也会削弱我们对基础知识的掌握，只有自己一个单词一个单词敲出来的代码，才会让我们记得更加牢固。
|
|||
|
|
|