简介
- 新增了audio和video音视频播放，抛弃了Flash
- 新增了canvas画布，用来进行绘画或制作动画（如小游戏开发等）
- 地理定位
- 增加了离线缓存
- 硬件加速
- Web Socket（全双工通信）
- 增加了本地存储
- 新增了一些语义化标签
- 网页布局标签
语义化标签
| 标签 | 说明 | 级别 |
|---|
| mark | 高亮显示 | 行级 |
| details(描述)和summary(摘要) | 一般用于名词解释或用于封装一个区块等 | |
| meter | 定义度量衡，属性value/min/max | |
| progress | 进度条，属性value/min/max | |
| dialogue | 定义对话框或窗口 | |
| figure | 用于对元素进行组合，一般用来组合一张图的标题、图片和图片描述等 | |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimWor</title>
<style type="text/css">
body {
overflow: hidden;
}
dialog {
position: relative;
}
dialog span {
position: absolute;
padding: 10px;
right: 0px;
top: 0px;
cursor: pointer;
}
figure {
width: 200px;
text-align: center;
}
figure img {
width: 100%;
}
figure p {
margin-top: -4px;
}
</style>
</head>
<body>
<p><mark>FusionInsight HD</mark>：在Apache Hadoop开源生态圈的基础上，结合国内大数据未来应用场景给出的一套综合性解决方案。</p>
<details>
<summary>大前端开发</summary>
<h2>大前端开发包括：</h2>
<ul>
<li>组件化开发</li>
<li>模块化开发</li>
<li>自动化开发</li>
<li>后台开发</li>
</ul>
</details>
<meter value="100" min="80" max="120"></meter>
<p>任务已完成：<progress value="37" max="100"></p>
<dialog open>
<span>×</span>
<h2>大前端开发包括：</h2>
<ul>
<li>组件化开发</li>
<li>模块化开发</li>
<li>自动化开发</li>
<li>后台开发</li>
</ul>
</dialog>
<figure>
<h4>夏日风情</h4>
<img src="http://www.loveyd.com/upimg/allimgs/080513/03404711.jpg" alt="夏日风情">
<p>花儿朵朵开，心情无限好</p>
</figure>
</body>
</html>
多媒体
播放音乐或音频，支持的格式 .mp3/.ogg/.wav。
| 属性 | 说明 |
|---|
| src | 文件路径 |
| autoplay | 自动播放 |
| loop | 循环 |
| controls | 控制条 |
| muted | 静音 |
| preload | 预加载，当使用autoplay时失效 |
播放视频，支持的格式 .mp4/.ogg/.webm
| 属性 | 说明 |
|---|
| src | 文件路径 |
| autoplay | 自动播放 |
| loop | 循环 |
| controls | 控制条 |
| muted | 静音 |
| preload | 预加载，当使用autoplay时失效 |
| width | 宽度 |
| height | 高度 |
| poster | 海报 |
嵌入内容或加载插件
| 属性 | 说明 |
|---|
| src | 文件路径 |
| autoplay | 自动播放 |
| width | 宽度 |
| height | 高度 |
| type | 类型 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimWor</title>
</head>
<body>
<audio src="/path/to/target.mp3" controls autoplay loop="2"></audio>
<video src="/path/to/target.mp4" autoplay controls loop="2" width="400" poster="http://www.loveyd.com/upimg/allimgs/080513/03404711.jpg"></video>
<embed src="/path/to/target.swf" type="application/x-shockwave-flash"></embed>
</body>
</html>
画布，是一个容器元素（单独使用canvas没有什么意义，它必须结合JS使用；canvas的宽高最好不要通过css实现，而是直接使用标签属性width和height实现）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimWor</title>
</head>
<body>
<canvas width="400" height="200" style="background: yellow"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ff0000';
ctx.fillRect(50,70,200,100);
</script>
</html>
新增常用属性
| 属性 | 说明 |
|---|
| contentEditable | 将标签转换为可编辑状态，可用于所有标签，值true/false |
| hidden | 对元素进行隐藏，一般用来传值或当某个条件成立时，执行内容显示 |
| data-* | 用于存储页面或应用程序的私有自定义数据，一般用于传值 |
| multiple | 规定输入域中可以选择多个内容，用于表单组件file/select中 |
| required | 约束表单元素再提交前必须输入值；用于表单组件中，需要结合提交按钮使用 |
| pattern | 用于验证输入字段的模式；用于表单组件中，需要结合提交按钮使用 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimWor</title>
</head>
<body>
<p contenteditable="true">contenteditable</p>
<div class="box">box1</div>
<div class="box" hidden>box2</div>
<div class="box">box3</div>
<p data-id="00001">这是内容</p>
<select multiple="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<form action="#">
<input type="text" placeholder="请输入用户名" required><br>
<input type="email" placeholder="请输入邮箱"><br>
<input type="submit">
</form>
<form action="#">
<input type="text" pattern="[A-Za-z0-9]{6,8}"><br>
<input type="submit">
</form>
</body>
</html>
表单新增内容
| 组件 | 说明 |
|---|
| color | 颜色 |
| email | 邮箱 |
| tel | 电话 |
| url | 网址 |
| number | 数字 |
| range | 范围 |
| search | 搜索 |
| date | 日期 |
| datetime | 日期时间 |
| datetime-local | 本地日期时间 |
| year | 年 |
| month | 月 |
| time | 时间 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimWor</title>
</head>
<body>
<form action="#">
<input type="color"><br>
<input type="email"><br>
<input type="tel"><br>
<input type="url"><br>
<input type="number" step="10" min="-100" max="100"><br>
<input type="range" value="20" max="100"><br>
<input type="search"><br>
<input type="date"><br>
<input type="datetime"><br>
<input type="datetime-local"><br>
<input type="week"><br>
<input type="month"><br>
<input type="year"><br>
<input type="time"><br>
<input type="submit">
</form>
</body>
</html>
| 属性 | 说明 |
|---|
| formaction | 修改action数据提交的地方 |
| formenctype | 修改表单请求的类型 |
| formmethod | 修改数据提交的方法 |
| form | 设置表单元素属于哪个表单 |
| novalidate | 不验证 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimWor</title>
</head>
<body>
<form action="//baidu.com">
<input type="submit" formaction="//163.com">
</form>
<form action="#" enctype="application/x-www-form-urlencoded">
<input type="submit" formenctype="multipart/form-data">
</form>
<form action="#" method="get">
<input type="text" name="username">
<input type="submit" formmethod="post">
</form>
<form action="#" id="user-info">
<input type="text" name="username">
<input type="submit">
</form>
<input type="password" name="userpwd" form="user-info">
<form action="#" method="get" novalidate>
<input type="email" name="useremail">
<input type="submit">
</form>
</body>
</html>
| 属性 | 说明 |
|---|
| *autocomplete | 自动完成；用来帮助用户输入，每一次输入的内容，浏览器是否保存输入的值，以备将来使用；值有on/off；为了保护敏感数据（如账户密码等），避免本地浏览器对它们进行不安全存储，一般需要关闭 |
| *autofocus | 自动获焦 |
| step | 步长 |
| multiple | 多选 |
| pattern | 正则匹配 |
| *placeholder | 输入提示 |
| required | 必须输入 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimWor</title>
</head>
<body>
<form action="#">
<input type="text" name="username" autocomplete="off">
<input type="submit">
</form>
<form action="#">
<input type="text" name="username" autofocus>
<input type="submit">
</form>
<form action="#">
<input type="text" name="username" placeholder="请输入用户名">
<input type="submit">
</form>
</body>
</html>
小练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimWor</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Belgrano">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<aside>
<div class="logo">
<h1><a href="#">Corn Food</a></h1>
</div>
<nav>
<ul class="navlist">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Customers</a></li>
<li><a href="#">Contact</a></li>
</ul>
<audio src="material/Itsok.mp3" autoplay controls></audio>
</nav>
</aside>
<main>
<section>
<object data="material/spring.swf" type="application/x-shockwave-flash" width="719" height="428">
</object>
</section>
<section>
<article>
<a href="#">
<h2>Type and scrambled it to make a type</h2>
<video src="material/mov.ogg" controls width="163" height="112"></video>
</a>
<p class="small-post">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
<p class="date"><span> Jun 30, 2012 </span><a href="#">{ Continue! }</a></p>
</article>
<article>
<a href="#">
<h2>Lorem Ipsum has been the industry's</h2>
<video src="material/mov.ogg" controls width="163" height="112"></video>
</a>
<p class="small-post">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
<p class="date"><span> Jun 30, 2012 </span><a href="#">{ Continue! }</a></p>
</article>
<article>
<a href="#">
<h2>The industry's standard dummy text</h2>
<video src="material/mov.ogg" controls width="163" height="112"></video>
</a>
<p class="small-post">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>
<p class="date"><span> Jun 30, 2012 </span><a href="#">{ Continue! }</a></p>
</article>
</section>
<div class="clear"></div>
<section>
<h2>About</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,</p>
<p class="read-more">
<a href="#">{Read More!}</a>
</p>
</section>
</main>
</div>
<footer>
<p>
Copyright © Your Company Name. All rights reserved. Collect Form 网页模板, Validation <a href="">HTML5</a>|<a href="">CSS3</a>
</p>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #900000;
}
li {
list-style-type: none;
}
body {
font-family: Belgrano, serif;
font-size: 14px;
background: url(material/siteBackground.jpg);
padding-top: 10px;
color: #452200;
}
.container {
width: 1100px;
margin: 0 auto;
overflow: hidden;
}
aside {
float: left;
width: 320px;
}
.logo {
float: left;
background: url(material/logoBackground.png) no-repeat;
width: 206px;
height: 205px;
}
.logo h1 {
font-size: 60px;
color: #883b12;
font-family: Lobster, sans-serif;
line-height: 60px;
padding: 43px 0 0 43px;
}
.logo h1 a {
color: #5a270b;
text-shadow: 1px 1px 1px #fff;
}
.navlist {
padding-right: 40px;
text-align: center;
}
.navlist li {
padding: 5px 0;
font-family: Lobster, sans-serif;
text-shadow: 1px 1px 1px #fff;
font-size: 36px;
}
.navlist li a {
color: #ac8829;
}
.navlist li a:hover {
color: #452200;
}
.navlist li a.active {
color: #452200;
}
main {
float: right;
width: 750px;
}
main article {
width: 193px;
float: left;
margin: 0 57px 27px 0;
}
main h2 {
font-family: Lobster, sans-serif;
font-size: 30px;
padding: 10px 0;
color: #883b12;
text-shadow: 1px 1px 2px #fff;
}
main .title {
line-height: 2em;
}
main article a h2:hover {
color: #452200;
}
main p {
line-height: 1.5em;
}
.date, .read-more {
font-weight: bold;
font-style: italic;
font-size: 14px;
margin-top: 10px;
}
main .date span {
color: #ac8829;
}
.clear {
clear: both;
}
footer {
width: 1100px;
margin: 30px auto 0;
text-align: center;
border-top: 1px solid #ac8829;
}
footer p {
padding: 30px 20px;
}
扫一扫
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
