[笔记]深入理解HTML5(一)

作者:frank 发表日期:2016-07-25 16:39:46 更新日期:2016-07-25 16:39:46 分类:猿文色

摘要

《深入理解HTML5》读书笔记

正文

noscript元素

noscript 元素可以包括所有可以出现在body中的一般元素,但不能是noscript本身。而且只对html有效,对xhtml无效,不成熟,不正规。

html5新元素

section, nav, article, aside, hgroup, header, footer, figure, figcaption。

无法避免的段落p,打断内容hr,保持格式pre,引用文字blockquote,列表ol, ul, dl。table元素的colgroup和col。

表单元素的深层含义(带*为H5新增元素)

  • form: 用户可提交的表单
  • fieldset: 表单控件集合
  • legend: fieldset 标题
  • label: 表单控件标题
  • input: 表单控件
  • button: 按钮控件
  • select: 菜单控件
  • datalist: 其他表单控件的数据列表
  • optgroup: select 里的 option 分组
  • option: select 或 datalist 里的 option
  • textarea: 多行文本输入控件
  • *keygen: 加密对生成器表单控件
  • *output: 计算结果的输出
  • *progress: 进度条
  • *meter: 度量衡

HTML5大纲算法

作为HTML5标准的一部分,HTML5大纲算法提供了将内容拆解为嵌套的区块的规则,每一个区块有一个标题。 大纲算法使用以下规则来解析文档:

  1. 将body元素作为根元素,所有其他页面区块都组织在下面;
  2. 打一个标题内容元素作为body的标题;
  3. 对剩下的区块内容,定义并添加新的区块和子区块到大纲;
  4. 将每一个子区块的第一个标题内容元素作为那个区块的标题。

标题内容包括h1,h2,h3,h4,h5,h6和hgroup元素,而区块内容包含article,aside,nav和section。

使用哪种区块?

  • 该区块是否包含主要导航链接?是的话选择nav
  • 该区域是否包含了离开了周围的内容仍然可以理解的内容,比如被聚合后?是的话选择article
  • 该区块是否和周围内容关联不深?是的话选择aside
  • 该区块是不是一个主题分组,并且逻辑上可以放在一个标题下面?是的话选择section

头和尾

整个页面也可以像区块一样有头尾,所以一个页面可以有多个头和尾。header用于将介绍内容和区块的辅助导航分组到一起(标题,目录,LOGO等)。footer包含跟区块或页面整体相关的内容(作者,版权,联系地址)。hgroup可以将一组标题放在一起(标题和副标题)。在除了article和body之外的区块元素里使用address元素是不合适的。

确定区块头和尾

a元素

  • 任何文档流都可以被嵌套,只要不是交互内容类型的(a,button,input等等交互类元素(疑问?))。
  • 可以跳转到任何目标或者片段标识。
  • 没有href属性是完全合法的。
  • html5新增了3个属性,media, type, download。

其他文本元素:em strong, i b, small, s, mark, q, dfn abbr,sub sup, time, br war, cite, code var samp, kbd, ins del, ruby rt rp, bdo bdi。

表单

  • form属性:accept-charset, autocomplete, enctype, name, novalidate, target。
  • 其他input元素属性:form, formaction, formenctype, formmethod,formtarget, formvalidate。
  • 大多数输入类型包含一个list属性,可以和datalist元素结合使用。
  • select元素:disabled, size, multiple。
  • option元素:disabled, selected, value, label。
  • optgroup:分隔option。
  • textarea:cols, rows控制大小。是一个容器元素,而不是自关闭的空元素。wrap属性表示提交数据的时候是否需要加上换行符,取值为hard, soft(默认值)。
  • progress和meter:尝试一下meter元素。
  • output元素:用于显示计算的结果,语义性元素。
  • keygen元素:用于生成密钥,公钥在表单提交时会发送给服务器。
  • filedset元素和label用于添加结构:filed元素可以搭配legend元素使用。label用于建立文字标签和表单控件的关联,用label包裹住表单元素,而不是使用for属性。

表单可用性

  • 各司其职的表单控件。
  • 使用label,filedset,legend来优化可用性和可访问行。
  • 保持简洁,只收集需要的信息。
  • 别让我思考,别让我费力,别骗我。
  • 互联网是全球的(本地化,电话号码,邮编的特定格式字段)。
  • 需要时提供后备方案。

音频,视频和内嵌媒体

video:http://html5media.html。各个浏览器支持的视频格式不一样。后备内容,三种格式加上flash加上海报图片。 文字轨track元素。

如何选择图片格式

设置图片的height和width属性是一个很好的实践。 对于有很多色彩信息的图片,选择JPEG格式。如果图片中有连续的色块,比如logo或者插图,使用GIF或者PNG,PNG比GIF更加灵活,一般使用PNG。如果色彩不多并且没有渐变使用PNG-8,如果图片里有透明度,选择PNG-24效果会更好。最新的WebP格式,目前只有Chrome,Opera,Safari支持。

嵌入其他媒体:embed, object

object可以作为表单元素被提交。后背内容机制很重要(object, video),不需要alt属性。

嵌入的HTML:iframe(inline frame)

不支持后备内容显示,新属性:srcdoc(直接制定html代码),seamless(包含的内容成为容器文档的一部分),sandbox(增加了安全限制:限制的本地调用,禁止表单提交,禁用JavaScript,禁用链接外部目标,禁入插件)。name属性用来指向iframe。

canvas元素

html5 api

  • window对象属性:navigator, screen, history, location, document。
  • history:pushState(历史纪录里面增加一条记录), replaceState(替换历史纪录)。
  • 响应式设计:媒体查询和就是布局的结合。viewport可视区域,和设备宽度有区别。
  • 离线缓存应用:html元素的manifest属性。CACHE, NETWORK, FALLBACK。
  • 微数据:是机器使用的html5,itenscope, itemtype, itemprop。
  • 撤销管理器api:开发中。

其他新技术

获取位置信息,SVG和MathML,客户端存储(cookie 4KB, storage 5M),wen workers, Web Socket API,视频会议和点对点通信,WAI-ARIA,文件api。