#yyds干货盘点#--http协议&html常用标签
Posted 旺仔呀旺仔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#--http协议&html常用标签相关的知识，希望对你有一定的参考价值。
一、HTTP协议
HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于万维网（WWW:World Wide Web ）服务器与本地浏览器之间传输超文本的传送协议。HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。 
http协议特性
- http协议是基于TCP/IP协议之上的应用层协议。
- 基于请求－响应模式
- 无状态保存
- 无连接
无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
二 、http请求协议与响应协议
http协议包含由浏览器发送数据到服务器需要遵循的请求协议与服务器发送数据到浏览器需要遵循的请求协议。用于HTTP协议交互的信被为HTTP报文。请求端(客户端)的HTTP报文 做请求报文,响应端(服务器端)的 做响应报文。HTTP报文本身是由多行数据构成的字文本。 ![image]
1、请求方式: get与post请求
- GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditBook?name=test1&id=123456. POST方法是把提交的数据放在HTTP包的请求体中.
- GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制
2、响应协议 
三 、标签
3.1 基本标签
1、标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6
2、段落标签
<p>大家好，我是段落1。</p>
<p>大家好，我是段落2。</p>
<p>大家好，我是段落3。</p
3、换行标签
<p>大家好，我是段落标签p。我按了enter一下
换行了</p>
<p>大家好，我是段落标签p。我按了enter一下<br/> 换行了</p
4、文本格式化标签 html提供了一系列的用于格式化文本的标签，可以让我们输出不同外观的元素，比如粗体和斜体字。如果需要在网页中，需要让某些文本内容展示的效果丰富点，可以使用以下的标签来进行格式化。
<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br /
5、特殊符号
® ©
6、div和span标签
<div>只是一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表
块级元素与行内元素的区别所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。
四、超链接标签
超链接是浏览者和服务器的交互的主要手段，也叫超级链接或a链接，是网页中指向一个目标的连接关系，这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。 超链接是网页中最重要的元素之一。一个网站的各个网页就是通过超链接关联起来的，用户通过点击超链接可以从一个网页跳转到另一个网页。 几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。例如,在阅读某个网站时，遇到一个不认识的英文，你只要在这个单词上单击一下，即可跳转到它的翻译页面中，看完单词的解释后点一下返回按钮，又可继续阅读，这就是超链接的常见用途。还有经常到购物网站中去，我们都是在百度搜索，然后点击对应的搜索项进入到对应的购物网站的，这也是超链接的作用。超链接的属性：
属性 | 值 | 描述 |
href | 网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如：F:\\html\\index.html ] | 规定链接的跳转目标 |
title | 百度 | 链接的提示信息 |
target | _blank [ 在新建窗口中打开网页 ] _self [ 默认值，覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] | 与前面四项固定值不同，framename是泛指，并不是这个值，这点将在后面框架部分内容中详细介绍，这里可以暂时先略过 |
1、href是超链接最重要的属性，规定了用户点击链接以后的跳转目标，这个目标可以是 网络连接，也可以是本地 2、网络链接指的是依靠网络来进行关联的地址，一般在地址前面是以 http://或者https://这样开头的，如果没有网络，则用户点击了超链接也无法访问对应的目标。 3、本地链接指的是本地计算机的地址，一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的，不需要经过网络。 4、如果href的值留空，则默认是跳转到当前页面，也就是刷新当前页面。
五、锚点
锚点( anchor )是超链接的一种应用，也叫命名锚记，锚点可以像一个定位器一样，可以实现页面内的链接跳转，运用相当普遍。例如，我们有一个网页，由于内容太多，导致页面很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。又例如，我们页面中，有个链接需要跳转到另一个页面的中间或者脚部去，这时候也可以运用上锚点技术来解决这个问题。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<style>
div {
height: 800px;
background-color: bisque;
}
</style>
</head>
<body>
<h1>你好，世界！</h1>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<span id="db"></span>
<div id="i1">
第一章
<a href="#db">顶部</a>
</div>
<div id="i2">
第二章
<a href="#db">顶部</a>
</div >
<div id="i3">
第三章
<a href="#db">顶部</a>
</div>
</body>
</html
a的href属性加上# 表示页面内跳转
六、img标签
在HTML中，图像由标签定义的，它可以用来加载图片到html网页中显示。网页开发过程中，有三种图片格式被广泛应用到web里，分别是 jpg、png、gif。
/*
src属性：
指定图像的URL地址，是英文source的简写，表示引入资源。
src的值可以是本地计算机存储的图片的地址，也可以是网络上外部网站的图片的地址。
如果src的值不正确，那么浏览器就无法正确的图片，而是显示一张裂图。
alt属性：指定图像无法显示时的替换文本。
width属性： 指定引入图片的显示宽度。
height属性：指定引入图片的显示高度。
border属性：指定引入图片的边框宽度，默认为0。
title属性：悬浮图片上的提示文字
*
点击图片跳转可以配合a标签使用
<a><img src="" ></a
七 列表标签
<ul type="square">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ol start="100">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol
八.表格标签
8.1、table结构
在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样，都是有行有列的。HTML使用tr标签定义行，使用td标签定义列。 语法：
<table border="1">
<tr>
<td>单元格的内容</td>
……
</tr>
……
</table
1、和表示一个表格的开始和结束。一组
...表示一个表格。2、border用于设置整个表格的边框宽度，默认为0，表示不显示边框。
3、和表示表格中的一行的开始和结束。一组
...，一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。4、和表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列，多少的单元格了。
8.2、table属性
属性 | 值 | 描述 |
width | px、% | 规定表格的宽度。 |
height | px、% | 规定表格的高度。 |
align | left、center、right | 规定表格相对周围元素的对齐方式。 |
rgb(x,x,x)、#xxxxxx、colorname | 规定表格的背景颜色。 | |
background | url | 规定表格的背景图片。 |
border | px | 规定表格边框的宽度。 |
px、% | 规定单元格边框与其内容之间的空白。 | |
px、% | 规定单元格之间的空隙。 |
8.3、td属性
表格中除了行元素以外，还有单元格，单元格的属性和行的属性类似。td和th都是单元格。
属性 | 值 | 描述 |
height | px、% | 规定单元格的高度。 |
width | px、% | 规定单元格的宽度。 |
align | left、center、right | 规定单元格内容的对齐方式。 |
valign | top、middle、bottom | 规定单元格内容的垂直对齐方式。 |
rgb(x,x,x)、#xxxxxx、colorname | 规定单元格的背景颜色。 | |
background | url | 规定单元格的背景图片。 |
rowspan | number | 规定单元格合并的行数 |
colspan | number | 规定单元格合并的列数 |
小案例：
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</tr>
<tr>
<td>张三</td>
<td>32</td>
<td>176</td>
</tr>
</table
九.表单标签
表单主要是用来收集客户端提供的相关信息，提供了用户数据录入的方式，有多选、单选、单行文本、下拉列表等输入框，便于网站管理员收集用户的数据，是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁. 表单被form标签包含，内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后，就可以把表单数据提交到服务器端。 一个表单元素有三个基本组成部分：
- 表单标签，包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
- 表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。
- 表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性：
属性 | 值 | 描述 |
action | 访问服务器地址 | 服务器端表单处理程序的URL地址 |
method | post、get[默认值] | 表单数据的提交方法 |
target | 参考超链接的target属性 | 表单数据提交时URL的打开方式 |
enctype | application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] | 表单提交数据时的编码方式 |
<h3>用户注册</h3>
<form action="http://127.0.0.1:8800" method="get">
<p><label for="user">姓名</label>： <input type="text" name="user" id="user"></p>
<p>密码： <input type="password" name="pwd"></p>
<p>爱好：
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football"#yyds干货盘点#https工作原理详解#yyds干货盘点#网络协议之:还在用HTTP代理?弱爆了!快试试SOCKS5
#yyds干货盘点#dart系列之:浏览器中的舞者,用dart发送HTTP请求