HTML语义化

意义:根据内容的结构化(语义化),选择合适的标签,便于开发者阅读和写出更优雅的代码,同时让流浪器的爬虫和机器更好的解析。

  • 尽可能少的使用无语义的标签 div 和 span
  • 在语义不明显时,既可以使用 div 或者 p 时,尽量用 p ,因为在默认情况下 p 有上下间距,对兼容特殊终端有利
  • 不要使用纯样式标签,如:b, font, u 等,应该用css 设置样式
  • 需要强调的文本,可以包含在 strong 或者 em 中
  • 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td
  • 表单域要用fieldset标签包起来,并用legend标签说明表单的用途
  • 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来

在使用标签之后,老的IE浏览器怎么办呢?

引入 html5shiv.js

github地址: https://github.com/afarkas/html5shiv

作者博客:https://www.paulirish.com/2011/the-history-of-the-html5-shiv/

官方下载地址: https://github.com/aFarkas/html5shiv/releases

bower 下载方法:

bower install html5shiv --save-dev

使用方法:

<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

使用新标签兼容低版本IE的更多相关文章

  1. html5标签兼容低版本浏览器

    随着html5(后面用h5代表)标签越来越广泛的使用,IE不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:block属性,就能让这个元 ...

  2. 兼容低版本IE浏览器的一些心得体会(持续更新)

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  3. [转]AppCompat 22.1,Goole暴走,MD全面兼容低版本

    AppCompat 22.1,Goole暴走,MD全面兼容低版本 分类: Android2015-04-24 09:48 1354人阅读 评论(0) 收藏 举报 android   目录(?)[+] ...

  4. fragment基础 fragment生命周期 兼容低版本

    fragment入门 ① 创建一个类继承Fragment 重写oncreateView方法 public class FirstFragment extends Fragment { @Overrid ...

  5. android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下,另行实现圆形scale动画

    ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...

  6. 模拟实现兼容低版本IE浏览器的原生bind()函数功能

    模拟实现兼容低版本IE浏览器的原生bind()函数功能: 代码如下: if(!Function.prototype.bind){   Function.prototype.bind=function( ...

  7. Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案

    Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...

  8. Fundebug前端JavaScript插件更新至1.8.0,兼容低版本的Android浏览器

    摘要: 兼容低版本Android浏览器,请大家及时更新. Fundebug前端BUG监控服务 Fundebug是专业的程序BUG监控平台,我们JavaScript插件可以提供全方位的BUG监控,可以帮 ...

  9. 兼容低版本JS的Array.map方法

    前几天去别的公司面试遇到个这样的问题,兼容IE7下的Array.map方法,一脸蒙蔽.后面回来查了下资料发现.Array.map方法是ECMA-262 标准中新添加的方法,在低版本的JS中是木有的. ...

随机推荐

  1. Speak Confident English

      I hope you don'd mind me asking...   I know I shouldn't ask, but.... - Well, before I answer that ...

  2. C# 实现邮件收取发送功能

    .Net调用QQ邮箱发送邮件   话说网上发送邮件的代码很多,但是我由于不细心,导致拿别人的代码发送邮件老是失败,今天就说说几个要注意的地方吧!!! ? 1 2 3 4 5 6 7 8 9 10 11 ...

  3. 美国FLAG和中国BAT的比较(王益)

    美国FLAG和中国BAT的比较(王益) http://cxwangyi.github.io/notes/2014-09-29-flag-vs-bat.html 知乎 http://www.zhihu. ...

  4. android ------- 开发者的 RxJava 详解

    在正文开始之前的最后,放上 GitHub 链接和引入依赖的 gradle 代码: Github: https://github.com/ReactiveX/RxJava https://github. ...

  5. 数据结构与算法之PHP排序算法(希尔排序)

    一.基本思想 希尔排序算法是希尔排序,也称递减增量排序算法,是插入排序的一种更高效的改进版本. 该方法的基本思想是:先将整个待排元素序列分割成若干个子序列(由相隔某个“增量”的元素组成的)分别进行直接 ...

  6. 数据结构与算法之PHP排序算法(归并排序)

    一.基本思想 归并排序算法是将两个(或两个以上)有序表合并成一个新的有序表,即把待排序序列分为若干个子序列,使每个子序列有序,再将已有序的子序列合并,得到完全有序的序列.该算法是采用分治法(Divid ...

  7. vue-router进阶-3-过渡动效

    template: <transition> <router-view></router-view> </transition> 单个路由的过渡 con ...

  8. Vuejs的$watch实现原理

    大概原理如下面代码所示: class Vue { //Vue对象 constructor (options) { this.$options=options; let data = this._dat ...

  9. eclipse工具类及插件(修改eclipse.ini文件及作者名字)

    https://jingyan.baidu.com/album/9158e0005633c0a254122807.html?picindex=1 (修改eclipse.ini文件及作者名字) http ...

  10. 面向对象编程其实很简单--python面向对象(初级篇)

    出处:http://www.cnblogs.com/wupeiqi/ 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函 ...