HTML5入门

article/2025/10/1 13:36:53

文章目录

  • 新增元素与属性
    • 新增元素
      • optimum ，high，low值：
      • 总结：value和optimum在同一区间：显示绿色；value和optimum相差一区间：显示黄色；value和optimum相差两区间：显示红色
    • 新增表单功能
      • 选项列表
      • 必填字段
      • 正则匹配
      • 类型匹配
      • 数字字段
      • 滑动组件
      • 日期字段
      • 时间字段
      • 拾色器
  • HTML5图形图像元素
    • 什么是Canvas
    • 步骤
      • 1.定义Canvas
      • 2.调用 getContext方法获得绘图环境
    • 绘制直线
    • 绘制矩形
    • 绘制圆形
    • 绘制八卦图
      • 绘制八卦图的步骤
      • 注意（beginpath和closepath）：
    • 绘制雪花粒子特效
      • 注意（雪花只有一片）
  • HTML5音频与视频元素
    • audio元素
      • 语法形式
    • video元素

新增元素与属性

  1. 页面一般使用<div>元素作为结构元素，而在HTML5文档中，新增<article>,<section>,<nav>,<aside>,<header>,<footer>,<main>

在这里插入图片描述
在这里插入图片描述

  1. 结构元素仅定义文档结构，不会影响页面外观，使文档更容易被机器阅读，方便网络爬虫的爬取

新增元素

  1. <mark>元素用来高亮显示文本
<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	</head>
<body>
<mark>mark元素用于高亮显示文本</mark>
</body>
</html>

在这里插入图片描述

  1. <details>元素用来显示段落或篇章的细节，通常和<summary>配合使用
<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	</head>
<body><details>
<summary>HTML5简介
</summary>
html5是构建Web内容的一种语言描述方式，万维网联盟于2014年发布，被认为是互联网的核心技术之一。其新引进的语法特征能够在移动设备上支持多媒体，能更好的适应移动端设备。新的解析规则增强了灵活性、新属性、淘汰过时的或冗余的属性，真正的改变了用户与文档的交互方式。</details>
</body>
</html>

在这里插入图片描述

  1. <progress>元素用来显示进度条
<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	</head>
<body>
<p id="pTip">开始下载</p>
<progress value="0" max="100" id="proDownFile"></progress>
<input type="button"  value="下载" onclick="Btn_Click()" /><script>var intvalue=0;var intTimer;var objPro=document.getElementById('proDownFile');var objTip=document.getElementById('pTip');function Interval_handler(){intvalue++;objPro.value=intvalue;if(intvalue >=objPro.max){clearInterval(intTimer);objTip.innerHTML="下载完成";}else{objTip.innerHTML="正在下载"+intvalue+"%";}}function Btn_Click(){intTimer=setInterval(Interval_handler,100);}</script></body>
</html>

在这里插入图片描述

  1. <meter>元素用来显示投票状态
<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	</head>
<body>
<p>共有120人参与投票</p>
<p>张三：<meter value="0.1" optimum="0.6" high="0.8" low="0.2" max="1" min="0"></meter><span>10%</span>
</p>
<p>李四：
<meter value="70" optimum="60" high="80" low="20" max="100" min="0"></meter><span>70%</span>
</p>
</body>
</html>

在这里插入图片描述

optimum ，high，low值：

在这里插入图片描述

总结：value和optimum在同一区间：显示绿色；value和optimum相差一区间：显示黄色；value和optimum相差两区间：显示红色

  1. <contenteditable>属性允许直接编辑元素内容
<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	</head>
<script type="text/text/javascript">function Btn_click(){var strArt=document.getElementById("art_0");innterHTML;var objArt=document.getElementById("art_1");objArt.innerHTML='<b>编辑后：</b>'+strArt;}
</script>
<body>
<article contenteditable id="art_0">一段可编辑的文字</article>
<article contenteditable id="art_1"></article>
<input type="button" value="保存" onclick="Btn_click()" />
</body>
</html>

在这里插入图片描述

  1. <dragable>属性用来表示元素是否可以拖动，可以设置dragable=“true”（仅设置元素的dragable属性只能让元素可拖动，但拖动时未携带数据，因此用户看不到实际的拖动效果。为了让拖动操作能携带数据，应为被拖动元素的ondragstart事件指定监听器，使用JS实现元素拖放效果。）

新增表单功能

选项列表

