HTML5网站设计,青岛设计公司,青岛网站设计,青岛VI设计,青岛网站建设,山东网站建设

HTML5网站设计

分类：浏览次数：38772 2018-11-26 00:00:00

满意回答

2018-11-26 00:00:00

法国大革命是极端的政治和社会变革时期。这种革命热情也被倾注于对计时系统的改革中。在一段时期内，法兰西共和国引入了十进制计时制，即1天分为10小时，且1小时分为100分钟。该计时制的逻辑性和清晰性明显优于六十进制的计时制。

但十进制的计时制失败了。没有人使用这种计时制度。而XHT ?ML 2的命运与之相似。W3C再次证明了法国大革命的教训：改变现有的行为习惯是非常非常困难的。

QQ截图20180905123710

2.1 设计原则?

为了避免过去所犯的错误，WHATWG起草了一系列设计原则以指导HTML5的开发。其中一项主要原则是“支持已有内容”。这意味着对于HTML5来说，并不存在创立的起始时间。

XHTML 2试图废弃之前的一切。而与之不同的是，HTML5建立在现有规范和实现的基础之上。HTML 4.01的大部分内容在HTML5中都得到了保留。

一些其他的设计原则，例如“不要做重复的工作”和“沿着足迹铺路”的意思是，对于网页设计师来说，如果存在一种普遍的方法来完成某项任务，那么即使它不是最好的方法，也应该被编入HTML5中，也就是说“别去修理没坏的东西”。

涉足过微格式（http://microformats.org）的网页设计师应该十分熟悉这些

设计原则。HTML5社区具有同样的务实方针以实现标准格式的统一，所以无需担心理论问题。

这种态度体现在“最终用户优先”的设计原则中，该原则规定：在发生冲突时，最终用户优先，其次是作者、实现者、标准制定者，最后才是理论上的完满。

伊恩·希克森已经多次表示，浏览器厂商才是HTML5真正的仲裁者。如果浏览器供应商拒绝支持某项协议，那么在规范中添加该协议就变得没有任何意义，因为这会使规范不够切合实际。根据最终用户优先的原则，网页设计师的意见更具有意义。如果网页设计师拒绝使用规范的某些内容，那么规范同样不够切合实际。

2.2 切合现实

持续的内部张力推动了HTML5的创立。一方面，规范需要足够强大，从而有能力支持创建网页应用程序，另一方面，虽然大多数现有内容都处于完全混乱的状态，但是HTML5仍需要支持已有的内容。如果 HTML5的规范在某一个方向上偏离得太远，那么它将重蹈XHTML 2的覆辙。但是，如果它在另一个相反的方向上偏离得太远，那么它就会认为<font>标签和表单是万能的，因为这两者是大量网页建立的基础。

这是一种微妙的平衡，保持这种平衡需要务实且冷静的方法。

2.3 错误处理?

HTML5不仅声明了浏览器应该如何处理规范格式的标记，还首次规范了浏览器该如何处理格式不规范的文件。

浏览器厂商曾不得不独自研究如何处理错误。无论最流行的浏览器做出怎样的尝试，该过程通常都会涉及逆向工程，这会耗费浏览器厂商的时间。与其浪费时间模仿竞争对手处理有缺陷的标记，倒不如尝试实现新功能。

在HTML5中定义错误处理恐怕难以实现。虽然HTML5具有与HTML 4.01完全相同的元素和属性，并且完全没有添加新特性，但在2012年年底之前完成错误处理的定义仍然是徒劳的。

网页设计人员可能对错误处理不大感兴趣，特别是在他们一开始就会编写有效并且格式规范的文件的情况下，但错误处理对于浏览器厂商来说却非常重要。以往的标记规范都是为创作者编写的，而HTML5却是为创作者和实施者编写的。网页设计人员在细读规范时应牢记这一点。这就解释了为什么HTML5规范的内容如此之多，同时也解释了为什么该规范含有一些通常为专家所保留的细节。

2.4 DOCTYPE：形式更简洁

文档类型声明（Document Type Declaration）简称为doctype，一直用于指定文档所编写的标记类型。

