html+css+js

1.url的组成:协议,域名, 路径

2.html的概念

  HTML就是一种超文本标记语言,也就是说可以支持除文本外的其他类型的文件, 例如:视频,图片, 音乐,也是一种标记语言

3.网页的基本组成:

  HTML作为基础

  css用来对网页进行渲染和布局

  JavaScript实现网页动态画面的效果

4.html文档树形结构图

                                                根元素html元素

                    |

          head元素                      body元素

            |                                    |     

           meta元素       title元素     div元素        p元素

5.什么是标签:

  1.标签是由一对尖括号包裹的单词构成, 例如:<html>   注意:所有的标签中的单词不能以数字开头

  2.标签不区分大小写,<html>和<HTML>的功能是一样的

  3.标签有两个部分:开始标签<html>和结束标签</html>,两个标签之前的部分我们称为标签体 

  4.有些标签的功能比较简单,所以我们使用一个标签即可,这种标签的自闭和标签,例如:<br/><hr/><input/><meta/><img/>

  5.标签可以嵌套,但是不能交叉的嵌套,也就是说一个标签的开始标签和结束标签都必须在一个子标签中

6.标签的属性

  1.标签的属性是以键值对的形式出现的,例如: name='alex'

  2.属性只能出现在开始标签和自闭合标签中

  3.属性名字全部都是小写的,属性值必须使用双引号或者单引号包裹

  4.如果属性值和属性名完全一样,直接写属性名即可, 例如:readonly

7.标签分为两类:

  1.块级标签的特点:(block)

    *总是在新行上开始

    *高度,行高以及外边距都可控制

    *宽度缺省,是他的容器的100%,除非设定一个宽度

    *他可以容纳内联标签和其他块标签

  2.内联标签的特点:(in-line)

    *和其他标签在同一行上

    *高度,行高和外边距内边距都不可变

    *宽度,它的文字或者图片的宽度,不可改变

    *内联标签只能容纳文本或者其他内联标签

8.常用的标签

  1.<!DOCTYPE html> 标签

    浏览器的运行模式    

    分为两种模式

      怪异模式:Backcompat

      标准模式:css1compat

  2.html标签

  3.head标签

    1.meta标签

      meta标签有两个属性:

        1.name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于控制搜索引擎机器人查找信息,和分类信息用的
        name属性:1.<meta name="keywords" content="......">     # 指定可以搜索的关键词

               2.<meta name="description"  content=" .....">      # 对网页的大概描述

        2.http-equv属性:顾名思义,相当于http的文件头的作用,他可以向浏览器传回一些有用的信息,以帮助正确和精确显示网页内容,与之对应的属性值为content,

                content中的内容其实就是各个参数的变量值
           http-equiv属性:1.<meta http-equiv="Refesh" content="num; url=...">   #  实现对网页指定时间刷新网页并且可以跳转网页

                 2.<meta http-equiv="content-type" charset="utf8">         #   指定编码格式

                 3.<meta http-equiv>          

    2.非meta标签

      1.<title>标签

      2.<link>标签 rel属性,属性值为icon设置网址小图标

  4.body标签

    1.<div>标签: 主要是和css配合在一块使用,对网页进行自定义的布局和渲染

    2.<p>标签: 有隔行显示的功能

    3.<br/>标签:换行的作用

    4.<hr/>标签:显示分割线

    5.<b>标签:加粗文本

    6.<em>标签:加斜文本

    7.<strong>标签:加粗文本

    8.<strike>标签:在文本上加上删除线

    9.<del>标签:和<strike>同样的功能,推荐使用

    10.<sup>标签:上角标

    11.<sub>标签:下角标

    12.<img>标签:实现插入图片,scr属性,width(宽)属性,height(长)属性,alt属性,title属性

    13.<a>标签:实现可实现超链接,锚(可以指定跳转内容),href属性

    14.<input>标签:

      属性:type:属性值:

        1.text   输入文本框

        2.password  输入密码框,不显示输入内容

        3.CheckBox   多选框

        4.radio   单选框

        5.submit  提交按钮

        6.button   提交按钮 ,配合js触发事件使用

        7.file   提交文件

        8.reset  重置用户的输入

    15.<from>表单标签:

      属性:method:属性值:get, post 

        选择上传数据的上传方式

      属性:action:

        属性值是发送数据接收端的url

    16.<select>标签

