欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

H5学习笔记

程序员文章站 2022-06-28 12:11:22
1、什么是HTML:HTML是HyperText Markup Language的缩写，翻译成中文是超文本标记语言，用于网页的创建。2、html骨架：<！DOCTYPE html>文档类型、头部和主体 ...

目录

什么是HTML:

HTML是HyperText Markup Language的缩写，翻译成中文是超文本标记语言，用于网页的创建。

头部标签

：页面标题 ：页面默认地址 ：页面外部样式 ： </meta></meta></link></base>

H5视频

H5音频

H5拖放

H5Web存储

H5应用缓存

H5画布SVG

H5画布canvas

什么是 Canvas？
1、HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
2、画布是一个矩形区域，您可以控制其每一像素。
3、canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

属性 值 描述
height pixels 设置 canvas 的高度。
width pixels 设置 canvas 的宽度。

全局属性：

accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

事件属性：

onafterprint script 文档打印之后运行的脚本。
onbeforeprint script 文档打印之前运行的脚本。
onbeforeunload script 文档卸载之前运行的脚本。
onerror script 在错误发生时运行的脚本。
onhaschange script 当文档已改变时运行的脚本。
onload script 页面结束加载之后触发。
onmessage script 在消息被触发时运行的脚本。
onoffline script 当文档离线时运行的脚本。
ononline script 当文档上线时运行的脚本。
onpagehide script 当窗口隐藏时运行的脚本。
onpageshow script 当窗口成为可见时运行的脚本。
onpopstate script 当窗口历史记录改变时运行的脚本。
onredo script 当文档执行撤销（redo）时运行的脚本。
onresize script 当浏览器窗口被调整大小时触发。
onstorage script 在 Web Storage 区域更新后运行的脚本。
onundo script 在文档执行 undo 时运行的脚本。
onunload script 一旦页面已下载时触发（或者浏览器窗口已被关闭）。

颜色、样式和阴影
属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法 描述
createLinearGradient() 创建线性渐变（用在画布内容上）
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）
addColorStop() 规定渐变对象中的颜色和停止位置
线条样式
属性 描述
lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时，所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度
矩形
方法 描述
rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形（无填充）
clearRect() 在给定的矩形内清除指定的像素
路径
方法 描述
fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false
转换
方法 描述
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
文本
属性 描述
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
方法 描述
– –
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本（无填充）
measureText() 返回包含指定文本宽度的对象
图像绘制
方法 描述
drawImage() 向画布上绘制图像、画布或视频
像素操作
属性 描述
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象，其包含指定的 ImageData 对象的图像数据
方法 描述
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上
合成
属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上

画图秀秀

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 绘制一个红色长方形，添加坐标值-->
		<canvas id="myCanvas" width="200px" height="100px" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></canvas>
		<!-- 放置xy坐标值 -->
		<div id="cursourxy"></div>
		<!-- 渐变色 -->
		<canvas id="box3" width="200px" height="100px" style="border: 1px solid #666666;"></canvas>
		<!-- 嵌入图片 -->
		<br />
		<canvas id="img"  height="500px" style="width:500px; border:1px solid #666666;"></canvas>
		
		
		
		<script type="text/javascript">
		
		var c=document.getElementById("myCanvas");
		/* getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 */
		var cxt=c.getContext("2d");
		/* 第一部分画矩形 */
		/* fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。 */
		cxt.fillStyle="#FF0000";
		cxt.fillRect(0,0,150,75);//绘制“被填充”的矩形
		/* 第二部分：给坐标值 */
		function cnvs_getCoordinates(e)
		{//鼠标指针移动到元素上时触发。
		x=e.clientX;
		y=e.clientY;
		document.getElementById("cursourxy").innerHTML="坐标值: (" + x + "," + y + ")";
		}
		function cnvs_clearCoordinates()
		{//当鼠标指针移出元素时触发。
		document.getElementById("cursourxy").innerHTML="";
		}
		/* 画圆 */
		cxt.fillStyle="#000000";//颜色
		cxt.beginPath();//起始一条路径，或重置当前路径
		cxt.arc(70,18,15,0,Math.PI*2,true);//创建弧/曲线（用于创建圆形或部分圆）
		cxt.closePath();//创建从当前点回到起始点的路径
		cxt.fill();//填充当前绘图（路径）
		/* 渐变色 */
		 var box3=document.getElementById("box3");
		 var cxt2=box3.getContext("2d");
		 var grd=cxt2.createLinearGradient(0,0,200,100);//创建线性渐变（用在画布内容上）
		 grd.addColorStop(0,"#FF0000");//规定渐变对象中的颜色和停止位置
		 grd.addColorStop(1,"#00FF00");
		 cxt2.fillStyle=grd;
		 cxt2.fillRect(0,0,200,100);
