html5入门设计原理

相关推荐

html5入门设计原理

　　淘宝网首页已全部使用HTML5，拥抱变化才是王道。HTML5设计原理是什么？下面yjbys小编为大家分享HTML5设计几个原理，希望对大家学习HTML5有帮助！

　　HTML5

　　1、2004成立了Web Hypertext Applications Technology Working Group(Web超文本应用技术工作组，WHATWG)，完全脱离W3C。

　　2、W3C在2007年组建了HTML5工作组，在WHATWG工作成果的基础上继续开展工作。

　　HTML5设计原理一：避免不必要的复杂性

　　代码如下

　　一、DOCTYPE的写法：

　　//HTML 4.01：

　　<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "4/strict.dtd">

　　//XHTML 1.0：

　　<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "1/DTD/xhtml1-strict.dtd">

　　//HTML5：

　　<!DOCTYPE html>//

　　这种写法会触发浏览器的标准模式。备注：doctype它不是写给浏览器看的,Doctype是写给验证器看的。让验证器按照该doctype来验证我的文档。

　　二、指定文档的.字符编码的写法：

　　代码如下

　　//HTML 4.01：

　　//XHTML 1.0:

　　<?xml version="1.0" encoding="UTF-8" ?>

　　//HTML5:

　　备注：此简短写法，它不仅适用于最新版本的浏览器，只要是今天还有人在用的浏览器都同样有效。

　　HTML5其他简洁写法：

　　代码如下

　　//无需再写type="text/css"，否则那就是重复自己了

　　//无需再写使用的脚本语言 type="text/javascript"

　　HTML5设计原理二：支持已有的内容

　　<p class="foo">Hello world</p>

　　<p class="foo">Hello world

　　<P CLASS="foo">Hello world</p>

　　<p class=foo>Hello world</p>

　　备注：HTML5支持已存在的各种不严谨的写法。

　　在JavaScript，你可以在每条语句末尾加上分号，但不是必需的，因为JavaScript会自动插入分号……JSlint确实是个非常棒的`工具,规范统一JavaScript编码风格，在团队项目非常有用。

　　HTML5设计原理三：解决现实的问题

　　给整块内容(含多个块级元素)加个链接

　　代码如下

　　//HTML 4.01 XHTML 1.0:

　　<h2><a href="/path/to/resource">Headline text</a></h2>

　　<p><a href="/path/to/resource">Paragraph text.</a></p>

　　//HTML5:

　　<h2>Headline text</h2>

　　<p>Paragraph text.</p>

　　备注：这种写法其实早就已经存在于浏览器中了，但以前这样写是不合乎规范的，现在我们把标准改了，允许你这样写了。

　　HTML5设计原理四：求真务实

　　新增语义元素涉及头部(header)、脚部(footer)、分区(section)、文章(article)……

　　代码如下

　　//HTML 4.01 XHTML 1.0:

　　</body>

　　//HTML5:

　　<body>

　　</body>

　　备注：新元素section、article、aside和nav代表了一种新的内容模型，一种HTML中前所未有的内容模型——给内容分区。

　　将新元素作为类的`替代品更有价值，因为这些元素在一个页面中不止可以使用一次，而是可以使用多次，可嵌套使用。

　　其中最为通用的section，可以说是与内容最相关的一个。而article则是一种特殊的section。Aside呢，是一种特殊的section。最后，Nav也是一种特殊的section。

　　代码如下

　　/HTML 4.01 XHTML 1.0:

　　...

　　</p>

　　</p>

　　//HTML5:

　　...

　　</p>

　　备注：在HTML5中，只要你建立一个新的内容块，不管用section、article、aside、nav，还是别的元素，都可以在其中使用H1，而不必担心这个块里的标题在整个页面中应该排在什么级别;H2、H3，都没有问题。

　　HTML5设计原理五：平稳退化

　　渐进增强的另一面就是平稳退化。

　　使用type属性增强表单：

　　代码如下
input type="number"

　　input type="search"

　　input type="range"

　　input type="email"

　　input type="date"

　　input type="url"

　　备注：

　　现有的浏览器无法理解这些新type值的，但在它们看到自己不理解的type值时，会将type的值解释为text。

　　HTML5还为输入元素增加了新的'属性，比如placeholder(占位符)，就是用于在文本框中预先放一些文本。无需JavaScript去实现，太完美了。

　　HTML5视频对Flash视频(video元素)：

　　代码如下 <video>

　　<a href="movie.mp4">download</a>

　　</object>

　　</video>

　　备注：两者要兼顾，无论是HTML5，还是Flash:

　　如果浏览器支持video元素，也支持H264，没什么好说的，用第一个视频。

　　如果浏览器支持video元素，支持Ogg，那么用第二个视频。

　　如果浏览器不支持video元素，那么就要试试Flash影片了。

　　如果浏览器不支持video元素，也不支持Flash，我还给出了下载链接。

　　遵循另一个设计原理，即梅特卡夫定律(Metcalfe’s Law)：

【html5入门设计原理】相关文章：

原理图设计基础简介07-22

英语基础入门05-25

入门须知羽毛球新手入门需知的常识08-28

舞蹈入门要点07-31

梵语入门教程07-02