美文网首页
2018-08-23 总结

2018-08-23 总结

作者: asdf2333 | 来源:发表于2018-08-23 23:30 被阅读0次

1.HTML5兼容说明

现如今越来越多的站点开始使用HTML5标签,但是难免有一些客户的电脑系统老旧,浏览器版本比较低,仍然使用IE6-IE8版本的浏览器,HTML5标签对这些老版本的浏览器不支持。如果想让你的网站使用HTML5标签,但是又想兼容低版本的浏览器,下面推荐几种方法,供大家选择。

支持HTML5的各浏览器的最低版本

IE9
Chrome 3.0
Firefox 3.5
safari 3.0
opera 10.5

2.使用html5.js插件兼容(推荐)
引入htnl5.js即可

  • 代码如下:
    ie9及以下版本浏览器兼容html5的方法:


    2.png

可以直接将以上代码放置在<head>标签内部,即可完成HTML5标签的兼容。该插件放置在Google code project上提供给大家,是可以直接调用的。

判断IE版本的HTML语句详解,

限定某些浏览器版本才能执行的语句

这时需要判断

  • 当当当:
1.png

这样有效是有效,但是用HTML VALIDATOR里,报错,因为这个不符合XHTML 1.1的规范,
如果把ELSE语句去掉,则正确.


4.png

HTML和HTML5的区别

  • HTML是一种超文本标记语言

  • HTML5是最新的html标准;

  • HTML5有新的语义,属性,图形和元素等

  • HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

  • HTML5默认的字符编码是 UTF-8

  • HTML5 - 新特性

新的语义元素,比如 <header>, <footer>, <article>, and <section>。

新的表单控件,比如数字、日期、时间、日历和滑块。

强大的图像支持(借由 <canvas> 和 <svg>)

强大的多媒体支持(借由 <video> 和 <audio>)

强大的新 API,比如用本地存储取代 cookie。

前端移动端适配的方法:

第一种是通过javascript修改<meta>标签的内容,通过控制不同移动端的缩放比例, 来达成适配

  • 步骤1:头部 设置viewport

<meta name=”viewport” conent="" width=device-width, initial-scale=1/ maxmum-scal=1, user-scalable=no”>

  • 步骤2:
    在页面引入flexible.js适配代码
  • 步骤3:
    CSS代码:
    Css尺寸 = 设计稿标注尺寸 / 设计稿横向分辨率 /10
  • 注意:
    容器的宽高度单位使用 rem, 但是字体大小font-size 使用 单位 px. 因为考虑到文字的点阵信息,一般文字尺寸多会采用 16px ,20px, 24px,若以rem为单位,会产生 21px,19px这样的值,导致字型难看,甚至黑块

第二种是通过javascript来改变不同移动端<html>元素的font-size 属性, 来达成适配

png格式图片在所有浏览器上都支持吗?

5.png
6.png

相关文章

  • 设立具体的目标

    2018-08-23 戴师傅 2018-08-23 20:32 打开App (稻盛哲学学习会)打卡第120天 姓名...

  • 为什么很多人放弃了,而我还在坚持着

    #每日总结&反思##2018-08-23 距自考倒计时57天。 为什么很多人最后放弃了,而我还在坚持着 说明下:不...

  • 2018-08-23 总结

    1.HTML5兼容说明 现如今越来越多的站点开始使用HTML5标签,但是难免有一些客户的电脑系统老旧,浏览器版本比...

  • 去掉烂模式,从自己做起

    幸福时刻(173)2018.8.23 利花花 关注 2018-08-23 11:20 · 字数 2049 · 阅读...

  • Day11 #100DaysofMLCoding#

    2018-08-23 24https://github.com/hse-aml/intro-to-dl以及如何用c...

  • 懂你 L4-U1-1-Dialogue

    流利说 D57 2018-08-23 四 一、复习 Level4-Unit1-Part1*Learning- Vo...

  • 2018-08-23

    《如何学习》四 41晓春 晓春的蜗居 2018-08-23 07:19 · 字数 412 · 阅读 0 · 日记本...

  • 设立具体的目标

    2018-08-23 (稻盛哲学学习会)打卡第101天 姓名:祝新华 部门:业务部 组别:待定 【知~学习】...

  • 设立具体的目标

    2018-08-23 (稻盛哲学学习会)打卡第140天 姓名:王燕君 部门:分水碶 组别:利他三组 【知~学习】 ...

  • Android集成友盟QQ分享闪退,IllegalStateEx

    问题: 集成友盟,分享到QQ,出现闪退。 手机:华为P10,操作系统:安卓 8.0 | 2018-08-23 22...

网友评论

      本文标题:2018-08-23 总结

      本文链接:https://www.haomeiwen.com/subject/tweviftx.html