第一个网页

开发第一个网页

• 新建一个.txt 的文件

  • 在其中添加一些文字，比如 Hello World
  • 保存文件
  • 修改文件的扩展名为 .html 文件
  • 使用浏览器打开页面

• 这个网页有什么缺点？

  • 只能显示一段普通的文本；
  • 浏览器不知道是否要对这段文本加粗、放大、段落之间的间距；

认识 HTML

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

  • HTML 元素是构建网站的基石；

• HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

• 什么是标记语言（markup language）？

  • 由无数个标记（标签、tag) 组成；
  • 是对某些内容进行特殊的标记，以供其他解释器识别处理；
  • 比如使用 <h2></h2> 标记的文本会被识别为"标题"进行加粗、文字放大显示；
  • 由标签和内容组成的称为元素（element）

• 什么是超文本（HyperText）呢？

  • 表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
  • 还可以表示超链接（HyperLink），从一个网页跳转到另一个网页；

• HTML 文件的拓展名是.htm 或 .html

  • 因历史遗留问题，Win95/Win98 系统的文件拓展名不能超过 3 字符，所以使用 .htm
  • 现在统一使用 .html

开发工具

开发工具选择

• 记事本可以开发一个网页吗？答案：可以。但是有很多的缺点：

  • 创建和管理文件不方便；
  • 没有颜色标识/没有智能提示/无法调试程序；

• 专业的前端开发工具

  • WebStorm、Sublime Text、Visual Studio Code、Atom、HBuilder、IntelliJ IDEA、Dreamweaver
  • 智能提示、高亮识别、语法检测、集成环境、开发效率高

• 上课推荐开发工具：

  • Webstorm

    • 优点：集成开发工具，包罗万象
    • 缺点：重（占用系统资源多），收费

  • VSCode（上课使用）

    • 优点：轻（相当于一个编辑器），免费
    • 缺点：需要安装一些插件来辅助开发

VSCode 工具安装

• VSCode 编辑器下载安装：Visual Studio Code - Code Editing. Redefined

• 安装插件（增加功能）：右侧图标最后一项，Extensions，查找需要的插件（联网）

  • 中文插件：Chinese
  • 颜色主题：atom one dark
  • 文件夹图标：VSCode Great Icons
  • 在浏览器中打开网页：open in browser、Live Sever
  • 自动重命名标签：auto rename tag

• VSCode 的配置：

  • Auto Save 自动保存

  • Font Size 修改代码字体大小

  • Word Wrap 代码自动换行

  • Render Whitespace 空格的渲染方式 (个人推荐)

  • Tab Size 代码缩进

    • 推荐 2 个空格（公司开发项目基本都是 2 个空格）

HTML 历史

起初的 5 年（1990-1995），HTML 经历了多次的修改和扩充内容，首先是由 CERN 负责，其次是 IETF。

W3C 诞生后，HTML 的发展再度发生变化。1995 年，首次尝试扩充 HTML 内容失败，即 HTML3.0。1997 年 HTML3.2 完成。同年 HTML4 也完成。

之后的几年，W3C 成员决定停止 HTML 的研发，取而代之的开始研发基于 XML 的 XHTML。以重制 HTML4 为 XHTML1.0 开始，没有增加新特性，except the new serialization，直到 2000 年才结束。XHTML1.0 之后，W3C 的工作重心转移到，使其他工作组更便于在 XHTML 的模块下扩展它上。与此同时，W3C 还在开发一款新语言，即不兼容之前的 HTML 和 XHTML 的 XHTML2。

大约在 1998 年，HTML 的改革停止的时候，浏览器厂商们开发出了 HTML 的部分 API，并以 DOM Level 1（1998 年）、DOM Level 2 Core 和 DOM Level 2 HTML(从 2000 年到 2003 年) 的命名发布。这些成果随着 DOM Level 3 规范在 2004 年发布的同时而逐渐被淡化，但是在 Level 3 草案完成前，其工作组就被迫关闭。

在 2003 年，被认为是下一代 web 技术产物的 XForms 发布，它重新引起了开发人员们扩展 HTML 的兴趣，而不是寻找 HTML 的替代品。这份兴趣也使得开发人员们认识到作为 web 技术的 XML 受限于新的技术（如 RSS 和后来的 Atom），而不是替代了当前的技术（如 HTML）。

重新引起兴趣后，开发人员们首先扩展了 HTML4 以提供更多在 Xforms 中介绍的特性，而不需要浏览器启动与当前 HTML web 页面不兼容的渲染引擎。在此之前，草案已公之于众和代码也已实装的时候，这份规范的版权归 Opera 软件公司所有。

2004 年，HTML 的改进被重新提起，并在 W3C 下的一个工作室测试。一些 HTML5 标准下的机制和早前提及的与 form 相关的草案提议被 Mozilla 和 Opera 联合提交给了 W3C。提议因为与之前选定的 web 发展方向相冲突而被拒绝。取而代之的是，W3C 的工作人员和会员们投票决定继续开发以 XML 为基础的技术作为替代。

不久之后，Apple,Mozilla 和 Opera 联名宣布它们组建 WHATWG 组织以继续 HTML5 的开发工作。一个公众邮件列表被建立，同时，草案也被移到了 WHATWG 的网站上。版权被修订为三方共同所有且可复用该规范。

WHATWG 制定了几个主要原则，科技需要向后兼容、即便在要改动规范而不是实例的情况下，规范和实例也需要保持一致、规范需要描述的足够清楚以至于实例可以完全达成交互而不用对调引擎。

