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. CentOS7配置静态IP

    确保是在root用户下进行操作,首先进入network-scripts目录 cd /etc/sysconfig/network-scripts/ 通过ls列出该目录下的所有文件,其中"ifc ...

  2. Class对象的创建与使用

    类与Class对象 类是程序的一部分,每个类都有一个Class对象,即每当编写并且编译一个新类的时候就会产生一个Class对象.当程序创建第一个对类的静态成员的引用的时候,会将该类动态加载到JVM中, ...

  3. shift+zz保存并退出

    shift+z 输出的是大写Z shift+zz就是命令ZZ ZZ 执行退出VIM操作,如果文本已经经过编辑,则首先保存文件.

  4. 数据结构之二叉树（BinaryTree）

    导读 二叉树是一种很常见的数据结构,但要注意的是,二叉树并不是树的特殊情况,二叉树与树是两种不一样的数据结构. 目录 一. 二叉树的定义 二.二叉树为何不是特殊的树 三.二叉树的五种基本形态 四.二叉 ...

  5. 【java开发系列】—— 集合使用方法

    一.首先看一下集合的框架图: 由于collection也继承了Iterator和comparable接口,因此我们可以使用Iterator来遍历元素,也可以通过自定义compareTo函数来重新编写自 ...

  6. 大数据学习系列之九---- Hive整合Spark和HBase以及相关测试

    前言 在之前的大数据学习系列之七 ----- Hadoop+Spark+Zookeeper+HBase+Hive集群搭建 中介绍了集群的环境搭建,但是在使用hive进行数据查询的时候会非常的慢,因为h ...

  7. MyBatis之基于XML的属性与列名映射

    上一博客主要是对单表的增删改查,比较简单,而且每个属性与table表的列都是一一对应名字也一样,今天主要学习属性与table表列名不一致的处理,主要有两种一是属性与列名不一致,二是枚举的情况,这里暂时 ...

  8. python查询完结篇

    0x00 网上找一个查询网站,然后自己写的一个脚本 0x01 代码送上: import requests import time from bs4 import BeautifulSoup strat ...

  9. POJ 3278 Catch That Cow(BFS,板子题)

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 88732   Accepted: 27795 ...

  10. UVA424高精度加法

    One of the first users of BIT's new supercomputer was Chip Diller. He extended his exploration of po ...