HTML学习笔记之HTML5（六）

已于 2024-06-03 15:20:37 修改
阅读量1k 收藏 1
点赞数 1
分类专栏： HTML 文章标签： html
于 2021-03-29 16:18:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wz_1992/article/details/115226969
版权

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>

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

文阿花
关注
专栏目录
html页面画一个矩形,使用HTML5 canvas绘制一个矩形的方法
weixin_29475313的博客
06-04 2031
使用HTML5 canvas绘制一个矩形的方法发布时间：2020-08-29 11:23:12来源：亿速云阅读：102作者：小新这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一个矩形的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。使用HTML5 canvas绘制一个矩形，我们需要用到Canvas上下文的rect()方法。我们来看一个具体的例子代...
制作好看又非常简单CSS样式的颜色块
qq_28499043的博客
08-25 1万+
在这里我将我最近学到的CSS样式的渐变颜色块记录下来
html制作颜色块,Html 实现动态显示颜色块的报表效果(实例代码)
weixin_34220317的博客
06-22 651
利用html的颜色块动态展示数据*{padding: 0;margin: 0;}.tubiao,.jihua,.shiji,.riqi{width: 100%;overflow: hidden;margin-top: 10px;}.left{width: 10%;float: left;text-align: center;height: 25px;line-height: 25px;}.righ...
html一个矩形两种颜色渐变,如何用HTML5中的canvas绘制渐变矩形
weixin_36323601的博客
06-05 924
canvas是HTML5中新增的特性，它可以在浏览器上绘制出各种酷炫的效果，作为一个前端开发人员，你知道如何用canvas绘制图形吗？这篇文章就和大家讲讲如何用canvas绘制一个矩形及一个渐变色矩形，有一定的参考价值，感兴趣的朋友可以参考一下。 标签可以用来绘制图形，但是要通过JavaScript脚本来实现效果，因为标签只是一个装图形的容器，效果的实现要借助JavaScript脚本。我们可以用c...
HTML每日学习代码：绘制图形
Zb_Xl的博客
07-10 2584
第一个控制点 (cpX1,cpY1) 控制的是曲线离起点的偏离程度和方向，而第二个控制点 (cpX2,cpY2) 控制的是曲线离终点的偏离程度和方向。createLinearGradient(0, 0, 0, c.height) 创建的线性渐变对象会从画布的左上角 (0, 0) 开始，延伸到画布的左下角 (0, c.height)。在这个方法中，offset 参数表示渐变的位置，取值范围为 0 到 1，代表了当前位置相对于渐变起点和终点之间的距离比例。r0 是起点圆的半径，r1 是终点圆的半径。
【html本地工具】html+JavaScript实现一个好看的颜色码查询器，支持查询、转换、颜色选择器和颜色码对照表
weixin_43165220的博客
07-14 1488
相信大家平时工作的时候应该会经常用到颜色码吧，比如说想找个好看的颜色，或者有个颜色码但是不知道这个码是什么颜色的，这个时候我们就可以用颜色码对照表或者颜色码查询来查看了。当然也可以用截图软件或者取色器或者PS来查看，不过这终究不是很方便、全面。这个时候我们可以自己写一个颜色码对照表，然后把它收藏到标签栏，用的时候随时打开随时用。这个时候有人可能要说这种网站随便网上一搜多的是。是，确实有很多，但这终究是别人的网站，无法定制化。所谓定制化就是把自己经常用到的颜色用色块列出来，下次用的时候直接打开一看，你就知道具
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
最新发布
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
html 5 学习教程笔记.zip
01-01
html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 ...
HTML的学习笔记.zip
01-01
HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记...
html5--5-5 绘制填充矩形
weixin_34061555的博客
12-05 720
html5--5-5 绘制填充矩形   学习要点 掌握绘制矩形的方法：strkeRect()/fillRect() 掌握绘制路径的 beginPath()和closePath() 矩形的绘制方法 rect(x,y,w,h)创建一个矩形 strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充） fillRect(x,y,w,h) 绘制"被填充"的矩形 ...
html基础：颜色的 5 种表示方法（最全！）
u013179804的博客
04-01 5279
HTML 颜色的应用可以大大提升网页的视觉效果和用户体验，因此合理地运用颜色是网页设计中的重要一环。你可能会问，这么多颜色需要一个一个记住么？不必，你只需要知道它的写法就可以了。我们工作流程的前一还是设计，她会给定好我们设计稿。我们只负责在 设计软件 Photoshop(PS) ，或者借助吸色工具吸取就可以了。在使用颜色时需要注意搭配、可访问性等方面的考虑。不过咱们不用担心，颜色这个事，不是由前端决定，而是设计同学。如果有不确定的颜色，和 UI 设计同学多确认就可以了。OK，以上，本文完。
HTML 五十 HTML5 SVG
W_H_M_2018的博客
09-20 217
HTML5 支持内联 SVG。 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG 的优势 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩.
html5矩形填充,Html5 Canvas 系列_绘图三(fillStyle 样式填充 矩形、墙)
weixin_39843677的博客
06-09 237
Canvas 绘图#canvas{border: 1px solid #000;display:block;margin: 50px auto;}您的浏览器不支持Canvas//得到 canvas 容器var canvas = document.getElementById("canvas");// 初始化Canvasfunction init_canvas(canvas_id){canvas....
html绘制矩形_如何在HTML中绘制矩形
热门推荐
culi4814的博客
08-13 1万+
html绘制矩形If, for whatever reason, you sometimes feel like creating a rectangle using html/css, the below code is the easiest way to do so. A given rectangle can also be decorated using tags like backgr...
HTML5--常用新元素
maomaolaoshi的博客
09-27 871
如果我问你，HTML5的新增加的元素有哪些?不少人可能脱口而出section、article、header……等等。但是如果要问你HTML5增加新的元素，同时废弃了很多元素的原因是什么，我觉得大多数人可能都没思考过这个问题。标签语义化标签语义化就是上个问题的答案。HTML5一个最主要的变化是基本信念的变化：将元素的语义与元素对其内容呈现结果的影响分开。 HTML元素负责文档内容的结构和含义，CS
HTML5学习笔记——新增元素
ass_ace
08-16 587
1、新增的元素： 1）新增的结构元素： &lt;section&gt;、&lt;article&gt;、&lt;aside&gt;、&lt;header&gt;、&lt;footer&gt;、&lt;nav&gt;、&lt;address&gt;、&lt;figure&gt;、&lt;main&gt; 2）新增的其他元素： &lt;video&am
HTML5 新元素之 canvas
jiaomubai的博客
09-30 4052
html5 新元素、canvas
html 设置页脚div一直在页面底部
banjuan3729的博客
07-27 333
先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" con...
HTML5学习笔记：优势、语法与表单元素详解
HTML5的学习笔记涵盖了从基础语法到高级特性的全面内容，包括语义化、表单设计、多媒体处理和现代通信技术，这对于提升网页开发效率和兼容性具有重要意义。对于前端开发者而言，掌握HTML5不仅是技术更新的要求，也是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值