HTML5 知识库
html5 学习笔记
阅读:1419次
评论:0条
更新时间:2011-06-17
基本
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Welcome </title> </head> <body> </body> </html>
新标签 nav section aside article figure 不再是清一色的div
<!DOCTYPE HTML>
<html>
<head>
<title>html5</title>
<style>
header,section,footer,nav,aside,article,figure{
dispaly:block;
border:dashed 1px gray;
padding:10px;
margin:10px;
}
</style>
</head>
<body>
<header>header
<nav>nav</nav>
</header>
<section>section
<article>article</article>
<article>article</article>
<article>article</article>
<aside>aside</aside>
</section>
<footer>
footer
</footer>
</body></html>
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标签
<time datetime="2010-02-10T13:59:06-08:00" pubdate>02/23/11</time>
和iphone相关的一个
<meta name="viewport" content="width-device-width,maximum-scale=1.0" />
让页面支持多种设备
<!--update based on html5--> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link href="_css/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" > <link href="_css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)" > <link href="_css/main.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >
video
<video width="420" height="236" controls preload="false">
<source src="_video/explore_promo.mp4" type="video/mp4" codecs='avc1.42E01E, mp4a.40.2'" />
<source src="_video/explore_promo.webm" type="video/webm; codecs='vp8, vorbis"' />
<source src="_video/explore_promo.ogv" type="video/ogg; codecs="theora, vorbis"" />
</video>
<video width="420" height="236" poster="_video/poster.jpg" preload="false">
<source type="video/h264" src="_video/explore_promo.mp4" />
<source type="video/webm" src="_video/explore_promo.webm" />
<source type="video/ogg" src="_video/explore_promo.ogv" />
</video>
audio
<audio controls="controls"> <source src="_assets/ex_ca_podcast.ogg" type="audio/ogg" /> <source src="_assets/ex_ca_podcast.mp3" type="audio/mpeg" /> </audio>
canvas
<head>
<script type="text/javascript">
function doCanvas() {
var my_canvas = document.getElementById("theCanvas");
var myCanvas_context = my_canvas.getContext("2d");
myCanvas_context.strokeRect(0, 0, 300, 225);
var chart_bg = new Image();
chart_bg.src = "_images/chart_bg.gif";
chart_bg.onload = function() {
myCanvas_context.drawImage(chart_bg,0,0);
myCanvas_context.beginPath();
myCanvas_context.moveTo(25,190);
myCanvas_context.lineTo(40,180);
myCanvas_context.lineTo(90,150);
myCanvas_context.lineTo(100,165);
myCanvas_context.lineTo(130,90);
myCanvas_context.lineTo(150,100);
myCanvas_context.lineTo(275,20);
myCanvas_context.strokeStyle = "#000";
myCanvas_context.stroke();
myCanvas_context.textAlign = "center";
myCanvas_context.textBaseline = "middle";
myCanvas_context.fillStyle = "#7F7F7F";
myCanvas_context.font = "bold 30px sans-serif";
myCanvas_context.fillText("We're Growing", 155, 100);
};
}
</script>
</head>
<body onload="doCanvas();">
<canvas id="theCanvas" width="300" height="225"></canvas>
</body>
new input type
<input type="email" /> url, tel // iphone上的safari会根据不同的type 弹出不同的输入框 <input type="number" min="1" max="10" value="1" step="1" /> //自动变成下拉框 chrome支持 与autofocus有冲突 <input type="email" placeholder="example:xxxxxx"/> // input example <input type="email" autofocus="autofocus"/> // 自动聚焦 <input type="range" name="rating" id="rating" tabindex="65" min="1" max="50" value="25" step="5"> //可选进度条 <input type="date" /> //opera 支持 <input type="datetime" /> //opera 支持 <input type="month" /> //opera 支持 <input type="week" /> //opera 支持 <input type="time" /> //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></mark>标签 浏览器可以自动着色mark的字段 也可以自己改css 相当于span
评论 共 0 条 请登录后发表评论
您还没有登录,请您登录后再发表评论
