html5笔记(1)概述

一、Html5的内容类型

1、内嵌:向文档中添加其他类型的内容,例如audio、video、canvas和iframe等

2、流:在文档和应用的body中使用的元素,例如form、h1和small等

3、标题:段落标题,例如h1、h2和hgroup等

4、交互:与用户交互的内容,例如音频和视频控件、button和textarea等

5、元数据:通常出现在页面的head中,设置页面其他部分的表现和行为,例如script、style和title等

6、短语:文本和文本标记元素、例如mark、kbd、sub和sup等

7、片段:用于定义文档中片段的元素,例如article、aside和title等


二、Html5中新的片段类元素

1、header:标记头部区域的内容(用于整个页面或页面中的一块区域)

2、footer:  标记脚步区域的内容(用于整个页面或页面中的一块区域)

3、section:web页面中的一块区域

4、article: 独立的文章内容

5、aside:  相关内容或者引文

6、nav:     导航类辅助内容


三、贴一段代码(没有css的效果,明天添加CSS效果)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>

<body>
<header>
<h1>header</h1>
<h2>subtitle<h2>
<h4>Html5 Rocks!</h4>
</header>

<div id="container">
<nav>
<h3>Nav</h3>
<a href="http://www.example.com">Link 1</a>
<a href="http://www.example.com">Link 2</a>
<a href="http://www.example.com">Link 3</a>
</nav>
<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet,consectetur adipiscing elit. 
	Vivamus at est eros, Vel fringilla urna.</p>
<p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque,
turpis lorem dictum nunc.</p>
<footer>
<h2> Article Footer</h2>
</footer>
</article>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>HTML5:Lorem ipsum dolor nunc aut nunquam sit amet,consectetur adipiscing elit.
	Vivamus at est eros, Vel fringilla urna. Pellentesqueodio</p>
<footer>
<h2>Article Footer</h2>
</footer>
<article>
</section>
<aside>
<h3>Aside</h3>
<p>HTML5:Lorem ipsum dolor nunc aut nunquam sit amet,consectetur adipiscing elit.
	Vivamus at est eros, Vel fringilla urna. Pellentesqueodio</p>
</aside>
<footer>
<h2>Footer</h2>
<footer>
</div>
</body>
</html>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章