html5学习笔记(4)-创新互联

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

10年积累的做网站、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先制作网站后付款的网站建设流程，更有巨野免费网站建设让你可以放心的选择与我们合作。

文档声明：

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> <h3>contentEditable</h3> <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> <h2>thystar</h2> <p>welcome to jike</p> </header> <article> <header> 作者 </header> <p>评论</p> <footer> time </footer> </article> <footer> <p>底部</p> </footer> </article> <article> <h2>嵌套页面</h2> <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> <h2>apple</h2> <p>this is an apple</p> </section> <article> <h2>apple</h2> <p>this is an apple</p> <section> <h3>red</h3> <p>this is a red apple</p> </section> <section> <h3>green</h3> <p>this is a green apple</p> </section> </article> <section> <h2>fruit</h2> <article> <h2>apple</h2> <p>this is an apple</p> </article> <article> <h2>apple</h2> <p>this is an apple</p> </article> <article> <h2>apple</h2> <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> <h2>ssssssssssssss</h2> <nav> <ul> <li><a href="#">主页</a></li> <li><a href="#">文档</li> </ul> </nav> </header> <section> <h2>ssssssssssssss</h2> <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> <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><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> <h2> pingguo </h2> <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> <h2>页面标题</h2> <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><h2>hello</h2></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> <h2>yufa</h2> <p>zhengwen</p> <footer> <h2>jishi</h2> <p>yufa:yigeduiyuyanlaishuohenzhongyaodeneirongti</p> </footer> </article> <section> <h2>ssssssssssssss</h2> <footer> <ul> <li><a href="#">主页</a></li> <li><a href="#">文档</li> </ul> </footer> </section> </body> </html>

hgroup

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

address

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

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站名称：html5学习笔记(4)-创新互联
文章地址：https://www.cdcxhl.com/article12/dgcidc.html

成都网站建设公司_创新互联，为您提供网站设计、云服务器、动态网站、建站公司、外贸建站、品牌网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容