html5 学习札记-HTML教程-爱易网页

html5 学习札记

日期：2014-05-17　浏览次数：20881 次

html5 学习笔记

基本

<!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);
    myC

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

html5 学习札记

相关资料更多>

推荐阅读更多>