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. swagger2的接口文档

    以前见过一个swagger2的接口文档,特别好用,好看,对接口中入参描述的很详细:适合用于项目的开发 后来自己做项目的时候,没有找到这个swagger版本 <dependency> < ...

  2. R多行交叉作图

    #中文 UTF-8编码   3.4.0library(Hmisc)mydata = read.table('clipboard',header = T)head(mydata)mycol=c(rgb( ...

  3. RabbitMq(6) 如何保证消息不丢包

    RabbitMQ一般情况很少丢失,但是不能排除意外,为了保证我们自己系统高可用,我们必须作出更好完善措施,保证系统的稳定性. 下面来介绍下,如何保证消息的绝对不丢失的问题,下面分享的绝对干货,都是在知 ...

  4. 缺陷管理工具Jira安装参考

      1安装简介 1.1方案/流程简介 需要依赖安装数据库,可以是mysql,orace或sqlserver.以mysql为例说明. 各模块各阶段安装任务说明如下: 安装模块 说明 jira 项目与事务 ...

  5. spark中的combineByKey函数的用法

    一.函数的源码 /** * Simplified version of combineByKeyWithClassTag that hash-partitions the resulting RDD ...

  6. 为什么会出现container/injection的思想?

    1.容器的历史 容器概念始于 1979 年提出的 UNIX chroot,它是一个 UNIX 操作系统的系统调用,将一个进程及其子进程的根目录改变到文件系统中的一个新位置,让这些进程只能访问到这个新的 ...

  7. python----集合用法总结

    集合也是一种数据类型,一个类似列表东西,它的特点是无序的,不重复的,也就是说集合中是没有重复的数据集合的作用:1.它可以把一个列表中重复的数据去掉,而不需要你再写判断2.可以做关系测试,比如说有两个班 ...

  8. 菜鸟webpack教程纠错

    gei事例: http://www.runoob.com/w3cnote/webpack-tutorial.html 本次的问题主要是在loader部分,原因是按照教程的操作,会出现一下错误 后来发现 ...

  9. asp.net core2.1 bundleconfig.json合并压缩资源文件

    在asp.net core中则可以使用BuildBundlerMinifier来进行css,js的压缩合并 1.使用NuGet安装 BuildBundlerMinifier(也可以在vs中下载安装扩展 ...

  10. vue 数组push元素 视图没更新

    Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...