这些doctype看起来并不易读，但它们以其独特的方式简单地说明了：“该文档用HTML 4.01编写”或“该文档用XHTML 1.0编写”。

如果doctype声称“该文档用HTML5编写”，那么按道理其中应该会出现数字5。但事实并非如此。HTML5的doctype如下所示：

<!DOCTYPE html>

该doctype是如此之短，甚至可以让人将其背诵下来。

这实在是太不可思议了！如果 doctype中不含有版本号，那么该如何指定其他版本的HTML呢？

第一次看到HTML5的doctype的时候，我认为这是高度傲慢的结果。心想：“难道他们真相信这就是标记规范的最终版了吗？”

然而事实上，HTML5的doctype是非常务实的。由于HTML5需要支持现有内容，所以其doctype可以应用于现有的HTML 4.01文档和XHTML 1.0文档。任何未来版本的HTML也需要支持HTML5中的现有内容，因此应用版本号来标记文档的观念是有缺陷的。

事实上，doctype并不那么重要。假设需要为一个文档提供HTML 4.01的doctype。如果该文档中包含来自另一个规范的元素，如HTML 3.2或HTML5，那么浏览器将仍然呈现该文档的这一部分。这是因为浏览器支持的是特性，而非doctype。

起初，文档类型声明（Document Type Declaration）是为验证器而非为浏览器而设计的。浏览器仅在“doctype转换”的情况下才会关注doctype—“doctype转换”（doctypy switching）是一个聪明的小黑客，它根据是否存在合适的doctype来转换显示模式，即怪异模式（quirks mode）或标准模式（standard mode）。

为了确保浏览器以标准模式显示，至少需要HTML5的doctype。事实上，这是包含doctype的唯一原因。不用HTML5的doctype编写的HTML文档仍然是有效的HTML5。

2.5 保持简洁?

HTML5中简化的不仅仅是doctype。

如果想要指定一个标记文档的字符编码，那么最好的方法就是确保服务器发送了正确的Content-Type文件头（header）。如果想要双倍保险，那么也可以使用<meta>标签来指定字符集。<meta>是一个用 HTML 4.01 编写的文件声明：下面的示例实现了与前一示例在HTML5中所实现的相同功能，但其实现方式更加令人印象深刻：

这种简化了字符编码的doctype ?包含了需要浏览器编译的最少字符数。

另一处可以缩减字符数量的地方是<script>标签。常见的做法是为script元素添加type属性，属性值为“text / javascript”：

浏览器并不需要该属性。它们假定该脚本已用JavaScript编写。JavaScript是最流行的网页脚本语言（实际上，JavaScript也是唯一的一种网络脚本语言）：

下面的示例实现了与前一示例在HTML5中所实现的相同功能，但其实现方式更加令人印象深刻：

这种简化了字符编码的doctype ?包含了需要浏览器编译的最少字符数。

另一处可以缩减字符数量的地方是<script>标签。常见的做法是为script元素添加type属性，属性值为“text / javascript”：

浏览器并不需要该属性。它们假定该脚本已用JavaScript编写。JavaScript是最流行的网页脚本语言（实际上，JavaScript也是唯一的一种网络脚本语言）：

2.6 语法：以自己的方式进行标记

一些编程语言，如Python，以其特殊的方式编写说明。使用空格来缩进代码是强制性的，空格很重要。而其他编程语言，如JavaScript，却不在格式方面作任何要求，每一行开头是否空格并不那么重要。

如果与一些程序员同处一室并说出“重要的空格”之类的话，那么就会导致一整晚不断升温的激烈辩论。

关于空格重要性的辩论核心存在一个基本的哲学问题：汇编语言应该保持特定的汇编风格，还是编写者可以按自己喜欢的风格编写？

标记并不需要空格。如果想要在每次嵌套元素时都添加新的一行和缩进，则需

要添加空格，但浏览器和校验器并不需要空格。这并不意味着标记对所有情况都适用。有些种类的标记遵循更为严格的编写风格。

在XHTML 1.0之前，使用大写还是小写来编写标签并不重要。是否引用属性也同样不那么重要。甚至对于某些元素来说，是否包含结束标记都不会造成任何影响。

