HTML

来源：互联网发布：江南大学网络教育专业编辑：程序博客网时间：2024/05/19 14:34

HTTP协议

特点：

1.简单快速，当客户向服务端发送请求时只需要发送请求方法和路径。
2.支持客服/服务端模式
3.灵活：HTTP允许任意的数据类型
4.无连接：只处理发送过来的连接每次处理完直接断开连接
5.无状态：指对事物处理没有记忆能力，处理后续的事件时不需要将之前的信息重新发送一遍

客户端向服务端：
请求方法（所有方法全为大写）有多种，各个方法的解释如下：
GET 请求获取Request-URI所标识的资源
POST 在Request-URI所标识的资源后附加新的数据
HEAD 请求获取由Request-URI所标识的资源的响应消息报头
PUT 请求服务器存储一个资源，并用Request-URI作为其标识
DELETE 请求服务器删除Request-URI所标识的资源
TRACE 请求服务器回送收到的请求信息，主要用于测试或诊断
CONNECT 保留将来使用
OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求
应用举例：
GET方法：在浏览器的地址栏中输入网址的方式访问网页时，浏览器采用GET方法向服务器获取资源，eg:GET /form.html HTTP/1.1 (CRLF)
POST方法要求被请求服务器接受附在请求后面的数据，常用于提交表单。
eg：POST /reg.jsp HTTP/ (CRLF)

HTTP响应由三个部分组成，分别是：状态行、消息报头、响应正文
1、状态行格式如下：
HTTP-Version Status-Code Reason-Phrase CRLF
其中，HTTP-Version表示服务器HTTP协议的版本；Status-Code表示服务器发回的响应状态代码；Reason-Phrase表示状态代码的文本描述。
状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：

1xx：指示信息–表示请求已接收，继续处理
2xx：成功–表示请求已被成功接收、理解、接受
3xx：重定向–要完成请求必须进行更进一步的操作
4xx：客户端错误–请求有语法错误或请求无法实现
5xx：服务器端错误–服务器未能实现合法的请求
常见状态代码、状态描述、说明：
200 OK //客户端请求成功
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常
eg：HTTP/1.1 200 OK （CRLF）
2、响应报头后述
3、响应正文就是服务器返回的资源的内容

HTML标签

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="utf8">    <titile..>    <link rel="icon" href="路径"></head><body><h1></h1><h2></h2><img src="" alt="" title=""></body></html>

1.<!DOCTYPE html>声明这是一个html5文档
2.<html></html>中间的内容是文档的开始标记和结束标记，中间的内容是head和body两部分
3.<head></head>是html的头部其中的文档不会在主体内容中显示也包含meta元素
4.<title></title>是网页的标题会在网页的标题栏显示
5.<link rel="icon" href=""> 是网页的标题旁的图标
6.<body></body>是网页的主体部分

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

HTML中标签的格式

两种格式：

<标签名 k1=v1 k2=v2>内容</标签名>
<标签名 k1=v1/>

常用的标签

h1~h6
a 超链接
img 图片

head 中的标签

meta标签

<!--两秒以后转到网易--><meta http-equiv="refresh" content="2,URL=http://www.163.com/"> <!--指定文档的编码类型--><meta http-equiv="content-Type" charset="utf8"><!--让IE用最高模式渲染文档--><meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性主要是用于搜索使用的

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"><meta name="description" content="老男孩python学院">

非meta标签

<!--标题--><title>标题</title><!--icon 图标--><link rel="icon" href=""><!--CSS文件--><link rel="stylesheet" href="mystyle.css"><!--JS文件--><script src=".js"></script>

body中的标签

块级标签（独占一行）：h1~h6, hr, p, div
内联标签（长度根据内容决定）：img， a(超链接)，b（加粗），i（斜体），u（下划线），s（删除），span
~~fffdfdfd~~
特殊符号
© , ®

div和span标签

div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
span标签用来定义内联行(行内元素)，并无实际的意义。主要通过CSS样式为其赋予不同的表现。

块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

注意：

关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

p标签不能包含块级标签。

img标签

<img src="" alt="" title="" weight="100px" height="200px">

a标签

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

f属性指定目标网页地址。该地址可以有几种类型：

绝对URL - 指向另一个站点（比如 href=”http://www.jd.com）
相对URL - 指当前站点中确切的路径（href=”index.htm”）
锚URL - 指向页面中的锚（href=”#top”）

target：

_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页

列表

无序列表

<ul type="disc">    <li>第一项</li>    <li>第二项</li></u>

type属性：

disc：实心圆
circle：空心圆
square：实心方块
none：无样式

有序列表

<ol type="" start="">    <li>第一项</li>    <li>第二项</li></ol>

type：
1（数字）
a（字母超过26时为aa）
A
i、I罗马数字

start：为开始的位置

标题列表

<dl>    <dt>标题1</dt>    <dd>内容</dd>    <dd>内容</dd>    <dt>标题2</dt>    <dd>内容</dd>    <dd>内容</dd></dl>

表格

<table border="1" cellspacing="20px" cellpadding="20px" width=2000px>    <thead>    <tr>        <th>序号</th>        <th>姓名</th>        <th>年龄</th>    </tr>    <thead>    <tbody>    <tr>        <td>1</td>        <td>egon</td>        <td>12</td>    </tr>    <tr>        <td>2</td>        <td>neizha</td>        <td>15</td>    </tr>    </tbody></table>

属性：

border：边框
cellspacing：外边距
cellpadding:内边距
width：像素边框
rowspan：合并竖向单元格
colspan：合并横向单元格

form

<form action="http://www.sogo.com/web?" methond="get">    <p><input type="text" name="query"></p>    <p><input type="submit" name="提交"></p></form>

form标签中的属性
action：指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。

method：有get和post两种方法，与http请求行的含义相同

enctype：指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencode对所有字符进行编码。如果表单包含用于文件上传的控件（input type=”file”）,那么这个属性值必须设置为multipart/form-data，不对字符进行编码。

表单元素

基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><form action="" method="post">    <p><input type="text" name="username" placeholder="请输入用户名"></p>    <p><input type="password" name="password"></p>    <p>爱好：<input type="checkbox" name="hobby" value="basketball">篮球        <input type="checkbox" name="hobby" value="football">足球        <input type="checkbox" checked name="hobby" value="game">游戏    </p>    <p>        <input type="radio" id="gender1" name="gender" value="male"><label for="gender1">男</label>        <input type="radio" id="gender2" name="gender" value="female"><label for="gender2">女</label>    </p>    <p><input type="file"></p>    <select name="city" id="city" size="3">        <option value="1">北京</option>        <option value="2">上海</option>        <option value="1">深圳</option>        <option value="1">杭州</option>    </select><br/>       个人简介：<textarea name="memo" id="" cols="30" rows="10">    默认内容</textarea>    <p><input type="submit" value="提交"></p></form></body></html>

类型（type）说明：

text：文本输入框
password：密码输入框
radio：单选框
checkbox：多选框
submit：提交按钮
button：可点击的按钮，没有任何行为，一般配合JS使用
hidden：对用户不可见，通常用于修改某条数据时，记录数据的id值
file：提交文件 form表单需要加上enctype=”multipart/form-data”，method=”post”
属性说明:

name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type=”button”, “reset”, “submit”时，为按钮上显示的文本年内容
type=”text”,”password”,”hidden”时，为输入框的初始值
type=”checkbox”, “radio”, “file”，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：所有input均适用

阅读全文

0 0