• 遇到的问题总结


    问题:
    inline-block使用习惯,给父元素的font-size设为0,不然会有边距

    怪异模式(英语:quirks mode)是指在计算机领域中,一些网页浏览器为了维持对较旧的网页设计的向后兼容性,而使用的一种技术,有别于严格遵循万维网联盟(W3C)与互联网工程任务组(IETF)标准而设计的“标准模式”。

    为什么会跨域:
    因为浏览器同源策略的限制,不是同源的脚本不能操作其他源下面的对象。

    vue axios解决跨域问题:

    在 config/index.js 中的 的dev 添加以下代码,设置一下proxyTable
    //加入以下
    proxyTable:{
    '/api': {
    target : 'http://api.douban.com', //设置你调用的接口域名和端口号.别忘了加http
    changeOrigin : true, //允许跨域
    pathRewrite : {
    '^/api':
    // '/'这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替。比如我要调用'http://api.douban.com/v2/movie/top250',直接写‘/api/v2/movie/top250’即可

                }
          }
    },
    
    html5十大新特性:

    #######(1)语义标签
    header 定义了文档的头部区域
    footer 定义了文档的尾部区域
    nav 定义了文档的导航区域
    section 定义了文档的区块
    acticle 定义了文档的内容区域
    aside 定义了侧边栏内容
    dialog 定义了对话框
    detailes 用于描述文档或文档某个部分的细节
    summary 标签包含 details 元素的标题

    (2) 增强型表单
    HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
    

    HTML5 新增的表单属性:

    placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。
    required 属性,是一个 boolean 属性。要求填写的输入域不能为空
    pattern 属性,描述了一个正则表达式用于验证 元素的值。
    min 和 max 属性,设置元素最小值与最大值。
    step 属性,为输入域规定合法的数字间隔。
    height 和 width 属性,用于 image 类型的 标签的图像高度和宽度。
    autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。
    multiple 属性 ,是一个 boolean 属性。规定 元素中可选择多个值。 

    (3) 视频和音频

    HTML5 提供了播放音频文件的标准,即使用

    <audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
    </audio>
    

    controls 属性供添加播放、暂停和音量控件。

     在 之间你需要插入浏览器不支持的

     

    HTML5 规定了一种通过 video 元素来包含视频的标准方法

    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
    </video>
    

    control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停,如 play() 和 pause() 方法。

    (4) Canvas

    标签只是图形容器,必须使用脚本来绘制图形。

    创建 Canvas 元素
    向 HTML5 页面添加 canvas 元素。

    规定元素的 id、宽度和高度:

    <canvas id="myCanvas" width="200" height="100"></canvas>
    

    通过 JavaScript 来绘制
    canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

    <script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
    </script>
    

    JavaScript 使用 id 来寻找 canvas 元素:

    var c=document.getElementById("myCanvas");
    

    然后,创建 context 对象:

    var cxt=c.getContext("2d"); 
    getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    

    下面的两行代码绘制一个红色的矩形:

    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
    fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

    (5)地理定位

      HTML5 Geolocation(地理定位)用于定位用户的位置。

    window.navigator.geolocation {
        getCurrentPosition:  fn  用于获取当前的位置数据
        watchPosition: fn  监视用户位置的改变
        clearWatch: fn  清除定位监视
    } 
    
    css3新特性:
    1. 边框

    圆角边框

       border-radius:xxpx;
    

    边框阴影       
    box-shadow:X轴偏移量  Y轴偏移量  【阴影模糊半径】   【阴影扩展半径】 阴影颜色  投影方式

    X轴偏移量和Y轴偏移量可负值,【阴影模糊半径】即模糊距离,其值越大阴影边缘越模糊,【阴影扩展半径】即阴影尺寸,正值越大阴影延展越大,负值则缩小,阴影颜色默认黑,投影方式中内部阴影,inset,外部阴影,省略,但是投影方式只能放第1个或最后1个。

    边框图片       
    border-image:url(border.png) 10 10 10 10  repeat

    10 10 10 10为切割图片的宽度,单位为像素,顺时针设置,也可简写1个10,最后一个可以有值round  平铺、repeat  重复、stretch  拉伸。

    2. 选择器

    属性选择器
    结构性伪类选择器:
    :first-child
    :last-child
    :nth-child(n)
    CSS3选择器 ::before和::after

    3. 颜色

    RGBA       
    color:rgba(R,G,B,A)

    RGB范围0-255或0-100%,a就是Alpha透明度范围0-1。

    渐变颜色
    径向渐变  radial-gradient

    线性渐变  linear-gradient(to bottom, #000, #999)

    4. 文本溢出

    文本溢出
    text-overflow:clip | ellipsis

    文本溢出用何种方式显示:剪切 clip、省略号 ellipsis。

  • 相关阅读:
    SQL Server优化(4)-聚集索引的重要性和如何选择聚集索引
    青岛开发区公交集团公交线路一览表
    WINDOWS下文件夹简介
    2008 SQL Server优化(2)-改善SQL语句
    【麦课在线教育mycourse】利用Js快速刷完新生安全教育课程
    Linux重启网卡的方法
    Trees
    计算机操作系统之设备管理
    linux目录结构及主要内容
    Linux mysql命令安装允许远程连接
  • 原文地址:https://www.cnblogs.com/IT123/p/10910886.html
Copyright © 2020-2023  润新知