HTML学习笔记之HTML5（六）

文阿花

已于 2024-06-03 15:20:37 修改

阅读量961

点赞数 1

分类专栏： HTML 文章标签： html

于 2021-03-29 16:18:21 首次发布

本文链接：https://blog.csdn.net/wz_1992/article/details/115226969

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、什么是HTML5

HTML5是最新的HTML标准
HTML5是专门为承载丰富的Web内容而设计的，并且无需额外插件
HTML5拥有新的语义，图形以及多媒体元素
HTML5提供的新元素和新的API简化了Web应用程序的搭建
HTML5是跨平台的，被设计为在不同类型的硬件（PC、平板、电视、手机等）之上运

2、HTML5新内容

2.1 声明< DOCTYPE>

HTML5新文档声明很简单，即为< ! DOCTYPE html>
HTML5 中默认的字符编码是 UTF-8。

2.2 把 HTML5 元素定义为块级元素

在这里插入图片描述

所以需要把display设置为block，以确保就浏览器可以正常显示样式

<style style="text/css">
header, section, footer, aside, nav, main, article, figure{
   display: block; 
}
</style >

2.3Internet Explorer 的问题

所有现代浏览器均支持 HTML5 语义元素。
由于Internet Explorer 8 以及更早的版本，不允许对位置元素添加样式，为了解决这个问题可以使用：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

font-family 定义字体
Verdana, Geneva, sans-serif 都是字体名称
用逗号分开意思是如果访问者操作系统中没有字体 Verdana 那就用 Geneva，如果没有 Verdana 也没有 Geneva，就用 sans-serif，以此类推，如果CSS中定义的字体都没有，那就用浏览器定义的默认字体。
display:inline
CSS display 属性

2.4 HTML5 新元素

HTML5 新元素

2.5 HTML5新的语义元素

在这里插入图片描述

3、搭建第一个HTML5页面

（1）检测浏览器是否支持HTML5

<! DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>我的第一个HTML5页面</title>
<style type="text/css">
#myCanvas{
  background:red;
  width:300px;
  height:300px;
}
</style>

</head>
<body>
<canvas id="myCanvas">该浏览器不支持HTML5的画布标记</canvas>

</body>
</html>

运行：
如果该浏览器支持HTNL5,则会显示一个色块，不支持的话则会显示“该浏览器不支持HTML5的画布标记”，由于我是用的是Google的Chrome浏览器，运行出来显示如下：
在这里插入图片描述

（2）由于HTML5中提供了新的元素，可以很快定位到对应位置，即header、nav、article、footer

在这里插入图片描述

注释：由于HTML5中提供了新的元素，可以很快定位到对应位置，即header、nav、article、footer
< header > 表示页头
< nav> 表示导航
< article> 表示内容
< footer> 表示页脚或根元素比分

<! DOCTYPE html>
<html>
<head>
<meta http-equiv="Content_Type" content="text/html charset=utf-8">
<title>导航页面</title>
<style style="text/css">
header,nav,article,footer{
  border:solid 1px #666666;
  padding:10px;
  margin:10px;
}
header{
    width:500px;
}
nav{
	float:left;
	width:100px;
	height:200px;
}
article{
	float:left;
	width:360px;
	height:200px;
}
footer{
	clear:both;
	width:500px;
}

</style>
</head>
<body>
<header>导航</header>
<nav>菜单</nav>
<article>内容</article>
<footer>底部</footer>

</body>
</html>

也可写为：（使用自定义id）

<! DOCTYPE html>
<html>
<head>
<meta http-equiv="Content_Type" content="text/html charset=utf-8">
<title>导航页面</title>
<style style="text/css">
#myHead,#siderLift,#siderRight,#footer{
  border:solid 1px #666666;
  padding:10px;
  margin:10px;
}
#myHead{
    width:500px;
}
#siderLift{
	float:left;
	width:100px;
	height:200px;
}
#siderRight{
	float:left;
	width:360px;
	height:200px;
}
#footer{
	clear:both;
	width:500px;
}

</style>
</head>
<body>
<div id="myHead">导航</div>
<div id="siderLift">菜单</div>
<div id="siderRight">内容</div>
<div id="footer">底部</div>

</body>
</html>

注释：两者运行效果一样，但是由于浏览器是根据Id来解析数据的，方法二中不同的开发人员会使用不同的id，所以会影响浏览器解析的速度。
（3） css骨架屏的实现

<!--HTML5 -->
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
<meta http-equiv="Content-Type" content="text/css charset=utf-8"/>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {font-family:Verdana,sans-serif;font-size:0.8em}
header,nav,article,section,footer {
   border:solid 1px red;
   margin:10px;
   padding:10px;
   a
}
nav ul {
margin:0
padding:0
}
nav ul li{
  display:inline;
  margin:5px;
}
</style>
</head>

