HTML5学习笔记 HTML5基础教程
2012-03-17 17:18
459 查看
HTML5的基础
文档声明更简单了。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <!--在HTML5中，这样写：-->
3 <!DOCTYPE html>
•html标签上不需要声明命名空间。
1 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
2 <!--在HTML5中，这样写：-->
3 <html lang="zh-CN">
•字符集编码声明也简单了
1 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
2 <!--在HTML5中，这样写：-->
3 <meta charset="UTF-8" />
•可以不用给css及javascript代码写type属性了
1 <script type="text/javascript"></script>
2 <style type="text/css"></style>
3 <!--在HTML5中，可以直接写：-->
4 <script></script>
5 <style></style>
•没有XHTML代码规范的要求
所有的标记都必须要有一个相应的结束标记；
所有标签的元素和属性的名字都必须使用小写；
所有的XML标记都必须合理嵌套；
所有的属性必须用引号”"括起来；
1 <div class=test></div>
2 <br>
3 <INPUT TYPE="TEXT" />
4 <!--这些都不做严格要求-->
////////////////////////////////////////////
HTML5基本布局
<!DOCTYPE html>
<htmlang = "en">
<head>
<meta charset = "utf-8">
<title>HTML5 Demo</title>
<body>
<header>
<h1></h1>
<h2></h2>
</header>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
<section>
<article></article>
<article></article>
</section>
<aside></aside>
<footer></footer>
</body>
</html>
/////////////////////////////////////////////////////////
HTMl5结构元素:header
<header>
<div class="container_16">
<div class="logo">
<h1><a href="index.html"><strong>Real</strong> Estate</a></h1>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index-1.html" class="current">Selling</a></li>
<li><a href="index-2.html">Buying</a></li>
<li><a href="index-3.html">Renting</a></li>
</ul>
</nav>
<div id="faded">
<div class="rap">
<a href="#"><img src=big-img1.jpg width=571 height=398></a>
<a href="#"><img src=big-img2.jpg width=571 height=398></a>
</div>
<img src="images/extra-banner.png" alt="" class="extra-banner">
</div>
</div>
</header>
///////////////////////////////////////
HTMl5结构元素:nav
<nav>
<p><a href=“/”>Home</a></p>
<p><a href=“/about”>About</a></p>
</nav>
<nav>元素是一个包装器，它不会代替<ol>或<ul>，但是会包围它。
<nav>
<h2>Main navigation</h2>
<ul>
<li><a href=”/about”>About me</a></li>
<li><a href=”/news”>News</a></li>
</ul>
</nav>
//////////////////////////////////////////
HTMl5结构元素:footer
<body>
<nav>…</nav>
<div id=mainContent>…</div>
<aside>
<nav>
<h2>…</h2>
<ul>…</ul>
</nav>
<nav>
<h2>…</h2>
<ul>…</ul>
</nav>
</aside>
<footer>
<small>
©2010 Copyright © 2012 BACDDF Inc. All Rights Reserved
</small>
</footer>
</body>
////////////////////////////////////////////
HTMl5结构元素:article
<article>
<h1>My article</h1>
<p>Blah blah</p>
</article>
<!doctype html>
<html lang=en>
<head>
<title>………</title>
</head>
<body>
<header>
<h2>……</h2>
<nav>……</nav>
</header>
<nav>
<h2>………</h2>
<ul>
<li><a href=“#”>………</a></li>
<li><a href=“#”>………</a></li>
</ul>
</nav>
<article>
<h1>………</h1>
<p>………</p>
</article>
<article>
<h1>………</h1>
<p>………</p>
</article>
<footer>
<p>
<small>………</small>
</p>
</footer>
</body>
///////////////////////////////////////
HTML5视频标签video
HTML5 <video> 标签支持3种常用的视频格式：1、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件；2、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件；3、WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。现在主流浏览器对视频格式的支持都有所不同，相信HTML5正式发布的那天 <video> 会支持更多的视频格式，给开发者和用户带来不少的好处。
下面来讲讲HTML5视频标签videos的使用,如果需要在浏览器中显示视频，你所需要的就是复制下面的代码：
<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
control 属性供添加播放、暂停和音量控件。包含Width宽度和高度height属性也是不错的主意。<video> 与</video> 之间插入的内容是供不支持video 元素的浏览器显示的。
上面的代码使用一个Ogg 文件，适用于Firefox、Opera 以及谷歌Chrome 浏览器。要确保适用于Safari 浏览器，视频文件必须使用MPEG4 格式。IE8是不支持HTML5的<video>标签，IE9支持该标签，但也必须使用MPEG4格式。
video 元素允许多个source 元素。source 元素可以链接不同格式的视频文件。浏览器检测并使用第一个可识别的格式，代码如下：
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
下面介绍下<video> 标签的常用属性：
属性
值
描述
autoplay
autoplay
如果出现该属性，则视频在就绪后马上播放。
controls
controls
如果出现该属性，则向用户显示控件，比如播放按钮。
height
pixels
设置视频播放器的高度。
loop
loop
如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload
preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src
url
要播放的视频的URL。
width
pixels
设置视频播放器的宽度。
文档声明更简单了。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <!--在HTML5中，这样写：-->
3 <!DOCTYPE html>
•html标签上不需要声明命名空间。
1 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
2 <!--在HTML5中，这样写：-->
3 <html lang="zh-CN">
•字符集编码声明也简单了
1 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
2 <!--在HTML5中，这样写：-->
3 <meta charset="UTF-8" />
•可以不用给css及javascript代码写type属性了
1 <script type="text/javascript"></script>
2 <style type="text/css"></style>
3 <!--在HTML5中，可以直接写：-->
4 <script></script>
5 <style></style>
•没有XHTML代码规范的要求
所有的标记都必须要有一个相应的结束标记；
所有标签的元素和属性的名字都必须使用小写；
所有的XML标记都必须合理嵌套；
所有的属性必须用引号”"括起来；
1 <div class=test></div>
2 <br>
3 <INPUT TYPE="TEXT" />
4 <!--这些都不做严格要求-->
////////////////////////////////////////////
HTML5基本布局
<!DOCTYPE html>
<htmlang = "en">
<head>
<meta charset = "utf-8">
<title>HTML5 Demo</title>
<body>
<header>
<h1></h1>
<h2></h2>
</header>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
<section>
<article></article>
<article></article>
</section>
<aside></aside>
<footer></footer>
</body>
</html>
/////////////////////////////////////////////////////////
HTMl5结构元素:header
<header>
<div class="container_16">
<div class="logo">
<h1><a href="index.html"><strong>Real</strong> Estate</a></h1>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index-1.html" class="current">Selling</a></li>
<li><a href="index-2.html">Buying</a></li>
<li><a href="index-3.html">Renting</a></li>
</ul>
</nav>
<div id="faded">
<div class="rap">
<a href="#"><img src=big-img1.jpg width=571 height=398></a>
<a href="#"><img src=big-img2.jpg width=571 height=398></a>
</div>
<img src="images/extra-banner.png" alt="" class="extra-banner">
</div>
</div>
</header>
///////////////////////////////////////
HTMl5结构元素:nav
<nav>
<p><a href=“/”>Home</a></p>
<p><a href=“/about”>About</a></p>
</nav>
<nav>元素是一个包装器，它不会代替<ol>或<ul>，但是会包围它。
<nav>
<h2>Main navigation</h2>
<ul>
<li><a href=”/about”>About me</a></li>
<li><a href=”/news”>News</a></li>
</ul>
</nav>
//////////////////////////////////////////
HTMl5结构元素:footer
<body>
<nav>…</nav>
<div id=mainContent>…</div>
<aside>
<nav>
<h2>…</h2>
<ul>…</ul>
</nav>
<nav>
<h2>…</h2>
<ul>…</ul>
</nav>
</aside>
<footer>
<small>
©2010 Copyright © 2012 BACDDF Inc. All Rights Reserved
</small>
</footer>
</body>
////////////////////////////////////////////
HTMl5结构元素:article
<article>
<h1>My article</h1>
<p>Blah blah</p>
</article>
<!doctype html>
<html lang=en>
<head>
<title>………</title>
</head>
<body>
<header>
<h2>……</h2>
<nav>……</nav>
</header>
<nav>
<h2>………</h2>
<ul>
<li><a href=“#”>………</a></li>
<li><a href=“#”>………</a></li>
</ul>
</nav>
<article>
<h1>………</h1>
<p>………</p>
</article>
<article>
<h1>………</h1>
<p>………</p>
</article>
<footer>
<p>
<small>………</small>
</p>
</footer>
</body>
///////////////////////////////////////
HTML5视频标签video
HTML5 <video> 标签支持3种常用的视频格式：1、Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件；2、MPEG4 = 带有H.264 视频编码和AAC 音频编码的MPEG 4 文件；3、WebM = 带有VP8 视频编码和Vorbis 音频编码的WebM 文件。现在主流浏览器对视频格式的支持都有所不同，相信HTML5正式发布的那天 <video> 会支持更多的视频格式，给开发者和用户带来不少的好处。
下面来讲讲HTML5视频标签videos的使用,如果需要在浏览器中显示视频，你所需要的就是复制下面的代码：
<video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
control 属性供添加播放、暂停和音量控件。包含Width宽度和高度height属性也是不错的主意。<video> 与</video> 之间插入的内容是供不支持video 元素的浏览器显示的。
上面的代码使用一个Ogg 文件，适用于Firefox、Opera 以及谷歌Chrome 浏览器。要确保适用于Safari 浏览器，视频文件必须使用MPEG4 格式。IE8是不支持HTML5的<video>标签，IE9支持该标签，但也必须使用MPEG4格式。
video 元素允许多个source 元素。source 元素可以链接不同格式的视频文件。浏览器检测并使用第一个可识别的格式，代码如下：
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
下面介绍下<video> 标签的常用属性：
属性
值
描述
autoplay
autoplay
如果出现该属性，则视频在就绪后马上播放。
controls
controls
如果出现该属性，则向用户显示控件，比如播放按钮。
height
pixels
设置视频播放器的高度。
loop
loop
如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload
preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。
src
url
要播放的视频的URL。
width
pixels
设置视频播放器的宽度。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- python基础教程学习笔记---(6)文件读写
- HTML5基础学习笔记（二十）
- [Matlab]基础教程学习笔记（七）：符号运算
- wml语言学习笔记--基础教程(转)
- HTML5基础学习笔记（二）
- HTML5基础学习笔记（三）
- IOS开发基础教程学习笔记1（第6章）多视图应用程序
- Scala学习教程笔记一之基础语法，条件控制，循环控制，函数，数组，集合
- python基础教程_学习笔记24：网络编程、Python和万维网
- python基础教程学习笔记---(1)基础语法
- IO流01--毕向东JAVA基础教程视频学习笔记
- Objective-C基础教程学习笔记（十二）类别
- Objective-C基础教程学习笔记（附录）从Java转向Objective-C
- HTML5基础学习笔记（六）
- Lua基础教程之赋值语句、表达式、流程控制、函数学习笔记
- Learn the object-c on MAC(中译本: Object-C 基础教程 ) 学习笔记
- [Matlab]基础教程学习笔记（四）：二维高层绘图操作
- 黑马程序员——Java基础教程学习笔记
- 网络编程4--毕向东java基础教程视频学习笔记
- Objective-C基础教程学习笔记 内存管理