Web前端开发最佳实践(第3、4和5章)——HTML最佳实践

以下内容大部分摘自《Web前端最佳实践》

第3章

3.1标准页面的优势

标准的页面会保证浏览器正确地渲染
网页能够更容易被搜索引擎搜寻，提高网站啊的搜索排名
提高网站啊的易用性
网页更好维护和扩展

验证页面代码有2个工具：

W3 Validator，提供了URL、文件上传和直接输入代码三种验证方式；
HTML Validator，Firefox浏览器的一个插件，查看页面的同时验证页面，还可以自动纠正和美华代码。

3.2标准的HTML页面结构

为了使得HTML文档能兼容标准格式，还需要给文档添加一个文档类型申明（DTD），浏览器解析HTML文档的时候用。

HTML4：

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

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

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

HTML5:

　　　　<!DOCTYPE html>

　　head部分还包含文档的标题和一些必要的meta标签。

　　3.3停止使用不标准的标签和属性，简化ＨＴＭＬ代码

有些标签和属性不被推荐的原因如下：
标签没有实际的语义，仅仅用于设置样式，如font, basefont,center， iframe、img、input、div等标签的align属性，也不推荐blink和marquee标签（推荐用JQuery Marquee插件）替代
让HTML标签具有更好的语义，不推荐使用<b>和<i>，推荐更具有语义的<strong>和<em>，不推荐使用<s>和<strike>，推荐使用<del>和<ins>
移除不常用的HTML标签，如acronym、applet等

　　3.4样式与结构的分离

HTML中链接一个CSS文件，<link rel="stylesheet" href="test.css" />，这是最佳实践模式
HTML页面中内嵌CSS样式，<style> ... </style>，不利于样式的重用和多人维护，其优点是减少加载CSS文件的请求此书，加快页面的加载速度；好的实践是，开发阶段HTML和css分离，发布时合并在一起
HTML标签中添加内联CSS样式，<span style="...">green</span>
css演示文件中加载css样式文件，#import "mystyle.css"或@import url("mystyle.css")

　3.5添加js禁用的提示信息

最常用的方式是使用<noscript>标签：<noscript> <p>浏览器不支持JS</p> </noscript>
W3C不建议使用noscript，一是noscript只迟滞HTML不支持XHTML；被禁用的时候才起作用，而当因防火墙拦截等情况而不能使用时，不会起作用；不能解决js不可用时网站的可用性问题
页面渐进增加方式，当js可用时，用js处理某段逻辑，当js不可用时，提交到服务端处理某段逻辑，比较少用
最佳实践是，提示用户js已被禁用，并同时提供一个功能简单且不依赖js的代替网站，做到平稳降级，百度首页就是这样做的：

　3.6添加必要的<meta>标签

　　　　<meta>标签有四个属性：name、http-equiv、content和charset：

name用来表述页面文档的元信息

http-equiv用来设置http请求指令，有content-type、default-style和refresh三种已经确定的

charset用来设置字符编码

自定义meta类型，由互联网公司或浏览器厂商注册并实现的，如

　　　　i.设置IE兼容模式：<meta http-equiv="X-UA-Compatible" content="IE=8" />

　　　　　　百度首页就用到<meta http-equiv="X-UA-Compatible" content="chrome=1" />，这句话的意思是，IE9及以下的激活ChromeFrame。

　　　　ii.一般针对移动设备优化：<meta name="viewport" content="width=device-width , initial-scale=1, maximum-scale=1" />

　　　　iii.设置IE的“固定网站”功能：<meta name="msapplication-task" content="....." />

第4章

　　4.1HTML语义化

　　　　语义化的页面就是去掉CSS样式后页面仍能保持良好的外观，并且可以正常阅读。高语义化的页面就是在页面代码中尽量使用合适的语义化标签。

　　　　这里有4条原则：

