HTTP学习笔记

最新推荐文章于 2023-04-26 19:09:03 发布

duoduowangjia

最新推荐文章于 2023-04-26 19:09:03 发布

阅读量671

点赞数

分类专栏：跟兄弟连学php学习笔记文章标签： php http html

本文链接：https://blog.csdn.net/duoduowangjia/article/details/109665242

版权

跟兄弟连学php学习笔记专栏收录该内容

10 篇文章 2 订阅

订阅专栏

http

HTTP消息由头和体组成。

请求头

请求消息第一行为请求行：方法字段（GET,POST和HEAD)，URL字段，HTTP版本字段。

Host:定义存放所请求对象的主机。

Connection:为close代表不想使用持久连接。

User-agent：指定用户代理，即产生请求的浏览器的类型。

响应头

响应头第一行为状态行：协议版本字段，状态码字段，原因短语字段。

消息	描述
200	成功
301	永久移动（自动跳转）
304	未修改
400	错误请求
404	未找到
500	服务器内部错误
502	错误网关
505	http版本不支持

Connectlon:为close表示告诉客户将在发送完后关闭tcp连接。

Data：指出响应消息日期和时间。

Server：指出发出服务器类型。

Last-Nodified:指出对象本身创建或最后修改日期或时间。

Content-Length:指出发送对象的字节数。

Content-Type:指出包含在附属体中的对像文本类型。

URL概述

URL(统一资源定位符)

格式

http://<ip地址>/<端口号>/<路径><?[查询信息]>

例如：http://www.openyourass.cn/book/index.html

http://:代表超文本传输协议。

www:代表一台web（万维网）服务器。

openyourass.cn:代表装有网页服务器的域名。

book/:代表该服务器的子目录。

index.html:是文件夹中一个HTML文件。

HTML的设计与应用

简单的HTML实例制作

<html>           <!--html开始标记-->
    <head>      <!-- html头信息-->
        <title>页标题</title>    <!-- 网页标题标记-->
    </head><!--html头信息结束标记 -->
    <body bgcolor="black" text='#ffffff'><!-- 网页主体标记-->
        <center><!-- 居中格式标记-->
            <h1>实例</h1><!--html内容一号标题标记 -->
        </center><!-- 居中格式结束标记-->
        <hr width=80%><!-- 输出分格线标记-->
        <p>显示黑色背景，白色文本</p><!-- html段落的标记对-->
    </body><!-- 页面体中内容结束标记-->
</html>

标签和元素

HTMl以标签来标记网页结构和显示内容资料，成对的标签被称为容器。

HTMl标签的属性：是HTMl元素提供的附加信息，总是“名称=值”的形式。例如：<body bgcolor="black" text='#ffffff'>

HTML颜色设置：被W3C支持的：aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellow。如果使用其他颜色需要使用16进制颜色值如：bgcolor="#00ff00"

注释：

HTML字符实体：分为三部分&+实体名称或#和实体编号+分号

例如：

空格 &nbsp;或者是&#160；

HTML文件主体结构

<html>
    <head>
        ......
    </head>
    <body>
        ......
    </body>
</html>

HTML文档头部元素

<title>元素

给页面指定一个标题。是<head>的子元素。

<base>元素

将相对url转换为完整的绝对URL。指定页面的基URL,其中target代表在何处打开文档。

例如：<base href="URL" target="WINDOW_NAME"/>

<link>元素

用于创建到CSS样式表的连接，描述两个文档中的连接关系。

例如<link rel="stylesheet" type="text/css" href="style.css"/>

<meta>元素

定义文件信息的名称，内容等。

示例：

<head>
    <title>这是标题</title>
    <meta name="keywords" content="HTML学习">
    <meta name="description" content="HTML是web页面的描述性语言“>
    <meta name"author" content="路人甲"
    <meta name="copyright" content="2020">
    <meta http-equiv="Content-Type" content"text/html"; charset=UTF-8">
    <base href="https://www.baidu.com/s?ie=UTF-8&wd=" target="_blank">
    <link rel="archives" title="PHP" href="archver/"
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="include/js/common.js" type="text/javascript"></script>
</head>

HTML文档主体标记

