Board logo

标题: 响应式Web设计:使用HTML5和CSS3实践 (10) [打印本页]

作者: look_w    时间: 2019-2-18 19:09     标题: 响应式Web设计:使用HTML5和CSS3实践 (10)

第4章 响应式设计中的HTML5

本章概览式地介绍了一些HTML5相关知识,更多偏向概念和引导性,操作性不强。

    大多数网站可以采用HTML5来编写。

    polyfill脚本:通常指的是一段能给老版本浏览带来新特性的JavaScript代码。

    Modernizr是一个很常用的相对polyfill更加增强了的脚本库。

    时间紧迫可以考虑使用HTML5样板文件。里面包含了基本样式normalize.css、polyfill和一些必要的工具如Modernizr。

    前端开发工具基本都包含了迅速生成基本文件的功能,这里只稍微对比一下两个lang和charset的含义:lang="en"指的是语言,比如中文、英文;<meta charset="UTF-8">指的是字符集,可用的类型可就多了只对中文这种语言就有很多种字符集可用。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

    HTML5的标签是可以简略地书写的,并且一些不符合XHTML1.0的写法也不会有任何问题,但我们还是推荐尽可能标准的方式来书写HTML代码,并且尽可能找到一个平衡:类似于<link>的type属性可以省略,但标签要记得闭合并且给属性加上引号。

    有一些标签在HTML5中被废弃了,你也许很多都没有用到过,但是记住要尽可能采用CSS的方式来实现效果,而不是之前的在标签上加属性的方式。

    HTML5增加了一些全新的语义化元素,为什么语义化很重要,因为在以前的做法中我们通过给div家id和class能够让其他人在阅读代码的时候很好地理解代码,但是对机器而言就不那么简单了。HTMl5旨在用全新的语义化标签来解决这个问题。如下是一些语义化标签的列表(不打算详细记录,那样也没有意义):
        section
        nav
        article
        aside
        hgroup
        header
        footer
        address

    HTML5的很多容器都有自己独立的大纲结构,这意味着你不用总是去想现在是几级标题,不同父级容器会给不同的标题相应的大小样式,你只需要在容器中任意使用就好。

    有一些网页工具可以用来测试生成的网页的大纲结构(个人认为对于排版不佳、长久未读的代码还是有些帮助的)。

    可以尝试着把之前自己构建的网页的元素替换成header、nav、footer,然后修改对应的css中的选择器。

    HTMl5中的文本语义级元素如b, em, i以前会是用来添加文本样式的并且不推荐为了做样式而使用它们,但是现在通常有了新的语义可以自己查询看,不赘述。

    遵循WAI-ARIA是指无障碍网页应用技术,来让残障人士能够访问网页中的动态内容,实现这些技术包含的内容有很多,这里只简单提一下会用到的一些,比如地标角色landmark role(也就是在很多页面中看到的role="navigation/application/banner/form"等)可以让屏幕阅读器在不同的页面区块之间轻松跳转。

    Apple公司拒绝在IOS设备上支持Flash的时候极大的促进了HTMl5的发展。

    使用HTML5方法为页面添加视频或者音频
        因为早起浏览器内置视频格式的争议,目前很多浏览器支持的不同的格式的视频或音频,为了解决这个问题我们可能会为这个视频或音频创建多个版本,并都嵌套在video标签中。
        为了给IE8以及更低版本的浏览器提供备用方案,你可能还需要追加一个Flash甚至媒体文件的下载链接。
        audio和video的标签用法基本一致。

    响应式视频
        给视频设置固定宽高,当页面被拉伸的时候,似乎就不怎么响应式了,你可以就本书的例子或者W3C上找一个例子试一试。通过给视频设置max-width: 100%的方法能够解决这个问题(本书前面章节针对图片有提到过这个解决方案)。

    离线Web应用
        对于一些应用需要在离线状态下能够正常使用。比如一个笔记应用,当用户的手机网络断开时,可能正在编辑一篇笔记,通过使用Web离线功能他就能够继续编辑笔记,等到网络连接上的时候再把内容同步到网络上。
        HTML5离线应用的运行机制是:为每个需要离线使用的网页都制定一个.mainfest文件,这个文件罗列了该网页离线使用时所需要的的所有资源文件。支持离线Web应用的浏览器会自动读取.mainfest文件,下载所罗列的资源列表并缓存至本地以备网络断开时使用。




欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0