您的位置：首页 > Web前端 > HTML5

响应式设计中的HTML5

2016-07-19 11:41 375 查看
响应式设计的“移动优先”思想使它很适宜采纳最简洁、最有效和最具语义的代码。

本次内容：

HTML5的哪些部分我们现在就能用？

如何编写HTML5网页

HTML5的精简之道

HTML5中的废弃零件

HTML5中的全新语义化元素

嵌入媒体

可响应的HTML5 iFrame视频

让网站支持离线使用

HTML5的哪些部分我们现在就能用

虽然完整的HTML5规范尚待批准，但是现代浏览器都不同程度地支持HYML5的大多数新特性，当前HTML标准草案的内容最终未必全部会出现在W3C推荐标准中，但其中有很大一部分新特性现在已经可以用了。

如何编写HTML5网页

打开一个已有的网页。你可能会看到文件开头有这样几行代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


删除上面的代码片段并将其替换成如下代码片段：

<!DOCTYPE html> //文档如此简短，目的是以简洁的方式告诉浏览器用“标准模式渲染页面”。这种简洁高效渲染在html5
<html lang="zh">
<head>
<meta charset=utf-8> //meta是一个单闭合元素所以不需要关闭标签，字符通常都是utf-8


HTML5的精简之道

如果你很注意代码风格，一般都会使用小写字母，将属性值用引号括起来，而且会为脚本或样式文件链接声明type属性。例如，你会使用如下的代码来引入一个样式表：

<link href="CSS/main.css" rel="stylesheet" type="text/css" />


HTML5中不需要这么仔细，这样写它一样乐于接受：

<link href=CSS/main.css rel=stylesheet >


你看了一定感到怪异，我懂我也明白。代码没有闭合标签的斜线（/）,属性值没有用引号括起来，没有type声明。但是，好说话原HTML5不在一这些。第二行示例代码和第一行一样有效。

这种宽松的语法可应用于整个文档，而不仅仅是链接CSS和Javascript文件的元素。例如定义一个如下所示的div:

<div id=wrapper>


这是完全有效合法的HTML5代码。插入一个图片：

<img SRC=frontCarousel.png alt=frontcarousel>


这样同样有效。没有结束标签的斜线，没有引号，大小写混杂。甚至，省略元素，页面依然有效。XHTML1.0对这种情况会怎么说呢？

对我而言，那些看似多余的字符（用于闭合的斜线和属性值两边的引号）可以提高代码的可读性。因此在编写HMTL5文档时我倾向于在老式编写风格（这样风格的代码在HTML5中依然有效，不过可能在验证器或类似检查工具中会产生一些警告）和HTML5的极简注意之间找到一个平衡。举例说明。以上节的CSS连接为例，我会这样写：

<link href="CSS/main.css" rel="stylesheet"/>


我闭合了标签，使用了引号，但删除了type属性。关键是找到一种你自己满意的风格。

HTML5中一个真正便利的精简之处，是我们可以在标签中嵌入多个元素。以前，如果你想让代码通过验证，必须将每个元素单独使用标签来包裹。例如：

<h2><a href="index.html">The home page</a></h2>
<p><a href="index.html">This paragraph also links to the homne page</a></p>
<a href="index.html"><img src=home-imge.png" alt="home-slice" /></a>


现在我们可以摆脱这个限制，像下面代码那样将一线元素包裹其中：

<a href="index.html">
<h2>The home page</h2>
<p>This paragraph also links to the homne page</p>
<img src=home-imge.png" alt="home-slice" />
</a>


唯一需要记住的是——很明显：不能在一个
<a>
标签中嵌套另一个
<a>
标签，也不能在
<a>
标签中嵌套表单。

HTML5中的废弃零件

除了script链接中的language属性，还有很多你可能已经习以为常的HTML标签或属性，在HTML5中都被认为是“废弃的”。

举个使用暂保留的废弃零件的例子，即给图片设置border属性。这种方法以前用来去掉超链接中图片的蓝色边框。如下：

