html5 学习笔记

阅读更多

基本

 

 

 

 

 

新标签  nav section aside  article figure  不再是清一色的div

 

    
    


    
header
        
nav
        
    
section
        
article
                
article
                        
article
        
aside
    
    

        footer
    
    

 

outline 大纲  check

http://gsnedders.html5.org/outliner/

article aside nav section 属于  sectioning content

h1 h2 ... h6  hgroup 属于 heading content

heading content的内容(<>这就是内容)可以产生outline的item

h1 h2 假如处在一个sectioning中是会有层次区别, 但假如他们在一个hgroup里面，那么会自动取h1的值用作outline的item, 不管h1的位置在前还是后

body 是root sectioning

blockquote包住h1可以让h1不产生outline

 

 

ps:  div不会产生一个section

 

 

同时human readable and  machine readable的time标签

02/23/11

 

和iphone相关的一个

 

让页面支持多种设备

 

video

 

audio

 

canvas

 

new input type

  url, tel      // iphone上的safari会根据不同的type 弹出不同的输入框 

   //自动变成下拉框 chrome支持 与autofocus有冲突

      // input example
      // 自动聚焦
     //可选进度条
    //opera 支持
    //opera 支持
    //opera 支持
    //opera 支持
    //opera 支持

 

 

web font

@font-face {
  font-family: 'DragonwickFGRegular';
  src: url('../_fonts/dragwifg-webfont.eot');
  src: local('!'),
       url('../_fonts/dragwifg-webfont.woff') format('woff'), url('../_fonts/dragwifg-webfont.ttf') format('truetype');
}
#mainContent h1{
	font: normal 2.5em "DragonwickFGRegular", Georgia, "Times New Roman", Times, serif;
	margin: .5em 0 .25em;
	letter-spacing: -1px;
}

 

字体阴影

#mainContent h2 {
	text-shadow: 1px 1px 1px #333;
	filter: dropshadow(color=#333, offx=1, offy=1);
}

 

兼容性检查 

www.modernizr.com

 

标签  浏览器可以自动着色mark的字段  也可以自己改css 相当于span