HTML5与css3权威指南（一）

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}

 

posted @ 2017-07-09 19:55  kkdf  阅读(358)  评论(0)  编辑  收藏  举报