<img src="frontCarousel.png" alt="fronCarousel.png" border="0" />


现在则建议你使用CSS来完成同样的效果。

至于非保留的废弃零件都有哪些

在HTML 5之前的一些标签中，有一部分是纯粹用作显示效果的标签。而HTML 5延续了内容与表现分离，对于显示效果更多地交给CSS样式去完成。所以在这方面废弃的标签有：
<basefont>、<big>、<center>、<font>、<s>、<strike>、<tt>和<u>。


不再支持frame框架

由于frame框架对网页可用性存在负面影响，因此在HTML 5中已经不再支持frame框架，但是支持iframe框架。所以HTML 5中废弃了frame框架的
<frameset>、<frame>和<noframes>
标签。

其他废弃标签

在HTML 5中其他被废弃的标签主要是因为有了更好的替代方案。

废弃
<bgsound>
标签，可以使用HTML 5中的
<audio>
标签替代。

废弃
<marquee>
标签，可以在HTML 5中使用JavaScript程序代码来实现。

废弃
<applet>
标签，可以使用HTML 5中的
<embed>和<object>
标签替代。

废弃
<rb>
标签，可以使用HTML 5中的
<ruby>
标签替代。

废弃
<acronym>
标签，可以使用HTML 5中的
<abbr>
标签替代。

废弃
<dir>
标签，可以使用HTML 5中的
<ul>
标签替代。

废弃
<isindex>
标签，可以使用HTML 5中的
<form>
标签和
<input>
标签结合的方式替代。

废弃
<listing>
标签，可以使用HTML 5中的
<pre>
标签替代。

废弃
<xmp>
标签，可以使用HTML 5中的
<code>
标签替代。

废弃
<nextid>
标签，可以使用HTML 5中的GUIDS替代。

废弃
<plaintext>
标签，可以使用HTML5中的“text/plain”MIME类型替代。

HTML5中的全新语义化元素

大多数网页开发者能看懂div上使用的通用ID命名约定。但是对于代码本身，任何用户代理（网页浏览器、屏幕阅读器、搜索引擎爬虫等）看到这段代码都无法确定每个div的意义。HTML5旨在使用全新的语义化元素来解决这个问题。接下来从页面结构的角度来讲解这些元素。

6.1
<section>

<section>
元素用来定义文档或应用程序中的区域（或节）。例如，可以用它组织你的个人信息，一个
<section>
用于联系信息，另一个用于新闻动态。需要重点理解的是用它的目的不是为了美化样式。如果你只想将某个元素包裹起来以便设置样式，那应该和以前一样继续使用
<div>
.

6.2
<nav>

<nav>
元素用来定义文档的主导航区域，其中的链接指向其他页面或当面页面的某些区域。因为
<nav>
用于主导航区域，所以严格来讲它不是为页脚或其他经常会包含一组链接的区块而设计的（虽然将它用在这些区块里包含链接也没问题）。

6.3
<article>

<article>
元素与
<section>
元素很容易混淆。在完全理解之前我只得一遍又一遍地阅读它们的标准定义。
<article>
元素用来包裹独立的内容片段。当搭建一个页面时，想想你准备放入
<article>
标签的内容能否作为一个整块而被复制粘贴到另外一个完全不同的网站且能保持完整的意义？另一种办法是，想想包裹在
<article>
中的内容能否在PSS订阅中独立成为一片文章？应该使用
<article>
标签包裹的内容，最明显的例子就是博客正文。注意，如果出现嵌套的
<article>
元素，那内层
<article>
元素内容应该和外层文章内容直接有关。

6.4
<aside>

<aside>
元素用来表示与页面主内容松散相关的内容。在实践中，我经常将其用作侧边栏（当它包含合适的内容时）。另外，引文、广告以及导航元素（如友情链接等）也可以使用它。

6.5
<hgroup>