<body>和</body>放置页面中所有内容，如图片，文字，表格，表单，超连接等。

示例

<html>
    <body bgcolor="#FFFFE7" text="#FF0000" link="#3300FF" alink="#FF00FF" vlink="#9900FF">
    
    </body>
</html>

body标签常用属性表

属性	描述
text	设置页面文字颜色
bgcolor	设定页面背景颜色
background	设定页面背景图案
bgproperties	设定页面的背景图像为固定，不随页面的滚动而滚动
link	设定页面默认的连链接颜色
alink	设定鼠标正在单击时的链接颜色
vlink	设定访问后链接文字的颜色
topmargin	设定页面上的边距
leftmargin	设定页面的左边距

通用HTML标签属性

属性	描述
id	设定标签的id
name	设定标签的名称
class	设定标签样式的类选择器
style	设定标签样式属性

文字版面的编辑

格式标签

定义网页中文本的布局如缩进，位置，换行控制，列表等。

常见的HTML格式标签

标签	描述
<br>	换行标签
<p>	换段落标签
<center>	居中对齐标签
<pre>	预格式标签，保留文字在源代码中的格式
<li>	列表项的标记
<ul>	无序列表，使用<ul>作为无序的声明，使用<li>作为每个项目的起始
<ol>	有序列表，可以显示特定的项目顺序，与无序列表使用方式相同
<hr>	水平分隔线标识，用于段落与段落之间的分隔

<html>
    <head><title>格式标记测试网页</title></head>
    <body>
        <p>一段文本</p>
        <center>居中显示</center>
        <pre>
                上边
            左边      右边
                下边
        </pre>
        <hr>
        无顺序列表：
        <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ul>
        <hr>
        有顺序列表
        <ol>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ol>
    </body>
</html>

文本标签

强调某一部分文字

常见文本风格标签

标签	描述
<hn>	标题字标记，n为1-6
<b>	粗体字标签
<i>	斜体字标签
<u>	下画线字体标签
<sub>	文字下标字体标签
<sup>	文字上标字体标签
<font>	字体标记，使用该标记指定字体大小，颜色，字体等信息
<tt>	打字机文字
<cite>	用于引证，举例，通常为斜体字
<em>	表示强调，通常为斜体字
<strong>	表示强调，通常为粗体字
<small>	小型字体标签
<big>	大型字体标签

示例

<html>
    <head>
        <title>文本标记测试网页</title>
    </head>
    
    <body>
        <h1>使用&lt;H1&gt;输出一号标题字体</h1>
        <h2>使用&lt;H1&gt;输出一号标题字体</h2>
        <h3>使用&lt;H1&gt;输出一号标题字体</h3>
        <h4>使用&lt;H1&gt;输出一号标题字体</h4>
        <h5>使用&lt;H1&gt;输出一号标题字体</h5>
        <h6>使用&lt;H1&gt;输出一号标题字体</h6>
        
        <font face="楷体_GB2312" color="red" size="5">绝对字号为5的红色楷体字</font><br>
        <font face="宋体" color="green" size="+3">绝对字号为+3的绿色宋体字</font><br>
        <font face="黑体" color="blue" size="-1">绝对字号为5的蓝色黑体字</font><br>
        
        <b>使用&lt;B&gt;标记输出粗体字</b><br>
        <u>使用&lt;U&gt;标记输出带有下划线的文字</u><br>
        <i>使用&lt;I&gt;标记输出斜体字</i><br>
        
        <tt>使用&lt;TT&gt；标记输出打印机文字</tt><br>
        <cite>使用&lt;CITE&gt；标记输出引证，举例的斜字体</cite><br>
        <em>使用&lt;EM&gt;标记输出强调的斜体字</em><br>
        <strong>使用&lt;STRONG&gt;标记输出强调的粗体字</strong><br>
        <small>使用&lt;SMALL&gt;标记输出小型的字体</small><br>
        <big>使用&lt;BIG&gt;标记输出大型的字体</big><br>
        
    </body>
</html>

创建图像和连接

插入图片

常用JPEG,GIF和PNG三种格式的图片。语法如下：

<img src="URL" alt="text" width="num" height="num" border="num"/>