9.hn的具体大小

  h1 = 32px

  h2 = 24px

  h3 = 18.72px

  h4 = 16px

  h5 = 13.28px

  h6 = 12px

10、提交方式

  1.get提交方式:

    *提交的是键值对,放在地址栏中url后面

    *安全性较差

    *对提交的内容长度上是有限制的

  2.post提交方式:

    *提交的键值对不在地址栏中

    *安全性相对较好

    *对提交内容的长度理论上是没有限制的

11、常见的状态码

  1.200:请求成功,浏览器会把响应体内容(通常是HTML文件)显示在浏览器中

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

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

  4.302:重定向,当响应码为302时,表示服务器要求浏览器重新再发一个请求,服务器会发送一个响应头location,他规定了新请求的url地址

  注意:url:全称是统一资源定位符,就是一个网址,格式为:协议名:// 域名:端口 / 路径

12、css概述

  css是casconding style sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现和数据内容分离

13、css的四种引入方式

  1.行内式:行内式是在标记style属性中设定css样式

<div style="color: red ; background: black ; font-size: 50px">hello world</div>        <!-- css引入方式之行内式-->

  2.嵌入式:

<head>
    <style>
        div{             <!-- 嵌入式-->
            color: red;
            background: yellow;
            font-size: 50px;
        }
    </style>
</head>


<body>
<div>hello world</div>
</body>

  3.链接式

css文件
/*链接式*/

div{
    color: red;
    background: yellow;
    font-size: 50px;
}

<head>
<link type="text/css" rel="stylesheet" href="css_test.css">
</head>>
    

  4.导入式

css文件

/*导入式*/

div{
    color: red;
    background: yellow;
    font-size: 50px;
}

<head>
    <style>
        @import "css_test.css";
    </style>
</head>

 14、css选择器

  1.基础选择器

    1.通用选择器:能找到所有的标签     符号:*

    2.标签选择器:找到指定的标签         符号:标签名称(例如div , p)

    3.class选择器:通过class属性查找    符号:  .(句号)

    4.id选择器:   通过id属性查找          符号:  #

  2.组合选择器

    1.后代选择器:找到某个标签下的所有标签    符号:父类标签 所有的后代标签  (中间使用空格分开)

    2.子代选择器:只能找到某个标签的子代标签   符号:父类标签>子代标签  (中间使用大于号)

    3.并行选择器:能找到多个指定的标签    符号:,(逗号)

    4.毗邻选择器:能找到某个标签的紧接着下面一个的标签  符号:+(加号)

  3.属性选择器

    符号:【】 配合查找

    注意:1.属性和属性值是可以自定义的

       2.一个属性可以有多个属性值

  4.伪类选择器

    通过伪类可以增加一些特效

    使用格式:标签名:功能名{属性:属性值}

    常用功能:

      1.link: 控制链接时的显示

      2.hover:控制悬浮时的显示

      3.active :控制触动时的显示

      4.visited:控制操作后的显示

      5.before:在线向文本中的前面添加内容

      6.after: 在线向文本中的后面添加内容

15.文本属性

  font-size: 设置文本字体大小

  font-style: 设置文本字体风格

  font-family: 设置文本字体风格

  text-align: 设置字体的居中

  text-transform:  capitalize     设置文本的首字母大写

  letter-spacing: 设置字母之间的间隔像素

  word-spacing: 设置单词之间的间隔像素

16.背景属性

  height: 背景长度

  width: 背景宽度

  background-color: 设置背景填充颜色

  background-image : 插入背景图片

  background-size: 设置插入图片的大小

  background-repeat: 设置图片的布局方式

  background-position: 设置图片的摆放位置

 17.文档流

  1.正常文档流

    将元素(标签), 在进行排版所有的时候按照,从上到下,从左到右的顺序排版的一个布局流

  2.脱离文档流

    将元素从文档流中取出,进行覆盖,其他元素会按照文档流中不存在该元素重新布局

    1.float (浮动标签) (非完全脱离) (文本未脱离)

      left:向左浮动

      right:向右浮动

      clear(属性名):清除浮动的关键字

        none:默认值允许两边都可以有浮动对象

        left:不允许左边有浮动对象

        right:不允许右边有浮动对象

        both:两边都不允许有浮动对象

    2.position(属性名)

      relative:根据自己本身原来的位置进行像素移动

      absolute:首先由自身一次向父代寻找,父代们的position的值如果为非static,则根据父代的位置进行像素移动,如果为static就根据浏览器的位置进行像素移动

      fixed:脱离文档流,只能相对浏览器页面进行位置设置

      static:默认值,无特殊定位,对象遵循正常文档流

