HTML基础

本文隶属于分类

Web开发

广告推荐

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

标签:XML   hide   一行   主体   键值   nsa   分配内存   ble   play   

HTTP协议

  HTTPhypertext transport protocol超文本传输协议)。这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。

  HTTP就是一个通信规则,通信规则规定了客户端发送给服务器的内容格式,也规定了服务器发送给客户端的内容格式。

  注:比较值得注意的两点,首先HTTP叫超文本传输协议,基于请求/响应模式的。再者,HTTP是无状态协议(所以才有cookie啊)。

  请求协议

  格式:

  请求首行;     // 请求方式 请求路径 协议和版本,例如:GET /index.html HTTP/1.1
  请求头信息;// 请求头名称:请求头内容,即为key:value格式,例如:Host:localhost
  空行;          // 用来与请求体分隔开
  请求体。      // GET没有请求体,只有POST有请求体。

  get请求(HTTP的默认请求方法):

  1.无请求体,

  2.数据必须在1K之内,

  3.GET请求数据会暴露在浏览器的地址栏中(这就很不安全了)

  get请求常用于的操作:

  1. 在浏览器的地址栏中直接给出URL,那么就一定是GET请求;
       2. 点击页面上的超链接也一定是GET请求;
       3. 提交表单时,表单默认使用GET请求,但可以设置为POST(一般也是默认为post,因为相对安全);

