在HTML中,大多数元素都被定义为块级元素或内联元素。
块级元素通常会独立成行,而内联元素会并排显示。
在我们学过的元素中,
块级元素如:<h> <p> <table>这些。
内联元素如<td><a><img>
下面我们通过练习来直观看看他们的区别。
块级元素展示,代码如下:
<body>
<h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
<p>块级元素与内联元素</p>
<p>零基础自学网页制作</p>
<table border="1" width="50%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>
如图:
内联元素展示如下
示例代码:这段代码被我放在了</table>后面。
<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width = "200px"/>
效果如图:
其中,<img>标签中的width属性规定了图片的宽度为200px,也就是200像素。
HTML中,如果只对图片的宽或高进行数值指定,那么未指定的数值会随着指定数值进行等比例缩放!
熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。
<div>与<span>标签
为了方便开发者对页面内容进行布局和调整,html开发者为html加入了专门的区块元素<div></div>。
<div></div>是一个块级元素,大家可以把它理解为一个容器,它本身是不会显示在页面上的。
比如这个!
笔者第一个漫画作品
如果抛开画面内容,我们看到的是一堆对画面进行分割的方格子。像这样
<div></div>元素的作用就是对页面进行了这样的分割。
实际上我们的页面布局都是基于这样思路进行分割的,只是页面上不会像漫画一样显示外边框而已。例如:
强制为其添加边框分割:
大家看明白了吗?<div></div>就是用来对页面进行分割划区域的。
通过给<div>标签设置不同的id属性,可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。
这是对块级元素整体改变样式的方法。
但是,如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢?
html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作,我们可以这样写:
<p>我有一个<span>梦想</span></p>
通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。
今天的内容结束了,下一次我们建立一个新的页面来简单看看<div>元素的基本用法。
喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!
HTML序章(学习目的、对象、基本概念)——零基础自学网页制作
HTML是什么?——零基础自学网页制作
第一个HTML页面如何写?——零基础自学网页制作
HTML页面中head标签有啥用?——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2(路径详解)——零基础自学网页制作
使用HTML添加表格1(基本元素)——零基础自学网页制作
使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作
使用HTML添加表格3(间距与颜色)——零基础自学网页制作
使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作
HTML表单4(form的action、method属性)——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
CSS系列漫画教程》共15讲,是我2012年刚毕业步入互联网时的早期作品。时隔多年,如今互联网内容为王的分享经济迅速发展,这些作品压箱底太可惜,不如分享给大家。
漫画还停留在当年前端兼容ie6的时代,如今ie6随着那一代人的青春一起逝去,大家各奔前程,留下是感情和回忆。漫画不乏纰漏和不严谨之处,可作为大家“饭后码余”的休闲段子。
本期分享第1~5讲,我会继续更新后续章节。
言
HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网服务器传输超文本到本地浏览器的传送协议。HTTP 是基于 TCP/IP 协议通信协议来传递数据(HTML 文件、图片文件、查询结果等)。它不涉及数据包(packet)传输,主要规定了客户端和服务器之间的通信格式,默认使用80端口。
一、Http的特点
1、简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、PUT、DELETE、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。
2、灵活:HTTP允许传输任意类型的数据对象。
3、无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
4、无状态:HTTP协议是无状态的,HTTP 协议自身不对请求和响应之间的通信状态进行保存。任何两次请求之间都没有依赖关系。直观地说,就是每个请求都是独立的,与前面的请求和后面的请求都是没有直接联系的。协议本身并不保留之前一切的请求或 响应报文的信息。这是为了更快地处理大量事务,确保协议的可伸缩性,而特意把 HTTP 协议设计成如此简单的。
二、Http报文
Http报文包括请求报文和响应报文两大部分,其中请求报文由请求行(request line)、请求头(header)、空行和请求体四个部分组成。而响应报文由状态行、响应头部、空行和响应体四个部分组成。接下来我们详细介绍下请求报文的各个部分及其作用。
1、请求行
用来说明请求类型、要访问的资源以及所使用的HTTP版本。
POST /chapter17/user.html HTTP/1.1
以上代码中 POST 代表请求方法, /chapter17/user.html 表示URI, HTTP/1.1 代表协议和协议的版本。现在比较流行的是Http1.1版本。大家也可以了解下 2.0 :《让面试官颤抖的 HTTP 2.0 协议面试题》。
2、请求头
由关键字 / 值对组成,每行一对,关键字和值用英文冒号“:”分隔。
请求头部通知服务器有关于客户端请求的信息。它包含许多有关的客户端环境和请求正文的有用信息。其中比如:
3、空行
最后一个请求头之后是一个空行,这个行非常重要,它表示请求头已经结束,接下来的是请求正文。
4、请求体
可以承载多个请求参数的数据。
name=tom&password=1234&realName=tomson
上面代码,承载着name、password、realName三个请求参数。
三、HTTP请求方法
四、GET与POST区别
五、Http状态码
状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别:
比如我们平时常见两种出错的状态码:
403 Forbidden //对被请求页面的访问被禁止 404 Not Found //请求资源不存在,比如:输入了错误的URL
更多看下这篇文章《两张趣图助你理解 HTTP 状态码》
六、持久连接
1、为什么需要持久连接
HTTP协议的初始版本中,每进行一次HTTP通信就要断开一次TCP连接。以当年的通信情况来说,因为都是些容量很小的文本传输,所以即使这样也没有多大问题。可随着 HTTP 的 普及,文档中包含大量图片的情况多了起来。比如,使用浏览器浏览一个包含多张图片的 HTML 页面时,在发送请求访问 HTML 页面资源的同时,也会请 求该 HTML 页面里包含的其他资源。因此,每次的请求都会造成无谓的 TCP 连接建立和断开,增加通信量的 开销。
2、持久连接的特点
为解决上述 TCP 连接的问题, HTTP/1.1 和一部分的 HTTP/1.0 想出了持久连接(HTTP Persistent Connections,也称为 HTTP keep-alive 或 HTTP connection reuse)的方法。持久连接的特点是,只要任意一端没有明确提出断开连接,则保持TCP连接状态。
持久连接的好处在于减少了 TCP 连接的重复建立和断开所造成的额外开销,减轻了服务器端的负载。另外, 减少开销的那部分时间,使 HTTP 请求和响应能够更早地结束,这样 Web 页面的显示速度也就相应提高了。
在 HTTP/1.1 中,所有的连接默认都是持久连接,但在 HTTP/1.0 内并未标准化。虽然有一部分服务器通过非 标准的手段实现了持久连接,但服务器端不一定能够支持持久连接。毫无疑问,除了服务器端,客户端也需 要支持持久连接。
七、管线化
持久连接使得多数请求以管线化(pipelining)方式发送成为可能。从前发送请求后需等待并收到响应,才能 发送下一个请求。管线化技术出现后,不用等待响应亦可直接发送下一个请求。
这样就能够做到同时并行发送多个请求,而不需要一个接一个地等待响应了。通俗地讲,请求打包一次传输过去,响应打包一次传递回来。管线化的前提是在持久连接下。
假如当请求一个包含 10 张图片的 HTML Web 页面,与挨个连接相比,用持久连接可以让请求更快结束。 而管线化技术则比持久连接还要快。请求数越多,时间差就越明显。客户端需要请求这十个资源。以前的做法是,在同一个TCP连接里面,先发送A请求,然后等待服务器做出回应,收到后再发出B请求,以此类推,而管道机制则是允许浏览器同时发出这十个请求,但是服务器还是按照顺序,先回应A请求,完成后再回应B请求。
于是在使用持久连接的情况下,某个连接上消息的传递类似于:
请求1 -> 响应1 -> 请求2 -> 响应2 -> 请求3 -> 响应3
管线化方式发送变成了类似这样:
请求1 -> 请求2 -> 请求3 -> 响应1 -> 响应2 -> 响应3
喜欢这篇文章记得收藏,转发哦!更多相关资讯可以关注xabdqn,免费获得java零基础教程!额外附送excel教程!
*请认真填写需求信息,我们会在24小时内与您取得联系。