16.javascript

  1.基本数据类型

    1.number:整数和浮点数

    2.字符串:(string)

    3.布尔值:(Boolean):用于条件判断

    4.undefined:只有一个值就是undefined,如果声明了某个变量,但是未对他进行赋值,则该变量是undefined类型

    5.null:占一个对象的位置也就是相当于一个空的对象

  2.一些基本知识

    1.parseint()  强制转换数据类型

    2.NAN:当字符串转换成int类型的时候,但是转换失败的时候就会出现nan,nan属于number类型

    3.alert:在网页上以弹窗的方式打印内容

    4.如果nan数据是出现在一个表达式中那么他运算的结果就一定是False

    5.typeof(): 相当于Python中的type方法,用于查询变量的数据类型

    6.tostring():把其他的数据类型转换成字符串类型

17.string(字符串)对象的属性

  1. string.touppercase()   小写转大写

  2. string.tolowercase()    大写转小写

  3. string.charAT()       参数是字符在字符串中的索引值,可以拿出指定的字符

  4. string.charcodeAT()       参数是字符在字符串中的索引,但是拿出的是指定字符的ascll值

  5. string.search()      参数是一个指定的字符,返回值是第一个匹配结果的索引值

  6. string.match()       参数是一个指定的字符,返回值是一个数组,将所有匹配到的结果放进一个数组中

     7.string.replace()      参数有两个,一个是被替换值,一个是替换值

  8. string.split()        参数是一个分隔符,实现对字符串切片的功能,将切片后的字符串放进一个数组

  9. string.concat()      参数是一个字符串,实现将两个字符串进行拼接

  10. string.substr()       有两个参数,一个是截取字符串的起始位置,一个是截取的长度,实现对字符串的截取  

  11. string.substring()   有两个参数,一个是截取字符串的起始位置,一个是截取的结束位置,但是截取内容不包括结束位置

  12.string.slice()          有两个参数,一个起始位置,一个结束位置,但是结束位置上可以为负数,也就是说可以通过反向索引来取值

18.网页返回状态码及其详解

