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}

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

Html5与CSS3权威指南百度云下载
Html5与CSS3权威指南百度云下载链接:http://pan.baidu.com/s/1hq6Dlvm 密码:php3
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
【HTML5 4】《HTML5与CSS3权威指南》 step1 导读
一.教程重点:以 HTML5和CSS3的新功能和新特性为导向,辅之以实战型实例页面二.内容概况: 第1部分:详细讲解HTML5相关知识,包括各主流浏览器对HTML5的支持情况. HTML5与H ...
HTML5与CSS3权威指南.pdf6
第11章获取地理位置信息 HTML5为window.navigator对象新增了一个geolocation属性取得当前地理位置 void getCurrentPosition(onSuccess, ...
HTML5与CSS3权威指南笔记案例1
第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...
HTML5与CSS3权威指南
第一章:Web时代的变迁 HTML5放心使用的理由: 兼容性:HTML5在老板本的浏览器上也可以正常运行: 实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能: ...
读《HTML5与CSS3权威指南（上册）》笔记
第二章 1.内容类型:“text/html”.DOCTYPE声明:<!DOCTYPE html>.指定字符编码:<meta charset="utf-8"> ...
HTML5与CSS3权威指南.pdf9
第21章 Media Queries相关样式该模块中允许添加媒体查询(media query)表达式,用以指定媒体类型,根据媒体类型来选择使用的样式(显示器.便携设备.电视机) 使用方法@media ...
HTML5与CSS3权威指南.pdf8
第17章与背景和边框相关的样式与背景相关的新增属性 background-clip指定背景的显示范围 background-origin指定绘制背景图像时的起点 background-size指定 ...
HTML5与CSS3权威指南.pdf5
第9章通信API 跨文档消息传输 HTML5提供了网页文档之间互相接收与发送信息的功能,不仅同源(域+端口号)的Web网页之间可以互相通信,甚至可以实现跨域通信想要接受从其他窗口发过来的信息,要对 ...

随机推荐

如何在一个项目中同时包含mvc建站、webapi接口
项目做得多了..就会发现有些小项目不想建太多的项目..现在思明在这里和大家分享一下如果再一个项目中同时包含mvc建站以及实现webapi接口 1.新建项目 aps.net web 应用程序 2 新建模 ...
orm查询
all:models.表名.objects.all() 结果是queryset集合 filter: models.表名.objects.filter() 结果是queryset集合 get: mode ...
Matlab与C++混合编程（依赖OpenCV）
Matlab与C++混合编程实际上就是通过Matlab的Mex工具将C++的代码编译成Matlab支持调用的可执行文件和函数接口.这样一方面可以在Matlab中利用已经编写好的函数,尽管这个函数是用C ...
visual core 运行 .net core bug处理
launch: program 'launch: launch.json must be configured. Change 'program' to the path to the executa ...
JavaScript获取页面宽度高度
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
isupper()函数
isupper()函数可以用来判断字符c是否为大写英文字母! 原型:extern int isupper(int c); 头文件:ctype.h 功能:判断字符c是否为大写英文字母说明:当参数c为大 ...
我的第二个网页制作：p,hn,br标签的使用
<html> <head> <title>这是我的第二个html代码</title> <body> <!-- <p>Hel ...
hdu_4463（最小生成树）
hdu_4463(最小生成树) 标签: 并查集题目链接题意: 求一个必须包含一条路径的最小生成树题解: 把那条边初始化成0 保证这条边一定会被选 #include<cstdio> # ...
ES5.0集群搭建
最近在网上看到很多ES集群的搭建方法,本人在这人使用Elasticsearch5.0.1版本,介绍如何搭建es集群并安装head插件和其他插件安装方法. 一.搭建环境(2台Centos7系统服务器) ...
Centos7安装docker-compse踩过的坑
一.概要本文,我们介绍如何在centos7环境下安装docker-compose, 记录下安装过程步骤以及遇到的问题还有解决办法. 二.安装方式 1.官方安装方式 sudo curl -L ht ...

HTML5与css3权威指南（一）

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

随机推荐

热门专题