doctype声明:
<!DOCTYPE html>
字符编码:
<meta charset="utf-8">
不允许写结束标记:area,base,br.col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr
可以省略结束标记:li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th
<!DOCTYPE html> <meta charset="utf-8"> <title>ger</title> <p>HTML5 <br/>语法
新增结构元素:
<section></section> //页面中大的内容区块 <article></article> //文章 <aside></aside> //与article内容相关辅助信息 <header></header> //标题 <footer></footer> //页脚 <nav></nav> //导航 <figure></figure> //常与figcaption搭配使用 <main></main> //网页中主要内容
<video src=""></video> //视频 <audio src=""></audio> //音频 <embed src=""/> //多媒体 <mark></mark> //高亮 <progress></progress> //表示运行中的进程 <meter></meter> //度量衡 <time></time> <ruby></ruby> //注释 <wbr> //软换行(字符型语言) <canvas></canvas> <command onclick="cut()" label="cut"> <details></details> //点击标题获取细节 <datalist></datalist> //可选数据的列表,与input搭配 <datagrid></datagrid> //可选数据列表,树形 <keygen> //生成密钥 <output></output> //不同类型输出 <menu></menu> <dialog></dialog> //对话框
全局属性
contentEditable=true|false //属性值为true时可由使用者编辑
designMode=on|off //属性为on时contentEditable功能可实现,该属性只能用js实现
hidden=true|false //是否隐藏
spellcheck=true|false //针对input和text area拼写和语法检查
下面给出一个例子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>example for html5</title> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="left"></div> <div class="right"></div> <header> <p>html5网页xxxxxxxxxxxxxxxxxxx </header> <nav> <a href=#>链接一</a><br/><br/> <a href=#>链接二</a><br/><br/> <a href=#>链接三</a><br/><br/> <a href=#>链接四</a><br/><br/> <a href=#>链接五</a><br/><br/> <a href=#>链接六</a><br/><br/> <a href=#>链接七</a><br/><br/> <a href=#>链接八</a><br/><br/> <a href=#>链接九</a><br/><br/> <a href=#>链接十</a><br/><br/> </nav> <main> <details> <summary >main</summary> <p>details元素和summary搭配使用,实现列表展开与隐藏,还可应用于导航<br/> <a href=#>链接一</a><br/> <a href=#>链接二</a> </details> <section contentEditable="true"> <p>这个文本可以编辑。(contentEditable) </section> <p>mark标签用于<mark>高亮元素</mark>。<br/> <details> <summary>datalist</summary> <p>datalist要与input搭配使用,并且input中list属性值与datalist中的id属性值一致 </details> <input id="mycar" list="car" /> <datalist id="car"> <option value="bmw"> <option value="benz"> <option value="lanboginy(error??)"> </datalist> <dialog>对话框 </dialog> </main> <footer> <p>footer<br/> <a href=#>联系我们</a> <a href=#>网络警察</a> <a href=#>商业合作</a> </footer> </body> </html>
a{color:#333;text-decoration:none; color:#cc3366}
header{position:absolute; top:5px; left:50%; right:5px; height:auto;margin-left:-180px;width:30%;}
nav{position:absolute;top:50px;left:50%;height:auto;width:auto;margin-left:-250px;padding:5px 5px 5px 5px;border:1px solid #eed}
main{position:absolute ;top:50px ;left:50% ;height:auto ;width:300px ;margin-left:-150px;padding:5px 5px 5px 5px;border:1px solid #eee}
footer{position:absolute;bottom:20px;left:0px ;right:5px; height:30px;text-align:center}
.left{position:absolute;left:0px;top:0px;width:30%;height:100%;background-color:#ffffcc}
.right{position:absolute;right:0px;top:0px;width:30%;height:100%;background-color:#ffffcc}