状态码 含义
100 客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝。客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应。服务器必须在请求完成后向客户端发送一个最终响应。
101 服务器已经理解了客户端的请求,并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后,服务器将会切换到在Upgrade 消息头中定义的那些协议。   只有在切换新的协议更有好处的时候才应该采取类似措施。例如,切换到新的HTTP 版本比旧版本更有优势,或者切换到一个实时且同步的协议以传送利用此类特性的资源。
102 由WebDAV(RFC 2518)扩展的状态码,代表处理将被继续执行。
200 请求已成功,请求所希望的响应头或数据体将随此响应返回。
201 请求已经被实现,而且有一个新的资源已经依据请求的需要而建立,且其 URI 已经随Location 头信息返回。假如需要的资源无法及时建立的话,应当返回 '202 Accepted'。
202 服务器已接受请求,但尚未处理。正如它可能被拒绝一样,最终该请求可能会也可能不会被执行。在异步操作的场合下,没有比发送这个状态码更方便的做法了。   返回202状态码的响应的目的是允许服务器接受其他过程的请求(例如某个每天只执行一次的基于批处理的操作),而不必让客户端一直保持与服务器的连接直到批处理操作全部完成。在接受请求处理并返回202状态码的响应应当在返回的实体中包含一些指示处理当前状态的信息,以及指向处理状态监视器或状态预测的指针,以便用户能够估计操作是否已经完成。
203 服务器已成功处理了请求,但返回的实体头部元信息不是在原始服务器上有效的确定集合,而是来自本地或者第三方的拷贝。当前的信息可能是原始版本的子集或者超集。例如,包含资源的元数据可能导致原始服务器知道元信息的超级。使用此状态码不是必须的,而且只有在响应不使用此状态码便会返回200 OK的情况下才是合适的。
204 服务器成功处理了请求,但不需要返回任何实体内容,并且希望返回更新了的元信息。响应可能通过实体头部的形式,返回新的或更新后的元信息。如果存在这些头部信息,则应当与所请求的变量相呼应。   如果客户端是浏览器的话,那么用户浏览器应保留发送了该请求的页面,而不产生任何文档视图上的变化,即使按照规范新的或更新后的元信息应当被应用到用户浏览器活动视图中的文档。   由于204响应被禁止包含任何消息体,因此它始终以消息头后的第一个空行结尾。
205 服务器成功处理了请求,且没有返回任何内容。但是与204响应不同,返回此状态码的响应要求请求者重置文档视图。该响应主要是被用于接受用户输入后,立即重置表单,以便用户能够轻松地开始另一次输入。   与204响应一样,该响应也被禁止包含任何消息体,且以消息头后的第一个空行结束。
206 服务器已经成功处理了部分 GET 请求。类似于 FlashGet 或者迅雷这类的 HTTP 下载工具都是使用此类响应实现断点续传或者将一个大文档分解为多个下载段同时下载。   该请求必须包含 Range 头信息来指示客户端希望得到的内容范围,并且可能包含 If-Range 来作为请求条件。   响应必须包含如下的头部域:   Content-Range 用以指示本次响应中返回的内容的范围;如果是 Content-Type 为 multipart/byteranges 的多段下载,则每一 multipart 段中都应包含 Content-Range 域用以指示本段的内容范围。假如响应中包含 Content-Length,那么它的数值必须匹配它返回的内容范围的真实字节数。   Date   ETag 和/或 Content-Location,假如同样的请求本应该返回200响应。   Expires, Cache-Control,和/或 Vary,假如其值可能与之前相同变量的其他响应对应的值不同的话。   假如本响应请求使用了 If-Range 强缓存验证,那么本次响应不应该包含其他实体头;假如本响应的请求使用了 If-Range 弱缓存验证,那么本次响应禁止包含其他实体头;这避免了缓存的实体内容和更新了的实体头信息之间的不一致。否则,本响应就应当包含所有本应该返回200响应中应当返回的所有实体头部域。   假如 ETag 或 Last-Modified 头部不能精确匹配的话,则客户端缓存应禁止将206响应返回的内容与之前任何缓存过的内容组合在一起。   任何不支持 Range 以及 Content-Range 头的缓存都禁止缓存206响应返回的内容。
207 由WebDAV(RFC 2518)扩展的状态码,代表之后的消息体将是一个XML消息,并且可能依照之前子请求数量的不同,包含一系列独立的响应代码。
300 被请求的资源有一系列可供选择的回馈信息,每个都有自己特定的地址和浏览器驱动的商议信息。用户或浏览器能够自行选择一个首选的地址进行重定向。   除非这是一个 HEAD 请求,否则该响应应当包括一个资源特性及地址的列表的实体,以便用户或浏览器从中选择最合适的重定向地址。这个实体的格式由 Content-Type 定义的格式所决定。浏览器可能根据响应的格式以及浏览器自身能力,自动作出最合适的选择。当然,RFC 2616规范并没有规定这样的自动选择该如何进行。   如果服务器本身已经有了首选的回馈选择,那么在 Location 中应当指明这个回馈的 URI;浏览器可能会将这个 Location 值作为自动重定向的地址。此外,除非额外指定,否则这个响应也是可缓存的。
301 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。如果可能,拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定,否则这个响应也是可缓存的。   新的永久性的 URI 应当在响应的 Location 域中返回。除非这是一个 HEAD 请求,否则响应的实体中应当包含指向新的 URI 的超链接及简短说明。   如果这不是一个 GET 或者 HEAD 请求,因此浏览器禁止自动进行重定向,除非得到用户的确认,因为请求的条件可能因此发生变化。   注意:对于某些使用 HTTP/1.0 协议的浏览器,当它们发送的 POST 请求得到了一个301响应的话,接下来的重定向请求将会变成 GET 方式。
302 请求的资源现在临时从不同的 URI 响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下,这个响应才是可缓存的。   新的临时性的 URI 应当在响应的 Location 域中返回。除非这是一个 HEAD 请求,否则响应的实体中应当包含指向新的 URI 的超链接及简短说明。   如果这不是一个 GET 或者 HEAD 请求,那么浏览器禁止自动进行重定向,除非得到用户的确认,因为请求的条件可能因此发生变化。   注意:虽然RFC 1945和RFC 2068规范不允许客户端在重定向时改变请求的方法,但是很多现存的浏览器将302响应视作为303响应,并且使用 GET 方式访问在 Location 中规定的 URI,而无视原先请求的方法。状态码303和307被添加了进来,用以明确服务器期待客户端进行何种反应。
303 对应当前请求的响应可以在另一个 URI 上被找到,而且客户端应当采用 GET 的方式访问那个资源。这个方法的存在主要是为了允许由脚本激活的POST请求输出重定向到一个新的资源。这个新的 URI 不是原始资源的替代引用。同时,303响应禁止被缓存。当然,第二个请求(重定向)可能被缓存。   新的 URI 应当在响应的 Location 域中返回。除非这是一个 HEAD 请求,否则响应的实体中应当包含指向新的 URI 的超链接及简短说明。   注意:许多 HTTP/1.1 版以前的 浏览器不能正确理解303状态。如果需要考虑与这些浏览器之间的互动,302状态码应该可以胜任,因为大多数的浏览器处理302响应时的方式恰恰就是上述规范要求客户端处理303响应时应当做的。
304 如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。   该响应必须包含以下的头信息:   Date,除非这个服务器没有时钟。假如没有时钟的服务器也遵守这些规则,那么代理服务器以及客户端可以自行将 Date 字段添加到接收到的响应头中去(正如RFC 2068中规定的一样),缓存机制将会正常工作。   ETag 和/或 Content-Location,假如同样的请求本应返回200响应。   Expires, Cache-Control,和/或Vary,假如其值可能与之前相同变量的其他响应对应的值不同的话。   假如本响应请求使用了强缓存验证,那么本次响应不应该包含其他实体头;否则(例如,某个带条件的 GET 请求使用了弱缓存验证),本次响应禁止包含其他实体头;这避免了缓存了的实体内容和更新了的实体头信息之间的不一致。   假如某个304响应指明了当前某个实体没有缓存,那么缓存系统必须忽视这个响应,并且重复发送不包含限制条件的请求。   假如接收到一个要求更新某个缓存条目的304响应,那么缓存系统必须更新整个条目以反映所有在响应中被更新的字段的值。
305 被请求的资源必须通过指定的代理才能被访问。Location 域中将给出指定的代理所在的 URI 信息,接收者需要重复发送一个单独的请求,通过这个代理才能访问相应资源。只有原始服务器才能建立305响应。   注意:RFC 2068中没有明确305响应是为了重定向一个单独的请求,而且只能被原始服务器建立。忽视这些限制可能导致严重的安全后果。
306 在最新版的规范中,306状态码已经不再被使用。
307 请求的资源现在临时从不同的URI 响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下,这个响应才是可缓存的。   新的临时性的URI 应当在响应的 Location 域中返回。除非这是一个HEAD 请求,否则响应的实体中应当包含指向新的URI 的超链接及简短说明。因为部分浏览器不能识别307响应,因此需要添加上述必要信息以便用户能够理解并向新的 URI 发出访问请求。   如果这不是一个GET 或者 HEAD 请求,那么浏览器禁止自动进行重定向,除非得到用户的确认,因为请求的条件可能因此发生变化。
400 1、语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求。   2、请求参数有误。
401 当前请求需要用户验证。该响应必须包含一个适用于被请求资源的 WWW-Authenticate 信息头用以询问用户信息。客户端可以重复提交一个包含恰当的 Authorization 头信息的请求。如果当前请求已经包含了 Authorization 证书,那么401响应代表着服务器验证已经拒绝了那些证书。如果401响应包含了与前一个响应相同的身份验证询问,且浏览器已经至少尝试了一次验证,那么浏览器应当向用户展示响应中包含的实体信息,因为这个实体信息中可能包含了相关诊断信息。参见RFC 2617。
402 该状态码是为了将来可能的需求而预留的。
403 服务器已经理解请求,但是拒绝执行它。与401响应不同的是,身份验证并不能提供任何帮助,而且这个请求也不应该被重复提交。如果这不是一个 HEAD 请求,而且服务器希望能够讲清楚为何请求不能被执行,那么就应该在实体内描述拒绝的原因。当然服务器也可以返回一个404响应,假如它不希望让客户端获得任何信息。
404 请求失败,请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话,应当使用410状态码来告知旧资源因为某些内部的配置机制问题,已经永久的不可用,而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。
405 请求行中指定的请求方法不能被用于请求相应的资源。该响应必须返回一个Allow 头信息用以表示出当前资源能够接受的请求方法的列表。   鉴于 PUT,DELETE 方法会对服务器上的资源进行写操作,因而绝大部分的网页服务器都不支持或者在默认配置下不允许上述请求方法,对于此类请求均会返回405错误。
406 请求的资源的内容特性无法满足请求头中的条件,因而无法生成响应实体。   除非这是一个 HEAD 请求,否则该响应就应当返回一个包含可以让用户或者浏览器从中选择最合适的实体特性以及地址列表的实体。实体的格式由 Content-Type 头中定义的媒体类型决定。浏览器可以根据格式及自身能力自行作出最佳选择。但是,规范中并没有定义任何作出此类自动选择的标准。
407  与401响应类似,只不过客户端必须在代理服务器上进行身份验证。代理服务器必须返回一个 Proxy-Authenticate 用以进行身份询问。客户端可以返回一个 Proxy-Authorization 信息头用以验证。参见RFC 2617。
408 请求超时。客户端没有在服务器预备等待的时间内完成一个请求的发送。客户端可以随时再次提交这一请求而无需进行任何更改。
409 由于和被请求的资源的当前状态之间存在冲突,请求无法完成。这个代码只允许用在这样的情况下才能被使用:用户被认为能够解决冲突,并且会重新提交新的请求。该响应应当包含足够的信息以便用户发现冲突的源头。   冲突通常发生于对 PUT 请求的处理中。例如,在采用版本检查的环境下,某次 PUT 提交的对特定资源的修改请求所附带的版本信息与之前的某个(第三方)请求向冲突,那么此时服务器就应该返回一个409错误,告知用户请求无法完成。此时,响应实体中很可能会包含两个冲突版本之间的差异比较,以便用户重新提交归并以后的新版本。
410 被请求的资源在服务器上已经不再可用,而且没有任何已知的转发地址。这样的状况应当被认为是永久性的。如果可能,拥有链接编辑功能的客户端应当在获得用户许可后删除所有指向这个地址的引用。如果服务器不知道或者无法确定这个状况是否是永久的,那么就应该使用404状态码。除非额外说明,否则这个响应是可缓存的。   410响应的目的主要是帮助网站管理员维护网站,通知用户该资源已经不再可用,并且服务器拥有者希望所有指向这个资源的远端连接也被删除。这类事件在限时、增值服务中很普遍。同样,410响应也被用于通知客户端在当前服务器站点上,原本属于某个个人的资源已经不再可用。当然,是否需要把所有永久不可用的资源标记为'410 Gone',以及是否需要保持此标记多长时间,完全取决于服务器拥有者。
411 服务器拒绝在没有定义 Content-Length 头的情况下接受请求。在添加了表明请求消息体长度的有效 Content-Length 头之后,客户端可以再次提交该请求。
412 服务器在验证在请求的头字段中给出先决条件时,没能满足其中的一个或多个。这个状态码允许客户端在获取资源时在请求的元信息(请求头字段数据)中设置先决条件,以此避免该请求方法被应用到其希望的内容以外的资源上。
413 服务器拒绝处理当前请求,因为该请求提交的实体数据大小超过了服务器愿意或者能够处理的范围。此种情况下,服务器可以关闭连接以免客户端继续发送此请求。   如果这个状况是临时的,服务器应当返回一个 Retry-After 的响应头,以告知客户端可以在多少时间以后重新尝试。
414 请求的URI 长度超过了服务器能够解释的长度,因此服务器拒绝对该请求提供服务。这比较少见,通常的情况包括:   本应使用POST方法的表单提交变成了GET方法,导致查询字符串(Query String)过长。   重定向URI “黑洞”,例如每次重定向把旧的 URI 作为新的 URI 的一部分,导致在若干次重定向后 URI 超长。   客户端正在尝试利用某些服务器中存在的安全漏洞攻击服务器。这类服务器使用固定长度的缓冲读取或操作请求的 URI,当 GET 后的参数超过某个数值后,可能会产生缓冲区溢出,导致任意代码被执行[1]。没有此类漏洞的服务器,应当返回414状态码。
415 对于当前请求的方法和所请求的资源,请求中提交的实体并不是服务器中所支持的格式,因此请求被拒绝。
416 如果请求中包含了 Range 请求头,并且 Range 中指定的任何数据范围都与当前资源的可用范围不重合,同时请求中又没有定义 If-Range 请求头,那么服务器就应当返回416状态码。   假如 Range 使用的是字节范围,那么这种情况就是指请求指定的所有数据范围的首字节位置都超过了当前资源的长度。服务器也应当在返回416状态码的同时,包含一个 Content-Range 实体头,用以指明当前资源的长度。这个响应也被禁止使用 multipart/byteranges 作为其 Content-Type。
417 在请求头 Expect 中指定的预期内容无法被服务器满足,或者这个服务器是一个代理服务器,它有明显的证据证明在当前路由的下一个节点上,Expect 的内容无法被满足。
421 从当前客户端所在的IP地址到服务器的连接数超过了服务器许可的最大范围。通常,这里的IP地址指的是从服务器上看到的客户端地址(比如用户的网关或者代理服务器地址)。在这种情况下,连接数的计算可能涉及到不止一个终端用户。
422 从当前客户端所在的IP地址到服务器的连接数超过了服务器许可的最大范围。通常,这里的IP地址指的是从服务器上看到的客户端地址(比如用户的网关或者代理服务器地址)。在这种情况下,连接数的计算可能涉及到不止一个终端用户。
422 请求格式正确,但是由于含有语义错误,无法响应。(RFC 4918 WebDAV)423 Locked   当前资源被锁定。(RFC 4918 WebDAV)
424 由于之前的某个请求发生的错误,导致当前请求失败,例如 PROPPATCH。(RFC 4918 WebDAV)
425 在WebDav Advanced Collections 草案中定义,但是未出现在《WebDAV 顺序集协议》(RFC 3658)中。
426 客户端应当切换到TLS/1.0。(RFC 2817)
449 由微软扩展,代表请求应当在执行完适当的操作后进行重试。
500 服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器的程序码出错时出现。
501 服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法,并且无法支持其对任何资源的请求。
502 作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。
503 由于临时的服务器维护或者过载,服务器当前无法处理请求。这个状况是临时的,并且将在一段时间以后恢复。如果能够预计延迟时间,那么响应中可以包含一个 Retry-After 头用以标明这个延迟时间。如果没有给出这个 Retry-After 信息,那么客户端应当以处理500响应的方式处理它。   注意:503状态码的存在并不意味着服务器在过载的时候必须使用它。某些服务器只不过是希望拒绝客户端的连接。
504 作为网关或者代理工作的服务器尝试执行请求时,未能及时从上游服务器(URI标识出的服务器,例如HTTP、FTP、LDAP)或者辅助服务器(例如DNS)收到响应。   注意:某些代理服务器在DNS查询超时时会返回400或者500错误
505 服务器不支持,或者拒绝支持在请求中使用的 HTTP 版本。这暗示着服务器不能或不愿使用与客户端相同的版本。响应中应当包含一个描述了为何版本不被支持以及服务器支持哪些协议的实体。
506 由《透明内容协商协议》(RFC 2295)扩展,代表服务器存在内部配置错误:被请求的协商变元资源被配置为在透明内容协商中使用自己,因此在一个协商处理中不是一个合适的重点。
507 服务器无法存储完成请求所必须的内容。这个状况被认为是临时的。WebDAV (RFC 4918)
509 服务器达到带宽限制。这不是一个官方的状态码,但是仍被广泛使用。
510 获取资源所需要的策略并没有没满足。(RFC 2774)

