HTML
HTML简介
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档
格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML
命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相
互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这
种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
HTTP协议
HTTP协议（Hyper Text Transfer Protocol，超文本传输协议，即传输文字、图片、音频、视频等超
文本数据）是一种用于分布式、协作式和超媒体信息系统的应用层协议。为了更快地处理大量事务，确保协议
的可伸缩性，HTTP协议被设计成了一种无状态协议，不保留之前一切的请求或响应报文的信息。HTTP协议也是
万维网（WWW，World Wide Web）的数据通信的基础。
HTTP是一个客户端（用户）和服务器端（网站）请求和应答的标准，其定义了定义Web客户端如何向Web服
务器请求Web页面，以及服务器如何把Web页面响应给客户端。【HTTP使用的是TCP/IP协议，而非UDP，（待确认）】。
'''
HTTP协议中并没有规定必须使用TCP/IP或其支持的层。事实上，HTTP可以在任何互联网协议上，或其他
网络上实现。HTTP假定其下层协议提供可靠的传输。因此，任何能够提供这种保证的协议都可以被其使用。因
此也就是其在TCP/IP协议族使用TCP作为其传输层。因为UDP是不可靠传输，所以上面那句话提到“HTTP使用的
是TCP/IP协议，而非UDP”。
'''
HTTP协议工作原理
通常，由HTTP客户端发起一个请求，创建一个到服务器指定端口（默认是80端口）的TCP连接。HTTP服务
器则在那个端口监听客户端的请求。一旦收到请求，服务器会向客户端返回一个状态，比如"HTTP/1.1 200
OK"，以及响应请求而返回的内容，如文件、错误消息、或者其它信息。
HTTP协议工作流程：
第一步：建立TCP/IP连接，客户端与服务器通过Socket三次握手进行连接。
第二步：客户端向服务端发起HTTP请求（即请求行？例如：POST/login.html http/1.1）。
第三步：客户端发送请求头部、请求内容，最后会发送一空白行，标示客户端请求完毕。
第四步：服务器做出应答，表示对于客户端请求的应答（即状态行？例如：HTTP/1.1 200 OK）。
第五步：服务器向客户端发送响应头部信息，发送一空白行，表示应答头信息发送完毕。随后以Content-type要求的数据格式，发送响应正文给客户端。
第六步：服务端关闭TCP连接，如果服务器或者客户端的Connection:keep-alive，则客户端与服务器端继续保存连接，在下次请求时可以继续使用这次的连接。
一次HTTP请求的完整过程
1.浏览器根据域名解析IP地址
2.浏览器通过IP地址与WEB服务器建立一个TCP连接
3.浏览器给WEB服务器发送一个HTTP请求
4.服务器端响应HTTP请求，浏览器得到服务器响应的内5.容，比如HTML页面代码
6.浏览器解析HTML代码，并请求HTML代码中的资源
7.关闭该TCP连接，浏览器对页面进行渲染呈现给用户
HTTPS协议
HTTPS：是以安全为目标的 HTTP 通道，是 HTTP 的安全版。HTTPS 的安全基础是 SSL。SSL 协议位于
TCP/IP 协议与各种应用层协议之间，为数据通讯提供安全支持。SSL 协议可分为两层：SSL 记录协议（SSL
Record Protocol），它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等
基本功能的支持。SSL 握手协议（SSL Handshake Protocol），它建立在 SSL 记录协议之上，用于在实
际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。
HTTPS 设计目标：
(1) 数据保密性：保证数据内容在传输的过程中不会被第三方查看。就像快递员传递包裹一样，都进行了封装，别人无法获知里面装了什么 。
(2) 数据完整性：及时发现被第三方篡改的传输内容。就像快递员虽然不知道包裹里装了什么东西，但他有可能中途掉包，数据完整性就是指如果被掉包，我们能轻松发现并拒收 。
(3) 身份校验安全性：保证数据到达用户期望的目的地。就像我们邮寄包裹时，虽然是一个封装好的未掉包的包裹，但必须确定这个包裹不会送错地方，通过身份
HTTP 和 HTTPS的区别
1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)
2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)
HTML书写规范
<html> 表示整个html 页面的开始
<head> 头信息
<title> 标题</title> 标题
</head>
<body> body 是页面的主体内容
页面主体内容
</body>
</html> 表示整个html 页面的结束
<!-- 我是HTML注释-->
id和class
HTML作为文本标记语言，定义了标签，或者称为元素，而id和class是其全局属性中的两个：
id：顾名思义，元素的唯一标识id，页面中不应有重复
class：元素的类名称（可以通过元素的classname来访问它
HTML标签
基本知识
1.标签的格式:
<标签名>封装的数据</标签名>
2.标签名大小写不敏感。（不区分大小写）
3.标签拥有自己的属性。
分为基本属性：bgcolor=“red” 可以修改简单的样式效果
事件属性： οnclick=“alert(‘你好！’);” 可以直接设置事件响应后的代码。
4.标签又分为，单标签和双标签。
单标签格式： <标签名/> 如：<br/> 换行,<hr/> 水平线
双标签格式: <标签名> …封装的数据…</标签名>
5标签的语法：
双标签一定要结束
标签不能交叉嵌套
属性必须有值，属性值必须加引号
注释不能嵌套
<head></head>中的常用标签
head标签内编写的标签一般都是给浏览器看的
title标签 控制网页小标题
style标签 内部支持编写css代码
link标签 引入外部css文件
script标签 内部支持编写js代码 也可以通过src属性引入外部js文件
meta标签 功能非常多
keywords:搜索引擎查询关键字
description:用于展示页面搜索结果的文本描述
"""
正常的业务逻辑 HTML CSS JS都会分不同的文件存储 用于解耦合
"""
HTML常用标签
1.HTML标题标签(h1-h6)
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
align： 属性是对齐属性
left： 左对齐(默认)
center： 剧中
right： 右对齐
效果：
标题1
标题2
标题3
标题4
标题5
标题6
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
2.HTML 段落标签(p)
效果：
我是第一段
我是第二段
<p>我是第一段</p>
<p>我是第二段</p>
3.HTML 超链接（链接）标签(a)
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档
或者当前文档中的某个部分。
<a>标签是超链接</a>
href 属性设置连接的地址
target 属性设置哪个目标进行跳转
_self 表示当前页面(默认值)
_blank 表示打开新页面来进行跳转
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_self">百度直接跳转</a><br/>
<a href="http://www.baidu.com" target="_blank">百度新标签跳转</a><br/>
4.HTML列表标签
效果：
1.无序列表
- 第一项
- 第二项
- 第三项
2.有序列表
- 第一项
- 第二项
- 第三项
HTML 支持有序、无序和定义列表，常用的为前两者。
1.无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul type="xxx">
type 属性可以修改列表项<li>前面的符号：
circle 空心圆
disc 实心圆
square 实心方块
none 无符号
我们可以使用快捷方式创建ul>li*n(n为你想要创建li的个数)，然后我们按下TAB键即可。
2.有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<ol type="xxx">
type 属性可以修改列表项前序号的样式
1 默认的样式 (1,2,3,4,5....)
a 改为（a,b,c,d,e,f....）
A 改为（A,B,C,D,E,F.....）
i 改为(i,ii,iii,iv....)
I 改为（I,II,III,IV....）
我们可以使用快捷方式创建ol>li*n(n为你想要创建li的个数)，然后我们按下TAB键即可。
5.HTML 图像标签
<img />标签可以在html 页面上显示图片。
src 属性可以设置图片的路径 <img src="url" />
width 属性设置图片的宽度
height 属性设置图片的高度
border 属性设置图片边框大小
title 鼠标悬浮自动展示提示信息
alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容<img src="boat.gif" alt="Big Boat">
效果：
源码
<img src="https://s1.ax1x.com/2022/03/07/bykoz6.jpg" width="200px" height="200px" border="2px"/>
<img src=" 0.jpg " alt="我故意放错的"/>
6.HTML表格标签
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格
（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文
本、图片、列表、段落、表单、水平线、表格等等。
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签
colspan 属性设置跨列（向右合并单元格）
rowspan 属性设置跨行 (向下合并单元格）
效果：
| 1.1 | 1.3 | 1.4 | 1.5 | |
| 2.1 | 2.2 | 2.3 | 2.4 | 2.5 |
| 3.1 | 3.2 | 3.3 | 3.4 | |
| 4.1 | 4.2 | 4.3 | 4.4 | |
源码
<table width="500" height="500" cellspacing="1" border="2">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td colspan="2" rowspan="2">3.4</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td>4.4</td>
</tr>
</table>
7.常用的特殊字符集
| 结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| " | 引号 | " | " |
| ' | 撇号 | ' | ' |
| & | 和号 | & | & |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
浙公网安备 33010602011771号