一、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. [SQL Server] 复制数据库任务

    假设你要生产环境下的数据做相应的测试,比如修改及测试存储过程.更改和优化索引等.但是你用户在连接数据库的情况下,你又不能断开数据库的连接.如何取得数据库的副本呢? 一.  利用数据库任务中的复制数据库 ...

  2. python2除法保留小数部分

    转载:http://www.cnblogs.com/yhleng/p/9223944.html 1.python2和python3除法的最大区别: python2: print 500/1000 py ...

  3. [ROM]HTC ThunderBolt 4.0.4 刷机教程

    Z大原帖:http://www.in189.com/thread-754076-1-1.html 精简版:http://www.in189.com/thread-807796-1-1.html 下载地 ...

  4. 限制 Text Field 输入的内容类型：只允许输入数字

    效果如下: ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController< ...

  5. mysql查询某个库的表个数

    SELECT COUNT(1) FROM information_schema.tables WHERE table_schema = 'leleli'; --解释:数据库名叫“leleli”

  6. Python集成开发环境PyCharm调试

    Run/Debug配置: 设置断点:在行号后单击(再单击取消) 启动调试:Shift+F9 单步执行:F8 进入函数:F7 跳出函数:Shift+F8 运行到下一个断点:F9 调试中查看: 退出调试: ...

  7. cesium导入3D模型（obj转gltf）

    cesium中支持载入3D模型,不过只支持gltf格式.gltf是khronos组织(起草OpenGL标准的那家)定义的一种交换格式,用于互联网或移动设备上展现3d内容,充分支持opengl,webg ...

  8. 字符编码笔记：ASCII，Unicode 和 UTF-8

    http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html

  9. MAC下Android的Eclipse开发环境的搭建 转自MacroCheng

    原文地址:  http://www.cnblogs.com/macro-cheng/archive/2011/09/30/android-001.html 一．Eclipse的下载 到网站:http: ...

  10. 常用CSS备忘

    1 怎样让div中的img居中 水平居中:div设置:text-align:center; img设置:width:图片宽度; margin:0 auto; 垂直居中:div设置:position:r ...