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. SpringBoot mybatis配置

    首先pom.xml <!-- mybatis 配置 --> <dependency> <groupId>org.mybatis.spring.boot</gr ...

  2. 数独_erlang解题代码

    前几天LP玩数独,玩到大师级各种被虐,我看了看说,分分钟帮你做出来, 结果当然没有做出来. 于是上网搜了下数独的解题代码,看了下C的代码,大多是递归之类的(如http://blog.sina.com. ...

  3. stylus笔记(二)

    1.方法 函数  Stylus强大之处就在于其内置的语言函数定义.其定义与混入(mixins)一致:却可以返回值. 默认参数 可选参数往往有个默认的给定表达.在Stylus中,我们甚至可以超越默认参数 ...

  4. python安装pyMysql

    python2和python3是不兼容的,在python2中,链接数据库使用的是mysqldb,但在python3中是是pyMysql. 1.首先dos进入python安装目录,找到并进入Script ...

  5. ID基本操作(在框架内处理文本)5.28

    1.可以直接拖入文档,word,excel,rtf,还可以选中文字,导出文本. 2. 批量把一段文字改为另一段. 还可以改特殊符号.定义范围 . 建立文字后鼠标右键,选择文本框架选项 直接拖动文本框架 ...

  6. spring boot 添加客户端负载均衡

    1.pom.xml文件中,添加依赖包 <dependency> <groupId>org.springframework.cloud</groupId> <a ...

  7. Centos7安装xenserver tools

    mount /dev/cdrom /mnt [root@192 ~]# mount /dev/cdrom /mntmount: /dev/sr0 写保护,将以只读方式挂载[root@192 ~]# c ...

  8. 世界上最好的Sed教程

    这是一份世界上最好的sed教程,sed是unix系统下流编辑里的超人.最初我写这份说明是为了我的 第二本电子书,然而随后我决定把这份说明变成一本免费电子书预览的同时再次做为文章发布到这里. Sed说明 ...

  9. Problem E: 平面上的点——Point类 (V)

    Description 在数学上,平面直角坐标系上的点用X轴和Y轴上的两个坐标值唯一确定.现在我们封装一个“Point类”来实现平面上的点的操作. 根据“append.cc”,完成Point类的构造方 ...

  10. oracle 链接

    <properties> <!--配置Hibernate方言 --> <property name="hibernate.dialect" value ...