理解HTML5语义 – 第2部分:文档结构和全局属性

  百度应用运维团队一直追求高质量的产品可用性和用户体验,追求最经济的硬件和带宽成本,追求高效的产品迭代速度,追求无人值守的场景化运维,追求帮助业务核心能力的构建。百度应用运维平台经历了基础运维平台、开放运维平台到现在的智能化运维平台这几个阶段。本次将分享百度对于运维下一幕的思考——AIOps,以及AIOps在百度具体业务场景下的实践落地。

  随着MySQL数据库使用越来越重度,流行度越来越高,同时伴随着使用场景的丰富、云化的普及和智能化的发展,对原本为单机设计的MySQL带来了很多架构上的挑战,包括:性能、成本、安全、容灾,高可用、合规、规模运营等方面,在诸多过去设计层面不被重视的问题。本演讲会从架构演化角度来看现有MySQL技术和产品的变化趋势和解决实践。

  2017年已经成为过去,在AI领域又太多里程碑值得纪念,总结2017是为了更好的迈向2018,所以AI前线年之初为各位读者奉上这样一本迷你书,涵盖了来自全球AI和大数据领域技术专家的年终总结与趋势解读,同时还有世界知名技术大厂的年终技术总结与趋势预测。

  由Ron Meyer和Ronald Meijers共同撰写的Leadership Agility一书描述了一系列领导力风格,他们可用它们来拓展领导技能和增强领导力敏捷性。读者可从中了解各种领导力风格的优点和缺点,学会根据实际的场景选择合适的领导力风格。

  参与物联网项目的人已经意识到,在客户需求与供应商提供设备间存在着很大的差距。Mikael Hakansson介绍了确保物联网成功的五个关键领域,其中包括企业所有权、团队技能、设备板载、处理变更能力以及全面测试。

  亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知。

  HTML4和HTML5之间最明显的区别是新的缩短的文档类型。我不了解您,但我记不住HTML4或XHTML1文档类型。它们冗长无趣。但我们现在可以摆脱这种较长的文档类型了:

  您可能已看到了contenteditable的实际应用。在编写您希望用户能够与演示交互和更改值的教程时它非常有用(参见CSS技巧演示)。或许您已在某场会议的演示上看到,演示者使用HTML5创建了她的幻灯片然后在演示时在浏览器中实时编辑它们。

  您可以将任何属性设置为可编辑。想象一下创建页面内文本编辑器的可能性。如果您使用本地存储,您的用户可在以后返回到页面并保留更改。因为自5.5版以来,IE就已支持contenteditable,所以它得到了很好的支持(但还未应用到移动领域)。如果您要将页面的一部分设置为可编辑,可以使用outline和一个属性选择器为用户提供一种可视指示:

  属性选择器自IE7以来就已得到支持,允许您确定具有特定属性的目标元素。请注意,我同时使用了和伪类。这样,同时使用鼠标和键盘导航的用户可看到可视指示。我选择使用轮廓线代替边框,因为它不会向盒状模型添加元素,所以页面区域不会在触发时突然闪现。请注意,如果拥有IE6/7支持很重要,您应该使用边框代理。

  “contextmenu属性提供了元素的上下文菜单。该值必须是DOM中的一个菜单元素的ID。”

  菜单元素本身只是一组命令。它们可能为表单元素、列表项或其他元素。菜单是隐藏的,直到键击或鼠标单击等事件的触发导致它提供选项和动作的气泡式菜单。

  这使您能够像下拉菜单一样节省UI空间,因为它仅在以某种方式请求时才显示。目前现代浏览器中还不支持,但它已为第一次实现做好了准备。代码可能类似于:

  “自定义数据属性是一个没有命名空间的属性,它的名称以字符串“data-”开头,在连字符后拥有至少1个字符”

  这些自定义数据属性允许您创建属性来与在您自己的网站上运行的脚本共享数据。它们还未被一般软件使用或采纳。您可以指定任意多个自定义数据属性。依据“所有浏览器可能都已使用data-*属性,并使用getAttribute访问它们。”

  得益于出色的支持,坊间已存在许多自定义数据属性的示例。如果您拥有Dreamweaver CS5.5,您可以创建一个jQuery Mobile (JQM)应用程序。jQuery Mobile广泛使用了自定义数据属性来识别元素、主题和许多其他实体的角色。以下是一个JQM页面的示例

  如果希望使网站可供具有各种不同的浏览习惯和身体缺陷的用户访问,您将会发现role和aria-*属性。WAI-ARIA (Accessible Rich Internet Applications)这种方法提供了一些方式来定义您的动态Web内容和应用程序,以使具有残疾的人们能够识别和成功与之交互。这是通过定义文档或应用程序结构的role,或通过定义部件角色、关系、状态或属性的aria-*属性来完成的。

  规范建议使用ARIA使HTML5应用程序更容易访问。当使用语义HTML5元素时,您应该设置它们的相应角色。基本结构可能类似于:

  在我以前编写的有关HTML5语义的文章中,我介绍了新的figure和figcaption元素。我使用的代码类似于:

  如果添加aria-describedby属性,您可以在figure和figcaption元素之间创建一种对于残疾人技术而言在语义上还不存在的关系。代码可能类似于:

  这两个属性放在一起使用,因为它们是新的拖放API(DnD API)的一部分。对于draggable属性,有3种状态:true、false和auto(auto不是关键字,它是默认的缺少值),依据W3C HTML5工作草案:

  “true状态表示元素可拖动;false状态表示它不可拖动。auto状态使用用户代理的默认行为。”

  如果您将拖动某个实体,您还需要能够放置它。这正是dropzone属性所做的。目前可指定3个值copy、move和link:copy创建被拖动元素的一个副本;move实际将元素移动到新位置;link创建被拖动的数据的链接。DnD API正开始获得Gmail的关注,Gmail使用它作为其文件上传的基础,允许您之际将文件拖到浏览器上。Ryan Seddon创建了一种方式来测试自定义字体,而无需将它们上传到服务器(称为Font Dragr)。它使用DnD API并允许您将字体文件拖到浏览器上以供预览。

  “hidden属性是一个布尔属性。当在一个元素上指定时,它表示元素还不或不再相关。用户代理不应呈现指定了hidden属性的元素。”

  当然,您还必须使用JavaScript操作此属性。一个示例可能是使用hidden属性来登录Web游戏。最初,用户将看到隐藏了游戏的登录屏幕。在验证凭据后,用户将看到隐藏了登录屏幕的游戏。

  当一个元素应用了hidden属性时,它将向所有用户代理隐藏,包括屏幕读取器;但是,脚本和表单控件仍可执行。这只是表示上的一处更改,display:none也是如此。(HTML5可访问性要求所有支持的浏览器(基本上仅不包括IE)使用display:none)。您将回想起,display:none会导致元素完全不显示方框所以围绕它的所有内容都会折叠到它的区域中。hidden属性也是如此。您可能需要谨慎考虑,使用属性hidden、display:none还是aria-hidden属性更好。

  “用户代理可支持检查可编辑文本的拼写和语法,无论是在表单控件(比如文本区元素的值)中,还是在编辑主机中的元素(使用contenteditable)。”

  您可以观看Wufoo中的实时演示,查看拼写检查的实际应用。现代浏览器中具有良好的拼写检查支持(但不可用于IE或Safari Mobile)。图1给出了拼写检查在Chrome浏览器中的实际应用的屏幕截图。请注意像任何文本编辑器或邮件程序中一样的红色下划线。

  围绕图像添加链接和围绕它的字幕添加相同链接,此功能已存在很长时间。或者围绕标题和它下面的内容段略放置相同但分派的链接,此功能也已存在很长时间。据W3C HTML5工作草案:

  “a元素可围绕整个段略、列表、表格,甚至整节而添加,只要其中没有交互式内容(比如按钮或其他链接)。”

  那么此功能有何妙用呢?当我了解此功能后,我做的第一件事就是进入我自己的站点,其中主页已将标题/段略分组,但独立包装。我将代码更改为:

  这具有很好的浏览器支持。在我自己的工作中,我偶尔遇到过奇怪的呈现错误,我总是通过设置display: block的超链接来修复它。Derek Featherstone使用此技术对可访问性执行了广泛的测试。他发现残疾技术也可接受此功能。

  当在整个站点使用一致的导航时,您通常不希望用户当前所在的页面链接到它自身。但是许多时候,导航样式集成了a元素,就像它集成包含它的li或p一样。请删除整个a元素,这样链接就不会经常使设计崩溃。现在已修复了这一问题您只需整个删除href。以下是W3C对该主题的陈述:

  “如果a元素没有href属性,那么该元素表示一个占位符,可在其中放置一个链接,只要它是相关的。”

  所以对于基于列表的导航,如果用户在services.html页面上,代码将类似于:

  使用元素作为占位符,这一功能也得到了良好的支持。如果您为导航内容添加了下划线(与菜单中不同),下划线将不会显示,因为它不是一个超链接。您的样式的剩余部分将保持不变。大功告成!

  不要害怕在规范中查阅所有全新的HTML5功能。如果觉得这个过度专业的版本的内容太多,Ben Schwarz清除了浏览器供应商部分,仅留下了您和我需要知道的信息:HTML5空间的一个额外的刻度版本!

  我们理解您使用ad blocker的初衷,但为了保证InfoQ能够继续以免费方式为您服务,我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单,感谢您的理解与支持。

相关阅读