`

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);
    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
1
分享到:
评论

相关推荐

    html5学习笔记

    HTML5学习笔记 HTML5是一种新型的网页标记语言,它提供了许多新的特性和元素,旨在提高网页的可用性、可读性和可访问性。本笔记将对HTML5的基本结构、标记、语义元素、表单、媒体元素和Canvas API进行详细的介绍。 ...

    HTML5学习笔记

    HTML5学习的详细教程,能快速帮助你掌握这门技术。

    html5学习笔记.pdf

    从给定文件的内容来看,这份HTML5学习笔记重点介绍了HTML5表格、列表和表单元素的使用方法。 知识点一:HTML5表格元素 表格是HTML页面中用于展示数据的常用方式,包括三大基本元素:表格(table)、行(tr)和...

    HTML5学习笔记(总结提炼版)——001

    本学习笔记将聚焦于HTML5的基础知识,包括其新特性、元素和最佳实践。 一、HTML5的新特性 1. 语义化标签:HTML5引入了新的语义化标签,如、、、和等,这些标签有助于更好地组织内容,提高可读性和可访问性。 2. ...

    HTML 5 学习笔记

    个人通过学习HTML 5 总结下来的笔记,只适合入入门。深入某一下技术,比如canvas、websocket等,建议查看协议,并多练习。

    HTML5学习笔记前台页面.pdf

    这份"HTML5学习笔记前台页面.pdf"涵盖了网站开发的基础知识,包括HTML5的结构、标签使用、CSS、JavaScript以及与服务器相关的技术。 首先,网站开发的基础涉及理解URL网址的构成,它由协议(如HTTP或HTTPS)、域名...

    HTML5学习笔记(总结提炼版)——002 CSS

    【CSS简介】 CSS,全称为层叠样式表(Cascading Style Sheets),是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的Web标准。...持续学习和实践CSS,将使你能够创建出更具吸引力和功能性的网站。

    web前端HTML5学习笔记

    前端笔记HTML5部分

    HTML5学习笔记.docx

    本笔记主要聚焦于HTML5的一些基本元素和特性,以及CSS中的常见样式规则和技巧,旨在帮助中低级开发者提升技能。 首先,HTML5是超文本标记语言的最新版本,它引入了许多新的语义化标签,如、、等,这些标签使得网页...

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...

    HTML5学习笔记,初学者可以借鉴快速学习html5

    这是我重新温故时候做的html学习笔记,参考于尚学堂 百战程序员文档里有关键的源码和简要的说明,初学者可以作为参考如果有什么问题可以和我一起交流,大家共同进步还望大佬光顾的时候可以给我提提意见

    Essential Guide to HTML5学习笔记

    本篇笔记将深入探讨HTML5的基础知识,帮助初学者快速入门。 一、HTML5概述 HTML5(超文本标记语言第五版)旨在提高互操作性和用户体验,它对浏览器的兼容性进行了优化,减少了对插件的需求,并引入了离线存储、拖放...

    HTML的学习笔记.zip

    HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记...

    html 5 学习教程笔记.zip

    html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 ...

    h5前端学习笔记

    【标题】"h5前端学习笔记"所涵盖的知识点主要集中在HTML5技术及其在前端开发中的应用。HTML5是超文本标记语言的最新版本,它引入了许多新的元素、API和特性,极大地增强了网页的交互性、可访问性和可用性。 【描述...

    前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar

    前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar ...

    HTML+CSS学习笔记.zip

    HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...

    html css js 学习笔记.zip

    html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...

Global site tag (gtag.js) - Google Analytics