第一周笔记（html5）

最新推荐文章于 2024-10-06 21:18:37 发布

喜欢九月

最新推荐文章于 2024-10-06 21:18:37 发布

阅读量58

点赞数 1

文章标签：笔记 html5 前端

本文链接：https://blog.csdn.net/m0_74641039/article/details/132790078

版权

本文介绍了HTML5与HTML的区别，重点讲解了新标签的使用，如header、nav、article等，展示了如何添加音频和视频，详细说明了input标签的各种类型和属性，以及如何使用canvas进行图形绘制，包括直线、圆形和椭圆的示例。

摘要由CSDN通过智能技术生成

一.html5与html的区别

HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），
因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。

html5新标签

1.header ---------- 头部标签
2.nav ---------- 导航标签
3.article ---------- 内容标签
4.section ---------- 侧边栏标签
5.aside ---------- 尾部标签
以上标签与div无异，但在敲代码时为了更好区分自己所写的部分，可以用以上标签来划分区域，谁也不会想在一堆div里面找代码

二.添加音频

例：

添加视频
<video width="300" height="" autoplay controls loop muted >
	<source src="../鸡你太美.mp4" type="video/mp4"></source>
</video>
添加音乐
<audio src="../11111.mp3" autoplay controls></audio>

source可以兼容不同视频格式
src为音频的位置
type为音频类型

video和audio属性

with和height可以控制音频的大小
1.controls 给视频添加控件 +
2.muted 静音播放
3.loop 循环播放
4.preload 边加载边播放，和autoplay只能选其一
5.autoplay 视频加载完成后自动播放，和preload只能选其一
6.poster 用户下载时显示的图像 ,值为url（只适用video）

三.input

<input type="text"/>

input的type属性

1.text 默认文本
2.button 按钮
3.password 密码
4.radio 单选框
5.checkbox 多选框
6.submit 提交按钮
7.reset 重置按钮
8.number 数字
9.date 日期
10.file 上传文件
11.email 邮箱
12.tel 手机号码
13.url 网址
14.search 搜索框
15.color 颜色

input的属性

1.placeholder 表单提示文字

<input type="text" name="" required id="" value="" placeholder="请输入密码"/>

2.required 校验表单不能为空（跟input的type中提交属性一起使用）

<input type="text" name="" required id="" value="" placeholder="请输入"/>

3.multiple 选择多个文件上传，跟type中的fill（上传文件属性一起使用）

<input type="file" multiple name="" id="" value="" />

4.autocomplete 启用on 关闭off on启用会记录你上次输入的历史记录

<form autocomplete="on">
E-mail: <input type="email" name="email" autocomplete="on">
</form>

5.min max 通常与数字和日期type类型一起使用，设置最小和最大输入的值或者日期

<input type="number" name="" min="1" max="5">

6.pattern 表单正则验证

<input type="text" name="fname" pattern="[A-Za-z]{3}">

7.step 给默认数字类型上下箭头提供跳跃的数字，默认为加1，跟input的number的type属性一起使用

<input type="number" name="" step="3">

8.readonly 只读属性（只能看不能输入）

<input type="text" name="lname" readonly>

9.disabled 禁用属性

<input type="text" name="lname" disabled>

四.canvas标签画图

1.画直线

<!DOCTYPE HTML>
<html>
<body>
<canvas id="Canvas1" width="100" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
//五角
var c=document.getElementById("Canvas1");//获取画框
var cxt=c.getContext("2d");//决定维数
cxt.moveTo(50,0);//开始的坐标(x,y)
cxt.lineTo(100,100);//结束的坐标
cxt.lineTo(0,40);
cxt.lineTo(100,40);
cxt.lineTo(0,100);
cxt.lineTo(50,0);
cxt.stroke();//绘制当前路径
</script>
</body>
</html>

图例
在这里插入图片描述
canvas中width和height可以调整画框的大小（省略单位），style可以调整边框大小颜色等等

moveTo

决定画笔的起点，分别是x和y坐标

lineTo

以上一个坐标为起点，lineTo坐标为终点

2.画圆形

<!DOCTYPE HTML>
<html>
<body>
<canvas id="Canvas2" width="100" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
//圆
var a=document.getElementById("Canvas2");
var a1=a.getContext("2d");
a1.beginPath();
a1.arc(50,50,20,0,2*Math.PI);
a1.stroke();
</script>
</body>
</html>

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

arc(圆心x，圆心y，半径，起始度数，结束度数)

360°的圆，Math.PI为π

3.椭圆

<!DOCTYPE HTML>
<html>
<body>
<canvas id="Canvas3" width="100" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
//圆
var a=document.getElementById("Canvas3");
var a1=a.getContext("2d");
a1.ellipse(200,200,60,75,0,1.95*Math.PI,0.45*Math.PI);//(起始x,起始y,x半径,y半径,旋转角度,起始,结束)
a1.stroke();
</script>
</body>
</html>