HTML5学习笔记（一）

最新推荐文章于 2022-02-28 23:36:47 发布

wjlotus

最新推荐文章于 2022-02-28 23:36:47 发布

阅读量420

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/wjlotus/article/details/40542487

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

《HTML5和CSS3编程从应用到基础》学习笔记：

1、新增的H5结构元素

section/article/aside/header/hgroup/footer/nav/figure

2、新增其他元素

video/audio/embed(用来插入各种多媒体)/mark/progress/meter/time/ruby/canvas/cpmmand/details(和summary一起使用)/datalist/datagrid/keygen/output/source

3、html是页面根元素

4、文档头部元素有6个：base（链接默认地址）/link/meta(页面元信息)/script/style/title

5、style元素新增scoped属性，规定样式只能应用到style元素的父元素及其子元素中

6、H5全局属性：hiddle/spellcheck/contenteditable(元素是否可编辑)

7、文本层次语义元素:cite(引用)/mark/time

8、progress元素的使用：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>progress元素的简单使用</title>
<style>
body{
	background-image:url(jiaohuimage/1008.jpg);
}
div{
	position:absolute;
	left: 226px;
	top: 26px;
	width: 473px;
	height: 285px;
	font-size:12px;
	color:blue;
}
header{
	font-size:14px;
	color:#000;
	margin-left:120px;
}
</style>
</head>

<body>

<div>
<header>隐形的翅膀</header>
<p>每一次都在徘徊孤单中坚强   每一次就算很受伤也不闪泪光</p>
<p>我知道 我一直有双隐形的翅膀   带我飞 飞过绝望</p>
<p>不去想 他们拥有美丽的太阳   我看见 每天的夕阳也会有变化</p>
<p>我知道 我一直有双隐形的翅膀   带我飞 给我希望</p>
<p>我终于 看到 所有梦想都 开花   追逐的年轻 歌声多嘹亮</p>
<p>我终于 翱翔 用心凝望不害怕   哪里会有风 就飞多远吧</p>
<p>.....</p>
单击统计网友喜欢度：<input type="button" value="统计" onClick="Btn_Click();" />
<br/><br/>
<span id="pTip">统计进度（喜欢度）：</span>
<progress id="objprogress" min="0" max="10" value="8">正在统计。。</progress>
</div>
<script type="text/javascript">
    var intValue=0;
	var intTimer;
	var objPro=document.getElementById("objprogress");
	var objTip=document.getElementById("pTip");
	//定时事件
	function Interval_handler(){
		intValue++;
		objPro.value=intValue;
		if(intValue>=objPro.max){
			clearInterval(intTimer);
			objTip.innerHTML="统计完成：";
			objPro.value=8;
		} else{
			objTip.innerHTML="正在统计" + intValue +"%";
		}
	}
	//下载按钮单击事件
	function Btn_Click(){
		intTimer=setInterval(Interval_handler,1000);
	}
</script>
</body>
</html>

9、meter（度量）元素使用：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>meter元素的简单使用</title>
<style>
body{
	background-image:url(jiaohuimage/1008.jpg);
}
div{
	position:absolute;
	left: 226px;
	top: 26px;
	width: 473px;
	height: 285px;
	font-size:12px;
	color:blue;
}
header{
	font-size:14px;
	color:#000;
	margin-left:120px;
}
</style>
</head>

<body>

<div>
<header>隐形的翅膀</header>
<p>每一次都在徘徊孤单中坚强   每一次就算很受伤也不闪泪光</p>
<p>我知道 我一直有双隐形的翅膀   带我飞 飞过绝望</p>
<p>不去想 他们拥有美丽的太阳   我看见 每天的夕阳也会有变化</p>
<p>我知道 我一直有双隐形的翅膀   带我飞 给我希望</p>
<p>我终于 看到 所有梦想都 开花   追逐的年轻 歌声多嘹亮</p>
<p>我终于 翱翔 用心凝望不害怕   哪里会有风 就飞多远吧</p>
<p>.....</p>
<input type="button" value="查看网友评分" onClick="Btn_Click();" />
<br/><br/>
<span id="pTip" style="display:none;">
飞鸟和鱼: <meter value="2" min="0" max="10" low="6" high="8" title="10分" optimum="10">6</meter><br/>
甜甜圈圈: <meter value="8" min="0" max="10" low="6" high="8" title="8分" optimum="10">8</meter><br/>
Me 笨 蛋: <meter value="5" min="0" max="10" low="6" high="8" title="4分" optimum="10">5</meter><br/>
</span>
</div>
<script>
function Btn_Click()
{
		document.getElementById("pTip").style.display = "block";
}
</script>
</body>
</html>

10、使用html5test.com进行对浏览器跑分