html5shiv和respond记录

开始以为只要引入html5shiv和respond，h5和css3随便写，结果试了几次，相关样式根本显示不出来，又仔细bd了一遍得知，这俩组件功能是有限的。。。。

首先html5shiv作用是：用于解决ie对HTML5新增标签不识别，导致了CSS不起作用
但是注意这里只针对h5’标签’, 就是我们常用的那些header、footer、article等语义化标签，我傻了吧唧的以为input type=‘date’什么的都能展示出来（而且这不算新增的‘标签’），所以我总结了一下h5的新增的标签

<audio controls="controls" loop="loop" preload="auto"> //音频<source src="">您的浏览器不支持 audio 元素。
</audio>
<video width="320" height="240" controls="controls"> // 视频<source src="">您的浏览器不支持 video 元素。
</video>
<embed src="123.gif"> // 容器
// 语义化标签：
section 独立内容模块 ，可以h1-h6组成大纲 ，表示文档结构，有章节、页眉、页脚或其他部分。
article  （文章） 文章核心部分
aside 标签内容之外相辅的信息  侧边栏
header 头部/标题
footer 底部
nav 导航
figure标签 代替原来的li>img+p就是有文字有图片的区域
// 上面的html5shiv就是解决这几类标签的问题的，也可以用如下来解决
document.createElement('标签名')
// 其他
<mark>xx</mark> // 突出显示会有背景色
<meter value="4" min="0" max="10"></meter>
<meter value="0.7"></meter> // 以条状显示占比
<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/javascript/">JavaScript</a>
</nav> // navbar
<progress value="22" max="100"></progress> // 类似上面的meter，样式略有不同
<time>9:00</time> // 强调时间
<strong>注意：</strong> // 加粗显示
<input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist>
<input type="submit"> // input变下拉选的样式
......

原文链接： https://blog.csdn.net/caiyu666/article/details/80480736
除此input还有一些type类型
原文链接：https://blog.csdn.net/weixin_45457515/article/details/98307074

接着就是respond，这个组件的作用：用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，以实现响应式网页设计
那么CSS3 Media Queries是什么呢，通俗来说就是我们常用的媒体查询技术

@media screen and (max-width: 600px) {选择器 {属性：属性值；}
}

相关链接：https://www.cnblogs.com/moqiutao/p/4753839.html

所以两者不是万能的，只是对某些不兼容ie的问题做了处理，下面写一下引入方式

<!--[if IE]><script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/r29/html5.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

html5shiv和respond记录相关推荐

积跬步，聚小流------Bootstrap学习记录(2)
现阶段开启每一次新的征程,已然离不开"Hello World"的习惯仪式.这次自然也不例外.先来看下给出的官网给出的演示样例: 1.bootstrap官网提供的html基本模板代码 ...
文件(图片)上传保存与展示
1.前端发起请求插入图片(单图),页面要求: 引入fileinput插件 <script src="/assets/js/bootstrap.min.js"></ ...
小程序之旅——第六站（模板首页）
ThinkPHP的模板引擎内置了布局模板功能支持,可以方便的实现模板布局以及布局嵌套功能. 一.修改配置修改文件.application/admin/config.php 添加 //模板'templ ...
十八、前端必学Bootstrap美化（上篇）
@Author:Runsen @Date:2019/05/26 @updated Date:2020/05/30 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, ...
用html制作静态音乐欣赏,纯静态HTML音乐播放器模板
[实例简介] 纯静态HTML音乐播放器模板,可以直接套用到cms后台使用,页面简洁漂亮 www.guangrao.ren [实例截图] [核心代码] 525460f6-62cf-4282-9d42-3 ...
前端开发中常见的浏览器兼容性问题及解决方案
文章目录前言一.浏览器四大内核二.主流兼容问题 (一)浏览器引擎 (二)兼容问题的原因 (三) 为什么浏览器会存在兼容性问题? (四)处理兼容问题的思路 1. 要不要做? 2. 做到什么程度? ...
Bootstrap3兼容IE8
在使用Bootstarp3的时候,发现在IE8上面的支持并不好,其中使用的H5标签与响应式布局IE8是不支持的,看个例子: <!DOCTYPE html> <html>< ...
百度AI人脸识别的学习总结
本文主要分以下几个模块进行总结分析项目要求:运用百度AI(人脸识别)通过本地与外网之间的信息交互(MQService),从而通过刷脸实现登陆.签字.会议签到等: 1.准备工作: 内网:单击事件按钮- ...
html5shiv.js和respond.min.js的作用
html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览 ...

html5shiv和respond记录

html5shiv和respond记录相关推荐

最新文章

热门文章