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网页之间可以互相通信,甚至可以实现跨域通信 想要接受从其他窗口发过来的信息,要对 ...
随机推荐
- CentOS7配置静态IP
确保是在root用户下进行操作,首先进入network-scripts目录 cd /etc/sysconfig/network-scripts/ 通过ls列出该目录下的所有文件,其中"ifc ...
- 使用python写一个简单的C段扫
纠结C段查询N久..刚刚拿骚棒FD去抓御剑的包,发现emmm...申请了必应的Key 然后去拿必应API查.这里疼[心]原本也想去弄的.但是人懒. 然后就没有然后了. 代码: 生成IP段的脚本图1 # ...
- lodash源码分析之缓存方式的选择
每个人心里都有一团火,路过的人只看到烟. --<至爱梵高·星空之谜> 本文为读 lodash 源码的第八篇,后续文章会更新到这个仓库中,欢迎 star:pocket-lodash gitb ...
- zoj 3228:Searching the String
Description Little jay really hates to deal with string. But moondy likes it very much, and she's so ...
- 2017ecjtu-summer training #6 Gym 100952D
D. Time to go back time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- android组件化方案、二维码扫码、Kotlin新闻客户端、动画特效等源码
Android精选源码 CalendarView日历选择器 android下拉刷新动画效果代码 一个非常方便的fragment页面框架 android组件化方案源码 Zxing实现二维码条形码的扫描和 ...
- 配置ubuntu网络
第一步:找到ubuntu中的网络标志,点击Edit connection 第二步:点击Add会出来一行配置网络的提示 第三步:选中Wired connectiong 1 然后点击Edit 第四步:选中 ...
- PHPStudy+PHPStorm下配置隐藏项目入口文件
img { max-width: 100% } 默认情况下项目入口文件是站点根目录下index.php文件,一般程序启动时通过这个文件,定义文件路径,配置重要节点(比如是否开启调试模式),注册路由等, ...
- Node.js系列-http
前言: 最近一直忙着公司项目的事,战友们的留言也没空回复,博客也有段时间没有更新了,年底了就是一个的忙啊~~~(ps:同感的也给个赞吧) 现在前端的就是一直地更新一直有新的东西出来,什么ES2015, ...
- 将DedeCMS从子目录移动到根目录的方法
http://www.commonie.com/a/chat/dedeskill/298.html 以前做了一个Wordpress的博客,后来觉得采用DedeCMS更好一点,所以就有了转向DedeCM ...