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) {
    
    
    选择器 {
    
    
        属性：属性值；
    }
}

所以两者不是万能的，只是对某些不兼容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记录

猜你喜欢