<input type='text' list='mydata'>
<datalist id='mydata'><option label="Mr"  value="Mister"><option label="Mrs"  value="Misteress"><option label="Ms"  value="Miss">
</datalist>

在这里插入图片描述

必填字段

<input type="text" required />

在这里插入图片描述

正则匹配

<input type="text" pattern="[0-9]{10}" />

在这里插入图片描述
必须是0~9（且长度是10）

类型匹配

<input type="email" />
<input type="url" />

数字字段

<input type="number" min="1" max="10" value="1" />

在这里插入图片描述

滑动组件

<input type="range" min="1" max="10" value="1" />

在这里插入图片描述

日期字段

<input type="date" min="2010-12-16" />

在这里插入图片描述

时间字段

<input type="time" step="1800" />

step也就是1800秒，每次30分钟累加（不指定的话，每次1秒钟）
在这里插入图片描述

拾色器

<input type="color" value="#ed1c24" />

在这里插入图片描述

HTML5图形图像元素

什么是Canvas

  1. Canvas元素实际上定义了一个矩形的画布区域，借助JS和自身APi，可以在该画布区域中绘制任意图形，并可以对其中的每一个像素进行控制

步骤

1.定义Canvas

<canvas id="myCanvas" width="600" height="400"></canvas>

2.调用 getContext方法获得绘图环境

var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");

绘制直线

<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	
</head>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid"></canvas>
<script>var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");context.strokeStyle="#ff0000";//设置画笔颜色context.lineWidth=2;//设置线条宽度context.moveTo(50,50);//将画笔移动到画布的起始位置,其中左上角为(0,0)context.lineTo(150,150);//选择从起始位置开始,画到(150,150)的位置context.stroke();//开始绘制
</script>
</body>
</html>

在这里插入图片描述

绘制矩形

  1. Canvas中矩形的绘制分为两种，一种是不带填充效果的矩形，使用rect方法或strokeRect方法；另一种是带填充效果的，一般是在设置填充颜色后，调用fillRect方法完成矩形的绘制
<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	
</head>
<body>
<canvas id="myCanvas"  width="400"  height="200"  style="border:1px solid"></canvas>
<script>var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");context.rect(30,50,150,100);context.stroke();//context.strokeRect(30,50,150,100);context.beginPath();context.fillStyle="#ff0000";context.fillRect(200,50,150,100);
</script>
</body>
</html>

在这里插入图片描述

绘制圆形

  1. Canvas中绘制圆或圆弧采用arc方法，该方法有6个参数，例如：arc(100,100,50,0,Math.PI*2,0)

绘制八卦图

绘制八卦图的步骤

  1. 绘制左边和右边的黑色半圆和白色半圆
  2. 绘制上面的白色小圆和下面的黑色小圆
  3. 绘制上面的黑色小圆点和下面的白色小圆点
<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="background-color: aliceblue;"></canvas>
<script>var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");context.beginPath();//绘制白色半圆context.arc(200,200,80,1.5*Math.PI,Math.PI/2,0);context.fillStyle="white";context.closePath();context.fill();//绘制黑色半圆context.beginPath();context.arc(200,200,80,Math.PI*0.5,Math.PI*1.5);context.fillStyle="black";context.closePath();context.fill();//绘制黑色小圆context.beginPath();context.arc(200,240,40,0,2*Math.PI,1);context.fillStyle="black";context.closePath();context.fill();//绘制白色小圆context.beginPath();context.arc(200,160,40,0,2*Math.PI,1);context.fillStyle="white";context.closePath();context.fill();//绘制白色小圆点context.beginPath();context.arc(200,240,5,0,2*Math.PI,1);context.fillStyle="white";context.closePath();context.fill();//绘制黑色小圆点context.beginPath();context.arc(200,160,5,0,2*Math.PI,1);context.fillStyle="black";context.closePath();context.fill();
</script>
</body>
</html>

在这里插入图片描述

注意（beginpath和closepath）：

这里的beginpath和closepath一定记得配套使用，否则问题会很大，后者填充颜色的时候会严重影响到 前者的填充

绘制雪花粒子特效

