从零开始的Web前端高级开发学习 / HTML1 / 使用的工具 & HTML & head 元素

Web

web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。

它是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

它是一种超文本信息系统，它的一个主要的概念就是超文本链接。它使得文本不再像一本书一样是固定的线性的，而是可以从一个位置跳到另外的位置并从中获取更多的信息。

它还可以转到别的主题上。想要了解某一个主题的内容只要在这个主题上点一下，就可以跳转到包含这一主题的文档上。正是这种多连接性把它称为Web。

学习Web将会使用到的专业工具

• 计算机，严肃的 Web 开发，最好还是使用运行 Windows，Mac，或者 Linux 系统的台式机或笔记本电脑。
• 文本编辑器，用来编写代码，可以是纯文本编辑器（例如 VSCode、Sublime Text（功能跟VSCode一样，但是能力还是VSCode更好一些）、Atom（性能较差，比较卡顿）、Brackets、GNU Emacs 或 VIM），也可以混合编辑器（比如 Dreamweaver 或 WebStorm）。（我使用的是VSCode，它免费且提供实时预览和代码提示。接下来一段时间我在web方面的学习也将会使用这个编辑器，在我的主页也有详细的VSCode安装以及基础插件下载的教程）
• Web浏览器，用来测试代码。如今使用最多的浏览器有 Chrome，Firefox，Opera 和 Microsoft Edge。（我所使用的是Chrome，它有着很强大的功能和极简的界面，给我带来一种舒适的浏览方式。同时多进程的架构，也使得他本身的系统不会轻易崩溃。）
• 图像编辑器，用来编辑网页中的图形图像，比如 GIMP、Paint.NET、Photoshop 或者 XD。
• 版本控制系统，用来管理服务器上文件，支持项目团队协作，共享代码资源，以及避免编辑冲突。当今最流行的版本控制工具是 Git。
• 自动化构建工具， 用来自动完成压缩代码和运行测试等重复性任务，比如 Grunt 或 Gulp。
• 可提高效率的工具，比如模板，库，框架等等。
• 还有很多。（在现阶段，我们只需要使用到计算机，文本编辑器，Web浏览器等工具就可以开始基础的web前端学习。）
  

HTML

超文本标记语言 (Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。

开始Web编辑

在使用 VSCode 时，我们可以直接将项目工程文件直接拖至 VSCode 窗口以实现文件打开。每一个项目工程文件夹底下，最好创建三个文件夹，css（用来存放 css 文件），img（用来存放图片），js（用来存放 js 文件），良好的文件存放可以方便其他人或者几个月之后的你在查看或者维护这个项目时，省去大量时间。优秀源于习惯，良好的习惯能让你我成为优秀的人。
创建并打开后缀为 .html 的文件，打出英文的 ! 并且按下 Tab 键，便会生成基础的页面框架。
在浏览百度、京东、淘宝等网站时，当使用 F12键查看网站的代码，我们便会发现，他们的框架基本上如图上所示。
这些代码的含义如图下所示。
我们不难看出，html 元素底下分为 head 元素和 body 元素，简单来说 head 元素就是引入于网页相关的描述及配置信息，body 元素就是我们能在网页上看到的内容。因为 body 元素底下相关的内容太多，我后续收集资料再详细讲解，今天先讲解 head 元素相关内容。

head元素

可用于 head 元素内的元素有：title，meta，link,，style，script

• title，定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。
• meta，表示那些不能由其它 HTML 相关（meta-related）元素(base，link,，script，style 或 title）之一表示的任何元数据信息。
• link，外部资源链接元素，规定了当前文档与外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标 (比如 PC 端的 “favicon” 图标和移动设备上用以显示在主屏幕的图标) 。
• style，包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。
• script，用于嵌入或引用可执行脚本。这通常用作嵌入或者指向 JavaScript 代码。

祝你我都能成为一个优秀的人。