HTML
HTML
一、网页描述
什么是网页？
关于这块内容，在这里我会给你介绍两个概念。
第一个是“网站”，第二个是“网页”
首先先来看一下什么是“网站”？
“网站”，对我们来说是非常熟悉的，如果我现在想买一双鞋子，我可以去“淘宝”这个网站去购买，也可以去“京东”这个网站购买
当输入https://www.baidu.com这个网址以后，打开的第一个页面称作”首页”
当我们在‘首页’中单击文字或者是图片的时候，会打开另外的网页，所以说‘网站’就是这些网页的集合，也就说‘网站’是有很多很多的‘网页’构成。
而‘网页’就是网站中的一“页”，它是构成网站的基本元素。
网页中都会有哪些元素呢？
网页中会有图片，文字，视频，音频等元素组成。
但是，这里还有一个非常重要的元素，是‘链接’
什么是链接呢?
‘链接’指的就是在某个网页中单击文字或者是图片的时候，可以打开另外一个网页，那么这就表明这两个网页建立了一种连接的关系，这就是‘链接’。
也就是说，我们的网站就是通过‘链接’将很多很多的网页进行了连接组合而成的
二、HTML简介
HTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。
在上面的概念中，有两点需要你理解，第一点：什么是标记语言，第二点：什么是超文本。
理解了这两个概念后，就可以理解什么是HTML了。
下面我们先来看一下什么是标记语言？
标记也可以称之为标签，也就是说如果我现在想在网页中展示一张图片，那么就需要用到图片标签，这时浏览器看
到这个标签后，就知道要显示图片了，也就说标记(标签)决定了浏览器展示什么样的内容。当然HTML中标签有很
多，所以说，我们学习HTML就是要学习这些标签。
那什么是超文本呢？
要理解这个概念，我们首先说一下什么是文本？文本，我们可以简单的理解就是文字，例如，我们使用’记事本’工具所写的文章，小说等都是文本。
那么什么是超文本呢？
超文本是有两层含义：
第一层含义：它不仅指的是文本，还包括了图片，声音，视频，动画等内容，也就是说超越了普通文本的限制。
第二层含义：它可以从一个页面跳转到另外一个页面，实现页面的连接，也就是超级链接文本。
那么网页是怎样形成的呢？
网页是由网页元素（例如：图片,文字,视频等）组成的，这些元素是利用html标签进行描述，当浏览器看到这些
标签后，就知道显示什么样的内容了，也就是说浏览器可以将这些标签进行解析，然后显示给用户。
三、常用浏览器介绍
浏览器时网页显示、运行的平台。常用的浏览器有IE, 火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。
在这，你可能会问了，我们在开发网页的时候，使用哪个浏览器呢？是不是上面这些浏览器全部要安装到电脑里呢？
不用全部安装到电脑中，这里我们选择市场占有率最高的浏览器就可以，市场占有率最高的浏览器是【谷歌浏览器】，所以以后我们使用谷歌浏览器来浏览我们写的网页。
浏览器内核
浏览器内核，我们也叫做‘渲染引擎’，它的作用：负责读取网页的内容，整理讯息，计算网页的显示方式并显示页面。
常见的内核如下表格所示，这块内容我们只是简单了解一下就可以了。
国产浏览器也比较多，那么它们用到的是哪些内核呢？
目前国内一般浏览器都会采用 Webkit/Blink 内核，如 360、UC、QQ、搜狗等。
四、Web标准
不同浏览器使用的内核是不一样的，会不会出现不同浏览器最终展示的效果不一样呢？
为了解决这个问题，就要求我们写代码的时候一定要符合【Web标准】。Web标准：指的是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。关于Web标准，在这里我们主要学习以下两点：
第一点：为什么需要Web标准
第二点：Web标准的构成。
为什么需要Web标准
现在浏览器比较多，而这些浏览器是有不同的厂商开发的，而且内核也不
相同，那么在解析同一个网页的时候有可能就会出现些许的差异。
例如：我们写了一段文字，在有的浏览器中展示的是10号字大小，而换了一个浏览器后，变成了20号字大小，你
可以想象一下，是不是会严重影响我们网页的美观，而且用户体验也非常的差。
如果我们写的代码符合了Web标准，那么在不同的浏览器中进行展示的时候，看到的效果是一样的
Web标准的构成
Web标准的构成主要包括了：结构(Structure) 、表现（Presentation）和 行为（Behavior）三个方面。
结构其实决定了网页中展示哪些内容，例如，图片、文字等，这块是有HTML来完成的。
发现只是将文字，图片展示在网页上，感觉并不是特别好看，而且整个页面显示的比较凌乱。
所以了为了让网页变得更加的漂亮，美观，而且为了让整个页面显示比较的合理，就需要用到：表现。所以说表现，就是对网页上的内容进行修饰。关于这块内容是由后面所学习的CSS来完成的。
加上CSS样式后，网页变的更加的漂亮，而且页面显示的内容排版也更加的整齐。现在，通过HTML将网页所展示的内容规定好了，并且对网页添加了样式，让其变得更加的漂亮了，那么是不是网页就设计完成了呢？并不是，因为我们在访问一些网站的时候，经常会看到网页上有很多的动态效果，例如：单击按钮更换图片，单击菜单出现下拉菜单等。
要想实现这种动态就需要用到：行为。 nodejs
行为，就是实现网页与用户进行交互的这种动态效果。关于这块内容主要用到后面课程所学习的Javascript来完成。通过，结构、表现、行为，这三个方面，可以设计出漂亮美观，布局合理，具有动态效果的网页。
‘行为’，类似于动作，也就是让我们的网页具有动态的效果。
所以说，一个完整的网页包含了,HTML(结构)，CSS(表现)，Javascript（行为）这三部分内容
五、HTML标签语法规范
网页文件创建
网页文件的扩展名为:'.html' 或者是'.htm'。所以，你以后看到以'.html'或者是'.htm'结尾的文件，就知道这是网页
文件，那么我们可以通过浏览器打开这样的文件，来查看具体的网页内容。
注意，不能随意的创建。也就是说，不能随意的在桌面创建一个网页文件，或
者是在D盘或者C盘创建一个网页文件。为什么呢？ 你可以考虑一下，我们一个网站会有很多的网页文件，如果你
随意创建，那么后期会变得非常难管理。那应该怎样做呢？我们可以在桌面，或者D盘，E盘中，首先创建一文件
夹，然后将我们创建的网页文件都放到这个文件夹中统一的进行管理，这样后期即使是文件特别多，也会很容易的
进行管理。
标签语法规范
在写标签时是有一定的规范要求的。
第一：所有的标签都包含在一对尖括号中。
第二：标签一般情况下都是成对出现的，这种情况我们叫做’双标签‘。
注意：尖括号是在英文状态下输入的，同时还要注意 一下结束标签，结束标签是有一个’斜杠‘，
第三：在HTML中，也有单个的标签，这种情况我们叫做’单标签‘
注意：上面写的单标签，也是用’斜杠‘结束，并且和标签名之间用空格进行分隔。
当然，在HTML标签中，单标签是非常少的
标签关系
在HTML中，双标签的关系可以分为两类：包含关系和并列关系。
包含关系
<head>标签与<title>标签是父子的关系
并列关系
可以把这种并列关系理解成兄弟关系
六、HTML整体结构
每个网页的整体结构基本上都是一致的。也就是每个网页都会有一个基本的结构
标签，也称之为骨架标签，页面内容也是在这些基本标签上进行编写的。
1 | <html> |
看到<html>标签是最大的标签，它包含了所有的标签，所以也称之为根标签。
<title>标签：表示的是网页的标题或者文档的标题
<body>标签：该标签表示的是文档的主体，它里面包含了文档的所有内容，页面内容基本都是放到body标签里面的，也就是页面中显示的内容都是放到body标签里面的。
七、网页开发工具
VSCode工具，因为这款工具在前端开发中使用比率是非常高
·VSCode安装
八、DOCTYPE与字符集
1 |
|
<!DOCTYPE>:表示文档类型声明标签，位于文档的最前面，用于向浏览器说明当前文档中使用哪种HTML版本来显示网页。
HTML的版本是比较多的，如下表格所示：
| 版本 | 发布时间 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2002 |
| XHTML5 | 2013 |
1 | <!DOCTYPE html> |
表示的就是当前网页采用的是HTML5来显示网页。
1 | <html lang="en"> |
lang:表示语言的意思( language )
en: 表示的是英文。
整体的含义就是：用来定义当前文档显示的语言，那么在这指定的是英文。
1 | lang="zh-CN" :表示定义的语言为中文。 |
如果lang="en" 我们可以简单的理解为当前网页为英文网页，lang="zh-CN" 表示当前网页为中文网页。
其实对于网页文档来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
那么，lang属性有什么作用呢？
对浏览器的作用：就是一个提示与警示的作用。
例如，现在将 lang 的值修改成fr. fr表示的是法文，也就是当前网页为法文的网页，但是当前网页中并没有法文的内容
可以看到，在浏览器的右上角，给出了一个提示框，单击‘选项’按钮，会给出一个提示，询问是否‘翻译成法语’。
因为我们指定的lang=fr,而当前的网页中没有法语，所以会给出这样的提示。
而我们现在，做的网站都是中文的网站，所以建议将 lang 的值定义为zh-CN.
charset字符集
1 | <meta charset="UTF-8" /> |
charset:表示的是字符集。
UTF-8:表示的是字符集中的一种。
那么什么是字符集呢？
字符集是多个字符的集合，以便计算机能够识别和存储各种文字。
我们知道，网页中有很多的文字，而这里需要将这些文字存储到计算机中，所以需要按照一定的方式来存储这些文字。
charset的取值除了有UTF-8 以外，还有很多的取值，例如：GB2312 (表示的是简体中文)，BIG5(表示繁体中文)，GBK（包含了简体中文与繁体中文）等。
现在，使用最多的就是UTF-8 ,被称之为‘万国码’，基本上包含了全世界所有国家需要用到的字符。
UTF-8带来的好处就是外国人访问我们的网站的时候，不会出现乱码。
1 | <meta charset="UTF-8" /> |
最后需要你注意的是：
这行代码是必须要写的代码，如果不写,网页有可能会出现乱码的情况。同时，还需要注意写法，这里统一写成UTF-8，不要写成utf8或者是UTF8
九、HTML常用标签
1、标题标签
HTML提供了6个等级的网页标题标签，分别是<h1> 到<h6>。
<h1>:表示的是一级标题
<h2>:表示的是二级标题
以此类推，<h6>表示的就是六级标题。
标题标签的语法格式，如下所示：
1 | <h1>我是一级标题</h1> |
注意：<h1>标签是双标签，标签内部的文字就是具体的标题内容了。现在我们定义的是一级标题，如果想定义二级标题，可以采用如下的写法
1 | <h2>我是二级标题</h2> |
那么，要是设置三级标题、四级标题、应该怎样写呢？
在h的后面跟上相应的数字就可以了。
2、段落和换行标签
在HTML标签中，要想实现文字的分段展示就要用到<p>标签，<p>标签用于定义段落，它可以将整个网页分为若
干个段落。
段落标签的语法格式如下：
1 | <p> |
换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要用到换行标签。
1 | <br /> |
注意：换行标签是一个单标签。
3、文本格式化标签
在浏览网页的时候，你有没有遇到这样的情况，就是在阅读一篇文章或者是新闻的时候，发现某个词语或者某句话被设置了【粗体】,【斜体】或者是【下划线】。
为什么要做这样的设置呢?
目的就是为了突出重要性，引起读者的关注，因为设置了‘粗体’，或者是’斜体’，‘下划线’要比普通的文字更重要，
所以，你在写一篇文章的时候，可以将你认为的重要的文字设置成这样的效果。
而设置这样效果的标签，我们称之为‘文本格式化标签’。
4、div与span标签
<div>标签与<span>标签是两个比较特殊的标签，它们就是一个盒子，用来装内容的。这两个标签主要用来完成网页布局的，我们通过下图来体会一下：
在上图中，我用红色的线框起来的内容就是一个一个的盒子，在每个盒子中装的就是图片与文字
关于这两个标签，现在最重要的是要理解它们的特点。
特点1：<div>标签是用来进行网页布局的，但是就目前来说在一行中只能放一个<div>,相当于一个大盒子。
特点2：<span>标签也是用来布局的，一行上可以有多个<span>,相当于一个小盒子。
1 |
|
1 |
|
5、图像标签
图像标签使用
在前面的课程中，我们创建的网页中只有文字没有图片。如果我们想在网页中插入图片，应该怎样进行处理呢？这就需要用到图像标签。
在HTML标签中，<img>标签用于定义HTML网页中的图像。
1 | <img src="图像路径" /> |
src是<img>标签必须要添加的属性，它的作用是用来指定网页中所展示的图片的路径和文件名
1 |
|
图像标签属性
alt属性：当图片显示不出来的时候，用alt属性所指定的文字来替换图片进行展示。
title属性：该属性的取值也是一段文本，这段文本是在用户将鼠标放到图像上的时候才会展示出来，所以也叫做提示文本。
width与height 这两个属性，其实这里通过这两个属性的名称，我们就知道其作用就是设置图片的宽度与高度的
如果我们同时设置了图片的width 属性与height 属性，就有可能会导致图片的变形。所以，我们一般只需设置一个属性就可以，也就是要么只设置width属性，要么只设置height属性，不会同时设置这两个属性。
。如果只设置了width属性，那height属性的值是多少呢？会自动等比例缩放，根据宽度值，自动计算出高度的值。同理，你只设置了height属性，那么width属性的值也会自动等比例缩放。
<border>属性，该属性的作用是为图片添加边框
十、路径与超链接
1、图像路径
目录文件夹与根目录
在MyWeb这个目录文件夹中，我们可以看到有我们创建的html网页文件，还有在制作网页的时候所需要用到的图片文件。这里有一个问题，如果当图片文件越来越多，还将其放到MyWeb这个文件夹下是否合适呢？是不合适的，你想一下，在MyWeb这个目录文件夹下，不仅有很多的html网页文件还有很多的图片文件，这样管理起来是不是也很麻烦啊！所以，我们可以在MyWeb这个目录文件夹下，再去创建其它的目录文件夹，例如images,通过这个名字，我们就知道这个文件夹下存放都是图片了。如下图所示：
通过上图，我们可以看到在MyWeb 文件夹下又创建了images文件夹用来存放图片文件，这样对图片文件管理起来就变得更加方便了。学到这，我相信你一定有疑问了，如果html网页文件变得比较多了，应该怎样处理呢？也是创建文件夹，然后将网页文件放到所创建的文件夹中进行管理，当然为了管理更加的方便，其实这里有一个小的技巧，就是将相同内容的网页文件放到一文件夹中。例如：我们要做一个类似于网易的门户网站，而这个网站肯定会有很多的页面，那么我们就需要创建很多的文件夹来存放这些页面，我们可以将与“新闻”相关的页面放到一个文件夹中，将”财经”相关的页面放到一个文件夹中，这样管理起来是不是更加的方便了啊！！
‘根目录’：打开目录文件夹的第一层就是根目录
2、路径
相对路径
路径可以分为：相对路径与绝对路径
“相对路径”：指的是以引用文件所在位置为参考基础，而建立的目录路径。简单的理解就是，图片文件相对于HTML页面的位置
所谓“同一级路径”指的就是html网页与图片文件在同一个目录下面
1 | <body> |
下一级路径
当图片文件比较多的时候，为了方便管理。我们可以将这些图片文件单独的放到一个文件夹中
仔细观察一下上面这张图片，就会发现index.html网页与images这个文件夹都是在MyWeb这个目录下面，所以它们两个是同一级的。但是，图片m.jpg 是在images文件夹下面，所以说，m.jpg这张图片相对于index.html网页来说，是在它的下一级，像这种情况我们称之为”下一级路径”
1 | <body> |
在images这个文件夹下面又创建了一个img文件夹，这里把m.jpg这张图片放到了img文件夹下，现在我想在index.html这个网页中插入m.jpg这张图片应该怎样实现呢
1 | <body> |
‘上一级路径’
就像上图所
展示的，我们在MyWeb这个文件夹下面又新建了一个文件夹叫做html, 在这个文件夹下面，我创建了一个网页叫做new.html.问题是：要在new.html这个网页中插入m.jpg这张美女图片，应该怎样实现呢？
通过上面这张图我们知道html文件夹与m.jpg这张图片都是在MyWeb这个目录下的，所以它们两个是同一级。但是new.html这个网页是在html文件夹里面，所以说m.jpg这张图片相对于new.html这个网页来说是它的上一级。像这种情况，我们 称之为为’上一级路径’，
这时候要想在new.html网页中插入m.jpg这张图片，就需要用到../这个符号了(也就是说../是返回上一级目录)
1 | <body> |
1 | <body> |
绝对路径
所谓的绝对路径指的就是：目录下的绝对位置，通常是从盘符开始的路径,简单的理解就是图片文件或者是网页文件在你电脑的哪个位置
1 | <body> |
绝对路径的写法除了以上的写法以外，还有另外一种写法，就是： 盗链
1 | https://www.xxxx.com//assets/header/logo-white.png |
1 | <img src="https://www.xxx.com/assets/header/logo-white.png" /> |
3、超链接
从开始学习HTML语言，我们所设计的网页都是单个页面，它们之间没有关联，而我们知道，网站是有很多页面组成的，并且这些页面都是有关联的。 如果想让页面之间建立关联组成一个网站，就需要用到超链接标签了。
在HTML标签中，<a>标签用于定义超链接，它的作用是从一个页面链接到另外一个页面。通俗一点理解就是，当我们单击某个网站中的新闻标题或者是一张图片的时候，可以打开另外一个网页
1 | <a href="跳转目标" target="目标窗口的弹出方式">文本或者是图像</a> |
通过上面的语法，我们知道要想给文本或者是图像添加超链接，只要将其放到<a> 标签中就可以了。同时，我们也可以看到<a>标签中有两个属性分别是href 和target. 这两个属性的含义如下表格所示：
href 属性是a标签必须添加的一个属性，只有加上了这个属性，当我们去单击文本或者图像的时候才能打开另外一个网页，所以说href属性的取值为你所要打开的那个网页的地址(路径)。
target 属性指的是打开网页的方式，默认取值为_self,表示是当单击文本或者是图像后在原来的浏览器窗口中打开新网页，如果取值为_blank表示的是在浏览器的新窗口中打开新的网页。
超链接可以分为四类
第一 类: 外部链接，例如
1 | <a href="https://www.baidu.com">百度</a> |
通过上面的例子，我们能够看到，所谓的外部链接，其实就是给href属性的值是外部网站的地址。这样当我们去点击加了链接的文字或者是图片的时候，打开的就是外部的网站了。
有外部链接，就有内部链接。
第二类：内部链接
所谓的内部链接指的就是：网站内部页面之间的相互链接。例如：
1 | <a href="new.html">新闻页面</a> |
上面的例子就是一个内部链接的写法
第三类：空链接
所谓空链接，指的就是href属性的值为#.如果你在做网页的时候，暂时还无法确定当单击某段文本或者是图片所链接到网页时，可以指定空链接。例如：
1 | <a href="#">我是空链接</a> |
当单击上面的文字的时候，是没有任何反应的。
第四类：下载链接
关于下载链接我们并不陌生，我们经常在某个下载网站上，单击相应的下载链接后，就可以下载对应的文件或者软件了。那么，怎样制作这样的下载链接呢？其实非常简单，如果href属性的值是一个压缩包文件，那么单击这个链接的时候就会进行下载操作。例如：
1 | <a href="aa.zip">下载文件</a> |
当单击，“下载文件”这个链接后，就会下载aa.zip 这个压缩包文件。
案例：
1 | <body> |
十一、列表
列表就是用来布局的，它的最大的特点就是整齐、整洁、有序，作为布局会更加的自由和方便。
列表效果，是我们浏览网页的时候经常看到的一种效果。如下图所示：
上面两张图都是来自小米的官方网站，你仔细观察这两张图，你就会发现不管是文字内容还是图片内容，它们的排列都是非常整齐，非常整洁，那么这里我们都可以通过列表的方式来对这些内容进行布局。所以说，在以后的网页设计中，只要是涉及到一些有序，整齐布局的内容，你都可以使用列表来进行设计。在这里需要你记住，列表就是用来布局的。
关于列表的内容，在HTML中可以分为三类，分别是：无序列表，有序列表和自定义列表。下面我们通过几张图来理解一下什么是“无序列表”，“有序列表”和“自定义列表”。
1、无序列表
在构建无序列表的时候，使用的标签是<ul>标签，而无序列表中每一项内容是通过<li>标签来实现的。无序列表的基本语法格式如下：
1 | <ul> |
通过上面的语法格式，我们可以看到，在最外侧使用的是<ul>标签，而列表中的每一项内容都是通过<li>标签来实现的，当然<ul>标签内可以有很多的<li>标签，到底有多少个，需要根据你的实际情况来确定。
下面来看一下具体的代码吧！
1 |
|
在上面的代码中，我们创建了一个‘你的爱好’的无序列表，在<ul>标签内部添加了多个<li>标签，具体的内容放到<li>标签里面。
在浏览器中打开上面的网页，查看到的效果如下：
第一点：无序列表的各个列表项之间是没有顺序级别之分的，是并列的。也就说，无序列表中每个列表项，谁在前，谁在后，都是可以的，没有顺序级别之分。
第二点：在<ul></ul>标签中只能嵌套<li></li>标签，如果在<ul></ul>标签中去输入其它的一些标签或者是文字都是不被允许的。
第三点：<li></li> 标签内部相当于一个容器，可以容纳所有元素。也就是在<li>标签的内部你不仅可以输入文字也可以使用其它的标签。这一点是与<ul>标签是不一样的，需要你注意一下。
2、有序列表
所谓的有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>标签用于定义有序列表，列表排序默认以数字来显示，并且使用<li>标签来定义列表项。
有序列表的基本语法格式如下所示：
1 | <ol> |
下面我们通过一个案例，来体验一下有序列表的应用，代码如下所示：
1 |
|
在浏览器中查看上面的网页，效果如下图所示：
<ol></ol>标签之间只能嵌套<li></li>标签, 直接在<ol></ol>标签中输入其它标签或者是文字的做法都是不被允许的。<li></li>之间相当于一个容器，所以可以在该标签中添加文本或者是其它的标签。
现在，我们已经学习了无序列表和有序列表的内容了，下面我们结合这块内容，来做一个案例,如下图所示。
1 |
|
3、自定义列表
上面这张图，我们在访问网站的时候是比较常见的，你在访问某个网站的时候，例如，小米的官网，当你将浏览器的滚动条拖到底部的时候，就可以看到这样的效果了。你仔细观察上图，你就会发现第一行的内容类似于标题，而下面的内容，分别是对这些标题内容的解释说明，如果以后你在设计网页的时候，遇到这种情况，你就可以使用自定义列表来进行设计就可以了。
通过上面的这个例子，我们可以总结出自定义列表的使用场景：自定义列表常用于对术语或名词进行解释，说明和描述的场景。
在HTML标签中，我们使用<dl>标签实现自定义列表，该标签会与<dt>标签和<dd>标签一起使用。<dt>标签定义项目名称，而<dd>标签就是用来对项目名称进行解释，说明和描述。
具体语法格式如下：
1 | <dl> |
这里，最外层是<dl> 标签，它的里面是<dt>标签与<dd> 标签。<dt>标签定义项目名称，而<dd>标签对其进行解释说明，当然对一个项目名称可以有很多项的解释说明，所以这里可以有多个<dd>标签。
1 |
|
现在，我们已经掌握了自定义列表的应用了，下面咱们再来强调几个注意事项。
<dl></dl>标签中只能包含<dt>和<dd>标签<dt>和<dd>个数没有限制，经常是一个<dt>中有多个<dd>
现如下图所示的布局效果
1 |
|
十二、HTML表格
HTML中的表格主要用于显示，展示数据。因为它可以让数据显示的非常的规整，可读性非常好。所以说，熟练掌握表格的应用是非常重要的，一个清爽简洁的表格能够把复杂的数据表现得非常的有条理
在上面这张图中，通过表格将“支出项目”，“单价”，“数据”，“金额”,都非常清晰的给我们展示出来了，让我们可以一目了然。所以，在这里你一定要记住表格就是用来展示数据的。
1、、表格标签基本使用
表格的基本语法并不是很难，如下所示：
1 | <table> |
<table></table>是用于定义表格的标签<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中，并且表格中是可以有很多行的，有多少行就有多少对应的<tr></tr>标签。<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一行中是可以有多个单元格的，有多少单元格，就有多少对应的<td></td>标签
1 |
|
2、表头单元格标签
针对表格的第一行的所有单元格，有一个专门的名称叫做“表头单元格”。
一般表头单元格位于表格的第一行或者是第一列，表头单元格里面的文本内容都是加粗、居中显示的，用来突出表头中文本内容的重要性。
1 | <table> |
1 |
|
3、表格属性
1 | <table border="1"> |
1 | <table border="1" width="500"> |
添加高度
1 | <table border="1" width="500" height="300"> |
1 | <table border="1" width="500" height="300" align="center"> |
添加align=”center”
·cellpadding属性：表示的就是单元格边框与单元格内文本之间的距离，默认值为1像素。
1 | <table border="1" width="500" height="300" align="center" cellpadding="20"> |
单元格与单元格之间的距离是通过cellspacing 属性来设置的。该属性的默认值为2像素，
1 | <table |
如果在这你感觉给单元格与单元格之间设置距离以后变得不美观了，那么你可以取消单元格之间的距离。怎样取消呢？只要将cellspacing属性的值设为0就可以了。
4、表格结构标签
为了使表格的结构更加清晰，可以将表格划分为头部区域与主体区域两大部分。
在表格标签中，使用<thead>标签来表格的头部区域，使用<tbody>标签来表示表格的主体区域，这样可以更好的区分表格的结构。
1 | <table border="1" cellspacing="0" cellpadding="10" width="800"> |
加上<thead>标签与<tbody>标签，也没有感觉表格的结构更加清晰啊！！
看一下下面这张图
这时候，你仔细观察一下，就会发现表格的结构变得非常清晰了
看一下互联网上一些网站，在使用表格的时候，是否也是使用了<thead>与<tbody>标签来对表格的结构进行划分
展示的是搜狐股票网站的内容，我们可以看到在对股票数据进行展示的时候使用了表格，并且通过<thead>与<tbody>对表格进行了划分。这样整体结构就变得非常的清晰了。
5、合并单元格
在某些特殊的情况下，我们可能会把多个单元格合并为一个单元格。
关于“合并单元格的方式”有两种方式：
第一种方式：跨行合并，使用的是rowspan属性，该属性的取值为“合并单元格的个数”。
第二种方式：跨列合并，使用的是colspan属性，该属性的取值也为“合并单元格的个数”。
那么什么是“跨行合并”，什么是”跨列合并”呢？
通过上面这张图，我们很容易就明白了什么是“跨行合并”，什么是”跨列合并”。
“跨行合并”：是将在一列中，将处于不同行中的单元格进行合并。
“跨列合并”：是将在一行中，将处于不同列中的单元格进行合并。
要实现合并单元格的操作，肯定要写代码，那代码写到什么位置呢？就是写到目标单元格上。
如果是“跨行合并”，最上侧单元格为目标单元格，所以合并的代码要写到该单元格中。
如果是“跨列合并”，最左侧单元格为目标单元格，所以合并的代码要写到该单元格中。
如果我现在将红色箭头区域的两个单元格进行合并（编号为2和3的两个单元格进行合并），那么哪个单元格是目标单元格呢？
将红色箭头区域的两个单元格进行合并是“跨行合并”，所以上侧的为目标单元格,也就是编号为2的单元格为目标单元格，这个单元格写合并代码。
如果现在将蓝色箭头区域中两个单元格进行合并(编号为6和7的两个单元格进行合并)，那么哪个单元格是目标单元格呢？
将蓝色箭头区域的两个单元格进行合并是“跨列合并”，所以左侧的为目标单元格，也就是编号为6的单元格为目标单元格，这个单元格写合并代码
，先看一个基本的表格，代码如下
1 |
|
我们要将编号为2的单元格与编号为3的单元格进行合并，那么这是跨列合并还是‘跨行合并’呢？
“跨列合并”
那哪个单元格是目标单元格呢？
编号为2的单元格为目标单元格
既然这里是“跨列合并”，那使用哪个属性呢？
colspan
该属性的取值是多少呢？
取值为2,因为这里是合并两个单元格，所以取值为2
1 |
|
通过上图，我们发现结果是错误的，并没有将编号为2的单元格与编号为3的单元格合并，原因是什么呢？
就是因为，既然将编号为2的单元格与编号为3的单元格进行合并，也就是两个单元格合并成一个单元格，那么第一行中就只有两个单元格了，所以这里编号为3的单元格就不需要了，我们应该将其删除
代码修改如下：
1 |
|
下面在将编号为4的单元格与编号为7的单元格进行合并，应该怎样实现呢？
这里是“跨行合并”，因为是将表格中的第二行编号为4的单元格与第三行中编号为7的单元格进行合并，所以这里是”跨行合并”。
这时会使用rowspan属性，并且该属性的取值为2.
目标单元格是哪个了？
如果是”跨行合并”，目标单元格是上侧单元格，也就是编号为4的单元格
最后，一定要记得将编号为7的单元格删除掉。
1 |
|
十三：表单
使用表单的目的是什么？，使用表单的目的就是为了收集用户信息
表单是有哪几部分组成的？
在HTML中，一个完整的表单通常有表单域，表单控件(也称为表单元素)和提示信息3个部分组成。
如下图所示：
1、表单域
表单域就是一个包含表单元素的区域。
我们可以看到表单域包含了整个表单控件。
在HTML的标签中，我们通过<form>标签来定义表单域。那么这个表单域有什么作用呢？
表单域的作用就是收集用户在表单元素中填写的这些信息，然后把这些信息发送到对应网站所在的服务器中。
1 | <form action="地址" method="提交方式" name="表单域名称"> |
action: 我们前面说过，表单域的作用就是收集用户在表单元素中填写的信息，然后发送到网站所在的服务器，那么对应的服务器端会有一个文件来接收这些信息，而action就是用来指定服务器端接收信息的这个文件的地址。
method: 表示的含义就是以什么样的方式将表单元素中用户填写的数据发送到服务端。比较常见的方式有get和post 这两种方式，关于这两种方式有什么区别，也是在我们后期的Node课程中，会详细的讲解。
name:指定表单域的名称，在一个页面中有可能会有多个表单域，为了做区分，可以给每个表单域起一个名字,名字可以随意起，只要不重名就可以。
1 | <form method="post" action="/userinfo/action" name="form1"> |
2、文本框与密码框
表单元素可以分为三类：
第一类：input 输入表单元素
第二类：select 下拉表单元素
第三类：textarea 文本域元素
在英文单词中，input 就是输入的意思，而在表单元素中，我们是通过<input>标签来构建该类表单元素的。
<input>标签就是用于收集用户的信息。
<input>标签的语法规范如下：
1 | <input type="属性值" /> |
通过<input> 标签的语法规范，我们可以看到它是一个单标签，而且包含一个必须添加的type属性。
type属性的取值有多种，根据取值的不同，会显示不同的表单元素
当type属性取值为text表示创建的表单元素为文本框。
文本框就是让用户输入文本信息的，
1 | <form> |
3、单选按钮与复选框
1 | <form> |
单选按钮是在多种选项中只能选择一项的表单元素。但是，现在却全部选中了，造成这个问题的原因是，没有给单选按钮添加name属性。也就是说<input>标签除了有type属性以外，还有一个name属性。name属性用于定义表单元素的名称，从而能够区分不同的表单元素
1 | <form> |
name属性用于定义表单元素的名称，从而能够区分不同的表单元素
1 | <form> |
复选框也是通过<input> 标签来创建，对应的type属性取值为checkbox
1 | <form> |
4、input标签常见属性
input可以看到比较常见的属性还有value,checked以及maxlength这三个属性，
1 | <!--给用户名文本框添加了value属性--> |
1 | <!--给密码框添加了value属性--> |
在这里，你可能会想到既然可以给文本框，密码框添加value属性，那么能否给单选按钮与复选框添加value属性呢？答案是完全可以的，不过给单选按钮与复选框添加完value属性以后在浏览器中是看不到效果的，这一点与文本框和密码框是不一样的。那么给单选按钮与复选框添加value属性有什么用呢？作用就是将用户所选中的单选按钮或者复选框的value属性值发送到服务端，服务端接收到传递过来的值以后，就知道用户在填写信息的时候选择的性别是什么，“爱好”是什么，从而可以将这块信息进行保存
1 | <!--给单选按钮添加了value属性--> |
只有单选按钮和复选框才有checked 属性，它的作用就是当用户打开页面后，会将复选框或者单选框选中，该属性的取值为checked。
1 | <!--添加了checked--> |
下面我们再来学习一下maxlength属性
maxlength 属性的含义是最大长度，它的取值为数字。假如说，现在给我们的用户名这个文本框添加上``maxlength 属性，并且取值为6，表示的含义就是用户名这个文本框最多只能输入6个字符。
1 | <!-- 给用户名文本框添加了maxlength --> |
1 | 下面我们在将`checked` 属性与`maxlength` 属性强调一下： |
5、提交按钮与重置按钮
在表单中关于按钮一般分类三类，第一类是“提交按钮”，第二类是：“重置按钮”，第三类是：“普通按钮”。
所谓的“提交按钮”，就是将用户在表单中填写的信息，发送到服务端。
1 | <input type="submit" /> |
通过input标签来创建的，但是它的type属性值必须为submit. submit翻译成中文就是“提交”的意思。
1 | <input type="submit" value="注册" /> |
下面我们再来学习一下“重置按钮”
重置按钮的作用就是清除表单中的所有数据。
1 | <input type="reset" /> |
6、普通按钮与文件域
当我们单击“普通按钮”的时候，它不会把表单中的数据发送到服务端，也不会清除表单中的数据，而是什么反应也没有。
那它有什么作用呢？它主要配合后期我们所学习的JavaScript 来完成一些操作
普通按钮语法格式如下:
1 | <input type="button" /> |
file翻译过来就是文件的意思
1 | <input type="file" /> |
，当我去单击该按钮的时候，会弹出一个窗口，在这个窗口中可以选择要上传的文件
7、label标签应用
<label>标签为input元素定义标注(标签)。
<label>的作用是：用于绑定一个表单元素，当单击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户的体验。
1 | <label for="sex">男</label> |
在<label>标签中必须添加一个for属性，该属性的取值必须与表单元素中的id属性值保持一致
8、下拉表单
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签来定义下拉列表
1 | <select> |
<select>标签表示的是下拉列表，而<option>标签表示的是下拉列表中的具体选项。
1 | <form> |
<option>标签中的selected属性，该属性的取值为selected，表示默认选中下拉列中的某项内容
1 | <form> |
9、textarea文本域
1 | <textarea rows="3" cols="20"> |
cols属性表示的是每行中的字符数。
rows属性表示的是显示的行数。
1 | <body> |
1 | <form> |
每输入一个数字敲回车键进行换行，这时发现可以显示出5行（这5行可以在文本域中完整的显示出来），但是当我再敲一个数字6进行换行时，就会出现竖向滚动条。这就是rows属性的作用，可以指定默认文本域中显示的行数，当超过这个行数后，就会出现竖向滚动条。cols属性规定 textarea 的可见宽度,也就是每行中的字符数
现在文本域已经创建好了，但是我想给文本域中添加默认显示的内容，应该怎样做呢？
我们给文本框添加默认值是通过<input>标签中的value属性来完成的。那么给文本域添加默认值也要通过value属性来完成吗？不是的，直接添加默认内容就可以了。如下代码所示：
1 | <form> |
1 |
|