<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	
</head>
<body bgcolor="black">
<canvas id="myCanvas"></canvas>
<script>var canvas=document.getElementById("myCanvas");var context=canvas.getContext("2d");canvas.width=window.innerWidth;canvas.height=window.innerHeight;var particles=[];//循环500次,生成500粒雪花for(var i=0;i<500;i++){particles.push({x:Math.random()*window.innerWidth,y:Math.random()*window.innerHeight,vx:(Math.random()*1-0.5),vy:(Math.random()*2+0.5),size:1+Math.random()*5,color:"#fff"});}function timeUpdate(){context.clearRect(0,0,window.innerWidth,window.innerHeight);var particle;for(var i=0;i<500;i++){particle=particles[i];particle.x+=particle.vx;particle.y+=particle.vy;if(particle.x<0){particle.x=window.innerWidth;}if(particle.x>window.innerWidth){particle.x=0;}if(particle.y>window.innerHeight){particle.y=0;}context.fillStyle=particle.color;context.beginPath();context.arc(particle.x,particle.y,particle.size,0,Math.PI*2);context.closePath();context.fill();	}}setInterval(timeUpdate,40);
</script>
</body>
</html>

在这里插入图片描述

注意（雪花只有一片）

如果你的雪花只有一片的话，那么是因为你的如下这个for循环未包含if条件

for(var i=0;i<500;i++){particle=particles[i];particle.x+=particle.vx;particle.y+=particle.vy;if(particle.x<0){particle.x=window.innerWidth;}if(particle.x>window.innerWidth){particle.x=0;}if(particle.y>window.innerHeight){particle.y=0;}context.fillStyle=particle.color;context.beginPath();context.arc(particle.x,particle.y,particle.size,0,Math.PI*2);context.closePath();context.fill();	}

HTML5音频与视频元素

audio元素

语法形式

<audio id="music"  src="music.mp3" controls loop autoplay></audio>
  1. src用来指定音频文件所在的路径；
  2. controls表示显示播放控制栏，这里采用简写形式，实际上可以写成controls="controls";
  3. 属性loop表示循环播放，同样可以写成loop="loop"的形式
  4. 属性autoplay表示自动播放。在移动设备中，音频或视频的自动播放会导致流量剧增，该属性在移动端会被屏蔽，必须通过相应的用户交互事件才能触发
<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	
</head>
<body >
<audio id="music" src="闲庭絮.mp3" controls="controls" loop autoplay></audio>
</script>
</body>
</html>

在这里插入图片描述

<audio><source src="music.ogg" type="audio/ogg"></source><source src="music.mp3" type="audio/mpeg"></source><source src="music.wav" type="audio/wav"></source>你的浏览器不支持音频播放
</audio>

  1. 由于不同手机平台或浏览器支持的文件格式不同，为了更好的兼容性，有时候还需要为同一个音频准备不同的文件格式，常用格式OGG，MP3，WAV等

  2. 创建一个audio对象使用createElement方法，同时使用setAttribute方法为audio对象设置相应的属性

!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	
</head>
<body ><form><input type="button" value="创建audio对象" onclick="createAudio()" /></form><script>function createAudio(){var x=document.createElement("audio");x.setAttribute("controls","controls");x.setAttribute("src","闲庭絮.mp3");document.body.appendChild(x);}</script></body>
</html>

在这里插入图片描述

video元素

  1. HTML5中还新增可video元素，用来在网页中实现视频的播放
<video id="myVideo"  src="video.mp4" width="320" height="240" contrlos autoplay loop>
您的浏览器不支持video元素
</video>

<video id="myVideo"  src="video.mp4" width="320" height="240" contrlos autoplay loop preload="auto" poster="01.jpg"><source src="movie.ogg" type="vedio/ogg"></source><source src="movie.mp4" type="vedio/mpeg"></source><source src="movie.webm" type="vedio/wav"></source>你的浏览器不支持video元素
</video>

<!DOCTYPE html>
<html><meta charset="utf-8" />
<head>	
</head>
<body ><video id="myVedio" src="斗罗大陆 第132话 蓝光(1080p).mp4" width="320" height="240" contrlos autoplay loop preload="auto" poster="01.jpg" ></video>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
的确开始播放斗罗大陆了，但是就是没图。
在这里插入图片描述

  1. 创建一个video对象使用createElement方法，同时使用setAttribute方法为audio对象设置相应的属性

<html><meta charset="utf-8" />
<head>	
</head>
<body ><form><input type="button" value="创建Video对象" onclick="createVideo()" /></form>
<script>function createVideo(){var x=document.createElement("video");x.setAttribute("width","320");x.setAttribute("height","400");x.setAttribute("controls","controls");x.setAttribute("src","02.mp4");document.body.appendChild(x);	}
</script></body>
</html>