后来急需确定 HTML5 规范的范围，包括之前在 HTML4,XHTML1 和 DOM2 HTML 中明确了的内容。这意味着 HTML5 包含了更多的内容。

2006 年，W3C 终于表明了对 HTML5 开发的兴趣，并在 2007 年成立了工作组特许与 WHATWG 就 HTML5 规范的制定而协同工作。Apple,Mozilla 和 Opera 准许了 W3C 以 W3C 的版权发布 HTML5 规范，同时保持一个低限制证书的版本在 WHATWG 的网站上。

许多年后，W3C 和 WHATWG 的 HTML5 工作组都在 Ian Hickson 的带领下工作。2011 年，这两个小组得出一个结论，彼此的目标不同：W3C 想制定一个 HTML5 特性的绝对建议标准，而 WHATWG 想要一个不断迭代的 HTML5，持续不断地维护规范和增加特性。在 2012 年中，W3C 成立了一个新的编辑队伍来编辑 HTML5 规范和为下一代 HTML 准备工作草案。

自那以后，W3C HTML 的工作组一直在通过 cherry picking 的方式从 WHATWG 获取补丁，来修补在 W3C HTML 规范中或者确实存在问题的 UA 上的 BUG。在此文发布的时候，WHATWG HTML 规范已经合并补丁到 8152 版本了。W3C HTML 编辑们从 W3C HTML 小组的讨论和决定中和未被 WHATWG 共享的 bug fixes 中获取补丁并修补。

HTML 元素（重点）

认识元素

• 我们会发现 HTML 本质上是由一系列的元素（Element）构成的；

• 什么是元素（Element）呢？

  • 元素是网页的一部分；
  • 一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含；

• 那么 HTML 有哪些元素呢？

  • https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

• 我们会发现元素非常非常的多，这么多能记得住吗？

  • 常用的，用的多自然就记住了；
  • 不常用的，知道在哪里查找即可；

元素的组成

剖析一个 HTML 元素的组成：

<!-- 元素 -->
<!-- 开始标签 (<p>)    内容 (我的猫咪脾气爆:))    结束标签 (</p>) -->
<p>我的猫咪脾气爆:)</p>

1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用 - 在本例中即段落由此开始。
2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 - 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
3. 内容（Content/Enclosed text content）：元素的内容，本例中就是所输入的文本本身。
4. 元素（Element/An attribute and its value）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素的属性

元素也可以拥有属性（Attribute）：

<!-- 属性名 class  属性值 editor-note -->
<p class="editor-note">我的猫咪脾气爆:)</p>

• 属性包含元素的额外信息，这些信息不会出现在实际的内容中。

• 一个属性必须包含如下内容：

  • 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
  • 属性名称，后面跟着一个等于号。
  • 一个属性值，由一对引号 "" 引起来。

• 创建一个超链接元素 a：<a href="https://www.baidu.com">百度一下</a>

  • href 属性是必需的，指向链接的 URL；
  • target 属性是可选的，指定在何处打开链接文档；
  • title 属性是可选的，为链接添加额外的信息；

• 有些属性是公共的，每一个元素都可以设置，比如 class、id、title 属性

• 有些属性是元素特有的，不是每一个元素都可以设置，比如 meta 元素的 charset 属性、img 元素的 alt 属性等。

注意

不包含 ASCII 空格（以及 " ' `` = < >`）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。

单标签元素/双标签元素

• 双标签元素：我们会发现前面大部分看到的元素都是双标签的；<html></html>

  • html、body、head、h2、p、a 元素；

• 单标签元素：也有一些元素是只有一个标签；<input type="text">

  • br、img、hr、meta、input；

注意

HTML 元素不区分大小写，但是推荐小写。

元素的嵌套关系

某些元素的内容除了可以是文本之外，还可以去其他元素，这样就形成了元素的嵌套。

<ul>
  <li>
    <div>
      <span>第一段文字</span>
      <span>第二段文字</span>
      <span>第三段文字</span>
    </div>
    <div></div>
    <div></div>
  </li>
</ul>

注释编写

为什么需要注释

• 程序员才懂的冷笑话：

  • 在我写这段代码的时候，只有我和上帝知道这段代码是什么意思。
  • 一段时间之后，只有上帝知道是什么意思了。

• 为什么会出现这样的情况呢？

  • 随着学习的深入，你的一个程序不再是几行代码就可以搞定的了。
  • 可能我们需要写出有上千行，甚至上万行的程序。
  • 某些代码完成某个功能后，你写的时候思路很清晰，但是过段时间会出现忘记为什么这样写的情况，这很正常。

• 和同事协同开发

  • 在实际工作中，一个项目通常是多人协作完成的。可能是几个或者十几个等等。
  • 这个时候，你可能需要使用别人写出的代码功能，别人也可能使用你的代码功能。
  • 如果你的代码自己都看不懂了，更何况你的同事呢？

HTML 的注释

• 什么是注释？

  • 简单来说，注释就是一段代码说明
  • <!-- 注释内容-->
  • 注释是只给开发者看的，浏览器并不会把注释显示给用户看

• 注释的意义：

  • 帮助我们自己理清代码的思路，方便以后进行查阅。
  • 与别人合作开发时，添加注释，可以减少沟通成本。(同事之间分模块开发)
  • 开发自己的框架时，加入适当的注释，方便别人使用和学习。(开源精神)
  • 可以临时注释掉一段代码，方便调试。

• VSCode 注释快捷键：ctrl + /