html5 学习笔记

最新推荐文章于 2025-04-22 10:07:38 发布

最新推荐文章于 2025-04-22 10:07:38 发布 · 150 阅读

文章标签：

#HTML5 #CSS #Opera #Chrome #SVN

笔记专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了HTML5新增的标签及其使用方式，包括section、article等结构元素，time标签的人机可读时间格式，以及video、audio多媒体元素的运用。此外，还探讨了canvas绘图功能、新的input类型和web字体的实现。

基本

<!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=&quot;theora, vorbis&quot;" />
      </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