在这里插入图片描述
估计是斗罗大陆是蓝光（1080p）的，所以打不开
在这里插入图片描述
自己用手机录了一段视频，然后可以打开。。好了，就是画质问题。.。


http://chatgpt.dhexx.cn/article/hWpvsbR6.shtml

相关文章

html5基础入门知识（干货）

html5基础入门知识（干货）

一.什么是html 用来描述网页的语言、超文本标记语言、不是编程&#xff0c;而是一种标记语言、使用标记标签来描述网页等等... 我们只需记住html就是用标记标签来描述网页&#xff0c;&#xff08;网页是前端哦&#xff0c;平时你们听过的c、c、java之类的你们是看不着的&#…
阅读更多...
HTML5基础之代码入门

HTML5基础之代码入门

之前一直在修改现成的项目&#xff0c;学习的内容也是现学现用&#xff0c;没有很系统的学习&#xff0c;这次决定发一些时间&#xff0c;系统的学习&#xff0c;以便充实自己的前端知识&#xff0c;也想提升自己的前端技术。 今天总结的是HTML5基础的第一部分代码入门&#xf…
阅读更多...
h5(html5)入门

h5(html5)入门

h5(html5)基础入门 学习目标 目标&#x1f396;️&#xff1a; 学习PC端网站布局&#xff0c;最终网站&#xff1a;品优购静态网站精通网页布局&#xff0c;也是我们前端人员必备的技能&#xff0c;为后面学习 Javascript 打下坚实基础 资源网站&#x1f310;&#xff1a; …
阅读更多...
HTML5（入门）

HTML5（入门）

目录 一、HTML5概念和基本的结构 二、基本标签学习 三、图像标签 四、连接标签 五、列表标签 ​ 六、表格标签 table 七、媒体标签 ​ 八、网页结构 ​ 九、内联框架 iframe 十、表单标签 form ​ 十一、初级验证: 一、HTML5概念和基本的结构 1.概念&#xff1…
阅读更多...
Javascript知识【jQuery：数组遍历和事件】

Javascript知识【jQuery：数组遍历和事件】

&#x1f482; 个人主页: 爱吃豆的土豆&#x1f91f; 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 &#x1f3c6;人必有所执&#xff0c;方能有所成&#xff01; &#x…
阅读更多...
jq数组赋值 java,jquery 遍历数组赋值的问题？

jq数组赋值 java,jquery 遍历数组赋值的问题？

