• HTML5 程序设计笔记(一)


    HTML5 概述

    1、html5 发展史

      1993年html首次以因特网草案形式发布。

      20世纪90年代,html大幅发展,从2.0版,到3.2版和4.0版。最后到1999年的4.01版。

      伴随html发展,W3C掌握了对html规范的控制权。

      快速发布四个版本后,在业界人为html已经末路的同时,对web标准焦点开始转移到XML和XHTML上。HTML被放在次要位置。

      致力于将web平台提升到一个新高度,一小组人在2004年成立WHATWG,他们创立了HTML5规范,同时开始转对web应用开发新功能。并发明web 2.0新名词。

      2006年,W3C重新接入HTML,于2008年发布HTML5工作草案。

      2009年,XHTML2工作组停止工作。

      2010年,由于HTML5能解决非常实际的问题,所以在规范为定稿下,各大浏览器厂家已按耐不住,开始对旗下产品进行升级以支持HTML5新功能。这样,得益于浏览器的实验性反馈,HTML5规范得到了持续完善,HTML5以这种方式迅速融入到了对web平台的实质性改进中。

    2、关于2022年的那个神话

      关于html5发布关键时间点:

        2012年,目标发布候选推荐版。

        2022年,目标发布计划推荐版。

      

    3、谁在开发HTML5

      WHATWG:由来自Apple、Mozilla、Google、Opera等浏览器厂商的人组成。成立于2004年。WHATWG开发HTML和Web应用API,同时为歌浏览器厂商以及其他有意向的组织提供开发式合作。

      W3C:W3C下辖的HTML工作组目前负责发布HTML5规范。

      IETF(Internet Engineering Task Force, 因特网工作任务组):这个任务组下辖HTTP等负责Internet协议的团队。HTML5定义的一种新API(WebSocket API)依赖于新的WebSocket协议,IETE工作组正在开发这个协议。

    4、新的认识

      兼容性

      实用性

      互通性

      通用访问性

      4.1 兼容性和存在即合理

        实际上HTML5的一个核心理念是保持一个新特性平滑过渡。

        html5研究者花费了大量的经历来研究通用行为。如,Google分析了上百王的页面,从中分析出了DIV标签的通用ID名称,并且发现其重复量很大。例如,很多开发人员使用DIV id="header" 来标记页眉区域。进而,加入<header>标签。

        尽管html5标准的一些特性非常具有革命性,但是html5旨在进化而非革命。

      4.2 效率和用户优先

        html5规范是基于用户优先准则编写的,其宗旨是“用户至上”,意味着在遇到无法解决的冲突时,规范会把用户放到第一位,其次是页面作者,再次是实现者(浏览器),接着是规定制定者(W3C/WHATWG),最后才考虑理论的纯粹性。

        下面的示例,在html5中都能被识别:

        id="prohtml5"

        id=prohtml5

        ID="prohtml5"

        这里不去辩解语法是否严格,只关心一个底线,那就是最终用户其实并不在乎代码怎么写。PS:不提倡入门者一开始写不严谨的代码。毕竟归根结底,受害者还是最终用户,一旦由于开发人员的原因造成页面错误导致不能正常显示,那么被折磨的肯定是最终用户。

        html5也衍生出xhtml5(可通过xml工具生成有效的html5代码)。html和xhtml两种版本的代码经过序列化应该可以生成近乎一样的DOM树。显然XHTML的验证规则严格得多。刚才示例中后两行代码是无法通过验证的。

        1、安全机制的设计

          html5足够安全。引入了一种新的基于来源的安全模型。该模型不仅易用,而且对各种不同的API都通用。不需要借助于任何所谓聪明、有创意却不安全的hack就能跨域进行安全对话。

        2、表现和内容分离

          html5规范已经不支持老版本html的大部分表现功能了。但得益于先前提到的html5兼容性方面的设计理念,哪些功能仍然可用。清晰的分开表现和内容显得更重要,否则会有如下弊端:

          可访问性差

          不必要的复杂度(所有样式代码都放在页面中,代码可读性很差)

          文件变大(样式内容越多,文件越大),带来的后果就是页面载入变慢

      4.3 化繁为简

        html5的口号是“简单至上,尽可能简化”。因此,有如下改进:

          以浏览器原生能力代替复杂的javascript代码

          新的简化的DOCTYPE

          新的简化的字符集声明

          简单而强大的html5 API

        另外,html5规范比遗忘的任何版本都要详细,为的是避免造成误解。

        基于多重改进过的、强大的错误处理方案,html5具备了良好的错误处理机制。html5提倡重大错误的平缓恢复,再次把最终用户的利益放在了第一位。比如,如果页面中有错误的话,在以前可能会影响整个页面的显示,而html5不会出现这种情况,取而代之的是以标准方式显示“broken”标记,这要归功于html5中精确定义的错误恢复机制。

      4.4 通用访问

        可访问性:处于对残障用户的考虑。html5与WAI和ARIA做了紧密集合,WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到html中。

        媒体中立:如果可能的话,html5的功能在所有不同的设备和平台上应该都能正常运行。

        支持所有语种:录入,新的<ruby>元素支持在东亚页面排版中会用到的Ruby注释。

    5、无插件范式

      过去,很多功能呢只能通过插件或者复杂的hack(本地绘图API、本地socket等)来实现,但在html5中提供了对这些功能的原生支持。

      插件的方式存在很多问题:

        插件安装可能失败

        插件可以被禁用或者屏蔽(例如Applie的ipad就不支持flash插件)

        插件自身会成为被攻击的对象

        插件不容易和html文档的其他部分集成(因为插件边界、剪裁和透明度问题)

      虽然一些插件的安装率很高,但在控制严格的公司内部网络环境中经常会被封锁。此外,由于插件经常还会给用户带来烦人的广告,一些用户也会选择屏蔽此类插件。这样,一旦用户禁用插件,就意味着依赖插件显示的内容也无法表现出来。

      在已经设计好的页面中,要想把插件显示的内容与页面上其他元素集成也比较困难,因为会引起剪裁和透明度为问题。插件使用的是自带的渲染模型,与普通web页面所使用的不一样,所以当弹出菜单或者其他可视化元素与插件重叠时,会特别麻烦。相对的,html5可以直接用css和javascript的方式控制页面布局。

      html5 包括:Canvas(2D、3D)、Cross-document消息传送、Geoocation、Audio和Video、Forms、MathML、Microdata、Server-Sent Events、Scalable Vector Graphics(SVG)、WebSocket API及协议、Web Origin Concept、Web Storage、索引数据库、引用缓存(离线Web应用)、Web Workers、拖放、XMLHttpRequest Level 2

      www.caniuse.com —— 按照浏览器的版本提供了详尽的html5功能支持情况

      www.html5test.com —— 该网站会直接显示用户浏览器对html5规范的支持情况

      Modernizr —— 一个javascript库,提供非常现金的html5和css3检测功能,是检测浏览器是否支持某些特性的最佳工具

    6、html5的新功能
      6.1 新的DOCTYPE 和 字符集

        <!DOCTYPE html>

        <meta charset="utf-8">

        使用html5的doctype会触发浏览器以标准兼容模式显示页面。

        众所周知,web页面有多重显示模式,比如怪异模式、近标准模式以及标准模式。其中标准模式也被成为非怪异模式。浏览器会根据东侧type识别该使用哪种模式,以及使用什么规则来验证页面。在怪异模式下,浏览器会尽量不中断页面显示,即使没有完全通过验证也会将其显示出来。html5引入新的标记元素和其他机制,因此如果坚持使用已废弃的元素,那么页面将无法通过验证。

      6.2 新元素和旧元素

        html5的内容类型

        内嵌 : 向文档中添加其他类型的内容,例如audio、video和iframe等

        流   : 在文档和应用的body中使用的元素,例如form、h1和small等

        标题 : 段落标题,例如h1、h2和hgroup等

        交互 : 与用户交互的内容,例如音频和视频控件、button、textarea等

        元数据 : 通常出现在页面的head中,设置页面其他部分的表现和行为,例如script、style、title等

        短语 : 文本和文本标记元素, 例如mark、kbd、sub和sup等

        片段 : 用户定义文档中片段的元素,例如article、aside、title等

        上述所有类型的元素都可以通过css来设定样式。

        不过需要注意的是,html5中移除了很多在行内设样式的标记元素,如big、center、font和basefont等,以鼓励开发人员使用css

      6.3 语意化标记

        header : 标记头部区域的内容(用于整个页面或者页面中的一块区域)

        footer : 标记脚部区域的内容(用于整个页面或者页面中的一块区域)

        section : Web页面中的一块区域

        article : 独立的文章内容

        aside : 相关内容或者引文

        nav : 导航类辅助内容

        上面所有的元素都能用css设定样式(推崇表现和内容的分离理念),所以在html5的实际变成中,开发人员必须使用css来定义样式。

      6.4 使用 Selectors API 简化选取操作

        getElementById() : 根据指定的id特性值查找并返回元素, <div id="foo">    getElementById("foo");

        getElementsByName() : 返回所有name特性为指定值的元素, <input type="text" name="foo">    getElementsByName("foo");

        getElementsByTagName() : 返回所有标签名称与指定值相匹配的元素, <input type="text">    getElementsByTagName("input");

        Selectors API与现在css中使用的选择规则一样,通过它可以查找页面中的一个或多个元素。

        querySelector() : 根据制定的选择规则,返回在页面中找到的第一个匹配的元素, querySelector("input.error"), 返回第一个css类名为"error"的文本输入框

        querySelectorAll() : 根据制定规则返回页面中所有相匹配的元素,querySelectorAll("#results td"), 返回id值为results的元素下所有的单元格

        可以为 Selectors API函数同时指定多个选择规则,例如

        Var x = document.querySelector(".highClass", ".lowClass"); //选择文档中类名为highClass或lowClass的第一个元素

        提示:Selectors API 不仅仅只是方便,在遍历DOM的时候,通常会比以前的子节点搜索API更快。

      6.5 javascript 日志和调试

        很多调试工具支持设置断点来暂停代码执行、分析程序状态以及查看变量的当前值。console.log API 已经成为javascript开发人员记录日志的事实标准。为了便于开发人员查看记录到控制台的信息,很多浏览器提供了分栏窗格的视图。console.log API 要比 alert()好用很多,因为不会阻塞脚本的执行

      6.6 window.JSON

        JSON 是一种相对来说比较新并且正在日益流行的数据交换格式。作为javascript语法的一个子集,他将数据表示为对象字面量。由于其语法简单和在javascript编程中与生俱来的兼容性,JSON变成了HTML5应用内部数据交换的事实标准。典型的JSON API包含两个函数, parse()和stringify(),分别用来将字符串序列化为DOM对象和将DOM对象转换为字符串。

      6.7 DOM Level 3

        在所有支持HTML5的浏览器中,我们终于可以使用相同的代码来实现DOM操作和事件处理了,包括非常重要的addEventListener()和dispatchEvent()方法。

  • 相关阅读:
    题解-CmdOI2019 口头禅
    题解-NOI2003 智破连环阵
    题解-CF1282E The Cake Is a Lie
    CF1288F Red-Blue Graph
    题解-洛谷P4229 某位歌姬的故事
    莫比乌斯反演
    [HNOI2008]越狱(bzoj1008)(组合数学+正难则反)
    [FJOI2007]轮状病毒(bzoj1002)(递推+高精度)
    矩阵快速幂
    高斯消元
  • 原文地址:https://www.cnblogs.com/lightxun/p/3822384.html
Copyright © 2020-2023  润新知