一、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 studio ndk开发流程

    先使用android stuido创建一个app工程,创建工程的时候,.gradle目录结构下为2.8目录.(note:2.10目录为后续更新结果出现.) 依次修改上述红色方框标注部分内容: 1)修改 ...

  2. Ubuntu+Eclipse+SVN 版本控制配置笔记

    第一步:先更新系统内部软件包缓存(预防出错) #  sudo dpkg --clear-avail #  sudo apt-get update 第二步:安装Eclipse的SVN接口组件“javaH ...

  3. MySQL5.6主从复制搭建基于日志（binlog）

    什么是MySQL主从复制 简单来说,就是保证主SQL(Master)和从SQL(Slave)的数据是一致性的,向Master插入数据后,Slave会自动从Master把修改的数据同步过来(有一定的延迟 ...

  4. mothur reverse.seqs 将序列反向互补

    reverse.seqs 命令可以得到输入序列的反向互补序列 用法: mothur "#reverse.seqs(fasta = "input.fasta")" ...

  5. Ubuntu 安装IntelliJ IDEA

    1. 下载IDEA    官网地中:http://www.jetbrains.com/idea/download/index.html    选择对应操作系统的版本.下载后,我的文件名称为: idea ...

  6. Sql Server查询视图和表

    SELECT obj.name tablename, CAST ( CASE WHEN (SELECT COUNT() FROM sys.indexes WHERE object_id= obj.OB ...

  7. css 边框使用

    https://www.cnblogs.com/luka/p/5677241.html 1. 应用边框样式 先从控制边框样式的属性开始.简单边框有三个关键属性:border-width.border- ...

  8. EasyUI的功能树之扁平化

    上篇博客主要介绍了异步加载树的方法,通过前台传给后台一个节点的id值,然后当单击节点加号时,查询并显示其子节点的数据.其实如果不是很大的数据,我们本可以次把树中所有节点都加载上来的.也就是说,我的Ac ...

  9. Ubuntu14.04 安装git

    通过ubuntu的APT安装 sudo apt-get update sudo apt-get install git 配置自己的Git账号信息 git config --global user.na ...

  10. CorelDRAW中如何复制对象属性详解

    复制对象属性是一种比较特殊.重要的复制方法,它可以方便而快捷地将指定对象中的轮廓笔.轮廓色.填充和文本属性通过复制的方法应用到所选对象中.本教程将详解CorelDRAW中如何复制对象属性. Corel ...