代码练习部分

代码示例1.

使用meta部分属性,name部分属性,link部分属性

<!DOCTYPE html>

<html lang="en">             
    <head>
        <meta charset="utf8">      <!--设置编码格式 -->

        <meta name="keywords" content="hello world i love product">  <!-- 和网页匹配的关键词-->
        <meta name="description" content="hello world">   <!-- 对网页的大概描述 -->

        <meta http-equiv="refresh" content="2; url='http://www.baidu.com'">   <!--定时刷新网页,并且可以跳转指定网页 -->

        <link rel="icon" href="2.ico">             <!-- 更改网页链接小图标-->
    </head>>
    <body>
        <h1>hello world</h1>>   <!--网页上实时显示的内容 -->
    </body>>
</html>>

 代码示例2.

常用的修饰标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <style>
        div{             <!-- 控制body中某个标签的渲染和布局 -->
            color: #9c9c9c;
            font: 100px;

        }
    </style>>
</head>
<body>
    <div style="color: #71a403;">hello world</div>> <!--嵌入css控制字体 -->
    <h1>hello world</h1>
    hello <br>world      <!--换行标签 -->
    <div>hello world</div>  <!-- 块级标签-->
    hello world
    <b>hello world</b>       <!-- 加粗-->
    <em>hello world</em>     <!--变斜 -->
    <del>hello world</del>      <!-- 加划线   推荐使用-->
    <strike>hello world</strike>  <!-- 加划线-->
    <p>hello world</p>  <!--换行和隔行的作用-->
    2<sup>3</sup> <br> <!--上角标 -->
    2<sub>3</sub>   <!--下角标 -->
