html5遵循的5個設計原則

時間 2019-11-17

標籤 html5 html 遵循設計原則欄目 HTML5 简体版

原文原文鏈接

前面的話

　　實際上，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"

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。