/* 放入图片 */
		var img1=document.getElementById("img");
		var cxt4=img1.getContext("2d");
		//创建新的图片对象
		     var imgx = new Image();
		     //指定图片的URL
		     imgx.src = "https://img.tupianzj.com/uploads/allimg/190924/29-1Z924142629.jpg";
			 //imgx.src ="img/lyh.png";
			 imgx.width="500px"
			 imgx.height="500px";
		    //浏览器加载图片完毕后再绘制图片
		    imgx.onload = function(){
		         //以Canvas画布上的坐标(10,10)为起始点，绘制图像
		         cxt4.drawImage(imgx, -100, -300);             
		     };
		
		</script>
	</body>
</html>

H5学习笔记

SVG与Canvas 的区别

H5 与各个主流浏览器的兼容性

H5实例

<!DOCTYPE html>
	<html>
	    <head>
			
	      <!-- 字符编码，防止网页乱码   -->
	       <meta charset="UTF-8">
		   <!-- 告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话，它不起作用 -->
		   <meta http-equiv="X-UA-Compatible" content="ie=edge">
		    <!-- 编写发送浏览器的头部信息 -->
		       <!-- content-type: text/html;charset=utf-8 -->
		   	<meta http-equiv="content-type" content="text/html;charset=utf-8" />  
		   <!-- viewport 进行移动界面自适配，并且禁止用户进行修改适配大小   -->
		   	<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no"  />
			<!-- SEO   -->
			<!-- keyords 常用于搜索引擎可进行模糊搜索到该网站的关键字 -->
			<meta name="keywords" content="8-12个以英⽂逗号隔开的单词或词语">  
			<!-- description 是网站的相关介绍 -->
			<meta name="description" content="80字以内的⼀段话，与⽹站内容相关">
			<!-- charset:iso-8859-1 -->
			<meta http-equiv="charset" content="iso-8859-1">
			<!-- expires:31 Dec 2008 -->
			<meta http-equiv="expires" content="31 Dec 2008">
			<!-- 强制客户端浏览器为google内核 -->
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
			<!-- 设置谷歌内核 -->
			<meta name="renderer" content="webkit">
		    <!-- 标签为页面上的所有链接规定默认地址或默认目标 -->
		    <base href="https://www.baidu.com"/>
		    <!-- 跳转方式 -->
			<base target="_self">
			<!-- 搜索引擎的索引有帮助 客户端接受服务器端返回的几种格式 -->
			<meta name="keywords" content="HTML,ASP,PHP,SQL">
			<!-- 标题 -->
		    <title>HTML5 页面布局</title>
			<!-- 外部样式 -->
		    <link rel="stylesheet" href="./css/index.css">
			<!-- 内部样式 -->
			<style style="text/css">
				  header, section, footer, aside, nav, article, figure, figcaption {
				                display: block;}       
				            body {
				                color: #666666;
				                margin: 0px;}
				            .wrapper {
				                width: 940px;
				                margin: 20px auto 20px auto;
				                border: 2px solid #000000;}
				            header {
				                height: 160px;
				                }
				            h1 {
				                color:#000;
				                width: 940px;
				                height: 130px;
				                margin: 0px;}
				            nav, footer {
				                clear: both;
				                color: #FFFFFF;;
				                
				                height: 30px;}
				            nav ul {
				                margin: 0px;
				                padding: 5px 0px 5px 30px;}
				            nav li {
				                display: inline;
				                margin-right: 40px;}
				            nav li a {
				                color: #FFFFFF;}
				            nav li a:hover, nav li a.current {
				                color: #000000;}
				            section.courses {
				                float: left;
				                width: 659px;
				                border-right: 1px solid #EEEEEE;}
				            article {
				                clear: both;
				                overflow: auto;
				                width: 100%;}
				            hgroup {
				                margin-top: 40px;}
				            figure {
				                float: left;
				                width: 250px;
				                height: 240px;
				                padding: 5px;
				                margin: 20px;
				                border: 1px solid #EEEEEE;}
				            figcaption {
				                font-size: 90%;
				                text-align: left;}
				            aside {
				                width: 230px;
				                float: left;
				                padding: 0px 0px 0px 20px;}
				            aside section a {
				                display: block;
				                padding: 10px;
				                border-bottom: 1px solid #EEEEEE;}
				            aside section a:hover {
								color: #985D6A;
				                }
				            a {
								color: #DE6581;
				                text-decoration: none;}
				            h1, h2, h3 {
				                font-weight: normal;}
				            h2 {
				                margin: 10px 0px 5px 0px;
				                padding: 0px;}
				            h3 {
				                margin: 0px 0px 10px 0px;
				                color: #DE6581;}
				            aside h2 {
				                padding: 30px 0px 10px 0px;
				                color: #DE6581;}
				            footer {
				                font-size: 80%;
				                text-align:center;
								color: black;
				                padding: 7px 0px 0px 20px;}
				
			</style>
			<!-- 页面加载之前需要加载的脚本 -->
			<script type="text/javascript"></script>
	    </head>
	    <body>
			<!-- H5页面布局 -->
			 <div class="wrapper">
			            <header>
			                <h1>网站标题</h1>
							<!-- 标签定义导航链接的部分。 -->
			                <nav>
			                    <ul>
			                        <li><a href="" class="current">首页</a></li>
			                        <li><a href="">产品</a></li>
			                        <li><a href="">服务</a></li>
			                        <li><a href="">关于我们</a></li>
			                        <li><a href="">联系我们</a></li>
			                    </ul>
			                </nav>
			            </header>
						<!-- 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 -->
			            <section class="courses">
							<!-- 标签规定独立的自包含内容 -->
			                <article>
								<!-- 规定独立的流内容（图像、图表、照片、代码等等） -->
			                    <figure>
			                        <img src="https://www.0735it.net/images/kc/javase.jpg" alt="Bok Choi" />
			                        <!-- 为 figure 添加标题-->
									<figcaption>Java程序设计</figcaption>
			                    </figure>
								<!-- 标签用于对网页或区段（section）的标题进行组合。 -->
			                    <hgroup>
			                        <h2>Java程序设计</h2>
			                        <h3>面向对象程序设计</h3>
			                    </hgroup>
			                    <p>
　　不要必须让生活跌宕波澜，要明白平静无奇才是生活的真。惟有踏踏实实走进生活的人，才能真正品味生活的真谛。</p>
			                </article>    
			                <article>
			                    <figure>
			                        <img src="https://www.0735it.net/images/kc/h5.jpg" alt="Teriyaki sauce" />
			                        <figcaption>　精美短文1</figcaption>
			                    </figure>
			                    <hgroup>
			                        <h2>　精美短文1</h2>
			                        <h3>　精美短文2 + 　精美短文3 + 　精美短文3</h3>
			                    </hgroup>
			                    <p>乔治、赫伯特说过：“一个人如果20岁不英俊，30岁不强壮，40岁不富有，50岁不睿智，那么他这辈子就别想英俊、强壮、富有和睿智了。”这是西方人眼中的生命的季节。</p>
			                </article>    
			            </section>
						<!-- 标签定义其所处内容之外的内容。 -->
			            <aside>
			                <section class="popular-recipes">
			                    <h2>xxxxxx</h2>
			                    <a href="https://www.liyongzhen.com/js" target="_blank">xxxxxxxxxx</a>
			                    <a href="https://www.liyongzhen.com/jstl" target="_blank">xxxxxxxx</a>
			                    <a href="https://www.liyongzhen.com/ajax" target="_blank">xxxxxxxx</a>
			                    <a href="https://www.liyongzhen.com/sql" target="_blank">xxxxxxx</a>
			                </section>
			                <section class="contact-details">
			                    <h2>联系我们</h2>
			                    <p>长沙市<br />
			                        天罡1号</p>
			                </section>
			            </aside>
						<!-- 标签定义文档或节的页脚。 -->
			            <footer>
			                &copy; 2020 天干物燥
			            </footer>
			        </div><!-- .wrapper -->
			
			 <!-- 页内JS代码快  -->
			<script type="text/javascript">
			    document.write("<h1>Hello World!</h1>")
			</script> 
			<!-- 页面加载之后脚本 -->
			<script type="text/javascript" src="/外部路径" defer="是否规定延迟" async="规定异步执行脚本" charset="规定外部脚本的编码"></script>
	    </body>
	</html>

H5学习笔记

本文地址：https://blog.csdn.net/YHM_MM/article/details/106438076

相关标签： # H5

上一篇： 雷军精简产品线 今后小米只卖这三个系列

下一篇： 三侠五义都是谁？其实是8个绰号9个人！

推荐阅读