HTML 简介

HTML 全称是超文本标记语言 (Hyper Text Markup Language)

HTML 是用来 描述网页内容 的语言（语法规范）。

用 HTML 编写的文件，就叫 HTML网页

我们浏览网站时，看到网页，就是 HTML 描述的内容。

下面是这段文本，就是用 HTML语法规范写的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="白月黑羽">
    <meta name="keywords" content="白月黑羽, web, html">
    <title>白月黑羽web教学</title>
  </head>
  
  <body>

    <h3>今日新闻</h3>

    <p>
    
    大家好   <br><br>
    今天的新闻有：<br><br>

    <span id='dau' class="title" style='color:green'>
    白月黑羽日活用户突破3万</span> <br><br>

    <span id='version' class="title" style='color:blue'>
      黑羽压测 <strong>1.44</strong> 版发布，支持数万并发
    </span> 
    
    <br><br><br>

    谢谢大家22222<br>
    白月黑羽<br>
    2022-01-08
    </p>

  </body>
</html>

请把这段 HTML文本保存到一个文件中，比如名为 first.html

然后拖到浏览器中 , 就可以看到这个HTML展示的界面

浏览器会根据HTML文本描述，呈现出相应页面的内容，这个过程称之为浏览器 渲染

HTML 发展至今，已经历经了好几个版本。

本教程讲解的是最新的 HTML5 ，我们看到文档以 <!DOCTYPE html> 开头，说明这是一个HTML5 文档

HTML文件本质上就是纯文本文件，任何文本编辑器都可以编写查看。

但是，为例高效的编写 HTML、CSS、JS 等web前端开发相关的内容，我们还是需要一个专业的软件。

这里我们使用上一章推荐的 vscode

请先根据视频介绍的操作，另外安装如下 vscode 扩展，可以提升我们的开发效率

Auto Rename Tag

这个扩展可以帮我们，在修改HTML标签名时，自动更新匹配的另外一个标签名

其它还有一些有用的扩展，后面需要时再去安装。

基本概念

元素

HTML页面是由 元素 （element）构建而成的。

HTML的元素是用 标签 （tag）来表示的

尖括号包围元素名称形成了HTML 标签

<p class="title" style='color:green'>白月黑羽日活用户突破3万</p>

HTML 标签通常是成对出现的，比如 <p> 和 </p>

前面叫 开始标签 ，后面叫 结束标签 。结束标签前面有一个斜杠。

有的元素里面可以包含（内嵌）其他的元素

比如下面的例子中，span 元素里面就内嵌了一个 strong 元素

<span id='version' class="title" style='color:blue'>
  黑羽压测 <strong>1.44</strong> 版发布，支持数万并发
</span>

这里，被内嵌的 strong元素我们可以称之为 内部元素 或者 下层元素 ，它也是 span 元素的一部分。

相对的，包含它的元素习惯称之为 上层元素

元素的嵌套可以有很多层，前面的示例html中

html -> body -> p -> span

就形成了多层的嵌套

HTML中很多元素都会内嵌其他元素，比如： html 、head、body、div、table 等。

html 元素

上面的HTML文档，我们发现整个HTML页面所有的内容都是内嵌在 html 元素中的。

所以有时候，我们也叫 html 为根元素（root element）

head 元素

HTML文档有个特殊的元素名为 head ，

head 元素用来存放一些 页面不可见 信息。

比如 HTML 文档的

字符编码
```
<meta charset="utf-8">
```

作者

<meta name="author" content="白月黑羽">

搜索关键词，

<meta name="keywords" content="白月黑羽, web, html">

标题
```
<title>白月黑羽web教学</title>
```

也可以存放将来我们要学的 css样式 和 js代码 等等。

示例中，

<meta charset="utf-8"> 指明了该文档的字符编码。

如果你不了解字符编码的概念，点击这里学习

title 就是显示在浏览器标签栏上的网页标题（不是网页里面的文章标题）

body 元素

HTML文档有个特殊的元素名为 body ，

body 元素用来存放所有 页面可见 内容，比如文字、图片、视频等

空元素

有些元素没有内部内容，如下

<img src="images/byhy-icon.png" alt="logo图片" />
<br />

img 和 br 元素既没有内嵌元素，也没有文本内容。

这样的元素被称之为 空元素 （void element）

空元素里面没有内容，所以标签不需要成对出现。在后面尖括号前面有个斜杠 / 表示结束。

空元素也可以不要反斜杠表示关闭元素，就像这样

<img src="images/byhy-icon.png" alt="logo图片" >
<br>

html 空元素标签有如下这些:

area, base, br, col, embed, hr, img, input, 
keygen, link, meta, param, source, track, wbr

元素的属性

元素可以有 属性（attribute） ，如下

<p id='dau' name='info1' class="title" style='color:green'>
  白月黑羽日活用户突破3万</p>