熟悉所有规范中的HTML标签，理解其语义，合适的地方选择合适的标签，不建议随意使用<div>和<span>这种没有语义的标签，HTML新添加啊了额很多语义化标签，如<header>, <footer>, <article>,<nav>,<section>,<aside>等
熟悉各标签上规范的属性，给HTML标签设置必要的属性

样式和结构分离，出了前面提到的css和HTML分离，还有进一步，把HTML代码中用于表达外观的部分从HTML中删除，并改用CSS样式实现，简洁的html代码让语义更加明确，如用伪元素或伪类来实现去浮动效果，见《css清除浮动的一些做法》
给空标签中添加隐藏的文字，并把文字隐藏起来，用于说明标签的实际功能，一般可通过设置text-ident为负数来达到隐藏文字的目的。

　　4.2精简HTML代码

删除多余的容器，尽量使用更有语义化的标签

　　　　　　　　</div>

　　　　　　可以精简为：

　　　　　　</div>　　　　　　

装饰性的元素使用CSS样式实现

　　　　页面的html代码中，一些元素仅仅起到了装饰作用，知是为了满足外观设计，并没有任何的语义。这类代码应尽量使用css样式实现，做到结构和外观的分离。

　　　　如为了实现下图效果，不严谨的代码可以这样写：<a id="xx">lzx1<img src="down-arrow.png" /> </a>

　　　　因为图中的向下箭头不属于内容的一部分，所以应该通过设置css样式实现，代码如下：

　　　　<style>

　　　　　　.xx {

　　　　　　　　background: url(down-arrow.png) no-repeat 420px, -20px

　　　　　　}

　　　　</style>

　　　　另外还可以使用before和after伪元素，Bootstrap就是利用这两个伪元素实现下拉菜单的箭头的:

p:before
{
　　position:absolute;
　　top:-7px;
　　left:9px;
　　display:inline-block;
　　border-right:70px solid transparent;
　　border-top:70px solid purple;
　　border-left: 70px solid transparent;
　　border-bottom-color:rgba(0,0,0,0.2);
　　content:"";
}

避免使用table布局：高度语义化的HTML页面中，基本不会使用table布局的，table要求更多标签，很小的改动会导致table整个内容重绘或重排
HTML5为了消除块状元素和行内元素这两个概念引起的混淆，在规范中刻意淡化了两者的定义，并按照元素具体的语义重新划分了元素的类型。

第5章

　　 5.1定义文档类型声明简化，见3.2标准的HTML页面结构

　　5.2link和script标签引入css和JavaScript文件时，可以省略type

　　5.3HTML4中有defer，HTML5中有async，两者区别在于，属性defer是让脚本后置加载，相当于把脚本放置于页面最后加载和执行，属性async是让叫been异步加载和执行，不保证脚本按照顺序加载和执行。

　　5.4<base>标签的target属性，指定了<a>标签的默认窗口

　　5.5input和textarea新增placeholder、required和autofocus属性

　　5.6标签上的自定义属性，如data-length，对应的api为dataset，用法如**.dataset['length'] = 'xx';

　　5.7<i>, <b>新增语义为“强调”

　　5.8<script>标签除了可以包含脚本代码外，还可以包含用户自定义的数据库，如html模板、xml数据等，获取字段数据也很简单:

　　　　var parser = new DOMParser();

　　　　var doc = parser.parseFromString(document.getLElementById("xx", "application.xml">

5.9HTML5兼容问题

　　　　浏览器若不识别新标签，可以通过createElement方法创建；或者使用成熟框架，如html5shim框架

　　　　html5中新特性的向后兼容，Modernizr可以用来检测新特性，具有较高的准确率和使用率。

　　　　音频和视频的兼容，音频audio最佳方式是提供MP3和Ogg_Vorbis格式，视频最佳方式是提供WebMail和MP4格式：

　　　　　　向后兼容示例：

　　　　　　</video>

posted on 2017-07-02 01:43 邹天得阅读(190) 评论(0) 收藏举报

刷新页面返回顶部