本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

我相信有很多同学对于前端非常感兴趣，但是不知从何学起，那么此篇文章就带领你进入前端的世界——欢迎你。

一、认识 Web

1.1 认识网页

网页主要由文字、图像和超链接等元素构成，除了这些元素，网页中还可以包含音频、视频等。

如下图所示就是一个网页:

网页的背后是一行一行代码写出来的

1.2 浏览器(显示代码)

浏览器是网页显示、运行的平台。
- 常用的浏览器有: IE、火狐(Firefox)、谷歌(Chrome)、Safari(苹果自带浏览器)和Opera浏览器等(我们平时称为五大浏览器)。
- 常见浏览器内核

浏览器内核(Rendering Engine)，中文翻译很多，如：排版引擎、解释引擎、渲染引擎，现在统一流行称为浏览器内核。

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
Firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友 flash、神一样的对手 Chrome
Safari	webkit	很多人错误的把 webkit 叫做 Chrome 内核，Chrome 内核早已不是了
Chrome	Chromium/Bink	在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心)，内置于 Chrome 浏览器之中，Blink 其实是 WebKit 的分支，大部分国产浏览器最新版都采用 Blink 内核，二次开发
Opera	blink	跟随着 Chrome 用 blink 内核

1.3 Web 标准

解释说明: Web 标准不是某一个标准，而是由 W3C 组织(W3C 万维网联盟是国际最著名的标准化组织)和其他标准化组织制定的一系列标准的集合。

构成：主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

标准	说明
结构(Structure)	结构用于对网页元素进行整理和分类，主要学的是 HTML
表现(Presentation)	表现用于设置网页元素的版式、颜色、大小等外观样式，主要学的是 CSS
行为(Behavior)	行为是指网页模型的定义及交互的编写，主要学的是 Javascript

优点
- 让 Web 的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜寻引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度

二、HTML 初识

2.1 概念

HTML 指的是超文本标记语言(Hyper Text Markup Language)，是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言(markup language)
标记语言是一套标记标签(markup tag)
所谓超文本，指两层含义
- 因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制)。
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级连接文本)。

2.2 HTML 骨架标签

HTML 有自己的语言语法骨架格式

<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>
复制代码

标签名	定义	说明
`<html></html>`	HTML标签	页面中最大的标签，为根标签
`<head></head>`	文档的头部	注意在 head 标签中我们必须要设置的标签是 title
`<title></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	元素包含文档的所有内容，页面内容基本都是放到 body 里面的

注意：HTMl 标签名、类名、标签属性和大部分属性值统一用小写，不推荐使用大写。

2.3 HTML 元素标签分类

常规元素(双标签)

格式:
<标签名> 内容 </标签名>

比如:
<body></body>

说明:
1. 该语法中 <标签名> 表示该标签的作用开始，一般称为"开始标签(start tag)","</标签名>"表示该标签的作用结束，一般称为"结束标签(end tag)"。
2. 和开始标签相比，结束标签只是在前面加了一个关闭符"/"。
复制代码

空元素(单标签)

格式:
<标签名/> 

比如:
<br />  表示换行

说明:
1. 空元素 用单标签来表示，简单点说，就是里面不需要包含内容，只有一个开始标签不需要关闭。 
复制代码

2.4 HTML 标签关系

嵌套关系(父子关系)

比如:
<head>
<title></title>
</head>
复制代码

并列关系(兄弟关系)

比如:
    <head></head>
    <body></body>
复制代码

注意:

两个标签之间的关系如果是嵌套关系，子元素最好缩进一个 tab 键的身位(一个tab是4个空格)
如果是并列关系，最好上下对齐

2.5 文档类型 `<!DOCTYPE>`

用法

<!DOCTYPE html>
复制代码

作用

声明位于文档中的最前面的位置，处于标签之前，此标签告知浏览器文档使用哪种 HTML 或 XHTML 规范，也就是告诉浏览器按照 HTML5 规范解析页面

2.6 页面语言 lang

最常见的2个:
1. en 定义语言为英语
2. zh-CN 定义语言为中文

举例:
<html lang="en"> 指定html 语言种类

注意:
考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
复制代码

2.7 字符集

字符集(Character set)是多个字符的集合
计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字

举例:
<meta chaset="UTF-8" />

utf-8 是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312
1. gb2312 简单中文 包括 6763 个汉字 GUO BIAO
2. BIG5 繁体中文 港澳台等用
3. GBK 包含全部中文字符，是 GB2312 的扩展，加入对繁体字的支持，兼容 GB2312
4. UTF-8 则基本包含全世界所有国家需要用到的字符
复制代码

2.8 HTML 标签的语义化

什么意思呢？

答: 指的是标签的含义

优点:

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很多的解析，从而更好分析其中的内容
使用语义化标签会具有更好的搜索引擎优化

结尾

感谢阅读，阅读到这里的同学应该对于前端也有些许了解了，本篇中内容不用死记在脑海中，只需你下次再见到时有种熟悉的感觉就即可，因为后面的道路还很长很长，你会天天和他周旋的，那么就让我们一起前进吧。

进入前端的大门

前言