html5+css3学习笔记

来源：互联网发布：昌盛软件游戏机编辑：程序博客网时间：2024/05/04 06:01

HTML5

1、html5建立规则

独立于设备开发进程透明基于html css js 优秀的错误处理更多标记减少外部插件使用

2、html5新特性

绘画canvas元素媒介回放的video和audio 离线存储新的内容元素 nav header footer artical section 新表单控件 calendar time email url search

3、兼容性

最新版的safari chrome firfox opera支持某些html5属性 ie9将支持某些html5特性

4、视频<video></video>

视频格式 ogg mpeg4 webm

格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG 49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No

[html] view plain copy
 
<video src="" controls="controls" width="" height="">您的浏览器不支持html5</video>  
<video width="" height="" controls="controls">  
<source src="" type="video/Ogg">  
<source src="" type="video/mp4">  
您的浏览器不支持html5标签  
</video>  

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

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的

5、视频/DOM

play() pause()

js支持不知道如何让jq支持

6、音频与视频相似只不过使用的是audio标签

7、拖放 --有点看不懂以后再详细研究

8、svg 可缩放矢量图片就是放大缩小不变形在svg文件中用特定的类型标签制作出相关形状

<circle>--圆

<rectangle>--矩形

<polyline>--折线

<polygon>--多边形

<line>--线

<ellipse>--椭圆

<path>--路径

[html] view plain copy
 
<circle cx="60" cy="60" r="50" fill="red" stroke="#000000" stroke-width="2"></circle>  
<rect width="100" height="100" fill="#0033FF" stroke="#000" stroke-width="2" x="0" y="120" opacity="0.8" stroke-opacity="0.6" rx="10"></rect>  
     <ellipse cx="180" cy="160" rx="60" ry="60" fill="green"></ellipse>  
     <ellipse cx="180" cy="160" rx="60" ry="40" fill="yellow"></ellipse>  
     <ellipse cx="180" cy="160" rx="60" ry="20" fill="pink"></ellipse>  
     <ellipse cx="180" cy="160" rx="60" ry="10" fill="#000"></ellipse>  
     <line x1="0" y1="0" x2="250" y2="250" stroke="#000" stroke-width="2"></line>  
     <polygon points="10,260 150,280 180,320"></polygon>  
     <polyline points="10.10 30,30 30,60 15,60"></polyline>  

9、canvas VS svg

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

10、地理定位

html5 geolocation API来获得用户地理位置

使用getCurrentPosition()方法来获取位置

[javascript] view plain copy
 
<script>  
var x=document.getElementById("demo");  
function getLocation()  
  {  
  if (navigator.geolocation)  
    {  
    navigator.geolocation.getCurrentPosition(showPosition);  
    }  
  else{x.innerHTML="Geolocation is not supported by this browser.";}  
  }  
function showPosition(position)  
  {  
  x.innerHTML="Latitude: " + position.coords.latitude +  
  "<br />Longitude: " + position.coords.longitude;  
  }  
</script>  

如果自持地理定位运行showPosition函数，如果不支持显示友好提示信息，showPosition显示用户的经纬度。

11、web存储

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

12、应用缓存，在没有网络的情况下可以离线浏览

只有ie不支持

如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性

[html] view plain copy
 
<html manifest="demo.appcache">  

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面

13、web worker--是运行在后台的js，不影响页面的性能

14、服务器发送事件--接受来自服务器端的更新

15、html5表单
<input type="url">
<input type="email">
<input type="number">
<input type="search">
<input type="range">
<input type="date">
<input type="color">
<input type="mounth">
<input type="week">
<input type="time">
<input type="datetime-local">
使用火狐测试的时候发现number和date没啥特别变化，不像w3c的测试文档中的那样。
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
</datalist>

我对datalist的理解就是起提示作用的，焦点定位在输入框之后自动出现下拉菜单提示。
keygon--keygen 元素的作用是提供一种验证用户的可靠方法。
output元素用于不同类型的输出，比如计算或脚本输出，w3c上的案例是输出两个数的和，不论是在上面还是本地都无结果输出。

css3

css3被划分为模块，主要的模块有

选择器

框模型

背景和边框

文本效果

2D/3D转换

动画

多列布局

用户界面

1、边框

创建圆角边框，添加阴影，使用图片来绘制边框

主要属性：

border-radius

box-shadow

border-image

border-radius用来设置圆角半径，例border-radius:5px;

box-shadow用来设置阴影，box-shadow:水平阴影垂直阴影模糊距离阴影大小阴影颜色内部阴影还是外部阴影

box-shadow:2px 2px 3px 2px #000 inset;

border-image可以使用图片来创建边框

2、背景

主要属性：background-size background-origin

css3之前背景图片的大小是根据图片实际大小来决定的，在css3中，background-size用来设置背景图片的大小，像素或者百分比都可以。

例：background-size:10px 20px;宽度10px，高度20px。

css3之前背景图片如果设置为左上对齐，那么图片是从边框开始的。在css3中，background-origin可以设置背景图片从border-box，padding-box，content-box开始出现。

3,、文本效果

主要属性：text-shadow word-wrap

text-shadow与box-shadow原理一样

word-break:break-all 强制切断长单词
word-wrap 控制换行，单词过长空间不足会自动换到下一行
word-spacing 字符间距
white-space 处理空格

4、字体

@font-face可以自己定义字体，让用户下载服务器字体到本地缓存。

使用方法：先定义字体名称，然后连接到该文件

[css] view plain copy
 
@font-face{font-family:myfont;src:url('Sansation.ttf'),url('Sansation.eot');}  
div{font-family:myfont;}  

5、2D/3D转换
2D

通过css3转换，可以实现对元素的移动、缩放、转动、拉长和拉伸。

transform:translate() | rotate() | scale() | skew() | matrix()

translate(50px,100px)方法把元素从左侧移动50像素，从顶端移动100像素。
rotate(30deg)把元素顺时针旋转30度
scale(2,4)把元素宽度扩大为原来的2倍，把高度扩大为原始的4倍。
skew(30deg,20deg)围绕x轴把元素翻转30度，围绕y轴把元素翻转20度。
matrix(a,b,c,d,e,f)把所有2D转换方法组合在一起，需要6个参数。a,d代表缩放比例，e，f代表位移，详细参照http://www.zhangxinxu.com/wordpress/?p=2427

rotateX() x轴方向旋转

rotateY() y轴方向旋转

6、css3过渡

transition:transform 2s;

7、动画

@keyframes name

{

from{}

to{}

}

{animation:name 2s}

8、多列

column-count 分列

column-gap 间距

column-rule 个人理解为间距样式

9、用户界面

resize

box-sizing

outline-offset

0 0