注释标签

ruby:

行级元素 横排显示 试图写多个汉字和注释，需要多个ruby。

直接上代码：

-

css样式：

页面效果：

重点标记

mark:

以灰常黄的黄色来重点标记

页面代码：

类似于进度条的标签

meter：

meter标签有以下的属性：

min：类进度条的最小值

max：最大值

value：实际的值

页面代码：

设置meter的长与宽：

评判标准：

low: 低于 low 是另一种颜色显示（残血了，快跑）

optimum：状态良好（状态良好，可以开团）

high: 状态完美（我将带头冲锋）

也就是说，在 low 和 high 之间都是绿色的，在 low 以下或者 high 以上就黄了。

正宗的进度条

progress:

如果我们不设置value属性，页面就是这样的效果：

details:

和 dl 定义列表类似，也和我们的下拉列表类似，但是，显示的方式不一样用于描述细节 summary 标题（要描述的对象） 后面接上你要描述的内容

IE浏览器的兼容问题

除了上面提到的常用的标签，在使用 HTML5 标签的时候，还要注意浏览器的兼容问题。像 IE 浏览器有部分内容兼容到 IE9，IE8 及以下对 H5 完全不兼容。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。

浏览器的兼容测试

我们可以看到这个页面，当选择 IE8 的时候完全没有效果了。那么怎么解决这个问题

解决办法:

最简单的处理方法引入写好的 js 代码！这个代码大家搜一下，就可以搜到哦！这段代码的意思是：如果浏览器的版本小于 IE9 就引入这段 js。

看这下即使是 IE8 页面也是有效果的~

源码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Keywords" content="关键字,关键词"> <meta name="Description" content="描述和简介"> <title>Title</title> <style type="text/css"> *{margin:0;padding:0;} body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;} a{text-decoration:none;color: inherit;} img{display: block;border:none;} ol,ul{list-style:none;} .clearfix:after { content: ""; display: block; clear: both; } .main{ width: 1200px; margin: 40px auto; box-shadow: 0 0 10px 0 #000; background: skyblue; } .main section{ width: 400px; margin: 20px auto; box-shadow: 0 0 10px 0 #000; text-align: center; background: blueviolet; } section.ruby ruby{ color:mediumblue; font:bold 20px/30px ""; } section.meter meter,section.progress progress{ height: 30px; width: 400px; } section.details{ text-align:left; } </style> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--></head><body> <section class="main"> <section class="ruby"> <ruby>我<rt>wo</rt></ruby> <ruby>是<rt>shi</rt></ruby> <ruby>娜<rt>na</rt></ruby> <ruby>娜<rt>na</rt></ruby> </section> <section class="mark"> <p>娜娜<mark>好美~</mark>像个<mark>小仙女</mark>一样~</p> </section> <section class="meter"> <meter min="0" max="100" value="50" low="20" optimum="50" high="80"></meter> </section> <section class="progress"> <progress max="100" value="50"></progress> </section> <section class="details"> <details> <summary>海贼王</summary> <p>路飞</p> <p>娜美</p> <p>索隆</p> <p>香吉士</p> <p>乔巴</p> <img class="img" src="imgs/1.jpg" alt="" width="200px" > </details> </section> </section></body></html>

HTML5的特殊标签与IE浏览器的兼容的更多相关文章

  1. 让HTML5语义化标签兼容IE浏览器

    解决方案:IE9以下旧版本浏览器不支持新的语义化标签.其中一种解决方案就是用js将HTML5增加的标签创建出来,就像下面这样.(放在header部位) <script> var html5 ...

  2. html5语义化标签使用规范

    Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...

  3. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  4. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  5. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  6. HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  7. Html5_移动前端不得不了解的html5 head 头标签

    移动前端不得不了解的html5 head 头标签   本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...

  8. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

  9. html5应用程序标签

    一.html5应用程序标签 (1)datalist需要数据载体 input list属性指向数据源 <input type="text" list="input_l ...

随机推荐

  1. mongodb 查询指定字段

    @AutowiredMongoDatabase database; @Overridepublic List<Grid> getAdditionalGrid(String collecti ...

  2. UVA - 10347 - Medians（由三中线求三角形面积）

    AC代码: #include<cstdio> #include<cmath> #include<algorithm> #include<iostream> ...

  3. 20140814 explicit

    1.explicit explicit   只对构造函数起作用,用来抑制隐式转换. 如:     class   A   {        A(int   a);   };  int   Functi ...

  4. CSS中复选框单选框与常用12px文字不对齐问题（转载）

    原文  http://www.cnblogs.com/aobingyan/p/3823556.html,有删改 目前中文网站上面的文字,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏 ...

  5. centos7.5下生成公钥，实现ssh免密钥登陆

    配置SSH无密码登录需要4步准备工作生成公钥和私钥导入公钥到认证文件,更改权限测试1. 准备工作确认本机sshd的配置文件(需要root权限) # vi /etc/ssh/sshd_config 1找 ...

  6. keepalive基础知识

    一.LVS负载均衡集群的缺点 二.Keepalived介绍 三.Keepalived的功能 四.Keepalived工作原理 五.Keepalived组件框架 六.Keepalived的安装 6.1 ...

  7. 2019ICPC南京网络赛A The beautiful values of the palace

    题意:蛇形填数超大版本,需要求出一些给定坐标的值的数位和,然后q次询问,一个矩形区域内值的和是多少 解题思路:二维偏序前缀和的经典题 二维偏序:求(x,y)左下角点的个数,思路是对x,y升序排序,用树 ...

  8. Promise 的深度学习

    1.Promise 是什么? Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大.Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常 ...

  9. 如何将sql查询出的列名用注释代替？

    如何将sql查询出的列名用注释代替? 大家正常的工作的时候,会有这样的要求,客户想要看下原始数据,但是呢.前台导出又麻烦,这时候只能从数据库拷贝出来一份.但是呢,数据库里面的字段客户又看不明白,只能用 ...

  10. 检测apache状态，当apache处于非running状态如何脚本启动

    编写脚本内容 #!/bin/bashURL="http://127.0.0.1/"curlit(){curl --connect-timeout 15 --max-time 20 ...