>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 25875 个阅读者 刷新本主题
 * 贴子主题:  HTML5 浏览器支持 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-10 19:05:44     消息  查看  搜索  好友  邮件  复制  引用

  

HTML5  浏览器支持

    你可以让一些较早的浏览器(不支持HTML5)支持 HTML5。            

HTML5 浏览器支持

     现代的浏览器都支持 HTML5。

     此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。

     正因为如此,你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。

                            
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
甚至你可以教会 IE6  (Windows XP 2001) 浏览器处理未知的 HTML 元素。
        

将 HTML5 元素定义为块元素

     HTML5 定了 8 个新的 HTML 语义(semantic)  元素。所有这些元素都是 块级 元素。

    为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:            

范例

header ,  section ,  footer ,  aside ,  nav ,  main ,  article ,  figure   {
     display:   block  ;
}

为 HTML 添加新元素

     你可以为 HTML 添加新的元素。

     该范例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 <myHero> :            

范例

< ! DOCTYPE   html >
< html >
< head >
< meta ? charset = " utf-8 " > ?
< title > 为 HTML 添加新元素 </ title >
< script >

  document . createElement ( " myHero " )

  </ script >
< style >

  myHero   {
     display:   block  ;
     background-color:   #ddd  ;
     padding:   50 px  ;
     font-size:   30 px  ;
}

  </ style >  
</ head >

< body >

< h1 > 我的第一个标题 </ h1 >

< p > 我的第一个段落。 </ p >

< myHero > 我的第一个新元素 </ myHero >

</ body >
</ html >

                  JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。            

Internet Explorer 浏览器问题

     你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素,但是:

                            
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。


     我们可以使用 Sjoerd Visscher 创建的  "HTML5 Enabling JavaScript", "  shiv" 来解决该问题:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

         以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。

         注意:国内用户请使用本站静态资源库(Google 资源库在国内不稳定):

<!--[if lt IE 9]>
  <script src="http://cdn.static.javathinker.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

        针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。                    

完美的 Shiv 解决方案

范例

< ! DOCTYPE   html >
< html >
< head >
< meta   charset = " utf-8 " >
< title > 渲染 HTML5 </ title >
   <!-- [if lt IE 9]>
  <script src="http://cdn.static.javathinker.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif] -->
</ head >

< body >

< h1 > 我的第一篇文章 </ h1 >

< article >
—— 学的不仅是技术,更是梦想!!!
</ article >

</ body >
</ html >

                 html5shiv.js 引用代码必须放在  <head> 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。




程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-29 11:09:51 重新编辑]
  Java面向对象编程-->泛型
  JavaWeb开发-->Web运作原理(Ⅳ)
  JSP与Hibernate开发-->映射对象标识符
  Java网络编程-->Java网络编程入门
  精通Spring-->创建综合购物网站应用
  Vue3开发-->绑定表单
  VSCode 开发Vue必备插件
  JavaScript ES2015模块化操作
  深入理解Vue的响应式系统
  Vue用法详解
  Vue. 入门篇
  jQuery 事件方法汇总
  jQuery 选择器
  JavaScript的HTML DOM td / th 对象
  JavaScript的HTML DOM Column 对象
  CSS padding(填充)
  HTML的事件属性
  HTML5 内联 SVG
  JavaScript 的HTML DOM 事件
  JavaScript 变量提升
  JavaScript 正则表达式
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。