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}

HTML5与css3权威指南（一）的更多相关文章

  1. Html5与CSS3权威指南 百度云下载

    Html5与CSS3权威指南 百度云下载 链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3

  2. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  3. 【HTML5 4】《HTML5与CSS3权威指南》 step1 导读

    一.教程重点:以 HTML5和CSS3的新功能和新特性 为导向,辅之以 实战型实例页面 二.内容概况: 第1部分:详细讲解HTML5相关知识,包括 各主流浏览器对HTML5的支持情况. HTML5与H ...

  4. HTML5与CSS3权威指南.pdf6

    第11章 获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性 取得当前地理位置 void getCurrentPosition(onSuccess, ...

  5. HTML5与CSS3权威指南笔记案例1

    第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...

  6. HTML5与CSS3权威指南

    第一章:Web时代的变迁 HTML5放心使用的理由: 兼容性:HTML5在老板本的浏览器上也可以正常运行: 实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能: ...

  7. 读《HTML5与CSS3权威指南（上册）》笔记

    第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...

  8. HTML5与CSS3权威指南.pdf9

    第21章 Media Queries相关样式 该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media ...

  9. HTML5与CSS3权威指南.pdf8

    第17章 与背景和边框相关的样式 与背景相关的新增属性 background-clip指定背景的显示范围 background-origin指定绘制背景图像时的起点 background-size指定 ...

  10. HTML5与CSS3权威指南.pdf5

    第9章 通信API 跨文档消息传输 HTML5提供了网页文档之间互相接收与发送信息的功能,不仅同源(域+端口号)的Web网页之间可以互相通信,甚至可以实现跨域通信 想要接受从其他窗口发过来的信息,要对 ...

随机推荐

  1. scrollify - 滚动条方式的全屏滚动

    jQuery Scrollify Version Beta v1.0.5 Date:2017-04-25 23:45 源代码 (function($, window, document) { 'use ...

  2. 使用docker+jenkins构建nodejs前端项目

    前文使用Docker搭建Jenkins+Docker持续集成环境我们已经搭建了基于docker+jenkins的持续集成环境,并构建了基于maven的项目.这一节,我们继续扩展功能,增加对Nodejs ...

  3. Jfinal控制器源码解读

    本文对Jfinal的控制器源码做以下分析. PS:控制器是所有请求跳转的基础,本文就Jfinal控制器的继承关系及初始化的方法做出解释说明. 啰嗦下:所有的请求和响应都是都是通过web容器封装,我们主 ...

  4. 【JavaScript的基本语法】

    [JavaScript的基本语法 ] 1.javascript输出 JavaScript语句向浏览器发出的命令.语句的作用是告诉浏览器该做什么. <script>      documen ...

  5. burpsuite截断绕过前端限制上传一句话

    设置代理,这里就不说了 打开上传界面 burpsuite开启拦截,上传lurp.hpg 在burp找到上传文件的格式改回原来一句话的格式 上传= =

  6. mysql中配置ssl_key、ssl-cert、ssl-ca的路径及建立ssl连接

    1.创建 CA 私钥和 CA 证书 (1)下载并安装openssl,将bin目录配置到环境变量: (2)设置openssl.cfg路径(若不设置会报错,找不到openssl配置文件) \bin\ope ...

  7. c#版 K线控件（Stock）

    K线起源于日本米市交易,它的基本用途就是为了寻找"买卖点".股市及期货市场中的K线图的画法包含四个数据,即开盘价.最高价.最低价.收盘价,所有的k线都是围绕这四个数据展开,反映大势 ...

  8. JS验证两次输入密码是否相同

    js中 <script>function check(){ with(document.all){if(input1.value!=input2.value){alert("fa ...

  9. Javascript Array 非常用方法解析

    在ECMAScript5的Array中已经有了Array.prototype.forEach,Array.prototype.filter,Array.prototype.map等方法 1. map ...

  10. 怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件？

    李宗申 2014-9-26 23:33:33 20人评论 分类:实用方法   摘要 : 如果用户得到的离线版的Chrome插件文件(扩展名为.crx),该如何将其安装到谷歌浏览器Chrome中去呢? ...