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.常用的特殊字符集
结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
" | 引号 | " | " |
' | 撇号 | ' | ' |
& | 和号 | & | & |
< | 小于号 | < | < |
> | 大于号 | > | > |