慕容708150 /** * 好好看下jQuery文档吧 * see https://api.jquery.com/each/#each-function */var tdVals trs.parents(tr).children(td);var inputVals $(.con-detail input[typetext]);$(tdVals).each(function(index, td){ // td是DOM, index是索引 if(!(index < 1…
阅读更多...
linux jq 遍历数组,jquery怎么遍历数组？

linux jq 遍历数组,jquery怎么遍历数组？

jquery怎么遍历数组&#xff1f;下面本篇文章就来给大家介绍一下使用jquery遍历数组的几种方法。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。 1、for循环&#xff1a;var arr new Array(13.5,3,4,5,6); for(var i0;i arr[i] arr[…
阅读更多...
jQuery遍历数组

jQuery遍历数组

jQuery遍历数组 数组遍历&#xff1a; 在JS中&#xff0c;我们使用普通for循环即可遍历数组。 在jQuery中&#xff0c;我们可以使数组的遍历变得更为简单&#xff08;使用for遍历&#xff0c;取出的元素为js对象而非jQuery对象&#xff09; 属性名 属性说明 JQ数组.each(fn…
阅读更多...
window系统 任务计划程序

window系统 任务计划程序

如何让系统定时启动某个任务&#xff0c;执行某个脚本&#xff0c;window系统的任务计划程序功能就可以实现&#xff0c;操作步骤如下&#xff1a; 1.打开程序“任务计划程序”&#xff0c;在window系统搜索程序中搜索该程序即可&#xff0c;或者在控制面板中寻找。程序页面截…
阅读更多...
windows设置定时任务（win10任务计划程序）

windows设置定时任务（win10任务计划程序）

熟悉Linux的朋友应该都知道有自带的crontab定时器，其实在windows中也有定时器这一说。可以设置定时启动某个程序，运行某个软件。老系叫触发器，win10系统以后叫【任务计划程序】，这里博主以每天9点定时启动notepad++软件为例给大家细细道来。 1.搜索框搜索【任务计划程序】…
阅读更多...
Windows 任务计划程序操作之起始于

Windows 任务计划程序操作之起始于

起始于这个操作在windows 计划任务的设置里是个可选项&#xff0c;所以我们在操作的时候一般都忽略了他&#xff0c;但就因为咱们的忽略就会导致错误的发生。 比如我的定时任务程序中需要用到一个文件&#xff0c;在读的时候就会报未能找到文件“C:\Windows\system32\xxx,又或者…
阅读更多...
windows中的定时任务--任务计划程序

windows中的定时任务--任务计划程序

一定要理解进程的概念 开机自启有多种方式来实现 注册表开启启动项. 计算机\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Run 菜单里面快捷方式 写入服务 加入任务计划程序
阅读更多...
操作员或系统管理员拒绝了请求(0x800710E0) win10系统任务计划程序执行失败

操作员或系统管理员拒绝了请求(0x800710E0) win10系统任务计划程序执行失败

问题说明: 在win10设置定时任务为每天执行一次&#xff0c;第一天是正常的&#xff0c;后面几次都执行失败&#xff0c;提示“操作员或系统管理员拒绝了请求(0x800710E0) ” 解决办法&#xff1a; 进入控制面板-系统和安全-管理工具-本地安全策略&#xff0c;在安全选项中找…
阅读更多...
C# 定时任务之windows任务计划程序

C# 定时任务之windows任务计划程序

我们有时候需要在特定的时间、或者间隔某段时间后执行一个程序来处理问题&#xff1b;如果间隔时间较长&#xff0c;比如一天一次、一周一次&#xff0c;或者需要在某年某月某日某时执行&#xff0c;那么我们用计时器去实现的话&#xff0c;就很不合理了&#xff0c;资源消耗不…
阅读更多...
C# 创建任务到Windows任务计划程序

C# 创建任务到Windows任务计划程序

相信有看过我上一篇《C# 定时任务之windows任务计划程序》并且有需求的朋友已经打开过任务计划程序去尝试了&#xff0c;同时是否有了另一个疑问。里面已经存在的任务是怎么来的呢&#xff1f;能否通过我们自己的程序去创建呢&#xff1f;答案当然是可以的&#xff01;本篇我们…
阅读更多...
windows任务计划程序运行python脚本失败的原因

windows任务计划程序运行python脚本失败的原因

前言 用windows任务计划程序定时执行py脚本&#xff0c;为什么会执行失败&#xff1f;运行结果显示(0x1)? 直接闪退&#xff1f; 在IDE运行程序&#xff0c;正常运行 在文件管理器目录下运行程序&#xff0c;也没有问题。 但是为什么在任务计划程序执行就不行呢&#xff1f…
阅读更多...
计算机管理任务计划程序损坏,处理设置任务计划程序win10中出错不可用的方法...

计算机管理任务计划程序损坏,处理设置任务计划程序win10中出错不可用的方法...

win10系统是很多的小伙伴都很多的小伙伴都安装了的&#xff0c;那我们在电脑中有小伙伴遇到自带的有任务计划程序的功能的&#xff0c;那有小伙伴遇到任务计划程序不可用的错误提示的问题&#xff0c;遇到这个问题应该怎么办呢&#xff0c;如果你也是遇到设置任务计划的话&…
阅读更多...
使用Windows[任务计划程序]设置定时任务

使用Windows[任务计划程序]设置定时任务

文章目录 使用Windows[任务计划程序]设置定时任务[任务计划程序]打开位置Windows 11Windows 10 创建定期启动程序任务创建基本任务给任务命名&#xff0c;并添加任务描述根据需求设置触发器&#xff0c;下图选择每天都执行设置触发器的执行时间&#xff0c;下图设置每天20点执行…
阅读更多...
任务计划程序未执行

任务计划程序未执行

出现上述问题的原因是&#xff0c;在设置任务中的安全措施选项时&#xff0c;要选择不管用户是否登录时运行 把上面的选项勾上&#xff0c;就可以了
阅读更多...
使用windows的任务计划程序定时执行Python脚本

使用windows的任务计划程序定时执行Python脚本

第一步&#xff1a;打开控制面板–》管理工具–》计算机管理 第二步&#xff1a;选择系统工具–》任务计划程序&#xff0c;点击右侧的创建基本任务 第三步&#xff1a;输入任务名称&#xff0c;点击下一步&#xff0c;进入设置触发器界面 第四步&#xff1a;按实际需要勾选希望…
阅读更多...
推荐文章

Copyright @ 2022~2023