属性总是在 HTML 元素的开始标签中规定。

属性总是以名称/值对的形式出现，比如：name=“value”。

属性值一定要放在引号中，可以是双引号或者单引号。

有的时候，一个元素可以有很多的属性，比如上例中 class 和 style 就是两个属性名，它们的属性值分别是 title 和 color:green

其中 id 是非常特殊的属性，它用来唯一的标志这个元素。

HTML 规范声明：一个HTML 文档中，不可以有两个元素有相同的id。

其中 name 是非常特殊的属性，它表示元素的名称。

其中 class 也是非常特殊的属性，它用来指定这个元素的类别。

一个元素可以有多种类别，也就有多个class值，用空格隔开。

比如

<p id='dau' class="title nav-item" style='color:green'>
  白月黑羽日活用户突破3万</p>

就指定了，元素有两个class值 title 和 nav-item，代表元素既属于 title 类别，也属于 nav-item 类别

style 属性用来表示元素的显示的效果（大小，颜色等）

标准元素是html 规范中定义的元素，比如前面讲过的 html ，head， title等。

每个标准元素都有其规定的属性。

我们也可以自己定义一些非规定的属性，但是浏览器并不认识。

刚才我们看到了元素的样式 style 这个属性。这个属性称之为 内联样式 属性。

这个属性非常重要，用来告诉浏览器，元素显示的特点（比如说，背景色、前景色、字体、尺寸、缩进、上下左右间距等）。

它的定义格式如下：

<tagname style="property1:value1;property2:value2;">

可以有多个 子属性 ，用分号隔开。

每个子属性规定了一个显示特点，属性名和值用逗号隔开

比如

<p style="font-family:verdana;color:red">

就说明了这个段落的字体是 verdana，字的颜色是红色。

再看一个例子，

<a href="https://www.baidu.com" style="color:red">This is a link</a>

除了刚才的颜色，style还有很多控制显示特性的，比如背景颜色、字体、尺寸、文本对齐、上下左右的间距等等

style的值，其实就是后面要学习的CSS显示样式，内容比较多，后续有详细讲解

注释

HTML的注释以  结尾，可以跨行。

如下

<body>

  <!--  新闻标题 -->
  <h1>今日新闻</h1>

  <!--  
  新闻内容 
  通常放在p节点中
  -->
  <p>
  
   大家好   <br><br>

   今天的新闻有：<br><br>

  <span id='dau' class="title" style='color:green'>
  白月黑羽日活用户突破3万</span> <br><br>

  <span id='version' class="title" style='color:blue'>
  黑羽压测1.44版发布，支持数万并发</span> <br><br>

  <br>


  <!--  结尾 -->
  谢谢大家<br>
  白月黑羽<br>
  2022-01-08
  </p>

</body>

如果使用vscode ，选中要注释的内容按 Ctrl 键和 / 斜杆键，就可以自动产生注释了

把HTML放到网站里

我们前面这种拖拽网页文件到浏览器中，浏览器是直接从磁盘读取了文件内容。

而我们浏览网站时，网页内容是通过网络，由 Web服务软件 传输给浏览器呈现出来的，

如下图所示

后面我们学习编写HTML，应该把编写的网页放到我们自己的网站里面。

浏览器访问网站网页，而不是访问本机网页文件

网站之所以是网站，核心就是 Web服务软件 ，把浏览器要获取的网页，通过网络传输给浏览器

我们后续开发就需要一个 Web服务软件 把我们开发的网页内容传输给浏览器。

扩展 Live Server

在我们做开发时，可以使用vscode的扩展 Live Server

这个扩展可以启动一个Web服务，可以把当前 项目根目录 作为网站的根目录，方便我们查看调试我们开发的网站。

具体操作看视频讲解

Nginx

前端开发好以后，要部署到生产环境上，那用什么 web服务软件呢？

所谓生产环境是指：产品系统正式发布运行的环境，这个产品系统是真实的客户访问的运行系统

比较常见的有部署在云服务（比如：阿里云）里面的产品运行环境

我们推荐 Nginx ，它是最常用的生产环境 web服务软件之一，它性能超强而且功能丰富。

其实，Nginx 的安装使用也不麻烦，很多人开发环境，也会使用它作为web服务。

安装方法如下

Windows系统

如果你使用的是 Windows系统，点击这里下载

注意： Nginx 的安装路径上一定不能有中文，可以存放在 `D:\tools` 这样的目录中

下载zip包后，解压即可。

解压后进入到产生的目录中，双击 nginx.exe 即可运行Ngnix。

Windows 操作系统，首次运行Nginx时，会有防火墙提示，选择允许即可。

如果要停止Ngnix，可以在Windows的任务管理器中关闭Nginx进程，但是找起来比较麻烦。

可以把下面的内容拷贝到一个名为 停止Nginx.bat 的文件中，以后每次双击即可关闭。

