<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Html5的学习</title>
</head>
<body>
<!--
第一个：
描述：<article> 标签规定独立的自包含内容。
<aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关
-->
<article>
<h1 align="center">html5新特性的学习--大标题</h1>
<p>大标题---下的主要内容</p>
<aside>
<h3 align="middle">html5主要的学习 ---小标题</h3>
<p>小标题----的详细内容</p>
</aside>
</article>
<!--
第二个：
描述：绘制图形动画
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
-->
<canvas id="canvar" width="800" height="200" style="background: yellow"></canvas>
<script>
var c = document.getElementById("canvar"); //得到绘画的对象
var context = c.getContext("2d"); //创建 context 对象
//绘制直线
context.moveTo(30, 50); //把路径移动到画布中的指定点，不绘制线条（横、竖）
context.lineTo(80, 70); //添加一个新点，刚开始的点到最后一个点的线条（横、竖）
context.lineTo(120, 30);
context.stroke(); //最后将线条显示出来（必须）
//绘制一个实心圆
context.fillStyle = "#00ff00" //圆填充后的颜色
context.beginPath(); //开始一个新的起点
context.arc(200, 45, 40, 0, Math.PI * 2, true); //画一个圆形
context.closePath(); //创建当前点到起始点的路径
context.fill(); //填充当前的绘画
//绘制一个空心圆
context.strokeStyle = "#ff0000" //空心圆的颜色
context.beginPath(); //开始一个新的起点
context.arc(300, 45, 40, 0, Math.PI * 2, true); //画一个圆形
context.closePath(); //创建当前点到起始点的路径
context.stroke(); //填充当前的绘画
</script>
<br />
<!--
第三个：
描述：<datalist> 标签定义可选数据的列表。相当于spinner（下拉选择）
-->
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="php">
<option value="java">
<option value="android">
<option value="ios">
<option value="web">
</datalist>
<br />
<br />
<!--
第四个：
描述：<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。
<details> 标签用于描述文档或文档某个部分的细节。<summary>是其第一个子元素。（相当于二级菜单列表）
-->
<details>
<summary>家人</summary>
爸爸
<br /> 妈妈
</details>
<br />
<!--
第五个：
描述： <figure>定义媒介内容的分组，以及它们的标题。
<figcaption> 标签定义 figure 元素的标题。
-->
<figure>
<figcaption> " 恒博教育 " </figcaption>
<img src="http://www.hengboit.com/images/wutu3.jpg" width="350" height="234" />
</figure>
<!--
第六个：
描述：<header> 标签定义 section 或 document 的页眉。
-->
<header>
<h1>section或document的页眉</h1>
</header>
<hander>
<h1>section或document 的页眉</h1>
</hander>
<!--
第七个：
描述：<footer> 标签定义 section 或 document 的页脚。
-->
<footer>
<p>section或document的页脚，包含创作者、日期、联系信息等</p>
</footer>
<!--
第八个：
描述：<keygen> 标签定义生成密钥。
<form></form> 提交
-->
<form action="http://www.w3school.com.cn/example/html5/demo_form.asp" method="get">
用户名：
<input type="text" name="usr_name" />
<br/> 加 密：
<keygen name="security" />
<input type="submit" />
</form>
<br />
<!--
第九个：
描述：<mark>主要用来在视觉上向用户呈现那些需要突出的文字（高亮显示）
-->
<p align="left">你是谁？我是
<mark> " 高慧凤 " </mark>
</p>
<!--
第十个：
描述：视频播放 <video> <source> 标签为媒介元素
-->
<div style="text-align-last: center;">
<button onclick="playpause()">暂停/播放</button>
<button onclick="makemax()">大</button>
<button onclick="makezhong()">中</button>
<button onclick="makesmall()">小</button>
<video id="myvideo" width="700" style="margin-top: 15px" loop="loop" muted="muted" preload="auto">
<source src="http://ht-mobile.cdn.turner.com/nba/big/teams/kings/2014/12/12/HollinsGlassmov-3462827_8382664.mp4" type="audio/mp4"></source>
</video>
</div>
<br />
<br />
<script type="text/javascript">
var myvideo = document.getElementById("myvideo");
//视频的暂停和播放
function playpause() {
if (myvideo.paused) {
myvideo.play();
} else {
myvideo.pause();
}
}
function makemax() {
myvideo.width = 700;
}
function makezhong() {
myvideo.width = 640;
}
function makesmall() {
myvideo.width = 550;
}
</script>
<!--
第十一个：
描述： <dialog> 标签定义对话
-->
<button id="open">打开窗口</button>
<button id="modal">打开模态窗口</button>
<button id="close">关闭窗口</button>
<dialog>
<p>我是一个dialog</p>
<button>关闭</button>
</dialog>
<br />
<br />
<script>
document.querySelector('#open').onclick = function() {
document.querySelector('dialog').show() //打开对话框不影响对其他的操作
}
document.querySelector('#modal').onclick = function() {
document.querySelector('dialog').showModal() //打开对话框后什么操作也不能做
}
document.querySelector('#close').onclick = function() {
document.querySelector('dialog').close()
}
document.querySelector('dialog>button').onclick = function() {
document.querySelector('dialog').close()
}
</script>
<!--
第十二个：
描述：<nav>标签定义导航链接的部分。
-->
<nav>
<a href="https://www.baidu.com">百度</a>
<a href="http://www.apple.com">苹果</a>
</nav>
<!--
第十三个：
描述：<progress> 标签运行中的进程
-->
<progress id="prog" value="0" max="100"></progress>
<input id="startBtn" type="button" value="start" onclick="startProgress()" />
<div id="numValue">0%</div>
<br />
<br />
<script type="text/javascript">
//当前进度
var currProgress = 0;
//进度条是否完成
var done = false;
//进度条计数的最大数值
var total = 100;
function startProgress() {
//获得进度条的标签
var prBar = document.getElementById("prog");
//获得开始按键
var startButt = document.getElementById("startBtn");
//显示的进度百分比数值
var val = document.getElementById("numValue");
startButt.disabled = true;
prBar.value = currProgress;
val.innerHTML = Math.round((currProgress / total) * 100) + "%";
currProgress++;
if (currProgress > 100) done = true;
if (!done)
setTimeout("startProgress()", 100);
else {
document.getElementById("startBtn").disabled = false;
done = false;
currProgress = 0;
}
}
</script>
<!--
第十四个：
描述：<wbr>规定在文本中的何处适合添加换行符。
-->
<p>
如果想学习 AJAX，那么您必须熟悉 XML
<wbr>Http
<wbr>Request 对象。
</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
