html5学习笔记(4)

2024-12-13 技术教程

XHTML可扩展的超文本标记语言

文档声明：

DTD：

html5与html4的区别

html5新增的元素：

结构元素：section ，article， aside， header，hgroup，footer, nav, figure

其他元素： video，audio, canvas,

input，元素类型：Email，

全局属性：

contentEditable

disignMode

hidden

spellcheck

tabindex

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><h3>contentEditable</h3><ulcontenteditable="true"><li>表1</li><li>表2</li><li>表3</li></ul><ulhidden="true"><li>表1</li><li>表2</li><li>表3</li></ul><inputtype="text"spellcheck=""><ahref="#"tabindex="1">hello1</a><ahref="#"tabindex="2">hello2</a><ahref="#"tabindex="3">hello3</a></body></html>

新增的主体结构元素：

1 ， article

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>article</title></head><body><article><header><h2>thystar</h2><p>welcometojike</p></header><article><header>作者</header><p>评论</p><footer>time</footer></article><footer><p>底部</p></footer></article><article><h2>嵌套页面</h2><object><embedsrc="#"width="600"height="400"></embed></object></article></body></html>

2. section

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>article</title></head><body><section><h2>apple</h2><p>thisisanapple</p></section><article><h2>apple</h2><p>thisisanapple</p><section><h3>red</h3><p>thisisaredapple</p></section><section><h3>green</h3><p>thisisagreenapple</p></section></article><section><h2>fruit</h2><article><h2>apple</h2><p>thisisanapple</p></article><article><h2>apple</h2><p>thisisanapple</p></article><article><h2>apple</h2><p>thisisanapple</p></article></section></body></html>

3. nav 导航

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>article</title></head><body><nav><ul><li><ahref="#">主页</a></li><li><ahref="#">文档</li></ul></nav><article><header><h2>ssssssssssssss</h2><nav><ul><li><ahref="#">主页</a></li><li><ahref="#">文档</li></ul></nav></header><section><h2>ssssssssssssss</h2><nav><ul><li><ahref="#">主页</a></li><li><ahref="#">文档</li></ul></nav></section><footer><nav><ul><li><ahref="#">删除</a></li><li><ahref="#">修改</li></ul></nav></footer></article><footer><p><small>版权声明</small></p></footer></body></html>

aside元素

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><header><h2>jike</h2></header><article><h2>yufa</h2><p>zhengwen</p><aside><h2>jishi</h2><p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p></aside></article><aside><nav><h3>pinglu</h3><ul><li><ahref="#">20150101</a></li><li><ahref="#">20150102</a></li></ul></nav></aside></body></html>

time元素与微格式

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><timedatetime="20101010">2010-10-10</time><timedatetime="20101010T20:00">2010-10-10</time><timedatetime="20101010T20:00+09:00">2010-10-10</time></body></html>

pubdate

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

html5新增的非主体结构元素

header元素：

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><header><h2>页面标题</h2><ahref="#">jike</a><nav><ul><li><ahref="#">学习</a></li><li><ahref="#">技术</a></li><li><ahref="#">问答</a></li></ul></nav></header><article><header><h2>hello</h2></header></article></body></html>

footer

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><footer><ul><li><ahref="#">20150101</a></li><li><ahref="#">20150102</a></li></ul></footer><article><h2>yufa</h2><p>zhengwen</p><footer><h2>jishi</h2><p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p></footer></article><section><h2>ssssssssssssss</h2><footer><ul><li><ahref="#">主页</a></li><li><ahref="#">文档</li></ul></footer></section></body></html>

hgroup

<hgroup><h2>ssssssssssssss</h2><h3>ssssssssssssss</h3></hgroup>

address

极客学院：http://www.jikexueyuan.com/course/147.html