html5的骨架
<!--DTD IE6 7不支持 IE8支持-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--字符集的设置-->
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我是html5</P>
</body>
</html>以上就是html5的最新的架构。
html5其实可以理解为html的变化+css3+js,api的变化。主要有以下几点变化。
* 语义：能够让你更恰当地描述你的内容是什么。
html5新增了很多语义的标签 提纲标签、表单标签
* 连通性：能够让你和服务器之间通过创新的新技术方法进行通信
web socket 让浏览器和服务器之间保持持久联通
http 聊天室 定时器
* 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
现在 h5提供了用js操作小型迷你数据库 叫做sessionstorge localstorge
* 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
* 2D/3D 绘图 & 效果
Canvas WebGL svg
* 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
web worker
增加api 拖放api 等
* 设备访问 Device Access：能够处理各种输入和输出设备。
* 样式设计: 让作者们来创作更加复杂的主题吧！就是用到css3
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
本章主要讲解html5的新增的语义的标签
提纲标签
我们先来举个例子之前我们定义一个导航栏的div，<div class="nav"></div>
现在呢html5用<nav></nav>,可以这么理解<nav></nav>的语义就是<div class="nav"></div>,但是需要注意的是<nav>标签自己是没有样式的，什么样式都没有，就是多了个导航栏的语义。
接下来我们来了解和认识一下常用的提纲标签。
- <section></section> 具备主题的区域
- <article></article> 表示页面中一块与上下文不相关的独立内容。比如一篇文章。
- <nav></nav> 表示页面中导航链接的部分。
- <header></header> 表示页面中一个内容区块或真个页面的标题。
- <footer></footer> 表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。
- <aside></aside> 表示article元素内容之外的、与article元素内容相关的辅助信息。可以理解为广告
- <hgroup></hgroup> 表示对真个页面或页面中的一个内容区块的标题进行组合。
接下来我们写一个demo，来加深一下对html5的提纲标签的理解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
header {
width: 1000px;
height: 100px;
margin: 0 auto;
background-color: #ccc;
}
header .logo {
float: left;
width: 100px;
height: 40px;
background-color: red;
}
header nav {
float: right;
width: 600px;
height: 40px;
background-color: pink;
}
section {
width: 1000px;
height: 500px;
margin: 0 auto;
margin-top: 10px;
}
section aside {
float: left;
width: 250px;
height: 500px;
background-color: green;
}
section article {
float: right;
width: 740px;
height: 500px;
background-color: orange;
}
footer {
width: 1000px;
height: 100px;
margin: 0 auto;
background-color: skyblue;
margin-top: 10px;
}
</style>
</head>
<body>
<header>
<div class="logo"></div>
<nav></nav>
</header>
<section class="content">
<aside>
我是广告
</aside>
<article>
<hgroup>
<h1>主标题</h1>
<h2>副标题</h2>
</hgroup>
<p>1111</p>
<p>2222</p>
<p>3333</p>
<p>4444</p>
</article>
</section>
<footer>
</footer>
</body>
</html>
提纲标签的说明：
- 这些提纲标签语义上都比div要大，所以div不能去包裹这些标签。接着这些提纲标签自身是没有样式的，且也是块级元素，用法和div一样。
- 兼容IE9，IE8不能用，手机WEB可以放心使用，手机的浏览器不是IE。
新增语义标签
- figure figcaption
- progress
- address
- mark
- ruby rp rt
标签定义 ruby 注释（中文注音或字符）。ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
下面上实例代码把
<figure>
<img src="img/liushishi.jpg" width="400px" height="400px" alt="">
<figcaption>刘诗诗 偶像</figcaption>
</figure>
<progress max="100" value="60">60%</progress>
<address>安徽省黄山市</address>
<p>为了养家糊口，我们必须<mark>好好学习</mark></p>
<ruby>
漢<rp>(</rp><rt>hàn</rt><rp>)</rp>
字<rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>
<ruby>
汉 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>新增表单元素
type:number
示例:<input type="number" min="1" max="120" />，显示一个输入框，只能输入数字且数字的最小值为１最大值为120
type:email
示例:<input type="email" /> ,显示一个输入框，需要输入正确的email格式的内容
type:url
示例:<input type="url" />，显示一个输入框，需要输入正确的网址的格式的内容
type:date
示例:<input type="date" />，显示一个选择器，选择年月日
type:color
示例:<input type="color" id="color"/>，显示一个按钮，可以选择颜色
label
html5的用法:<label><input type="radio" name="sex" />男</label>
非html5的用法:<label for="biantai">人妖</label<input type="radio" id="biantai" name="sex">
不同就是前者更方便了。
placeholder
示例:<input type="text" placeholder="请输入你的商品"/> 该属性就是来设置默认的内容
list
示例:<input type="text" list="country">
<datalist id="country"><option value="中国">中国</option>
<option value="美国">美国</option>
<option value="韩国">韩国</option>
<option value="马来西亚">马来西亚</option>
</datalist>
就是一个下拉框，但是可以根据你输入的值去检索到对应的内容
pattern
示例:<input type="tel" pattern="^[\d]{11}$" /> 该属性是用来设置正则表达式的
autofocus
示例:<input type="search" autofocus /> 该属性表示改标签在显示的时候，优先获取焦点
下面附上demo把
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<p>
请输入你的年龄
<input type="number" min="1" max="120" />
</p>
<p>
邮箱
<input type="email" />
</p>
<p>
微博
<input type="url" />
</p>
<p>
电话号码
<input type="tel" pattern="^[\d]{11}$" />
</p>
<p>
请输入搜索词
<input type="search" autofocus />
</p>
<p>
出生日
<input type="date" />
</p>
<p>
你最喜欢的颜色
<input type="color" id="color"/>
</p>
<p>
性别
<label>
<input type="radio" name="sex" />男
</label>
<label>
<input type="radio" name="sex" />女
</label>
<p>
输入搜索的商品
<input type="text" placeholder="请输入你的商品"/>
</p>
<p>
请输入你的国籍
<input type="text" list="country">
<datalist id="country">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="韩国">韩国</option>
<option value="马来西亚">马来西亚</option>
</datalist>
</p>
</form>
<script type="text/javascript">
var color = document.getElementById("color");
color.onchange = function() {
document.body.style.background = this.value;
}
</script>
</body>
</html>音频视频
html5中多了音频和视频，我们来看看音频和视频是如何使用的。下面直接上代码把
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>请欣赏</h1>
// html4.01插入音视频 借助于flash <iframe height=498 width=510 src='http://player.youku.com/embed/XMzM5MTEyODgxNg==' frameborder=0 'allowfullscreen'></iframe>
<!-- controls属性显示控件 autoplay 自动播放
-->
<video controls autoplay>
<source src="video/p-call.mp4"></source>
<source></source>
</video>
<audio autoplay src="audio/赵雷 - 成都.mp3" controls></audio>
</html>
3865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
