您的位置：首页 > Web前端 > HTML5

html5学习笔记(4)

2015-06-25 00:15 716 查看
XHTML可扩展的超文本标记语言

文档声明：
DTD：

html5与html4的区别

html5新增的元素：
结构元素：section ，article， aside， header，hgroup，footer, nav, figure

其他元素： video，audio, canvas,

input，元素类型：Email，

全局属性：
contentEditable

disignMode

hidden

spellcheck

tabindex

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>contentEditable</h2>
<ul contenteditable="true">
<li>表1</li>
<li>表2</li>
<li>表3</li>
</ul>
<ul hidden="true">
<li>表1</li>
<li>表2</li>
<li>表3</li>
</ul>
<input type="text" spellcheck="">
<a href="#" tabindex="1">hello1</a>
<a href="#" tabindex="2">hello2</a>
<a href="#" tabindex="3">hello3</a>
</body>
</html>


新增的主体结构元素：
1 ， article
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>article</title>
</head>
<body>
<article>
<header>
<h1>thystar</h1>
<p>welcome to jike</p>
</header>
<article>
<header>
作者
</header>
<p>评论</p>
<footer>
time
</footer>
</article>
<footer>
<p>底部</p>
</footer>
</article>
<article>
<h1>嵌套页面</h1>
<object>
<embed src="#" width="600" height="400"></embed>
</object>
</article>
</body>
</html>


2. section
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>article</title>
</head>
<body>
<section>
<h1>apple</h1>
<p>this is an apple</p>
</section>
<article>
<h1>apple</h1>
<p>this is an apple</p>
<section>
<h2>red</h2>
<p>this is a red apple</p>
</section>
<section>
<h2>green</h2>
<p>this is a green apple</p>
</section>
</article>
<section>
<h1>fruit</h1>
<article>
<h1>apple</h1>
<p>this is an apple</p>
</article>
<article>
<h1>apple</h1>
<p>this is an apple</p>
</article>
<article>
<h1>apple</h1>
<p>this is an apple</p>
</article>

</section>
</body>
</html>


3. nav 导航
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>article</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">文档</li>
</ul>
</nav>
<article>
<header>
<h1>ssssssssssssss</h1>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">文档</li>
</ul>
</nav>
</header>

<section>
<h1>ssssssssssssss</h1>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">文档</li>
</ul>
</nav>
</section>
<footer>
<nav>
<ul>
<li><a href="#">删除</a></li>
<li><a href="#">修改</li>
</ul>
</nav>
</footer>
</article>
<footer>
<p><small>版权声明</small></p>
</footer>
</body>
</html>


aside元素

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<h1>jike</h1>
</header>
<article>
<h1>yufa</h1>
<p>zhengwen</p>
<aside>
<h1>jishi</h1>
<p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p>
</aside>
</article>
<aside>
<nav>
<h2>pinglu</h2>
<ul>
<li><a href="#">20150101</a></li>
<li><a href="#">20150102</a></li>

</ul>
</nav>
</aside>
</body>
</html>


time元素与微格式

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<time datetime="20101010">2010-10-10</time>
<time datetime="20101010T20:00">2010-10-10</time>
<time datetime="20101010T20:00+09:00">2010-10-10</time>
</body>
</html>


pubdate
<body>
<article>
<h1>
pingguo
</h1>
<p><time datetime="2015-10-15" pubdate>2015-10-15</time></p>
<p><time datetime="2015-10-15" >2015-10-18</time></p>
</article>
</body>


html5新增的非主体结构元素
header元素：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<h1>页面标题</h1>
<a href="#">jike</a>
<nav>
<ul>
<li><a href="#">学习</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">问答</a></li>
</ul>
</nav>
</header>
<article>
<header><h1>hello</h1></header>
</article>

</body>
</html>


footer

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<footer>
<ul>
<li><a href="#">20150101</a></li>
<li><a href="#">20150102</a></li>
</ul>
</footer>
<article>
<h1>yufa</h1>
<p>zhengwen</p>
<footer>
<h1>jishi</h1>
<p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p>
</footer>
</article>
<section>
<h1>ssssssssssssss</h1>
<footer>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">文档</li>
</ul>
</footer>
</section>
</body>
</html>


hgroup
<hgroup>
<h1>ssssssssssssss</h1>
<h2>ssssssssssssss</h2>
</hgroup>


address
<body>
<address>
<a href="#">iven</a>
<a href="#">Iven</a>
</address>
<footer>
<div>
<address>
<a href="#">iven</a>
</address>
</div>
</footer>
</body>


极客学院：http://www.jikexueyuan.com/course/147.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Email video article footer figure
相关文章推荐
新的分享
章节导航