src:指定包含url路径名的图片文件

alt：用于定义一个字符串

width:定义图像的宽

height：定义图像高

border:用于指定图像边界的宽度

<html>
    <head><title>图片插入示例</title></head>
    <body>
        <img src="images/1.jpg" alt="图片1">
        <img src="images/2.jpg" border="2">
        <img src="images/1.jpg" width="80">
        <img src="images/linux_logo.jpg" width="80" height="40">
    </body>
</html>

建立描点和超链接

定义描点和超链接都是用<a>标记

<a href="URL" name="name" target="target">链接文字</a>

href:链接文件的url路径。

name:指定页面描点名称。

target:指定要打开的链接所使用的浏览器窗口名称。self：当前窗口打开，blank:开启新窗口打开，parent:在父级窗口打开，top:在顶层窗口打开文件

<html>
    <head><title>建立描点和超链接示例</title></head>
    <body>
        <a name="anchor_one">
        <a href="https://www.baidu.com/">以绝对url指定链接文件地址</a><br>
        <a href="link.html" target="_blank">在新的窗口中打开以相对URL指定的文件</a><br>
        <a href="link.html"><img src="images/linux_logo.jpg" alt="图像链接"></a><br>
        
        <a href="#anchor_one">链接到当前页面的描点位置</a><br>
        <a href="link.html#anchor_one">链接的其他页面的描点位置</a><br>
    </body>
</html>

使用HTML表格

基本结构

<table>
    <caption>表格名称</caption>
    <tr>
        <th>表头单元格</th>
    </tr>
    
    <tr>
        <td>单元格</td>
    </tr>
</table>

<table>标签

用于定义一张表格。

属性	描述
align	指定表格在上一层标记中显示的位置
border	指定表格外边线的宽度
width	表示表格的宽度
height	表示表格的高度
cellspacing	设置表格单元格之间的间距
cellpadding	设定表格单元格内容与单元格边框之间的距离

<caption>标签

定义表格标题的位置，可以由align（左右）和valign（上下）属性设置。位于<table>标签内，表格行标签<tr>之前。

<tr>标签

定义一行标签。

<th>和<td>标签

插入单元格标签

常用可选属性

属性	描述
width/heigh	单元格的宽和高
avalign	单元格内字画的水平摆放
valign	单元格内字画的垂直摆放
rowspan	设定当前单元格所跨越的行数
colspan	设定当前单元格所跨越的列数

表格示例

<html>
    <head><title>表格使用示例</title></head>
    <body>
        <table> width="%80" border="1" cellpadding="3" cellspacing="0" align="center">
            <caption><h1>学员表</h1></caption>
            
            <tr><th colspan="3">学员基本信息</th><th colspan="2">成绩</th><tr>
            <tr><th>姓名</th><th>性别</th><th>专业</th><th>课程</th><th>分数</th></tr>
            
            <tr align="center">
                <td>小封</td>
                <td>男</td>
                <td rowspan="2">计算机</td>
                <td rowspan="2">PHP开发</td>
                <td>86</td>
            </tr>
            <tr align="center">
                <td>小影</td>
                <td>女</td>
                <td>98</td>
            </tr>
        </table>
    </body>
</html>

框架结构

把浏览器窗口划分为许多子窗口。每个窗口显示不同的网页，如果所有的框架标记要放在一个HTML文档中，那么这个文档体标签<body>要被框架集标签<frameset>取代。

<frameset>标签的属性

属性	描述
cols	用像素数和%分隔左右窗口，”*“表示剩余部分
rows	用像素数和%分隔上下窗口，”*“表示剩余部分
frameborder	为0表示不显示边框，为1表示显示边框
border	设置边框粗细，默认值为5像素

<frame>标签

frame为表示子窗口，放在<frameset>下使用。常见属性如下表：

属性	描述
src	只是url地址
name	指示框架名称，用于连接target标记
noresize	是不能调整窗口的大小
scrolling	指示滚动条(auto,yes,no)
frameborder	指示是否要边框（1，0）
border	设置边框粗细

代码示例

主窗体文件