taskkill /F /IM nginx.exe
pause

缺省Nginx是在html目录下面寻找静态文件的，接下来我们开发的页面文件都可以放在这个目录下面。

注意：在生产环境，Nginx 大都是在Linux下运行的，提供Windows版，只是为了使用Windows的开发人员方便而已

MacOS

如果你使用的是苹果 MacOS系统，点击这里，学习如何安装使用Nginx

Linux

如果你使用的是 Linux，比如 Ubuntu ，可以点击这里，学习如何安装使用Nginx

URL

我们把前面的 HTML 文件复制到 NGINX 的 html 目录下的一个文件中，比如名为 first.html

然后浏览器访问 http://127.0.0.1/first.html , 就可以看到这个HTML展示的界面。

浏览器中输入的 http://127.0.0.1/first.html 称之为 URL (Uniform Resource Locator), 俗称网址

URL 是 web网络资源的唯一地址，就像你的家庭住址。

网络资源可以是任何类型的数据资源，比如： html网页、图片、视频、各种类型的文档等等。

只要是公开在网络上的资源，都应该有唯一对应的 URL。

下面是一些网络资源URL的示例

http://www.byhy.net
https://www.byhy.net
https://www.byhy.net/tut/py/basic/11
https://www.byhy.net/lesson?pagenum=2&pagesize=10
https://www.byhy.net/tut/py/basic/11/#continue
https://www.byhy.net/tut/py/basic/11/search?q=python#continue

一个 URL 由几个部分组成，有些是必须出现的，有些不是必须出现的。

请看下面图示

传输协议 scheme

http://127.0.0.1/first.html 里面的 http 表示使用的 传输协议 是http协议

这样浏览器就会以http协议和网站服务进行数据的传输通信。

关于http传输协议，后面会有详细的讲解。

协议还可以是 https ，它是http的加密传输方式。

域名和端口

http://127.0.0.1/first.html 里面的 127.0.0.1 表示资源所在机器的IP地址。这里使用环回地址，表示本机。

IP地址就像目标服务器的住址一样，可以根据它直接找到目标服务器。

我们访问网站，往往使用的是域名，比如 baidu.com 。浏览器其实底层也是先去查询域名，得到其对应的IP地址，再根据IP地址找到目标服务器的。

127.0.0.1 本地地址，通常会有一个通用的域名 localhost

其实光有IP地址还不足以访问到服务程序，因为目标服务器上会运行很多程序，哪个是网站对应的web服务程序呢？

每个网络服务程序运行时，都需要绑定一个 端口号 数字，通过这个端口号数字，就可以找到对应的程序。

url 中，http服务的缺省的端口号是 80 ， https 服务的缺省端口号是 443

http://127.0.0.1/first.html这样的url ，表示要访问的资源服务在80端口。

如果web服务启动在非缺省端口80，比如8080，就应该写为 http://127.0.0.1:8080/first.html

如果80端口被其它进程占用，根据这篇文档的说明找出该进程，并停止其服务

资源路径

后面的部分 /first.html 称之为 URL路径，表示要访问资源的具体地址。

静态网页资源服务，往往 URL 路径部分 是和 网站根目录 中的文件路径匹配的。

Live Server 把当前 项目根目录 作为网站根目录的。

Nginx 则是根据配置文件 conf/nginx.conf 里面的设置决定网站的根目录的，缺省是子目录 html 。

URL 路径部分 和 网站根目录 中的路径匹配。

http://127.0.0.1/first.html 这个url路径，就表示访问网站根目录下面的 first.html 这个资源

如果我们把 first.html 放到网站根目录下 \dir1\dir2\ 目录里面，

那么这个网页对应的url路径就是 http://127.0.0.1/dir1/dir2/first.html

当然一个HTTP请求中的url对应的结果到底是什么，最终还是由网站服务程序决定的。

对于 http://127.0.0.1/first.html 这样的 url，网站服务程序完全可以不从磁盘中的文件读取内容，而是返回程序设计者设定的其它内容。

URL 参数

https://www.byhy.net/lesson?pagenum=2&pagesize=10 里面的 ?pagenum=2&pagesize=10 这部分是 URL 参数。

URL 参数主要是告诉 Web服务的一些额外的信息。

比如，例子中的 url 参数的意思可以是：要获取课程列表里面的第 2 页，每页展示 10 条课程信息。

锚点

大家可以点击访问这个网址 /tut-web/html-css/01-html-intro/#url

就可以发现，浏览器打开的这个网址，不是展示页面的开始，而是展示 url 这部分的内容

因为 URL末尾的 #url 告诉浏览器，要滚动到本网页 id 为 continue 的元素，这个部分展示。

这个井号部分内容被称之为 锚点（Anchor） ，作用有点类似书签。

注意，锚点部分的内容只是给浏览器在获取到资源后跳转使用的，这部分内容不会发送给服务端。