如果页面中有一组使用
<h1>、<h2>、<h3>
等标签的标题、标语和副标题，则可能考虑使用
<hgroup>
将他们包裹起来。这样HTML5的大纲结构算法中就会隐藏次级标题元素，从而只让
<hgroup>
中的第一个标题元素进入文档大纲。

6.6
<header>

由于
<header>
元素不计入大纲结构，所以不能用它来划分内容结构，而是应该用它来包含对区域内容的介绍说明。实际使用中。
<header>
可用作网站头部的“刊头”区域，也可用作对其他内容如
<article>
元素的简要介绍。

6.7
<footer>

和
<header>
一样，
<footer>
元素也不计入大纲结构，所以也不用于划分内容结构。应该用它来包含其所在区域的辅助信息。例如可以用它包含一组指向其他页面的超链接，或者用它包含版权信息。和
<header>
一样，它也可以视情况在同一个页面上多次出现。例如博客网站的页脚可以用它，同时博客正文
<article>
元素内的文脚也可以用它。不过规范指出，博文作者的联系信息应该使用
<address>
元素来包裹。

6.8
<address>

<address>
元素用于明确地标注离其最近的
<article>
或
<body>
祖先元素的联系信息。为避免产生混淆，请记住
<address>
中一般不放具体的邮政地址，除非相应内容确实需要联系地址。而邮政地址和其他可能会改变的联系信息应该使用
<p>
标签来包裹。

网站的主题内容怎么办

你可能会觉得奇怪：没有一个专门的元素用来标记页面主题内容。其实逻辑是这样的，既然可以界定除主体内容之外的其他元素，那么剩下的元素自然就是页面的主体了。

HTML5的文本级语义元素

1.
<b>

实际用途是给文本加粗

2.
<em>

强调内容中的重点，因此，除非你确实想强调标签中的内容，否则的话可以考虑使用
<b>
标签或者可以的话使用
<i>
标签。

3.
<i>

它不仅仅是用来给某些文字加斜体效果。

用HTML5的方法为页面添加视频或音频

对很多网页设计师来说简直如沐春风！不再需要向网页中引入一堆代码，在HTML5中只需要一个
<video>
标签（音频使用
<audio></audio>
标签）

<video src="myVideio.ogg"></video>


此外还支持一般都会追加的附加属性height和width:

<video src="myVideio.ogg" width="640" height="480">What, do you mean you don't understand HTML5?</video>


现在将上面代码插入我们的网页然后在Safari中查看，视频就会出现但没有播放控制栏。想要显示默认的播放控制栏则需要追加 controls 属性。 我们还可以追加 autoplay 属性（不建议——因为大家都讨厌自动播放视频，这是常识）。修改后的代码如下：

<video src="myVideio.ogg" width="640" height="480" controls autoplay>What, do you mean you don't understand HTML5?</video>


相应式视频

对于HTML5式嵌入视频，修正方法很简单。只需删除视频标签中的height 和 width 属性（如删除 width=”640” height=”480”）,然后在CSS中追加如下代码：

video{ max-width:100%; height:auto;}


这种方法对本页面中的视频很有用，但它不能解决使用iframe嵌入的视频的响应式问题。

有一个方法是使用一个名为FitVids的JQuery小插件。

将FitVids文件存入一个合理的文件夹中，然后在
<head>
中引入该文件：

<script src="js/fitvids.js"></script>


最后，只需使用jQuery制定包含视频的特定元素。视频放入ID为 #contenet的 div中：

<script>
$(document).ready(funcion(){
//Target your .container, .wrapper, .post, etc.
$("#content").fitVids();
}
</script>


这样就搞定啦~

让网页可以离线使用

在HTML的开始标签中，我们指定一个.manifest文件：

<html lang="en" manifest="/offline.manifest">


该文件的文件名随意，但后缀名建议使用.manifest。必须在每一个准备离线使用的页面的HTML标签中追加manifest=”/offline.manifest”属性。

如果使用的是Apache 服务器，你可能还需要修改一下.htaccess文件，追加一行代码：

AddType text/cache-manifest .manifest
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航