HTML5应用

依然饭特稀a

已于 2023-11-14 23:39:20 修改

阅读量1.2k

点赞数

分类专栏： Web学习文章标签： HTML5 HTML表单验证 Canvas画布 HTML5新input类型应用

于 2018-11-21 00:09:24 首次发布

本文链接：https://blog.csdn.net/cwyp18809/article/details/84310599

版权

Web学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

@[toc]

HTML5简介
HTML5客户端验证
验证要求
代码示例
代码详解
《form》标签
定义和用法：
action属性：
method属性：
GET和POST之间的主要区别如下：

输入框验证

HTML5 新的 Input 属性
代码示例

Canvas画布
什么是canvas
创建Canvas元素
通过 JavaScript 来绘制
理解坐标
代码示例

HTML5简介

HTML5 是下一代的 HTML。
HTML5新特征

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如
calendar、date、time、email、url、search

HTML5 的一些规则：

新特性应该基于 HTML、CSS、DOM 以及JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

浏览器支持
最新版本的 Safari、Chrome、Firefox 、 Opera、都会支持 HTML5的特性。

HTML5客户端验证

HTML5为表单空间新增了几个输入校验属性，可以代替此前JavaScript的功能

实验：完成一个图书查询的验证。

验证要求

输入格式：

图书名称：应为6-12个字符；
图书ISBN：“3个数字-1个数字-3个数字-5个数字”，示例 123-1-123-12345；
图书价格选择：最小值为20，最大值为150，间隔步长为5（间隔步长：每次调节，数字变化5）；
作者邮箱：验证邮箱格式是否规范；
图书详情：验证输入的URL格式是否正确

代码示例

<!doctype html>
<html>
	<head>
<meta charset="utf-8">

