HTML总结04(新特性)

ZzZzZz
383 阅读10分钟

1. 新增元素

  • 绘画 canvas
  • 用于媒介回放的 video 和 audio 元素
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
  • sessionStorage 的数据在浏览器关闭后自动删除
  • 语意化更好的内容元素，比如 article、footer、header、nav、section
  • 表单控件，calendar、date、time、email、url、search
  • 新的技术 webworker, websocket
  • 新的文档属性 document.visibilityState 2. 移除元素
  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u
  • 对可用性产生负面影响的元素：frame，frameset，noframes 3. HTML5新标签的浏览器兼容性问题
  • IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一 特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式。
  • 当然也可以直接使用成熟的框架，比如 html5shim <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> [if lte IE 9]……[endif] 判断 IE 的版本，限定只有 IE9 以下浏览器版本需要执行的语句。 4. HTML语义化
  • 用正确的标签做正确的事情。
  • html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析。
  • 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。
  • 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO。
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

5. b与strong&&i与em

  • 页面效果：被<b>和<strong>包围的文字将会被加粗，而被<i>和<em>包围的文字将以斜体的形式呈现。
  • 标签意义：<b>和<i>是自然样式标签，表示无意义的加粗和斜体,表现样式为{font-weight:bloder}。<em>和<strong>是语义样式标签,<em>表示一般强调,<strong>表示语义更强的强调。
  • 网页渲染：<strong>会重读，<b>仅展示强调内容。

6. 前端需要注意的SEO

  • 合理的title、description、keywords：搜索引擎对三项的权重逐个减小，title值强调重点即可，重要关键词不要出现超过2次，而且要靠前，不同页面的title要不同;description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同。keyword列举出重要关键字即可。
  • 语义化的HTML代码，符合W3C规范：语义化代码让SEO更容易理解网页。
  • 重要内容HTML代码放在最前面，SEO抓取HTML的顺序是从上到下，部分搜索引擎还对抓取长度有限制。
  • 重要内容不要用JS输出：爬虫不会执行js获取内容
  • 避免用iframe：搜索引擎不会抓取iframe的内容
  • 非装饰性图片必须加alt
  • 提高网站速度：网站速度是搜索引擎排序的一个重要指标

7. HTML5离线储存的工作原理

  • 离线存储：在用户没有连接Internet时，可以正常访问站点或引用，在用户与Internet连接时，更新用户机器上的缓存文件。
  • 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储下来，之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
  • 使用方法： (1) 创建一个和html同名的manifest文件，然后在页面头部加入以下manifest的属性。
<html lang="en" manifest="index.manifest">

(2) 在cache.manifest文件中编写离线存储的资源。

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resource/logo.png
FALLBACK:
//offline.html
  • CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线 存储，所以不需要把页面自身也列出来。
  • NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离 线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一 个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
  • FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上 面 这 个 文 件 表 示 的 就 是 如 果 访 问 根 目 录 下 任 何 一 个 资 源 失 败 了 ， 那 么 就 去 访 问 offline.html 。 (3) 在离线状态时，操作 window.applicationCache 进行离线缓存的操作怎么更新缓存
  • 更新manifest文件
  • 通过JavaScript操作
  • 清除浏览器缓存

(4) 注意事项：

  • 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点5MB)。
  • 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。
  • 饮用manifest的html必须与manifest文件同源，即在同一个域下。
  • FALLBACK中的资源必须和manifest文件同源。
  • 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
  • 站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。
  • 当manifest文件发生改变时，资源请求本身也会触发更新。

(5) 自动化工具

  • manifest文件中的cache部分不能使用通配符，必须手动指定，自动化工具grunt-manifest能自动生成manifest文件，grunt-manifest依赖grunt，grunt是一个自动化构建工具。

    ① 安装 npm install grunt-manifest --save-dev

    ② 载入grunt.loadNpmTasks('grunt-manifest');

    ③ 典型的配置文件

    grunt.initConfig({
manifest: {
  generate: {
    options: {
      basePath: "../",
      cache: ["js/app.js", "css/style.css"]
      network: ["http://*", "https://*"],
      fallback: ["/ /offline.html"],
      exclude: ["js/jquery.min.js"],
      preferOnline: true,
      verbose: true,
      timestamp: true
    },
    src: [
          "some_files/*.html",
        "js/*.min.js",
        "css/*.css"
    ],
    dest: "index.manifest"
  }
}
});
    • options定义生成manifest的一些自定义参数，src是要生成的文件，dest是输出文件
    • options下的主要参数：
      basePath 设置出入文件的根目录
  cache 手动添加缓存文件
  network 手动添加网络文件
  fallback 手动添加后备文件
  exclude 设置不添加到cache的文件
  verbose 是否添加版权信息
  timestamp	是否添加时间戳

    《HTML5 离线缓存-manifest 简介》yanhaijing.com/html/2014/1…

8. 浏览器对HTML5的离线存储资源的管理和加载

  • 用户在线状态：浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果 是第一次访问 app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行 离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资 源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发 生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
  • 用户离线状态：浏览器就直接使用离线存储的资源。 9. 常见浏览器端的存储技术
  • SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都 是字符串类型的键值对。
  • cookie:是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密)。cookie 数据始终在同源(协议、主机、端口相同)的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。在cookie 过期时间之前一直有效，即使窗口或浏览器关闭。在所有同源窗口中都是共享的。由服务器设置，在客户端存储，最多能存储4K数据，生存时间由expires属性指定，且只能被同源的页面访问共享。
  • localStorage:属于 HTML5 WebStorage,便于客户端存储数据,存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。在所有同源窗口中都是共享的。能存储5M+的数据。
  • sessionStorage:属于 HTML5 WebStorage,便于客户端存储数据,数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持， 并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。能存储5M+的数据。
  • cookie 、localStorage 和 sessionStorage都是存储少量数据的时候的存储方式，当我们需要在本地存储大量数据的时候，可以使用浏览器的indexDB,这是浏览器提供的一种本地的数据库存储机制，不是关系型数据库，内部采用对象仓库的形式存储数据，更接近于NoSQL数据库。[浏览器数据库IndexDB入门教程]www.ruanyifeng.com/blog/2018/0…

10. iframe

  • iframe 元素会创建包含另外一个文档的内联框架(即行内框架)
  • 缺点： (1) iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态 设置 iframe 的 src 可以避免这种阻塞情况。

(2) 搜索引擎的检索程序无法解读这种页面，不利于网页的 SEO 。

(3) iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的 并行加载。

(4) 浏览器的后退按钮失效。

(5) 小型的移动设备无法完全显示框架。

11. Label

  • label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
<label for="Name">Number:</label> 
<input type=“text“ name="Name" id="Name"/>

12. HTML5的form的自动完成功能

  • autocomplete: 规定输入字段是否应该启用自动完成功能。默认为启用，设置为 autocomplete=off 可以关闭该功能。
  • 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
  • autocomplete 属性适用于 ，以及下面的 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

13. title和h1

  • title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题，对页面信息的抓取也 有很大的影响。

14. <img>的title和alt

  • title 通常当鼠标滑动到元素上的时候显示。
  • alt 是 的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。
avatar
文章
阅读
粉丝