请求报文(get)

  GET 127.0.0.1:8090/login  HTTP/1.1GET请求,请求服务器路径为  127.0.0.1:8090/login ,协议为1.1

  Host:localhost请求的主机名为localhost

  *User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0与浏览器和OS相关的信息。有些网站会显示用户的系统版本和浏览器版本信息,这都是通过获取User-Agent头信息而来的;

  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8告诉服务器,当前客户端可以接收的文档类型,其实这里包含了*/*,就表示什么都可以接收;

  Accept-Language: zh-cn,zh;q=0.5当前客户端支持的语言,可以在浏览器的工具?选项中找到语言相关信息;

  Accept-Encoding: gzip, deflate支持的压缩格式。数据在网络上传递时,可能服务器会把数据压缩后再发送;

  Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7客户端支持的编码;

  Connection: keep-alive客户端支持的链接方式,保持一段时间链接,默认为3000ms

  Cookie: JSESSIONID=369766FDF6220F7803433C0B2DE36D98因为不是第一次访问这个地址,所以会在请求中把上一次服务器响应中发送过来的Cookie在请求中一并发送去过;这个Cookie的名字为JSESSIONID。

HTTP无状态:无状态是指协议对于事务处理没有记忆能力,服务器不知道客户端是什么状态。从另一方面讲,打开一个服务器上的网页
和你之前打开这个服务器上的网页之间没有任何联系
如果你要实现一个购物车,需要借助于Cookie或Session或服务器端API(如NSAPI and ISAPI)记录这些信息,请求服务器结算页面时同时将这些信息提交到服务器
当你登录到一个网站时,你的登录状态也是由Cookie或Session来“记忆”的,因为服务器并不知道你是否登录
优点:服务器不用为每个客户端连接分配内存来记忆大量状态,也不用在客户端失去连接时去清理内存,以更高效地去处理WEB业务
缺点:客户端的每次请求都需要携带相应参数,服务器需要处理这些参数

容易犯的误区:
1、HTTP是一个无状态的面向连接的协议,无状态不代表HTTP不能保持TCP连接,更不能代表HTTP使用的是UDP协议(无连接)
2、从HTTP/1.1起,默认都开启了Keep-Alive,保持连接特性,简单地说,当一个网页打开完成后,客户端和服务器之间用于传输
HTTP数据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接
3、Keep-Alive不会永久保持连接,它有一个保持时间,可以在不同的服务器软件(如Apache)中设定这个时间
注意点

  post请求:

  1.数据不会出现在地址栏中;

  2.数据的大小没有上限;

  3.请求体中如果存在中文,会使用URL编码:

username=%E5%BC%A0%E4%B8%89&password=123
我们都知道Http协议中参数的传输是"key=value"这种简直对形式的,如果要传多个参数就需要用“&”符号对键值对进行分割。如"?name1=value1&name2=value2",这样在服务端在收到这种字符串的时候,会用“&”分割出每一个参数,然后再用“=”来分割出参数值。

针对“name1=value1&name2=value2”我们来说一下客户端到服务端的概念上解析过程: 
  上述字符串在计算机中用ASCII吗表示为: 
  6E616D6531 3D 76616C756531 26 6E616D6532 3D 76616C756532。 
   6E616D6531:name1 
   3D:= 
   76616C756531:value1 
   26:&
   6E616D6532:name2 
   3D:= 
   76616C756532:value2 
   服务端在接收到该数据后就可以遍历该字节流,首先一个字节一个字节的吃,当吃到3D这字节后,服务端就知道前面吃得字节表示一个key,再想后吃,如果遇到26,说明从刚才吃的3D到26子节之间的是上一个key的value,以此类推就可以解析出客户端传过来的参数。

   现在有这样一个问题,如果我的参数值中就包含=或&这种特殊字符的时候该怎么办。 
比如说“name1=value1”,其中value1的值是“va&lu=e1”字符串,那么实际在传输过程中就会变成这样“name1=va&lu=e1”。我们的本意是就只有一个键值对,但是服务端会解析成两个键值对,这样就产生了歧义。

如何解决上述问题带来的歧义呢?解决的办法就是对参数进行URL编码 
   URL编码只是简单的在特殊字符的各个字节前加上%,例如,我们对上述会产生奇异的字符进行URL编码后结果:“name1=va%26lu%3D”,这样服务端会把紧跟在“%”后的字节当成普通的字节,就是不会把它当成各个参数或键值对的分隔符。
为什么要进行url编码

  Referer: http://localhost:8080/hello/index.jsp请求来自哪个页面,例如你在百度上点击链接到了这里,那么Referer:http://www.baidu.com;如果你是在浏览器的地址栏中直接输入的地址,那么就没有Referer这个请求头了;

  Content-Type: application/x-www-form-urlencoded表单的数据类型,说明会使用url格式编码数据;url编码的数据都是以“%”为前缀,后面跟随两位的16进制。

  Content-Length:13请求体的长度,这里表示13个字节。

  keyword=hello请求体内容!hello是在表单中输入的数据,keyword是表单字段的名字。

  响应协议

  响应格式:

  响应首行; 响应头信息; 空行; 响应体。

  响应内容是由服务器发送给浏览器的内容,浏览器会根据响应内容来显示。遇到<img src=‘‘>会开一个新的线程加载,所以有时图片多的话,内容会先显示出来,然后图片才一张张加载出来。

Request URL:http://127.0.0.1:8090/login/
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:8090
Response Headers
view source
Content-Type:text/html; charset=utf-8
Date:Wed, 26 Oct 2016 06:48:50 GMT
Server:WSGIServer/0.2 CPython/3.5.2
X-Frame-Options:SAMEORIGIN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/login/" method="post">
  用户名:<input type="text" name="username"/>
  <input type="submit" value="提交"/>
</form>    
</body>
</html>
响应报文

  HTTP/1.1 200 OK响应协议为HTTP1.1,状态码为200,表示请求成功,OK是对状态码的解释;

  Server:WSGIServer/0.2 CPython/3.5.2:服务器的版本信息;

  Content-Type: text/html;charset=UTF-8响应体使用的编码为UTF-8

  Content-Length: 724响应体为724字节;

  Set-Cookie: JSESSIONID=C97E2B4C55553EAB46079A4F263435A4; Path=/hello响应给客户端的Cookie

  Date: Wed, 25 Sep 2012 04:15:03 GMT响应的时间,这可能会有8小时的时区差;

  状态码:

  响应头对浏览器来说很重要,它说明了响应的真正含义。例如200表示响应成功了,302表示重定向,这说明浏览器需要再发一个新的请求。

  200:请求成功,浏览器会把响应体内容(通常是html)显示在浏览器中;

  404:请求的资源没有找到,说明客户端错误的请求了不存在的资源;

  500:请求资源找到了,但服务器内部出现了错误;  

  302:重定向,当响应码为302时,表示服务器要求浏览器重新再发一个请求,服务器会发送一个响应头Location,它指定了新请求的URL地址;

  当用户第一次请求index.html时,服务器会添加一个名为Last-Modified响应头,这个头说明了 index.html的最后修改时间,浏览器会把index.html内容,以及最后响应时间缓存下来。当用户第 二次请求index.html时,在请求中包含一个名为If-Modified-Since请求头,它的值就是第一次请 求时服务器通过Last-Modified响应头发送给浏览器的值,即index.html最后的修改时间, If-Modified-Since请求头就是在告诉服务器,我这里浏览器缓存的index.html最后修改时间是这个, 您看看现在的index.html最后修改时间是不是这个,如果还是,那么您就不用再响应这个index.html 内容了,我会把缓存的内容直接显示出来。而服务器端会获取If-Modified-Since值,与index.html 的当前最后修改时间比对,如果相同,服务器会发响应码304,表示index.html与浏览器上次缓存的相 同,无需再次发送,浏览器可以显示自己的缓存页面,如果比对不同,那么说明index.html已经做了修 改,服务器会响应200。

  web服务的本质其实是基于网络编程的c/s架构,就是b/s(Browser-server)架构。

import socket
def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind((localhost,8081))
    sock.listen(5)
    while True:
        print("server is working.....")
        conn, address = sock.accept()
        request = conn.recv(1024)
        conn.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n<h1>Hello Yuan</h1>","utf8"))
        conn.close()
if __name__ == __main__:
    main()

 HTML

  超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分。就是使用他的一套规则,浏览器认识的规则。

  浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容。但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(就是我们通常说的兼容性问题),造成兼容性的问题通常就是渲染引擎或者是内核的不同导致的。

  我们能看到网页其实就是浏览器向iis web服务器(提供网页浏览服务)发送请求。

  HTML的标准结构

< ! doctype html>    声明文档类型(渲染引擎知道使用html来解析)
<html>              根标签
<head>             头标签
<title></title>       标题标签
</head>
<body>             主体标签(用户看的上面的是给浏览器看的)
</body>
</html>

  HTML和htm是一样的,后缀名不能决定文件的格式只能决定打开文件的方式。

  HTML的标签分为单标签和双标签两种。

  简单介绍几种常见的标签:

<!-- 五五开牛逼 -->
注释标签
<!DOCTYPE> 声明位于文档中的最前面的位置。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
作用:声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。
‘<doctype html>标签’

  document.compatMode(解析类型):

  1. BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。
  2. CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

  这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat。

  换行标签:<br>。

  水平线标签:<hr>。

<meta>元素可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部,不包含任何内容。<meta>提供的信息是用户不可见的meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 <metaname="keywords"content="meta总结,htmlmeta,meta属性,meta跳转">竞价的关键字<metaname="description"content="老男孩培训机构是由一个很老的男孩创建的">搜索到时页面现实的文字http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。<metahttp-equiv="Refresh"content="2;URL=https://www.oldboy.com">//(注意后面的引号,分别在秒数的前面和网址的后面)2秒后跳转至老男孩页面<metahttp-equiv="content-Type"charset=UTF8">页面解码使用utf8<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>
‘<meta>’标签

  <p>标签,上下自动生成空白行。

  <hn>标签即标题标签,h1 在一个页面里只能出现一次。

  <font>文本标签。<font size="6" color="blue">文本内容</font>

  文本格式化标签:<b>,<strong>文本加粗标签。

  文本倾斜标签:<em><i>

  删除线标签:<del><s>

  下划线标签:<ins><u>

  <sup>和<sub>: 上角标 和 下角表

  <strike>: 为文字加上一条中线

  <div></div> : <div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.

  <span></span>: <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现. 

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

HTML基础 - 爱上编程技术图片

src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
图形标签<img>技术分享

  图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        img{
            width: 150px;
            height: 200px;
        }
    </style>
</head>
<body>



<a href="http://www.xiaohuar.com/hua/">
    <img src="meinv.jpg" alt="美女"  title="美女">
</a>

<a href="lesson1.html">点我</a>


</body>
</html>
插入图片并设置为超链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #part1{
            background-color: red;
            height: 500px;
            color: white;
            font-size: 30px;
        }
        #part2{
            background-color: green;
            height: 500px;
            color: white;
            font-size: 30px;
        }

        #part3{
            background-color: gold;
            height: 500px;
            color: white;
            font-size: 30px;
        }



    </style>
</head>
<body>

<p id="part1">第一章</p>

<p id="part2">第二章</p>

<p id="part3">第三章</p>

<a href="#part1">返回第一章</a>

</body>
</html>
html优化显示

 

href   去往的路径(跳转的页面) 必写属性
title    提示文本   鼠标放到链接上显示的文字
target=”_self”    默认值    在自身页面打开(关闭自身页面,打开链接页面) 
Target=”_blank”   打开新页面 (自身页面不关闭,打开一个新的链接页面)
例:
超链接
<a href="E:\老男孩\01-HTML-基础班\1.html基础一上课资料\1.html基础一上课视频\test.html">超链接</a>

锚链节
先定义一个锚点,再超链接到锚点。
<p id="xx">我是最帅的丑开<p></p>
    <a href="#xx">回到顶部</a>

<base target="_blank">让所有的超链接都在新窗口打开
超链接标签(锚标签):

  列表标签

<ul type="square">
    <li>
        列表项
    </li>
    <li>
        无序,重要性一样
    </li>
</ul>
 type=”square”      小方块
Type=”disc”       实心小圆圈
Type=”circle”      空心小圆圈
无序列表
<ol>
    <li>
        列表项
    </li>
    <li>
        无序,重要性一样
    </li>
</ol>

type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3”  决定了开始的位置。
    
有序列表
<dl>
    <dt>
        小标题
    </dt>
    <dd>
        解释标题
    </dd>
</dl>
自定义列表

  表格标签

  表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。

<table>
         <tr>
                <td>标题</td>
                <td>标题</td>
         </tr>
         
         <tr>
                <td>内容</td>
                <td>内容</td>
         </tr>
</table>
表格的基本结构

  表格内的参数:

  caption:表头

  border: 表格边框.

  cellpadding: 内边距

  cellspacing: 外边距.

  align:“center”

  align=”left  |  right  |  center” 

  如果直接给表格用align=”center”  表格居中

  如果给tr或者td使用   tr或者td内容居中。

  内容垂直对齐:Valign=”top   |  middle   |  bottom”

  bgcolor=”red”    背景颜色。

  width: 像素 百分比.(最好通过css来设置长宽)

  rowspan: 单元格竖跨多少行

  colspan: 单元格横跨多少列(即合并单元格)。

  表单标签<form>:

  功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互。

      表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。

      表单还可以包含textarea、select、fieldset和 label标签。

  表单属性: action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/web。

  method: 表单的提交方式 post/get默认取值就是get。

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

  <input>标签

  表单的类型:type

text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框  
submit 提交按钮            
button 按钮(需要配合js使用.) 
file 提交文件:form表单需要加上属性enctype="multipart/form-data" 
type

   name:表单提交项的键。

  注意和id属性的区别:name属性是和服务器通信时使用的名称,而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的。

  value: 表单提交项的值.对于不同的输入类型,value 属性的用法也不同:

  type="button", "reset", "submit" - 定义按钮上的显示的文本

  type="text", "password", "hidden" - 定义输入字段的初始值

  type="checkbox", "radio", "image" - 定义与输入相关联的值

  checked: radio 和 checkbox 默认被选中

  readonly: 只读. text 和 password

 
<select>
name:表单提交项的键.
size:选项个数
multiple:multiple 
                 <optgroup>为每一项加上分组

                 <option> 下拉选中的每一项属性:
value:表单提交项的值.   
selected: selected下拉选默认被选中
“下拉选标签属性”
<textarea>
<form id="form1" name="form1" method="post" action="">
        <textarea cols=“宽度” rows=“高度” name=“名称”>
                   默认内容
        </textarea>
</form>
多行文本框
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form method="post" action="">
        <label for=“username”>用户名</label>
        <input type=“text” name=“username” id=“username” size=“20” />
</form>
<fieldset>
    <legend>登录吧</legend>
    <input type="text">
</fieldset>
标签

 

HTML基础

标签:XML   hide   一行   主体   键值   nsa   分配内存   ble   play   

原文:http://www.cnblogs.com/Jeffding/p/7648698.html

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

广告推荐

讨论区