<title>HTML 5为input元素新增的控件</title>
<style type="text/css">
.buttondh {
  display: inline-block;
  padding: 13px 25px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.buttondh:hover {background-color: #3e8e41}

.buttondh:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
	
</head>
<body>
<h2>HTML5表单验证</h2>
	<fieldset style="width:660px">
    <legend><h3>图书查询</h3></legend>
<table width="600" height="303" border="0">
  
	<form action="" method="post">
    <tr>
      <th width="127" height="30" align="right" scope="row">图书名称：</th>
      <td width="175"><input name="text" type="text" id="bookname" size="20" required="required" pattern="[\w]{6,12}" title="*6-12个字符！"/></td>
        <td align="left"><div id="usernamePrompt">*6-12个字符！</div></td>
    </tr>
    <tr>
      <th height="30" align="right" scope="row">图书ISBN：</th>
     
     
		 <td><input name="text2" type="text" id="price"  pattern="[\d]{3}[- ][\d][- ][\d]{3}[- ][\d]{5}" title="格式：123-1-123-12345"/></td>
		<td align="left"><div id="usernamePrompt2">例如：123-1-123-12345</div></td>
    </tr>
    <tr>
      <th height="30" align="right" scope="row">图书价格：</th>
		<label for="number"></label>
      <td><input name="number" type="number" id="number" min="20" max="150" step="5"></td>
    </tr>
    <tr>
      <th height="30" align="right" scope="row">作者邮箱：</th>
      <td><input name="email" type="email" id="url" placeholder="请输入邮箱地址" 
				 required="required" title="中间必须有@字符" /></td>
    </tr>
    <tr>
      <th height="30" align="right" scope="row">图书详情：</th>
      <td><input name="url" type="url" id="http" placeholder="请输入URL路径" 
				 required="required"  title="Http://或者https://开头"/>
		</td>
    </tr>
    <tr>
         <td colspan="2" align="center"><input type="submit" class="buttondh" name="提交" /></td>
    </tr>
	 </form>
 
</table>
</fieldset>
</body>
</html>

运行效果：
HTML5表单验证

代码详解

《form》标签

<form action="" method="post">

定义和用法：

标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。

action属性：

提交表单时，向何处发送表单数据。例如：

绝对 URL - 指向其他站点，向其他站点发送表单数据（比如 src=“www.example.com/example.htm”）
相对URL - 指向站点内的文件，向站点内的文件发送表单数据（比如 src=“example.htm”）

method属性：

可设置或返回用于表单提交的 HTTP 方法。

method="post"
method="get"

GET和POST之间的主要区别如下：

get是从服务器上获取数据，post是向服务器传送数据。
在客户端，Get方式在通过URL提交数据，数据在URL中可以看到；POST方式，数据放置在HTML HEADER内提交。
对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
GET方式提交的数据最多只能有1024字节，而POST则没有此限制。
安全性问题。正如在（2）中提到，使用 Get 的时候，参数会显示在地址栏上，而 Post 不会。所以，如果这些数据是中文数据而且是非敏感数据，那么使用get；如果用户输入的数据不是中文字符而且包含敏感数据，那么还是使用 post为好。

更多HTML5中的新属性

输入框验证

图书名称验证：

<input name="text" type="text" id="bookname" size="20" required pattern="[\w]{6,12}" title="*6-12个字符！"/>

type="text"设置一个文本属性的输入框
required：定义该输入框为必填框，否则无法提交
pattern="[\w]{6,12}"：属性为正则表达式，通过你设定的正则表达式，来判断你输入框输入的值是否符合你的要求，如果不符合，则浏览器会弹出提示信息；
title="*6-12个字符！"：属性为输入框提示，将鼠标悬停在输入框、输入的值不符合正则表达式所规定的的要求时，浏览器会弹出你所要提示的信息

图书ISBN验证：

<input name="text2" type="text" id="price" pattern="[\d]{3}[- ][\d][- ][\d]{3}[- ][\d]{5}" title="格式：123-1-123-12345"/>

pattern="[\d]{3}[- ][\d][- ][\d]{3}[- ][\d]{5}"：要注意正则表达式格式的书写：
在引号“”下像\d \w \S之类的元字符必须写在一个单独的中括号【】里（自己实验得来，如有错误，请指正）
“-”此符号在【】里的输入格式为：“-” +一个空格
图书价格设置：

<input name="number" type="number" id="number" min="20" max="150" step="5">

min、max的值为价格输入框的最小值和最大值，step为选择步长，也就是每增加或减少一次，数值变化为5.
这三种属性只对数值类型、日期类型、<input>元素有效；

图书邮箱、URL（链接）验证：

<input name="email" type="email" id="url" placeholder="请输入邮箱地址" 
				 required title="中间必须有@字符" />

<input name="url" type="url" id="http" placeholder="请输入URL路径" 
				 required title="Http://或者https://开头"/>

这两个时属于HTML5中新增的Input类型，直接引用即可

HTML5 新的 Input 属性

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

代码示例

<!DOCTYPE html>
<html>
<head>
<title>HTML 5为input元素新增的控件</title>
</head>
<body>
<table align="center" border="1">
  <form action="" method="post">
    <tr>
      <td>颜色选择器：</td>
      <td><input type="color" name="color" /></td>
    </tr>
    <tr>
      <td>日期选择器：</td>
      <td><input type="date" name="date" /></td>
    </tr>
    <tr>
      <td>时间选择器：</td>
      <td><input type="time" name="time" /></td>
    </tr>
    <tr>
      <td>UTC日期、时间选择器：</td>
      <td><input type="datetime" name="datetime" /></td>
    </tr>
    <tr>
      <td>本地日期、时间选择器：</td>
      <td><input type="datetime-local" name="datetime-local" /></td>
    </tr>
    <tr>
      <td>第几周：</td>
      <td><input type="week" name="week" /></td>
    </tr>
    <tr>
      <td>月份选择器：</td>
      <td><input type="month" name="month" /></td>
    </tr>
    <tr>
      <td>E-mail输入框：</td>
      <td><input type="email" name="email" /></td>
    </tr>
    <tr>
      <td>电话输入框：</td>
      <td><input type="tel" name="tel" /></td>
    </tr>
    <tr>
      <td>URL输入框：</td>
      <td><input type="url" name="url" /></td>
    </tr>
    <tr>
      <td>数字输入框：</td>
      <td><input type="number" name="number" /></td>
    </tr>
    <tr>
      <td>拖动条：</td>
      <td><input type="range" name="range" min="5" max="100" step="5"/></td>
    </tr>
    <tr>
      <td>搜索框：</td>
      <td><input type="search" name="search" /></td>
    </tr>
	<tr>
            <td colspan="2" align="center"><input type="submit" name="提交" /></td>
    </tr>
  </form>
</table>
</body>
</html>

运行效果
在这里插入图片描述
更多HTML5新增表单属性

Canvas画布

什么是canvas

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

创建Canvas元素

向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

	var canvas = document.getElementById('rect');// 获取canvas元素对应的DOM对象
	var crc2D = canvas.getContext('2d');// 获取CanvasRenderingContext2D对象
	crc2D.fillStyle = '#D3E2F5';// 设置填充颜色
	crc2D.fillRect(10 ,10 , 120 , 60);// 填充一个矩形
	crc2D.fillStyle = '#A8C6ED';// 设置填充颜色
	crc2D.fillRect(80 ,40 , 120 , 60);// 填充一个矩形
	crc2D.strokeRect(220 , 20 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#00f";// 设置线条颜色
	crc2D.strokeRect(280 ,40 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#0ff";// 设置线条颜色
	crc2D.lineWidth=10;// 设置线条宽度
	crc2D.lineJoin = "round";设置线条交汇时边角为圆角
	crc2D.strokeRect(30 ,120 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#f0f";// 设置线条颜色
	crc2D.lineJoin = "bevel";// //设置线条交汇时边角为斜角
	crc2D.strokeRect(120 , 150 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#00f";// 设置线条颜色
	crc2D.lineJoin = "miter";// //设置线条交汇时边角为尖角
	crc2D.strokeRect(220 , 130 , 120 , 60);// 绘制一个矩形边框
</script>```

JavaScript 使用 id 来寻找 canvas 元素：

var canvas = document.getElementById('rect');// 获取canvas元素对应的DOM对象

然后，创建 context 对象：

var crc2D = canvas.getContext('2d');// 获取CanvasRenderingContext2D对象

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

crc2D.fillStyle = '#D3E2F5';// 设置填充颜色
	crc2D.fillRect(10 ,10 , 120 , 60);// 填充一个矩形
	crc2D.fillStyle = '#A8C6ED';// 设置填充颜色
	crc2D.fillRect(80 ,40 , 120 , 60);// 填充一个矩形

理解坐标

crc2D.fillRect(10 ,10 , 120 , 60);// 填充一个矩形
上面的 fillRect 方法拥有参数 (10 ,10 , 120 , 60)。
意思是：在画布上绘制 120x60 的矩形，从左上角开始 (10,10)。

代码示例

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>绘制矩形</title>
</head>
<body>
<h3> 绘制矩形 </h3>
<canvas id="rect" width="480" height="230" style="border:1px solid black"> </canvas>
<script type="text/javascript">
	var canvas = document.getElementById('rect');// 获取canvas元素对应的DOM对象
	var crc2D = canvas.getContext('2d');// 获取CanvasRenderingContext2D对象
	crc2D.fillStyle = '#D3E2F5';// 设置填充颜色
	crc2D.fillRect(10 ,10 , 120 , 60);// 填充一个矩形
	crc2D.fillStyle = '#A8C6ED';// 设置填充颜色
	crc2D.fillRect(80 ,40 , 120 , 60);// 填充一个矩形
	crc2D.strokeRect(220 , 20 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#00f";// 设置线条颜色
	crc2D.strokeRect(280 ,40 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#0ff";// 设置线条颜色
	crc2D.lineWidth=10;// 设置线条宽度
	crc2D.lineJoin = "round";设置线条交汇时边角为圆角
	crc2D.strokeRect(30 ,120 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#f0f";// 设置线条颜色
	crc2D.lineJoin = "bevel";// //设置线条交汇时边角为斜角
	crc2D.strokeRect(120 , 150 , 120 , 60);// 绘制一个矩形边框
	crc2D.strokeStyle = "#00f";// 设置线条颜色
	crc2D.lineJoin = "miter";// //设置线条交汇时边角为尖角
	crc2D.strokeRect(220 , 130 , 120 , 60);// 绘制一个矩形边框
</script>
</body>
</html>

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