HTML5入门

原创 已于 2022-09-30 14:17:44 修改 · 6.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #前端 #html

于 2021-05-08 21:36:35 首次发布
本文详细介绍了HTML5中新增的元素和属性，如<section>、<mark>、<details>、<progress>、<meter>等，以及表单的新功能，如必填字段、正则匹配、滑动组件等。同时，讲解了Canvas图形绘制、音频和视频元素的使用方法，包括音频的autoplay、loop属性和video元素的poster属性。此外，还探讨了如何利用JavaScript实现雪花粒子特效。

文章目录

新增元素与属性

  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）的，所以打不开
在这里插入图片描述
自己用手机录了一段视频，然后可以打开。。好了，就是画质问题。.。

控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）
weixin_43422861的博客
08-17 7511
video
CSS3 +HTML5入门到精通
07-01
【标题】"CSS3 +HTML5入门到精通"与【描述】"《HTML+5+从入门到精通》-中文学习教程"所涵盖的知识点主要围绕着Web开发的基础技术——HTML5和CSS3展开，这两者是现代网页设计与开发不可或缺的组成部分。以下是关于这...
video增加中间播放按钮
zz_LXW的博客
04-23 2653
效果如下，点击播放再次点击暂停。
html video 增加按钮_【odoo ERP开发】入门第二课 自定义按钮
weixin_31585653的博客
12-21 778
Odoo ERP开发入门第二课，如何添加自定义按钮。传统ERP单据界面，都对应着很多按钮如：增删改查、审核、弃审等。Odoo原生模块主打简洁易用，按钮动作可能满足不了某些个性化需求，则需要我们自定义按钮及动作、或者扩展继承原模块按钮。本小节主要学习按钮的视图标签，及按钮如何关联业务逻辑的Python方法。案例需求：增加表头按钮“是否转正”，点击修改“转正”...
H5从入门到精通完整指南
最新发布
askein的博客
10-10 1000
给video视频自定义添加中间播放按钮
热门推荐
cpc980209的博客
05-10 1万+
gei实现效果：视频中间添加播放按钮，且鼠标移上去有波浪动画效果，点击可以控制视频播放 播放按钮可以使用盒子绝对定位在视频中间，当点击时触发video的播放事件，同时让盒子隐藏。 <div class="video-right"> <video controls @pause="videoPause" @play="videoPlay" ref="myVideo..
HTML5 video视频制作，控制按钮
qq_44023710的博客
03-23 4791
HTML5 video视频制作，控制按钮 运用html5 vedio标签，结合JavaScript完成对播放，暂停，静音，全屏，加速，减速，快进，后退功能的实现 以下为所写代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DIY视频</title> </head> <body> <f
HTML5 入门到精通PDF
02-23
HTML5 是超文本标签语言 (Hypertext Markup Language, HTML) 的最新版本，也是迄今为止最为激进的版本。本文介绍了各个领域的许多新特性。比较其引人注目的一些新功能
HTML5入门及基础01
08-27
HTML5入门及基础01，使用的工具是sublime，基础练习展示！
初学者必知的HTML 5入门级技巧
11-24
### 初学者必知的HTML 5入门级技巧详解 #### 一、新的Doctype声明 随着HTML 5的到来，Doctype声明变得极为简洁。在XHTML时代，我们需要使用一个非常冗长的Doctype声明： ```html <!DOCTYPE html PUBLIC "-//W3C//...
HTML5入门中文视频教程（共10讲）
07-22
教程名称： HTML5入门中文视频教程（共10讲）【】HTML5入门视频教程（10）Web Workers【】HTML5入门视频教程（1）【】HTML5入门视频教程（2）新的页面组织标记【】HTML5入门视频教程（3）智能表单设计【】HTML5入门...
html网页制作教程按钮添加,网页制作html5自定义video标签的海报与播放按钮功能...
weixin_42513387的博客
06-09 859
一、问题1.默认播放按键不好看2.设置自定义封面图以上这两点都想自定义二、思路1.使用div把video标签盖住2.div中显示自定义的海报图片与按钮三、步骤分解1.海报图片作为div的背景注：无论是横图还是竖图，都希望按原比例显示在div内css:.yourDiv{background-color: black;height:20em;background-image: url('./image...
video.js创建定义快进快退按钮并实现指定位置显示
weixin_44917365的博客
03-29 2671
想自定义组件的小伙伴们看过来
怎么在视频上面在放置一个按钮
tang_tjz的博客
06-12 770
【代码】怎么在视频上面在放置一个按钮。
通过html5自定义video标签的海报与播放按钮功能的代码详解
withoutfear的博客
04-04 3205
一、问题 1.默认播放按键不好看 2.设置自定义封面图 以上这两点都想自定义 二、思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮 三、步骤分解 1.海报图片作为div的背景 注：无论是横图还是竖图，都希望按原比例显示在div内 css: .yourDiv{ background-color: black; height:20em; background-image: url('./images/timg.jpg'); background-si
video 标签设置样式
zyf13671493506的博客
10-17 5394
设置video标签的默认样式 在这里插入图片描述 //全屏按钮 video::-webkit-media-controls-fullscreen-button { // display: none; } //播放按钮 video::-webkit-media-controls-play-button { } //进度条 ...
向网页中添加 HTML5 视频控件
ljh_learn_from_base的博客
05-31 1914
向网页中添加 HTML5 视频控件 时间 2014-08-05 17:41:17  可乐吧 原文  http://www.k68.org/?p=1754 主题 HTML5 如何开始使用？ 采用它的最基本形式，使用 HTML5 video 元素向网页中添加视频播放器是通过一行 HTML 完成的。 添加 controls 特性，且用户可以控制视频播放。其他特性可用于设
h5：jquery+xgplayer实现点击封面全屏播放视频
lcc0628的博客
01-05 2850
点击播放后的效果 封面 {{-- 视频 start --}} <div class="video-container" data-src="视频地址" data-poster="封面地址"> <div class="social-list__video-poster"> <img loading="lazy" src="封面地址" alt="视频封面"/> </div>...
python网络爬虫入门 —— 学习笔记（1）
weixin_43585712的博客
10-05 386
Beautiful Soup将复杂HTML文档转换成一个复杂的树形结构,每个节点都是Python对象,所有对象可以归纳为4种: Tag 标签对象 NavigableString 用来查找 HTML 文档的注释标签， BeautifulSoup 对象表示的是一个文档的全部内容 Comment 用来表示标签里的文字。 1. BeautifulSoup对象 from urllib.request import urlopen from bs4 import BeautifulSoup html = urlop
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

寻梦&之璐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值