Web开发
- 什么是Web开发？
Web开发其实就是Web应用开发
在 PC（Personal Computer，个人计算机）刚兴起的年代，软件主要使用 C/S 架构（Client/Server，客户端/服务器）即应用运行在桌面上，而数据库这样的软件运行在服务器端。
随着互联网的兴起，B/S 架构模式 （Browser/Server， 浏览器/服务器）开始流行，这种架构模式就是Web应用开发
因为Web应用程序的更新和升级相较于传统的 C/S 架构更加的迅速，（C/S 架构需要每个客户端升级应用软件。 B/S 架构下，客户端只需要浏览器，浏览器请求服务器，获取Web页面，并把Web页面展示给用户即可。无需用户自己升级应用）
- Web开发能做什么？
2005年以后，互联网进入 Web 2.0 时代， HTML、CSS 和 JavaScript编写让Web页面具有了极强的交互性。使得网页不再只是承载单一的文字和图片，HTML5、CSS3 的出现让网页的内容更加生动，各种丰富媒体让网页软件化的交互形式为用户提供了更好的使用体验。
随着Web 2.0 概念的普及和 W3C 组织（World Wide Web Consortium，万维网联盟 ）的推广，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。
今天，除了重量级的软件如Office，Photoshop等，大部分软件都以Web形式提供。比如，淘宝、微信、新浪微博等服务，均是Web应用。
- Web开发工程师的职责
如果我们想要成为一位好的Web前端开发工程师需要具备哪些条件呢？
- 必须掌握基本的Web前端开发技术，其中包括：HTML5、CSS3、JavaScript、DOM、BOM、Ajax、前端主流框架、SEO等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。
- 在一名合格的前端工程师的知识结构中，网站性能优化、SEO和服务器端的基础知识也是必须掌握的。
- 必须学会运用各种工具进行辅助开发。
- 除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持，等等。
认识浏览器
介绍
学习前端开发一定不能离开浏览器，目前全世界使用的主流浏览器有五个：Internet Explorer、Firefox、Safari、Chrome 浏览器和 Opera。根据 StatCounter 浏览器统计数据，目前（2020 年 10月）Safari 和 Chrome 浏览器的总市场占有率将近 84%（Chrome 占 66.2%）。我们今后也会基于Chrome浏览器为主要浏览进行学习和开发。
浏览器的主要功能
浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您选择的网络资源如：HTML 文档、 PDF、图片或其他的类型。资源的位置由用户使用 URI（Uniform Resource Identifier，统一资源标示符）指定（我们可以简单的将URI理解为资源的网址）。
浏览器解释并显示 HTML 文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由网络标准化组织 W3C 进行维护。
多年以来，各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。如今，大多数的浏览器都是或多或少地遵从规范。这也就导致了浏览器兼容性问题。
虽然浏览器的用户界面并没有任何正式的规范，但是不同浏览器的用户界面却有很多彼此相同的元素，这是多年来的最佳实践自然发展以及彼此之间相互模仿的结果。
HTML5 也没有定义浏览器必须具有的用户界面元素，但列出了一些通用的元素，例如地址栏、状态栏和工具栏等
浏览器相同的元素有：
- 用来输入 URI 的地址栏
- 前进和后退按钮
- 书签设置选项
- 用于刷新和停止加载当前文档的刷新和停止按钮
用于返回主页的主页按钮
浏览器的主要组件:
- 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。
- 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
- 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
- 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
- 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。
- JavaScript 解释器。用于解析和执行 JavaScript 代码。
- 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie、HTML5新规范 定义的“网络数据库”。
呈现引擎
呈现引擎（Rendering Engine）现在流行称为浏览器内核，目前五大浏览器的内核分别为：
- IE * Trident
- Edge * EdgeHTML
- firefox * Gecko
- Chrome * Blink （Blink 其实是 WebKit 的分支）
- Opera * Presto（已废弃） * Webkit
- Safari * Webkit
在移动端开发中，Android手机基本都使用Webkit内核。 iOS内置Safari浏览器同样使用Webkit内核
浏览器内核工作流程我们不做过多的讲解，感兴趣的同学可以查阅相关文档
代码开发工具
俗话说：“工欲善其事,必先利其器”。前端开发也是一样我们需要在Web编辑器的帮助下提高我们的开发效率。
在这里推荐给大家几个主流的编辑器：
- Sublime Text 是一款用于代码、标记和散文的精致文本的高效率的程序书写编辑器。官方地址
- WebStorm 是 jetbrains 公司旗下一款 JavaScript 开发工具，被称为“最强大的HTML5编辑器”但是对电脑配置有较高要求并且需要付费。官方地址
- VScode 当今最流行的免费开源现代化轻量级代码编辑器,可以通过安装各种插件支持几乎所有主流的开发语言及框架。官方地址
- HBuilder 一款支持 HTML5 的 Web 开发编辑器。官方地址
- Atom 是 github 专门为程序员推出的一个跨平台文本编辑器。支持CSS，HTML，JavaScript等网页编程语言。官方地址
作为前端开发人员我们应该将学习的重心放在代码学习上。上面的编辑器大家只需要选择其中一下载、安装使用，帮助我们提高工作效率就好。而不是花很多的时间和精力去学习编辑器。
学习HTML
HTML概念
HTML 是 HyperText Markup Language (超文本标记语言)的缩写，是一款描述网页的标记语言(结构语言)。
它包括一系列标签，通过这些标签不仅可以说明文字文本还可以说明图形、动画、声音、表格、链接等。
注意：HTML这种结构语言并不是编程语言（不具备编程语言功能）
HTML发展史
HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2.0：1995年11月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3.2：1997年1月14日，W3C推荐标准。
HTML 4.0：1997年12月18日，W3C推荐标准。
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
HTML 5：2014年10月28日，W3C推荐标准。HTML5极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。
HTML主要结构
我们使用编辑软件创建一个文件后缀名为 .html 的文件（html文件）,打开 html 文件在文件中使用快捷键!+tab生成html文件的结构骨架（不同的编辑软件快捷键有所不同可以查阅对应的文档）如下图：
我们来看看最简单的HTML长什么样：
<!doctype html> <!-- document type 文档类型,定义当前html文档遵循的版本规范,这里遵循html5规范 -->
<html lang="en"> <!--html 文档根标签,文档所有内容必须要存放在这里 lang="en"告诉浏览器该文档中使用的语言为英语 -->
<head> <!-- 头部标签,主要存放设置网页内容的东西 -->
<meta charset="UTF-8"> <!-- 元数据标签,这里表示是网页使用UTF-8字符集编码,正确的字符集编码可以保证网页不会乱码 -->
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- 元数据标签,这里表示是定义网页可见区域的初始宽度,和网页缩放用于移动端应用开发 -->
<title>Document</title> <!-- 标题标签,标签内的文本内容会作为当前网页标签栏的标题 -->
</head>
<body> <!-- 文档主体标记, 该标签内的所有内容都会展示在浏览器页面的可视区域内 -->
</body>
</html>
上面的代码就是一个很基本的HTML结构了，我们来简单的讲解下上面文档中每个标签以及他们的功能：
| 标签名 | 描述 | 功能 |
|---|---|---|
<!doctype html> |
文档类型标记 | 声明html版本 |
<html> |
根控制标记 | 此元素可告知浏览器其自身是一个 HTML 文档。<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体 |
<head> |
头控制标记 | 用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 |
<title> |
文件标题声明标记 | 用于定义文档的标题 |
<meta> |
文档元数据声明标记 | 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词 |
<body> |
文档主体标记 | 元素包含文档的所有浏览器可视区域内容（比如文本、超链接、图像、表格和列表等等。 |
通过上面对HTML结构的简单讲解相信同学们，对HTML语法有了一定的认识：
我们通过一个HTML中基础p标签元素对HTML标签语法进行进一步的讲解：
[图片上传失败...(image-af84cf-1623594555779)]
上面这个元素的主要部分有：
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
当然有些元素是可以设置元素属性的，什么是元素属性我亲看下面的例子：
属性应该包含：
- 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
- 属性的名称，并接上一个等号。(在 HTML5 规范中部分属性无需设置属性值)
- 由引号所包围的属性值。
HTML 控制标记（标签）的类型
在HTML中控制标记一共分为四类：
- 无属性单一型标记。格式：
<标记名称>如：<br> - 有属性单一型标记。格式：
<标记名称 属性="属性值">如：<hr width="80%"> - 无属性对称型标记。格式：
<标记名称>…</标记名称>如：<title>…</title> - 有属性对称型标记。格式：
<标记名称 属性="属性值">…</标记名称>如：<html lang="en">…</html>
HTML语法规范
良好的代码风格会让项目更清晰，利于维护。在企业中良好的代码风格也是作为it开发人员必要标准。
-
标签声明
- HTML标签名、类名、标签属性和大部分属性值统一用小写。
- 对称型标签结束标记中必须包含结束符号"/"。例：
<html></html>。
-
元素注释
作用：我们开发一段html代码,为了以后便于理解以及他人能读懂你代码特殊意义,我们可以使用 HTML 注释来帮忙。注释的功能就是用来说明、注解、备注。- HTML 统一使用 `` 方法在文档中进行注释，并且规定注释内容与注释符号两端间隔一个空格。
- 注释位于要注释代码的上面，单独占一行
-
标签嵌套
- HTML允许元素嵌套，并且HTML标签存在嵌套规则这个我们会在今后的课程中讲解
- 若元素间存在嵌套关系，称嵌套元素为父元素，称被嵌套元素为子元素。同一个父元素元素中的同级子元素被称为兄弟元素。例：
<html>
<head></head>
<body></body>
</html>
上面的代码中 html 标签包含 head 与 body 标签，所以 html 为 head 与 body 的父元素
而 head 与 body 是同级关系（两者拥有同一个直接父元素html）所以 head 与 body 是兄弟元素
HTML标签的语义化
语义化就是通过每个标签自身的语义，给网页不同的地方使用一个最为合理的标签，让结构更清晰直观。如：Hn标签适合表示标题因为他拥有粗体和较大的字号、<strong>,<em>用来区别于其他文字，起到了强调的作用、列表和表格同样明显的告诉你他们是做什么的。
为什么要有语义化标签
- 方便代码的阅读和维护
- 对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。
- 语义 Web 技术有助于利用基于开放标准的技术，从数据、文档内容或应用代码中分离出意义。
HTML 常见语义标签
| 标签名 | 描述 |
|---|---|
<h1></h1> ... <h6></h6> |
定义标题，用于修饰文本，块级标签。 |
<a></a> |
超链接用于页面之间或页面内部的跳转 |
<p></p> |
定义段落，用于修饰文本，块级标签。 |
<div></div> |
定义一个块级元素，div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 |
<span></span> |
标签被用来组合文档中的行内元素。以便通过样式来格式化它们。 |
<pre></pre> |
修饰文本，保留换行符和空格，一般用于展示代码，块级标签。 |
<em></em> |
把文本定义为强调的内容。 |
<dfn></dfn> |
定义一个定义项目。 |
<code></code> |
定义计算机代码文本。 |
<samp></samp> |
定义样本文本。 |
<kbd></kbd> |
定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。 |
<var></var> |
定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。 |
<cite></cite> |
定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。 |
<strong></strong> |
用于修饰加粗文本，行内标签。 |
<br> |
定义换行，块级标签，该标签没有语义性 |
<i></i> |
用于修饰斜体文本，行内标签，该标签没有语义性 |
<b></b> |
用于修饰加粗文本，行内标签，该标签没有语义性 |
HTML 5 新增语义化标签
HTML5 引入了很多具有语义化、提升页面可访问性的 HTML 元素
| 标签名 | 描述 |
|---|---|
<header> |
它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。 |
<main> |
用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。 |
<article> |
是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。 |
<nav> |
用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。对于页面底部辅助性质的站点链接，不需要使用 nav，用 footer 会更好。 |
<footer> |
与header和nav类似，footer也具有语义化特性，可以使辅助设备快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。 |
<section> |
section也是一个 HTML5 新标签，与article标签的语义含义略有不同。article用于独立的、完整的内容，而section用于对与主题相关的内容进行分组。它们可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。当内容组之间没有联系时，可以使用div。 |
我们通过下面这个案例来认识下HTML5新增语义化标签该如何使用：
<body>
<header>
<h1>>Training with GEC</h1>
<nav>
<ul>
<li><a href="#stealth">Stealth & Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</nav>
</header>
<main>
<section id="stealth">
<h2>Stealth & Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
<footer>© 2020 GEC</footer>
</body>
