一、HTML语义化

HTML5中增加了很多标签都是基于此类原则设计的（article   nav  header  footer）。页面标签语义化的优点是使得搜索引擎以及第三方抓包工具等更容易读懂页面代码、提高可读性。

如果图片是作为网页内容的一部分，则应该使用<img>元素，如果图片仅仅是起装饰作用，则应该使用背景图方式。

给空标签添加隐藏文字，用于说明表情帝额实际功能（使用text-indent达到隐藏文字的目的）。

在页面内容的标题部分使用<hx>标签。

页面中只使用一个<h1>标签。

<hx>标签使用过程中不要跳级。

不要只使用<hx>标签给内容设置样式。

二、如何正确设计表单

<label>用于为输入控件定义文本标签-----即显示在输入控件旁边的说明性文字。

用<label>元素定义的文本标签，从显示上看与其他文本毫无差异，不过它为鼠标用户增强了可用性：当用户点击由<label>元素定义的文本标签时，与该文本标签关联的输入控件将获得焦点。

要为<label>指定关联的输入控件，只需要把相关控件的id赋值给<label>标签的for属性。

使用<fieldset>元素给表单控件分组。

如果有必要，为输入控件设置tab顺序。

一个好的表单设计，还应该包括漂亮的外观、更好的交互体验和更安全的信息提交方式这些要依靠CSS样式、Javascript脚本以及逻辑的配合。

三、精简HTML代码

删除多余的容器。

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

避免使用table布局。不要使用HTML5中已废弃的标签和属性。

Modernizr框架的原理是自动检测浏览器是否支持新特性，并在<html>标签中添加对应的类，如果浏览器支持某个特性，则会添加一个以特性名称命名的类，反之则添加一个"no-"为前缀加上特性的名称的类。

【WEB前端开发最佳实践系列】高可读的HTML的更多相关文章

  1. Web前端开发最佳实践系列文章汇总

    Web前端开发最佳实践(1):前端开发概述 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(4):在页面中添加必要的met ...

  2. 【Web前端开发最佳实践系列】前端代码推荐和建议

    一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...

  3. 【WEB前端开发最佳实践系列】JavaScript篇

    一.养成良好的编码习惯,提高可维护性 1.避免定义全局变量和函数,解决全局变量而导致的代码“污染”最简单的额方法就是把变量和方法封装在一个变量对象上,使其变成对象的属性: var myCurrentA ...

  4. 【WEB前端开发最佳实践系列】CSS篇

    一.有效组织CSS代码 规划组织CSS代码:组织CSS代码文件,所有的CSS都可以分为2类,通用类和业务类.代码的组织应该把通用类和业务类的代码放在不同的目录中. 模块内部的另一样式规则:样式声明的顺 ...

  5. 【Web前端开发最佳实践系列】标准的HTML代码

    一.验证代码是否符合标准 优点: 标准的页面会保证浏览器正确的渲染 网页能更容易被搜索引擎搜索,提高网站的搜索排名 提高网站的易用性 网页更好维护和扩展 常用工具: W3 Validator HTML ...

  6. Web前端开发最佳实践（1）：前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  7. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

  8. Web前端开发最佳实践（7）：使用合理的技术方案来构建小图标

    大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实 ...

  9. Web前端开发最佳实践（5）：正确闭合HTML标签，停止使用不标准的标签和属性

    正确闭合HTML标签 HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性.元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元 ...

随机推荐

  1. Android Handler机制 (一个Thead中可以建立多个Hander，通过msg.target保证MessageQueue中的每个msg交由发送message的handler进行处理 ，但是 每个线程中最多只有一个Looper，肯定也就一个MessageQuque)

    转载自http://blog.csdn.net/stonecao/article/details/6417364 在android中提供了一种异步回调机制Handler,使用它,我们可以在完成一个很长 ...

  2. Volley的Get、Post方式（JsonObjectRequest、StringRequest）以及Volley获取图片的3种方式

    activity_main.xml 里面什么也没有 AndroidManifest.xml(重点是android:name="com.example.volley.MyApplication ...

  3. git默认忽略文件的大小写

  4. #define中的特殊符号

    (关于#define的用法,看这里 http://www.cppblog.com/kenny/archive/2011/04/26/145087.html) #define Conn(x,y) x## ...

  5. jquery datepicker只显示年和月

    <html xmlns="http://www.w3.org/1999/xhtml"> <head >     <title></titl ...

  6. 使用 CGContextRef 进行简单内容绘制

    摘要 : CGContextRef 功能强大,我们借助它可以画各种图形.这里所举例子只是简单内容绘制,冰山一角,对此感兴趣的朋友可以举一反三,实现各种酷炫效果. 效果如下: KMDrawView.h ...

  7. curl教程2

    上篇介绍了curl的基本用法和简单例子,这篇有包含下载,上传,断点续传等的技巧,一并也mark一下吧. 原文:http://blog.csdn.net/apoxlo/article/details/2 ...

  8. 【VirtualBox】ubuntu虚拟机与windows设置共享文件夹

    第一步:配置 http://blog.csdn.net/a962804835/article/details/72820355 第二步:解决ubuntu下共享文件夹无访问权限的问题 http://bl ...

  9. nodejs的__dirname与__filename

    __filename变量获取当前模块文件的带有完整绝对路径的文件名:[包含文件名本身的绝对路径] __dirname变量获得当前文件所在目录的完整目录名.[不包含文件名本身的绝对路径] 该方法用于获取 ...

  10. json字符串使用注意问题

    json本身是字符串,即 json字符串 js使用 要把 json字符串 转为  javascript对象 json字符串转为js对象的方法:jquery的parseJSON var str='[{& ...