html5遵循的5个设计原则

时间 2019-11-17 标签 html5 html 5 遵循 5 设计原则

前面的话

　　实际上，html5并非由w3c直接制定的，w3c的方向是xhtml2，而不是html5。当xhtml2脱离现实，没法付诸实践时，w3c工做组才将研究方向转向html5。为何xhtml2从未落到实处？由于它违反了一条设计原理，这条设计原理就是著名的伯斯塔尔法则——发送时要保守；接收时要开放。而在html5设计过程当中遵循了一系列原则，才使得html5得以快速推广。本文将介绍html5遵循的5个设计原则html

避免没必要要的复杂性

　　html4html5

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

　　html5浏览器

<!DOCTYPE html>

　　html4ide

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

　　html5ui

<meta charset="utf-8">

支持已有内容

　　如下四段代码，在xhtml中只有第一段是正确的；而在html5中，全部的都是正确的url

<img src="foo" alt="bar" />
<p class="foo">Hello world</p>
 
<img src="foo" alt="bar">
<p class="foo">Hello world
 
<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello world</P>
 
<img src=foo alt=bar>
<p class=foo>Hello world</p>

解决现实的问题

　　在html4中，即便两个块级元素元素有相同的连接地址，也必须分开写，由于内联元素不能包含块级元素spa

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

　　而在html5中，因为使用了内容模型，<a>元素也能够包含块级元素设计

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

内容模型

　　html5新增了多个元素，其中包括：section、article、aside和nav，它们表明了一种新的内容模型——给内容分区。之前人们一直都在用div来组织页面中的内容，但与其余相似的元素同样，div自己并无语义。但section、article、aside和nav其实是在明确地告诉你——这一块就像文档中的另外一个文档同样。位于这些元素中的任何内容，均可以拥有本身的概要、标题，本身的脚部。code

平稳退化

　　浏览器在遇到不识别的type值时，会将type的值解释为texthtm

input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"