问题:
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。
来源:https://www.cnblogs.com/IT123/p/10910886.html