1.HTTP和WEB工作原理
超文本传输协议（HTTP，HyperText Transfer Protocol）是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。
WEB 本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。
当你想进入一个网页，或者其他网络资源的时候，通常你要首先在你的浏览器上键入你想访问网页的统一资源定位符（Uniform Resource Locator)，或者通过超链接方式链接到那个网页或网络资源。这之后的工作首先是 URL 的服务器名部分，被名为域名系统的分布于全球的因特网数据库解析，并根据解析结果决定进入哪一个 IP 地址。
接下来的步骤是给所要访问的网页，向在那个IP地址工作的服务器发送一个 HTTP 请求。在通常情况下，HTML 文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。
网络浏览器接下来的工作是把 HTML、CSS 和其他接受到的文件所描述的内容，加上图像、链接和其他必须的资源，显示给用户。这些就构成了你所看到的“网页”。
大多数的网页自身包含有超链接指向其他相关网页，可能还有下载、源文献、定义和其他网络资源。像这样通过超链接，把有用的相关资源组织在一起的集合，就形成了一个所谓的信息的“网”。这个网在因特网上被方便使用，就构成了最早在 1990 年代初蒂姆·伯纳斯-李所说的万维网。
2.什么是HTML
HTML 就是万维网中的超文本，HTML 也叫做超文本标记语言。“超文本”就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。在Web服务中，信息一般是使用 HTML 格式以超文本和超媒体方式传送的，所使用的 Internet 协议是 HTTP 协议。
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。
HTML 网页文件可以使用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或.html 为文件后缀名保存。将 HTML 网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。
1 | COPY |
3. HTML基础语法
3.1. <!DOCTYPE html>
格式一： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
格式二： <!DOCTYPE html> 推荐的方式 Document Type HyperText Mark-up Language，文档中超文本标记语言的类型，可告知浏览器怎么解析该文档。
由于使用的场景或者版本的更替间，HTML 使用的标准不同，所以需要浏览器按照不同的标准来解析 HTML 文本内容，这就需要告知浏览器我当前的 HTML 页面是按照那种方式进行编写的。没有该声明，将是你 HTML 噩梦的开始。这行代码必须写且务必在文档首行。
1 | COPY<!-- 必须写在HTML文件首行 --> |
3.2. <html></html>
<html> 标签用于 HTML 文档的最开始，用来标识 HTML 文档的开始。而 </html> 标志放在HTML 文档的结束，用来标识 HTML 文档的结束，两个标志必须一块使用。
1 | COPY<!-- 必须写在HTML文件首行 --> |
3.3. <head></head>
<head> 和 </head> 构成 HTML 文档的开头部分。 <head> 和 </head> 标签之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。
在此标志对之间可以使用 <title></title> 、 <meta> 、 <link> 、 <script></script>等标签。
<meta> ：用来提供关于文档的信息，起始属性为： charset="utf8" 。表示告诉浏览器页面采用什么编码解析文档，一般来说我们就用 utf8。当然，文件保存的时候也是 utf8，而浏览器也设置 utf8即可正确显示。
<link> ：用来引入 CSS 文件。
<style></style> ：编写 CSS 代码。
<script></script> ：用来引入 JS 文件或编写 JS 代码。
1 | COPY<!-- 必须写在HTML文件首行 --> |
3.4. <title></title>
<title> 定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口
的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文
档链接的默认名称。
注意： <title> 标签位于 <head> 标签内，是 <head> 标签中唯一要求包含的东西。
3.5. <meta></meta>
<meta/>用来提供关于文档的信息。
1 | COPY<!-- 必须写在HTML文件首行 --> |
以上三部分是SEO搜索引擎优化的主要部分。
3.6. <body></body>
一般情况下浏览器上显示的内容的都放在body中，不排除其他标签可以不用body，比如frameset框架集标签。
<body> 和 </body> 是HTML文档的主体部分，在此标志对之间可包含 <p></p> 、 <h1></h1> 、 <br>、 <hr> 等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。
1 | COPY<!-- 必须写在HTML文件首行 --> |
4.HTML常用标签和属性
HTML 页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染 ，我们需要记忆常用
的标签即可。大致可分为如下几类：头标签、标题、水平线、段落、换行、图片、表格、超链接、列
表、表单、下拉列表、div 和 span、格式化文字的。
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。
4.1. HTML标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
1 | COPY<body> |
4.2. HTML段落
HTML 段落是通过 <p> 标签进行定义的。
1 | COPY<body> |
4.3. HTML水平线
<hr /> 标签在 HTML 页面中创建水平线。 <hr />元素可用于分隔内容。
4.4. HTML注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注
释，也不会显示它们。 <!-- This is a comment -->
4.5. HTML换行
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。<br> 还是<br /> 您也许发现 <br> 与 <br /> 很相似。在 XHTML、XML 以及未来的 HTML
版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。
即使 <br /> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。
4.6. HTML链接
HTML 链接是通过 <a> 标签进行定义的。
1 | COPY<body> |
4.7. HTML图像
HTML 图像是通过 <img /> 标签进行定义的。
图像的名称和尺寸是以属性的形式提供的。
1 | COPY<body> |
4.8. HTML格式化(了解)
文本格式化标签。
| 标签 | 描述 |
|---|---|
| < b > | 定义粗体文本 |
| < big > | 定义大号字 |
| < em > | 定义着重文字 |
| < i > | 定义斜体字 |
| < small > | 定义小号字 |
| < strong > | 定义加重语气 |
| < sub > | 定义下标字 |
| < sup > | 定义上标字 |
| < ins > | 定义插入字 |
| < del > | 定义删除字 |
4.9. HTML元素
HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
| 开始标签 | 元素内容 | 结束标签 |
|---|---|---|
| < p > | This is a paragraph | < /p > |
| < a href=”default.htm” > | This is a link | < /a > |
| < br /> |
注意：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
4.9.1. HTML语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
4.9.2. 嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
4.9.3. HTML 文档实例
1 | COPY<html> |
上面的例子包含三个 HTML 元素。
4.9.4. HTML 实例解释
4.9.4.1.元素
1 | COPY<p>This is my first paragraph.</p> |
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> ，以及一个结束标签 </p> 。
元素内容是：This is my first paragraph .
4.9.4.2.<body> 元素
1 | COPY<body> |
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> ，以及一个结束标签 </body> 。
元素内容是另一个 HTML 元素（p 元素）。
4.9.4.3. <html> 元素
1 | COPY<html> |
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html> 。
元素内容是另一个 HTML 元素（body 元素）。不要忘记结束标签。
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。
1 | COPY<!-- 下面的写法不推荐 --> |
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料
的结果或错误。
注意：未来的 HTML 版本不允许省略结束标签。
4.9.4.4. 空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（ <br> 标签定义换行）。
在未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
4.9.4.5. HTML提示：使用小写标签
HTML 标签对大小写不敏感： <P> 等同于<p> 。
W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，在未来 HTML
版本中强制使用小写。
4.10. div和span
<div> 是一个块级元素，通常与css配合使用，用于布局。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
1 | COPY |
标签的分类：HTML 中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
块级元素特点： 元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高
以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素的宽
度一致），除非设定一个宽度。行内元素特点 ：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的
宽度就是它包含的文字或图片的宽度，不可改变。行内块状元素的特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设
置。可通过浏览器查看是何种元素，后期也可以通过 CSS 进行修改。
4.11. HTML表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干
单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单
元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
表格的表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本。
表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览
器可能无法显示出这个单元格的边框。
这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符 ，就可以将边框显示出来。
1 | COPY |
4.12. HTML列表
4.12.1. 无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于<li> 。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
1 | COPY |
4.12.2. 有序列表
有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
1 | COPY |
4.13. HTML表单
4.13.1. <form> 元素
HTML 表单用于收集用户输入。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
表单用于向服务器传输数据。form 元素是块级元素。
常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| action | URL | 规定当提交表单时向何处发送表单数据 |
| method | get、post | 规定用于发送 form-data 的 HTTP 方法 |
| name | Form_name | 规定表单的名称 |
4.13.2. <input> 元素
<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 定义图像输入的替代文本 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
| disabled | disabled | 当 input 元素加载时禁用此元素 |
| readonly | readonly | 规定输入字段为只读 |
| maxlength | number | 规定输入字段中的字符的最大长度 |
| value | value | 规定 input 元素的值 |
| type | button checkbox file hidden image password radio reset submit text | 规定 input 元素的类型按钮 复选框 文件 隐藏域 图像形按钮 密码 单选框 重置按钮 提交按钮 文 本 |
4.13.2.1. text 文本输入
<input type="text"> 定义用于文本输入的单行输入字段。
1 | COPY<form> |
4.13.2.2. password 密码输入
<input type="password"> 定义密码字段。
1 | COPY<form> |
4.13.2.3. radio 单选按钮输入
<input type="radio"> 定义单选按钮。
1 | COPY<form> |
4.13.2.4. checkbox 复选框
<input type="checkbox"> 定义复选框。
复选框允许用户在有限数量的选项中选择零个或多个选项。
1 | COPY<form> |
4.13.2.5. submit 提交按钮
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
如果省略 action 属性，则 action 会被设置为访问当前页面。
1 | COPY<form action="http://www.shsxt.com"> |
4.13.2.6. select 下拉列表
定义一个下拉列表。
1 | COPY<select name="city"> |
4.13.2.7. textarea 文本域
该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来
规定 textarea 的尺寸。cols 规定文本区内的可见宽度。rows 规定文本区内的可见行数。
1 | COPY<textarea name="message" rows="10" cols="30"> |
4.13.2.8. button 按钮
<button> 元素定义可点击的按钮。
常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 禁用该按钮 |
| type | button、submit、reset | 规定按钮的类型 |
| value | text | 规定按钮的初始值 |
| name | button_name | 规定按钮的名称 |
1 | COPY<button type="button">Click Me!</button> |
4.13.2.9. label 标注标签
<label> 标签为input 元素定义标注（标记）。
label元素不会呈现任何的特殊效果。label 标签的 for 属性应当与相关元素的 id 属性相同。
1 | COPY<label for="username">用户名：</label> |
4.14. HTML属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=”value”。
属性总是在 HTML 元素的开始标签中规定。
4.14.1. HTML提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 HTML 要求使用小写属性。
4.14.2. 始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
1 | COPY<input name='Bill "HelloWorld" Gates' /> |
根据百度百科查询自己喜欢的人物，制作其人物简历。（css文件直接导入，按照文档样式说明使用）
1 | COPY |
resume.css
1 | COPY/* 采用什么编码解析文件 */ |
演示效果：