</body>
</html>

 示例代码3.

input标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
</head>
<body>
<from>
    <p>账户:<input type="text" name="usernane"></p>
    <p>密码:<input type="password" name="passwd"></p>

    <p>爱好:篮球<input type="checkbox" name="hobby" value="basketball"></p>    <!-- 复选框-->
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;足球<input type="checkbox" name="hobby" value="football"></p>

    <p>性别:男<input type="radio" name="sex" value="man"></p>  <!-- 单选框-->
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="wonmen"></p>

    <p><input type="file"></p>    <!-- 提交文件-->

    <p><input type="submit" name="submit" value=""></p>   <!--提交按钮 -->

    <p><input type="reset" value="重写"></p>   <!-- 重置输入内容-->



</from>
</body>
</html>

 运行结果

 示例代码4

背景图片的设置

<!-- HTML文件 -->

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf8">
    <title>css_test</title>
    <link type="text/css" rel="stylesheet" href="css_test.css">

</head>

<body>
<div id="div1">hello word alex is a good man</div>    <!-- 需要渲染的文本内容 -->

<a href="http://www.baidu.com">百度</a>


</body>
</html>



/*css文件*/


div{
    height: 600px;      /* 背景大小  */

    background-color: pink;   /*  设置网页背景填充色为pink */

    font-size: 25px;          /* 文本大小  */

    font-style: inherit;       /*  文本字体类型 */

    letter-spacing: 5px;       /*  字母之间的间隔 */

    word-spacing: 10px;              /*  单词之间的间隔像素 */

    line-height: 590px;          /* 文本的行高设置  */

    text-transform: capitalize;         /* 实现文本首字母大写  */

    text-align: center;     /* 文本位置设置为居中  */

    background-image: url("22.jpg");         /*  将图片插入背景 */

    background-repeat: no-repeat;        /* 对插入图片的布局设置  */

    background-size: 1363px 796px;    /*  插入的图片的大小设置,默认为auto */



}

 示例代码5

用js写一个简单的不定长变量的加法

<!DOCTYPE html>

<html>
<head>
    <title>test</title>
    <meta charset="utf8">
</head>
<body>
    <script>
        function add(num) {
            alert(arguments);
            var sum = 0;
            console.log(arguments);
            for (var i in arguments){
                sum = sum + arguments[i];
            }
            return sum;
        }

        var res = add(1,2,3,4,5,6,7);
        alert(res)




    </script>
</body>
</html>
原文地址:https://www.cnblogs.com/kangjunhao/p/9383748.html