一起学html5 第一课，简单了解

Silbo · 发表于 2012-4-18 18:01:41

首先要说一下，我是有div+css基础的，我也期望和我一起学习的人对div+css能有一定的了解。

译言网翻译了一套不错的教程，以下的笔记均是通过学习这篇文章记录的：http://select.yeeyan.org/view/213582/204942

html5的好处我就不介绍了，吵得这么热一定有优势，我们的目的就是学会使用html5，其他的在使用过程中慢慢感悟吧

我们先从一个例子来学习吧
两个文件：主页面main.html和样式表main-stylesheet.css
main.html代码如下，笔记记录其中：

<!doctype html>
<html lang="en">
//html5的头部没有那么多格式要求了，就这么写就可以了。en可以换成其他语言编码
<head>//head区和以前没有太大差别，放置样式和js代码以及title,keywords等信息的地方
<title>HTML5 Fundamentals Example</title>
<link rel="stylesheet" href="main-stylesheet.css" kesrc="main-stylesheet.css" />
</head>
<body>
<header>//header是html5新增的一个标签，header区主要展示页面的头部，放置一些大标题之类的文档。
<hgroup>//在header区里面还有一个hgroup标签，这也是html5新增标签，用于对网页或区段（section）的标题进行组合。
<h1>Acme United</h1>
<h2>A Simple HTML5 Example</h2>
</hgroup>
</header>
<nav>//html5新增标签nav，用来定义网页的主导航
<ul>
<li><a href="#" kesrc="#">Home</a></li>
<li><a href="#" kesrc="#">About Us</a></li>
<li><a href="#" kesrc="#">Contact Us</a></li>
</ul>
</nav>
<article>//html5新增标签article，该区域存放了页面的实际内容，以后不用到处都是div了
<header>//注意注意，header区域并不是头部才会有的，在任何一个区域都可以出现header，代表这个区域的大标题
<h1>
<a href="#" kesrc="#" title="Link to this post" rel="bookmark">Article Heading</a>
</h1>
</header>
<p> Primum non nocere ad vitam Paramus . . . </p>
<section>
<header>
<h1>This is the first section heading</h1>
</header>
<p>Scientia potentia est qua nocent docentp . . .</p>
</section>
<section>
//<section>标签用于分组的内容，<section>标签和<article>标签通常以一个<header>为开始并以一个<footer>结束，标签的内容则放在这两者之间。<section>标签也可以包含<article>标签，就像<article>标签可以包含<section>标签一样。section多表示并列的内容，article多表示完整的内容。
<header>
<h1>Second section with mark, aside, menu & figure</h1>
</header>
<p class="next-to-aside"> . . . <mark>veni, vidi, vici</mark>. Mater . . .</p>
<aside>//这一标签被看作是用来存放补充内容的地方，这些内容不是其所补充的一篇连续文章的组成部分。我理解这个标签就是放置在主内容旁边的区域类似经常用的样式sidebar
<p>This is an aside that has multiple lines. . . .</p>
</aside>
<menu label="File">//menu标签与nav不同，相当于小的btn组合
<button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button>
<button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia</button>
<button type="button" onClick="JavaScript:alert('Urania . . .')">Urania</button>
<button type="button" onClick="JavaScript:alert('Calliope . . .')">Calliope</button>
</menu>
<figure>//figure标签放图片
<img src="stonehenge.jpg" kesrc="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
<figcaption>Figure 1. Stonehenge</figcaption>//figcaption放图片标题
</figure>
</section>
<section>
<header>
<h1>This is a video section</h1>
</header>
<p>
<video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" kesrc="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv"
controls autoplay loop>
<div class="no-html5-video"><p>This video will work in
Mozilla Firefox or Google Chrome only. </p>
</div>
</video>//video标签放video……汗……
</p>
</section>
</article>
<footer>//footer元素包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或是日期。作为页面的页脚，其有可能包含了版权或是其他重要的法律信息
<p>Copyright: 2011 Acme United. All rights reserved.</p>
</footer>
</body>
</html>

复制代码

main-stylesheet.css 代码如下，笔记记录其中：

* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 800px;
margin: 0em auto;
}
header h1 {
font-size: 50px;
margin: 0px;
color: #006;
}
header h2 {
font-size: 15px;
margin: 0px;
color: #99f;
font-style: italic;
}
nav ul {//nav不是一个class，前面不用加“.”
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #99f;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #006;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header h1 {//设置article中的header样式，使用了">"的方式
font-size: 40px;
float: left;
margin-left: 14px;
}
article > header h1 a {
color: #000090;
text-decoration: none;
}
article > section header h1 {
font-size: 20px;
margin-left: 25px;
}
article p {
clear: both;
margin-top: 0px;
margin-left: 50px;
}
article p.next-to-aside {
width: 500px;
}
article > section figure {
margin-left: 180px;
margin-bottom: 30px;
}
article > section > menu {
margin-left: 120px;
}
aside p {
position:relative;
left:0px;
top: -100px;
z-index: 1;
width: 200px;
float: right;
font-style: italic;
color: #99f;
}
article > section video {
height: 200px;
margin-left: 180px;
}
article > section div.no-html5-video{
height: 20px;
text-align: center;
color: #000090;
font-size: 13px;
font-style: italic;
font-weight: bold ;
background-color: #99f;
}
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}

复制代码

joybat · 发表于 2012-8-31 09:58:04

顶了~！