zoukankan      html  css  js  c++  java
  • HTML、HTML5重难点

    一、XHTML与HTML的区别

    • 文档结构
      • XHTML DOCTYPE 是强制性的
      • <html>中的 XML namespace 属性是强制性的
      • <html>、<head>、<title>以及 <body>也是强制性的
    • 元素语法
      • XHTML 元素必须正确嵌套
      • XHTML 元素必须始终关闭
      • XHTML 元素必须小写
      • XHTML 文档必须有一个根元素
    • 属性语法
      • XHTML 属性必须使用小写
      • XHTML 属性值必须用引号包围
      • XHTML 属性最小化也是禁止的

    二、HTML5中一些新特性

    • 用于绘画的 canvas 元素
    • 用于媒介回放的 video 和 audio 元素
    • 对本地离线存储的更好的支持
    • 新的特殊内容元素,比如 article、footer、header、nav、section
    • 新的表单控件,比如 calendar、date、time、email、url、search

    注意:最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

    IE9 以下版本浏览器兼容HTML5的方法,使用本站的静态资源的html5shiv包:

    <!--[if lt IE 9]>
        <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    
    /*html5*/
    article,aside,dialog,footer,header,section,nav,figure,menu{display:block}
    

    Alt

    三、HTML5web存储

    使用HTML5可以在本地存储用户的浏览数据。

    早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.

    数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

    • 浏览器支持:

      • Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。
      • 注意: Internet Explorer 7 及更早IE版本不支持web 存储.
    • localStorage 和 sessionStorage

      • 客户端存储数据的两个对象为:
        • localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
        • sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

    在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

    if(typeof(Storage)!=="undefined")
    {
        // 是的! 支持 localStorage  sessionStorage 对象!
        // 一些代码.....
    } else {
        // 抱歉! 不支持 web 存储。
    }
    
    • 不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
      • 保存数据:localStorage.setItem(key,value);
      • 读取数据:localStorage.getItem(key);
      • 删除单个数据:localStorage.removeItem(key);
      • 删除所有数据:localStorage.clear();
      • 得到某个索引的key:localStorage.key(index);

    四、HTML5 应用程序缓存

    HTML5 -应用程序缓存=>使用文章链接跳转点这里

    五、HTML5 服务器发送事件(Server-Sent Events)

    Server-Sent 事件指的是网页自动获取来自服务器的更新。
    以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
    例子:Facebook/Twitter 更新、股价更新、新的博文、赛事结果等。

    • 所有主流浏览器均支持服务器发送事件,除了 Internet Explorer。
    <h1>获取服务端更新数据</h1>
    <div id="result"></div>
    
    if(typeof(EventSource)!=="undefined")
    {
    	var source=new EventSource("demo_sse.php");
    	source.onmessage=function(event)
    	{
    		document.getElementById("result").innerHTML+=event.data + "<br>";
    	};
    }
    else
    {
    	document.getElementById("result").innerHTML="抱歉,你的浏览器不支持 server-sent 事件...";
    }
    

    六、HTML5 WebSocket

    WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

    WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

    在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

    现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

    HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
    详情和代码示例:.

    七、HTTP状态消息

    • 1xx: 信息
    • 2xx: 成功
    • 3xx: 重定向
    • 4xx: 客户端错误
    • 5xx: 服务器错误
      详情

    八、HTTP 方法:GET 对比 POST

    两种最常用的 HTTP 方法是:GET 和 POST。

    • 什么是 HTTP ?
      超文本传输协议(HTTP)的设计目的是保证客户端与服务器之间的通信。
      HTTP 的工作方式是客户端与服务器之间的请求-应答协议。
      web 浏览器可能是客户端,而计算机上的网络应用程序也可能作为服务器端。
      举例:客户端(浏览器)向服务器提交 HTTP 请求;服务器向客户端返回响应。响应包含关于请求的状态信息以及可能被请求的内容。

    • GET - 从指定的资源请求数据。

    • POST - 向指定的资源提交要被处理的数据。

    • GET 方法
      请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:

    /test/demo_form.php?name1=value1&name2=value2
    
    • 有关 GET 请求的其他一些注释:
      GET 请求可被缓存
      GET 请求保留在浏览器历史记录中
      GET 请求可被收藏为书签
      GET 请求不应在处理敏感数据时使用
      GET 请求有长度限制
      GET 请求只应当用于取回数据

    • POST 方法
      请注意,查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的:

    • 有关 POST 请求的其他一些注释:
      POST 请求不会被缓存
      POST 请求不会保留在浏览器历史记录中
      POST 不能被收藏为书签
      POST 请求对数据长度没有要求

    GET POST
    后退按钮/刷新 无害 数据会被重新提交(浏览器应该告知用户数据会被重新提交)。
    书签 可收藏为书签 不可收藏为书签
    编码类型 application/x-www-form-urlencoded application/x-www-form-urlencoded or multipart/form-data。为二进制数据使用多重编码。
    历史 参数保留在浏览器历史中。 参数不会保存在浏览器历史中。
    对数据长度的限制 是的。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符)。 无限制。
    对数据类型的限制 只允许 ASCII 字符。 没有限制。也允许二进制数据。
    安全性 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ! POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。
    可见性 数据在 URL 中对所有人都是可见的。 数据不会显示在 URL 中。
    • 其他 HTTP 请求方法

    下面的表格列出了其他一些 HTTP 请求方法:

    方法 描述
    HEAD 与 GET 相同,但只返回 HTTP 报头,不返回文档主体。
    PUT 上传指定的 URI 表示。
    DELETE 删除指定资源。
    OPTIONS 返回服务器支持的 HTTP 方法。
    CONNECT 把请求连接转换到透明的 TCP/IP 通道。
  • 相关阅读:
    【转】构建高性能WEB站点之 吞吐率、吞吐量、TPS、性能测试
    【计算机二级Java语言】卷015
    【计算机二级Java语言】卷014
    【计算机二级Java语言】卷013
    【计算机二级Java语言】卷012
    【计算机二级Java语言】卷011
    【计算机二级Java语言】卷010
    【计算机二级Java语言】卷009
    【计算机二级Java语言】卷008
    【计算机二级Java语言】卷007
  • 原文地址:https://www.cnblogs.com/colorchild/p/12197343.html
Copyright © 2011-2022 走看看