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. [转载]innodb 的预读

    innodb在io的优化上有个比较重要的特性为预读,innodb以64个page为一个extent,那么innodb的预读是以page为单位还是以extent? 这样就进入了下面的话题:linear ...

  2. JMeter-自动生成测试报告

    很多朋友都在问jmeter如何生成测试报告,这里随便说两句. 环境要求 1:jmeter3.0版本之后开始支持动态生成测试报表 2:jdk版本1.7以上 3:需要jmx脚本文件 基本操作 1:在你的脚 ...

  3. 【CentOS】php编译安装gd库

    一.准备工作 使用之前服务器按源码最小化安装完nginx.php-fpm,没有安装gd库,下面介绍下gd库的安装. gd库是一个开源的图像处理库,它通过提供一系列用来处理图片的API,使其可以用来创建 ...

  4. javascript初识

    1.什么是js 基于对象和事件驱动并且具有相对安全性的客户端脚本语言,由网景公司开发.     2.js数据类型   1.基本数据类型 undefined,null,number,boolean,st ...

  5. 【ASP.NET MVC系列】浅谈表单和HTML辅助方法

    [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP. ...

  6. vue-router 组件复用问题

    组件系统是Vue的一个重要组成部分,它可以将一个复杂的页面抽象分解成许多小型.独立.可复用的组件,通过组合组件来组成应用程序,结合vue-router的路由功能将各个组件映射到相应的路由上,通过路由的 ...

  7. （转）Docker之Compose服务编排

    转自:https://www.cnblogs.com/52fhy/p/5991344.html Compose是Docker的服务编排工具,主要用来构建基于Docker的复杂应用,Compose 通过 ...

  8. [bzoj3702] 二叉树

    一个节点的儿子是否交换,不会影响到它和兄弟节点间的逆序对数. 所以每次合并线段树的时候算一下交换与不交换的逆序对数,然后选个较小值就行了. #include<cstdio> #includ ...

  9. React Native学习（六）—— 轮播图

    本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...

  10. RxJava整合Retrofit遇到的问题总结

    一:初上手(填坑) Observable将事件序列执行完毕后,会回调Observe的onNext()方法和onCompleted()方法,当出现异常/错误时会调用onError()方法. 由此,我们推 ...