XHTML 1.0强制执行XML的语法：所有标签都必须为小写，所有属性都必须加引号，所有元素都必须包含有结束标记。对于独立元素的特殊情况，例如br，以标记结束替换为以斜线<br />结束。

如果使用HTML5，那么任何格式的命令都可以，无论是大写、小写、带引号的、不带引号的、带有结束符号的和不带有结束符号的，使用哪种格式完全取决于程序员。

多年来，我一直在使用XHTML 1.0的doctype。这是因为我喜欢按照一种特定的样式编写程序，从而也比较喜欢W3C验证对固定样式的强制要求。现在，我正在使用的是HTML5，所以执行哪种编写样式可以由自己决定。

我可以理解为什么有些人不喜欢HTML5语法的随意性，因为这似乎是从最佳范例向后的退步。有些人甚至会说，HTML5对语法的宽松限制会导致不良标记。虽然我并不这样认为，但可以理解为什么这会成为一个备受关注的问题。因为这就好像是一种强制使用空格的汇编语言突然在编程原则上变得宽容起来。

就个人而言，我可以接受HTML5语法的随意性。但与此同时，我也强迫自己使用个人青睐的编写风格。不过，我更希望见到更多的、可以以一种特定风格测试标记的工具。在编程界，这些工具被称为lint工具，即标记可疑编码范例的程序。验证器检查的是doctype，而用于标记的lint工具却与之不同；这两者若可以结合为一种精益且介于两者之间的lint验证设备，那将会更好。

完成这样设备的网页设计师将会获得来自世界各地的人们永久的尊重和敬佩。

2.7 我们不使用这种语言?

对于旧版本的HTML，从规范中移除先前存在的元素或属性的过程被称为废弃。网页设计师不应该使用、回顾甚至提及已废弃的元素。

HTML5中不含有被废弃的元素或属性，但却有大量过时的元素和属性。

“过时”与“废弃”在含义上有着微妙的区别。

由于HTML5的目的是向后兼容已有内容，因此其规范必须承认先前存在的元素，即使这些元素已不包含在HTML5中。这将使情况变得略显混乱，因为其规范还声称“编写人员请不要使用该元素”以及“浏览器应该以此方式呈现该元素”。如果一个元素被废弃，那么它不应在规范中被提到；但是由于该元素是过时的，为了照顾浏览器，它也被包含进来了。

除非正在开发一款浏览器，否则可以用对待废弃元素和属性的方式来对待过时的元素和属性，即不要在网页中使用它们。

如果坚持使用过时的元素或属性，那么文件将变得“不符合要求”。浏览器将执行一切行得通的程序，但其他网站可能会对此表示不满。

过时的元素

frame、frameset和noframes元素都已经过时了。没有人会怀念它们。acronym元素也已经过时了，因此导致了多年的讨论，这些时间本可以被用在更有意义的事情上。不要为acronym元素感到惋惜，使用abbr元素来代替它就可以了。首字母缩写（acronym）和缩写（abbreviation）的确有所不同—首字母缩写作为一个词发音，例如NATO和SCUBA，但请记住，所有的首字母缩写都属于缩写，但并不是所有的缩写都是首字母缩写。

HTML5中的显示元素，如font、big、center和strike都已经过时了。实际上，它们在多年前就已经过时了。而使用CSS属性，如font-size和text-align，则更容易获得相同的显示效果。同样，显示元素的属性，如bgcolor、cellspacing、cellpadding和valign也都已经过时了,使用CSS来代替这些属性就可以了。

并非所有的显示元素都已经过时，它们中的一些元素经过修改，已经被重新利用起来。

2.8 转变（CH-CH变化）

元素big已经过时了，但元素small却还没有。通过重新定义small的含义，这种显著的矛盾已经得到解决。small的含义不再是其字面意义，即“在小号字体下进行显示”。相反，其语义值变为法律术语、条款或附属细则以小号字体显示。

当然，十有八九，开发人员会以小号字体显示附属细则，但重点是该元素的字面意义已被取代。

元素b曾表示“用粗体显示”。现在，它被用来将一些文本“偏离正常的样式而不具有任何额外的重要性”。如果文本具有额外的重要性，那么使用该元素则更为合适。

