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. php 抽象类和接口类

    PHP中抽象类和接口类都是特殊类,通常配合面向对象的多态性一起使用. 相同: ①两者都是抽象类,都不能实例化. ②只有接口类的实现类和抽象类的子类实现了 已经声明的 抽象方法才能被实例化. 不同: ① ...

  2. sql servel 报错：将 expression 转换为数据类型 int 时出现算术溢出错误。

    执行sql语句:SELECT   AVG( DATEDIFF(s,s.CreatedDate,s.SendDate)  ) AS submitTime FROM dbo.SmsSend AS s    ...

  3. Django源码分析之程序执行入口分析

    一般我们开启一个django项目,最简单的方法是进入project 目录,这时目录结构是这样的 然后我们执行python manage.py runserver,程序就开始执行了. 那django是如 ...

  4. Codeforces #451 Div2 F

    #451 Div2 F 题意 给出一个由数字组成的字符串,要求添加一个加号和等号,满足数字无前导 0 且等式成立. 分析 对于这种只有数字的字符串,可以快速计算某一区间的字符串变成数字后并取模的值,首 ...

  5. Android基础_Service

    一.service的用途 1.1 一种是执行长时间运行的耗时操做 1.如网络下载.音乐播放2.文件系统监控等 1.2 另一种是负责组件间的交互 1.将某些功能以Service组件形式封装,然后提供给其 ...

  6. 使用reqire.js 生成二维码

    最新项目中使用到 reqiure.js  ; 使用了一个月的感觉是: 这个确实是一个利器,如果会使用的话,能轻易理顺js之间的依赖关系,从而可以重复使用js,可以减少代码量,可以提升开发速度,但是  ...

  7. Java与算法之(13) - 二叉搜索树

    查找是指在一批记录中找出满足指定条件的某一记录的过程,例如在数组{ 8, 4, 12, 2, 6, 10, 14, 1, 3, 5, 7, 9, 11, 13, 15 }中查找数字15,实现代码很简单 ...

  8. 学习笔记-echarts自定义背景图片

    困扰我已久的问题就解决了. code: //使用canvas把背景添加到echarts里 var img = new Image();var canvas = document.createEleme ...

  9. 枚举 输入流重载>> C++

    语言:C++ 我们可能会遇到这种情况:自己定义了一个枚举类型,但是却不知道如何重载输入流,使我们定义的枚举用起来不是很方便. 那么,如何去重载呢,我们先来看一下内置类型的测试过程: #include& ...

  10. bzoj:1230: [Usaco2008 Nov]lites 开关灯

    Description Farmer John尝试通过和奶牛们玩益智玩具来保持他的奶牛们思维敏捷. 其中一个大型玩具是牛栏中的灯. N (2 <= N <= 100,000) 头奶牛中的每 ...