一、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. (转)最简单的基于FFmpeg的内存读写的例子：内存播放器

    ffmpeg内存播放解码 目录(?)[+] ===================================================== 最简单的基于FFmpeg的内存读写的例子系列文章 ...

  2. ubuntu 安装 SVN 后的错误：Subversion Native Library Not Available & Incompatible JavaHL library loaded

    问题一 安装了SVN的eclipse插件,使用的时候就会弹出一个错误的提示框:  Subversion Native Library Not Available,加载不到JavaHL.   解决方法 ...

  3. memcached系列之二

    存储命令 1.set命令 语法: set key flags exptime bytes [noreply] value 参数说明: key: flags: exptime: bytes: norep ...

  4. uva 548 Tree（通过后序，先序重建树+dfs）

    难点就是重建树,指针參数的传递今天又看了看.应该是曾经没全然弄懂.昨天真没效率,还是不太专心啊.以后一定得慢慢看.不能急躁,保持寻常心,. 分析: 通过兴许序列和中序序列重建树,用到了结构体指针.以及 ...

  5. (asp)JScript读写、复制、移动文件 asp也就那回事（4）

    百度博客http://hi.baidu.com/sdink/blog/ 和QQ空间同时更新http://516649425.qzone.qq.com <" CODEPAGE=" ...

  6. 微信小程序使用阿里图标

    微信小程序不支持外联阿里图标,必须下载放入小程序的本地文件中. 步骤一:下载项目图标 步骤二:转换iconfont.ttf文件(小程序的wxss文件的font-face的url不接受http地址作为参 ...

  7. Java编程思想学习笔记——字符串

    前言 字符串操作是计算机程序设计中最常见的行为. 不可变String String对象是不可变的 重载"+"与StringBuilder String对象是不可变的,可以给Stri ...

  8. Android四大组件之——Activity的开启：StartActivity()和StartActivityForResult()（图文详解）

                如需转载请在文章开头处注明本博客网址:http://www.cnblogs.com/JohnTsai       联系方式:JohnTsai.Work@gmail.com   ...

  9. [转]好文章：Android的AlertDialog详解

    refer:http://www.2cto.com/kf/201205/131876.html AlertDialog的构造方法全部是Protected的,所以不能直接通过new一个AlertDial ...

  10. sublime text--你所不知道的12个秘密

    转自:http://blog.csdn.net/laokdidiao/article/details/51429404 package control安装: 第一种方法是在控制台中复制粘贴代码按回车, ...