元素i也不再意味着“倾斜”。它表示文本中“另一种的语气或情绪”。同样，该元素也不表达任何重要性或重点。如果需要强调，则要使用em元素。

这些变化听起来可能像是文字游戏。它们的确是文字游戏，但它们也有利于增强HTML5的设备独立性。如果仔细考虑“加粗”和“倾斜”，那么它们仅在视觉媒介（如屏幕或页面）中才能解释得通。通过消除这些元素定义中的视觉偏差，HTML5的规范可与非可视化用户代理（如屏幕阅读器）保持相关。这样做可以避免设计师的思维被禁锢在视觉显示环境之内。

2.8.1 cite元素

HTML5对cite元素进行了重新定义。cite元素原来表示的是“对其他参考资料的引用”，但它现在的意思是“一部作品的标题”。通常，被引用的参考为作品的标题，例如一本书或一部电影，但其根源很可能是一个人。在HTML5之前，可以使用cite来标记这个人的名字。但现在，这种做法被明令禁止—关于向后兼容性仅仅讨论这么多。

对于这种修正的理由是：浏览器将<cite>标签之间的文本格式更改为斜体；作品的标题通常是斜体的；人名通常不是斜体。因此，cite元素不应该被用于标记人名。

但这是完全错误的。我赞成HTML5向浏览器学习，但这种情况属于主次颠倒。

幸运的是，验证器无法分辨起始<cite>标签和结束</cite>标签之间的文本是否是指向人的，所以没有什么能阻止网页设计师用一种合理的、向下兼容的方式来使用cite元素。

2.8.2 增强型a元素

先前已有元素的变化仅仅是创造性的文字游戏，但HTML5对一个元素进行了更为有效的改造。

毫无疑问，a元素是HTML中最重要的元素。该元素将文本转换成超文本，相

当于万维网的结缔组织。

a元素是一个内嵌元素。如果想要将一个标题或一个段落转化为超链接，则需使用多个a元素：

[代码]

在HTML5中，可以将多个元素封装在一个a元素中：

[代码]

唯一需要注意的是，不可以将一个a元素嵌套在另一个a元素中。

将多个元素包装在一个元素中，这看起来似乎是一个巨大的变化。而且，要想支持这种新的链接模式，大多数浏览器并不需要做很多工作。虽然这种标记直到现在才成为合法的，但大多数浏览器已经支持了这种新的模式。

这似乎有些违背常理：浏览器应该理所当然地执行已有的规范吗？事实上正相反，是最新的规范正在记录浏览器所执行的操作。

2.9 闪亮的新工具：JavaScript API

如果想要获取关于CSS的文档，需要查阅CSS规范。如果寻找的是有关标记的文档，需要查阅HTML规范。但是，哪里可以查阅JavaScript API的文档，例如document.write、innerHTML和window.hitory？JavaScript规范所涉及的全部是编程语言，因此无法获得任何与浏览器API有关的内容。

到现在为止，浏览器一直独立创建和执行JavaScript API并相互借鉴。HTML5对这些API的记录是一劳永逸的，因为这可以确保较好的兼容性。

在标记规范中包含JavaScript规范听起来可能有些奇怪，但要记住，HTML5是由Web Apps 1.0发展而来的。JavaScript是制作Web应用过程中不可缺少的一部分。

HTML5规范中的所有章节都致力于创建Web应用的新API，其中包含一个Undo-Manager——它使得浏览器能够跟踪文档变更。该规范中有一节介绍了如何使用缓存清单来创建离线Web应用。另外，该规范对拖放功能也进行了详细描述。

与往常一样，如果存在已有的实现，那么规范将在其基础上建立，而非将一切推倒重来。微软的IE浏览器在很多年前就已经包含了拖放API，这也是HTML5拖放

的基础。遗憾的是，微软的API是有问题的。如果以前的基础并不适用，那么重新开始也不见得是坏主意。

HTML5中的API十分强大。它们完全超出了我的能力范畴，所以我将这些内容留给更优秀的开发人员来编写。这些API值得用一本单独的书来介绍。

与此同时，对于网页设计师来说，HTML5中仍存在许多新鲜事物。这些内容将在下一章进行说明。

标签：