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. 封装axios在vue-cli项目中便捷使用

    首先创建一个vue-cli搭建起来的vue项目这个不用多说了. 安装axios,使用npm install axios --save命令安装依赖,这时候项目的package.json文件中的" ...

  2. Angular4学习笔记(七)- ViewChild和ViewChildren

    基础 ViewChild ViewChild 装饰器用于获取模板视图中的元素或直接调用其组件中的方法.它支持 Type 类型或 string 类型的选择器,同时支持设置 read 查询条件,以获取不同 ...

  3. 使用metrics统计接口tps

    metrics的简单介绍 metrics是一种性能指标工具,有很多开源工具使用之来来作为其性能监控,如Hadoop,Kafka,Spark,JStorm等. metrics使用最主要有三个东西: Me ...

  4. GIS中的引擎:地图引擎

    什么是地图引擎?它和地图软件有什么区别? 引擎一词是英文单词engine的音译,通常指发动机,就是动力输出设备.诸如汽车.轮船.飞机的动力提供的核心设备就是引擎.IT领域中,常听说的有搜索引擎.图形引 ...

  5. 学习笔记-AngularJs(九)

    到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

  6. Go used as value问题

    练习Go变参时遇到一个报错:used as value 代码如下: // 错误代码 func myfunc(arg ...int) { for _, n := range arg { fmt.Prin ...

  7. Java覆盖

    Java的覆盖: 源代码: package dijia;class Parent1{ void f() { System.out.println("迪迦奥特曼1"); } void ...

  8. .net 表达式返回值和等号赋值的区别

    .net 7.0的新特性中,有一个使用表达式体返回值的操作.请看如下代码: private string _userName=""; public string UserName{ ...

  9. Xcode10 library not found for -lstdc++ 找不到问题

    在Xcode9上正常编译的项目,在Xcode10上编译可能会遇到如下错误: library not found library not found library not found for -lst ...

  10. 8.6 C++文本文件的读写操作

    参考:http://www.weixueyuan.net/view/6412.html 总结: 文件类型: 计算机上的文件其实是数据的集合,对文件的读写归根结底还是对数据的读写操作.文件可以大致分为两 ...