<html>
    <head><title>使用框架</title></head>
    <frameset rows="80.*" frameborder="1" border="5">
        <frame src="top.html" name="top" scrooling="no" noresize/>
        <frameset cols="200.*">
            <frame src="menu.html" name="menu" scrolling="no" noresize/>
            <frame src="main.html" name="main" noresize/>
        </frameset>
    </frameset>
</html>

大类选项窗体文件top.html

<html>
    <head><title>标题文档</title></head>
    
    <body>
        <center><h2>后台管理系统></h2></center>
        <p>
            <a href="menu.html" target="menu">一</a> ||
            <a href="menu2.html" target="menu">二</a> ||
            <a href="menu3.html" target="menu">三</a>
        </p>
    </body>
</html>

菜单选项窗体文件menu.html

<html>
    <head><title>标题</title></head>
    <body>
        <center><h3>大类菜单<h3></center>
        <p>
            <a href="main.html" target="main">一</a><br>
            <a href="main2.html" target="main">二</a><br>
            <a href="main3.html" target="main">三</a><br>
        </p>
    </body>
</html>

内容窗体文件main.html

<html>
    <head><title>无标题文档</title></head>
    <body>
        <center><h4>大类管理一>管理选项1>内容设置<h4></center>
    </body>
</html>

HTML表单设计

创建：使用<from></from>创建

<from>标签属性表（该标签必须定义action属性。

属性	描述
name	表单名称
method	定义获取信息的方式GET或POST
action	处理程序的程序名（URL)
enctype	设置表单资料的编码方式
target	指定目标窗口和目标帧

<input>标签

该标签包含在<from>标签内。用来定义一个用户输入区。

<input type="text" name="filed_name" value="filed-value" size="n" maxlength="n">
<input type="password" name="file_name" value="filed_value" size="n" maxlength="n">

常用属性表

属性	描述
type	输入域类型（text,password)
name	控件名称
value	指定控件初始值（内容）
size	指定控件宽度
maxlength	允许用户输入的最大字符数

<from>下属性和标签的用法

属性	用法
type	值为“submit","reset","button"时代表提交，重置和普通按钮
type	为”checkbox"和“radio"时分别代表复选按钮和单选按钮，可以通过checked值设置为选中状态
type	type值为“hidden"建立一个隐藏域
<textarea>	使用该标签制作多行文本域，其属性有name,rows,cols,value
<select>	该标签代表菜单下拉列表，其属性有multiple,name和size。加入multiple代表是可多选的列表。其下可以用<option>标签指定选项，<option>的属性selected指定默认选项，value给标签指定选项赋值

实例：

<html>
    <head><title>学员基本信息</title></head>
    <body>
        <table align="center" width="500" border="0" cellpadding="2" cellspacing="0">
            <caption align="center"><h2>学员基本信息<h2></caption>
        
            <from action="server.php" method="post">
                <tr>
                    <th>姓名：</th>
                    <td><input type="text" name="username" size="20"></td>
                </tr>
            
                <tr>
                    <th>性别：</th>
                    <td>
                        <input type="radio" name="sex" value="1" checked>男
                        <input type="radio" name="sex" value="2">女
                        <input type="radio" name="sex" value="0">保密
                    </td>
                </tr>
            
                <tr>
                    <th>学历:</th>
                    <td>
                        <select name="edu">
                            <option>--请选择--</option>
                            <option value="1">高中</option>
                            <option value="2">大专</option>
                            <option value="3">本科</option>
                            <option value="4">研究生</option>
                            <option value="5">其他</option>
                        </select>
                    </td>
                </tr>
            
                <tr>
                    <th>选修课程：</th>
                    <td>
                        <input type="checkbox" name="course[]" value="4">linux
                        <input type="checkbox" name="course[]" value="5">Apache
                        <input type="checkbox" name="course[]" value="6">Mysql
                        <input type=""checkbox" name="course[]" value="7">PHP
                    </td>
                </tr>
            
                <tr>
                    <th>自我评价：</th>
                    <td><textarea name="eval" rows="4" cols="40"></textarea></td>
                </tr>
            
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" name="submit" value="提交”>
                        <input type="reset" name="reset" value="重置">
                    </td>
                </tr>
            </from>
        </table>
    </body>
</html>