一、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. glsl boom

    原理: 1.渲染场景到fbo 2.对fbo进行高斯横向,纵向模糊,到新的fbo 3.对两张图进行叠加 模糊后的 效果就这样 给数据加大 <-vertex-> #version varyin ...

  2. u3d加载加密和未加密

    using UnityEngine; using System.Collections; public class loadnew : MonoBehaviour { public bool IsCo ...

  3. 移动端控制在input里输入的值只能是数字

    <input type='text' oninput="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,''); ...

  4. session没保存，登录失败

    今天发现做的项目,登录不上 查了下原因,原来是session没保存上 查看php.ini文件,session.save_path="D:\php\tmp\tmp" 查看了下对应的目 ...

  5. Spring3+mybatis3在多数据源情况下找不到数据库驱动的问题

    解决问题的过程如下: 1.遇到问题和一般的解决方法和下面这个帖子的一样: http://www.oschina.net/question/188964_32305 2.我在按照1的做法配置了以后,依然 ...

  6. Windbg在软件调试中的应用

    Windbg在软件调试中的应用 Windbg是微软提供的一款免费的,专门针对Windows应用程序的调试工具.借助于Windbg, 我们常见的软件问题:软件异常,死锁,内存泄漏等,就可以进行高效的排查 ...

  7. 错误 Unable to find vcvarsall.bat 的终极无敌最完美的解决办法

    Windows 上通过 pip 安装 python 包,经常会出现这种错误. 如:pip install pyodbc. 这种错误的简单明了解释就是:python 编译器找不到计算机上面的 VC 编译 ...

  8. 【jmeter】 jmeter 测试HTTP接口

    到apache官网下载jmeter:http://jmeter.apache.org/download_jmeter.cgi 1.运行 bin/jmeter.bat ,添加线程组 2.添加HTTP请求 ...

  9. Spring踩坑记录

    1. Spring properties配置项不能解析问题 本地部分配置文件迁到disconf,希望disconf的配置文件交由spring托管.这样的话,原有代码中引用配置的地方就不用变(还是用${ ...

  10. 8 -- 深入使用Spring -- 3...2 ResouceLoader 接口和 ResourceLoaderAware 接口

    8.3.2 ResouceLoader 接口和 ResourceLoaderAware 接口 Spring 提供如下两个标志性接口: ⊙ ResourceLoader : 该接口实现类的实例可以获得一 ...