<body>
<!--头部header -->
<header>
<h1>HTML5 Skeleton</h1>
</header>
<!--导航nav -->
<nav>
<ul>
<li><a href="https://www.baidu.com">首页</a></li>
<li><a href="https://www.baidu.com">课程</a></li>
<li><a href="https://www.baidu.com">学习</a></li>
<li><a href="https://www.baidu.com">我的</a></li>
</ul>
</nav>
<!-- -->
<section>
<h2>精品课程</h2>
<!--内容 -->
<article>
<h3>十天学会HTML5</h3>
<p>张老师教你如何成为HTML大神！</p>
</article>

<!--内容 -->
<article>
<h3>十天学会JS</h3>
<p>张老师教你如何成为JS大神！</p>
</article>

<!--内容 -->
<article>
<h3>十天学会CSS</h3>
<p>张老师教你如何成为CSS大神！</p>
</article>

</section>
<!--底部 -->
<footer>
<p>下一页</p>
</footer>
</body>
</html>

运行效果：
在这里插入图片描述

4、canvas+javascript

由于canvas没有绘画能力，所有的绘制都要在js中实现
js的使用：
1、根据id来寻找canvas对象： var c=document.getElementById(“myFirstCanvas”);
2、创建context对象： var ctc=c.getContext(“2d”)

(1) 绘制线

<!DOCTYPE html >
<html>
<body>
<header>
<h4>(1)绘制线：</h4>
</header>
<br >
<canvas id="myFirstCanvas" width="200" height="100" 
style="border:1px solid #c3c3c3;">
</canvas>
<!--由于canvas没有绘画能力，所有的绘制都要在js中实现 -->
<!--绘制线 -->
<script type="text/javascript">
<!--根据id来寻找canvas对象 -->
  var c=document.getElementById("myFirstCanvas");
  <!--创建context对象 -->
  var ctc=c.getContext("2d")
  ctc.moveTo(10,10);
  ctc.lineTo(150,50);
  ctc.lineTo(10,50);
  ctc.stroke();
</script>
</body>
</html>

运行效果：
在这里插入图片描述

（2）绘制矩形

<!--绘制矩形 -->
<!DOCTYPE html >
<html>
<body>
<header>
<h4>(2)绘制矩形：</h4>
</header>
<canvas id="myRectCanvas" width="100" height="100"
style="border:1px solid #FFA500">
</canvas>
<script type="text/javascript">
var c =document.getElementById("myRectCanvas");
var ctc=c.getContext("2d");
ctc.fillStyle="#FFA500";
<!--在画布上绘制 100x100 的矩形，从左上角开始 (0,0) -->
ctc.fillRect(0,0,100,100);
</script>
</body>
</html>

运行效果：
在这里插入图片描述

（3）绘制圆

<!DOCTYPE html >
<html>
<body>
<header>
<h4>绘制圆：</h4>
</header>
<canvas id="circleCanvas" width="100" height="100"
style="border:1px solid #FFA500"
></canvas>

<script type="text/javascript">
var c=document.getElementById("circleCanvas");
var ctc=c.getContext("2d");
ctc.fillStyle="#E81010";
ctc.beginPath();
ctc.arc(70,18,15,0,Math.PI*2,true);
ctc.closePath();
ctc.fill();

</script>
</body>
</html>

运行效果：
在这里插入图片描述

（4）绘制渐变

<!DOCTYPE html >
<html>
<body>
<header><h4>绘制渐变：</h4></header>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #FF5500"
></canvas>

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctc=c.getContext("2d");
var grd=ctc.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
ctc.fillStyle=grd;
ctc.fillRect(0,0,175,50);
</script>
</body>
</html>

运行效果：
在这里插入图片描述

（5）把图像放置在画布上

<!DOCTYPE html >
<html>
<body>
<header><h4>把图像放置在画布上：</h4></header>
<img src="my_bj.png" id="imgs" width="50" height="50"></img>
<canvas id="myCanvasa" width="200" height="100"
style="border:1px solid #FF5500"
></canvas>

<script type="text/javascript">
function  drawBeauty(beauty){
var  mycv = document.getElementById( "myCanvasa" );  
var  myctx = mycv.getContext( "2d" );
myctx.drawImage(beauty, 0, 0);
}
function  load(){
var  beauty =  new  Image();  
beauty.src =  "radio_play.png" ; 
if (beauty.complete){
    drawBeauty(beauty);
} else {
    beauty.onload =  function (){
      drawBeauty(beauty);
    };
    beauty.onerror =  function (){
      window.alert( '图片加载失败，请重试' );
    };
};   
} 
if  (document.all) {
   window.attachEvent( 'onload' , load);  
   } else  {  
   window.addEventListener( 'load' , load,  false );
   }
</script>

</body>
</html>

运行效果：
在这里插入图片描述

文阿花

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记之HTML5（六）

1、什么是HTML5HTML5是最新的HTML标准HTML5是专门为承载丰富的Web内容而设计的，并且无需额外插件HTML5拥有新的语义，图形以及多媒体元素HTML5提供的新元素和新的API简化了Web应用程序的搭建HTML5是跨平台的，被设计为在不同类型的硬件（PC、平板、电视、手机等）之上运2、HTML5新内容2.1 声明< DOCTYPE>HTML5新文档声明很简单，即为< ! DOCTYPE html>HTML5 中默认的字符编码是 UTF-8。2
复制链接

扫一扫