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 通道。
  • 相关阅读:
    [DB] 数据库的连接
    JS leetcode 翻转字符串里的单词 题解分析
    JS leetcode 拥有最多糖果的孩子 题解分析，六一快乐。
    JS leetcode 搜索插入位置 题解分析
    JS leetcode 杨辉三角Ⅱ 题解分析
    JS leetcode 寻找数组的中心索引 题解分析
    JS leetcode 移除元素 题解分析
    JS leetcode 最大连续1的个数 题解分析
    JS leetcode 两数之和 II
    JS leetcode 反转字符串 题解分析
  • 原文地址：https://www.cnblogs.com/colorchild/p/12197343.html
Copyright © 2011-2022 走看看