图像识别清晰到模糊检测

转载

kcoufee 2024-11-28 20:58:46

文章标签 图像识别清晰到模糊检测 HTML html html5 文章分类 计算机视觉人工智能

HTML

开始学HTML

HTML 指的是 超文本标记语言 (HyperText Markup Language)，是用来描述网页的一种语言。

你可以使用HTML来建立自己的Web站点，HTML运行在浏览器上，由浏览器来解析。

HTML 不是一种编程语言，而是一种 标记语言，它有一套标记标签。
HTML 使用标记标签来 描述网页 。
HTML 文档 包含了HTML标签 及 文本内容，HTML文档也叫做Web页面。
HTML 文档的 后缀名 包含 .html 、htm (常用的是.html)

HTML是什么？

HTML网页结构

下面是一个可视化的 HTML 页面结构实例：

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" /> 
<title>页面标题</title>
</head>
<body>
  <h1>这是一个标题。</h1>
  <p>这是一个段落。</p>
</body>
</html>

我们来解析一下：

<!DOCTYPE html> 声明为 HTML5 文档，doctype 声明是不区分大小写的，必须位于HTML5文档第一行，不属于标签，是一条指令。
<html> 与 </html> 之间的文本描述网页。
<head> 与 </head>之间的文本描述文档的（mate）元数据。如<meta charset="utf-8">定义网页编码格式为**utf-8**。(meta:可提供有关某个 HTML 元素的元信息 )
<title> 与 </title> 之间的文本描述文档的标题。
<body> 与 </body> 之间的文本是可见的页面内容。
<h1> 与 </h1> 之间的文本被显示为一个大标题。(标题：head)
<p> 与 </p> 之间的文本被显示为一个段落。(段落：paragraph)

注意:
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。
虽然 Web 浏览器读取 HTML 文件作为网页显示，但并不直接显示 HTML 标签。
HTML 标签的使用决定了如何向用户展现 HTML 页面的内容。

<title> 标签可以定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样的，当把文档加入用户的链接列表或收藏夹或书签列表时，标题将成为该文档链接的默认名称。（这个标签对于HTML5 App 开发的窗口意义不大。）

<html>
    <head>...</head>
</html>

HTML编辑器

HTML 文件是文本文件，因此你可以使用任何文本编辑器来创建HTML文件。

有一些很不错的HTML编辑器可用，下面是比较常用的编辑器：

Sublime Text
VS Code
Atom
HBuilder X

创建HTML文件

接下来，我们将演示如何使用 Sumlime Text 编辑器来创建 HTML 文件。

步骤 1：新建 HTML 文件

在 Sublime Text 安装完成后，选择" 文件(F)->新建(N) "，也可以使用快捷键：Ctrl+N新建文件，在新建的文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> 
<title> w3cschool - 随时随地学编程</title>
</head>
<body>
  <h1>我的第一个标题。</h1>
  <p>我的第一个段落。</p>
</body>
</html>

注意：
对于中文网页需要使用声明编码，否则会出现乱码。
有些浏览器（如 360 浏览器）会设置 GBK 为默认编码，则你需要设置为。

步骤 2：另存为 HTML 文件

然后选择" 文件(F)->另存为(A) "，文件名为 first.html。快捷键： Ctrl+S保存文件。

注意：
当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 后缀名。
两种后缀名没有区别，完全根据您的喜好，推荐使用 .html。

步骤 3：在浏览器中运行这个 HTML 文件

启动您的浏览器，然后选择" 文件 "菜单的" 打开文件 "命令，或者直接在文件夹中双击您的 HTML 文件。

注意：
Sublime Text 还可以配合 Emmet 插件来提高编码速度。
附：Emmet 官网：http://emmet.io/

HTML 元素

HTML 文档由 HTML元素 定义。

HTML 元素 以开始标签起始，以结束标签终止，元素的内容是开始标签与结束标签之间的内容。

HTML 文档 由嵌套的 HTML元素 构成。

实例： 这个 HTML 文档包含了三个 HTML元素 。

<!DOCTYPE html>
<html>
  <body>
    <p>这是一个段落</p>
  </body>
</html>

HTML 标签分类

单标签： <hr />、<input type="text" />、<!Doctype html>等；
双标签：<html></html>、<head></head>、<title></title>等

HTML 标签关系

包含（嵌套）关系： 父子关系，<title>嵌套在<head>中<head>为父、<title>为子。
并列关系： 兄弟姐妹， <head>与<body>并列同级于<html>中，<head>和<body>是兄弟关系。

注意：
在并列关系的例子中，<head>和<body>两者与<html>也是父子关系。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。例如，<br> 就是没有关闭标签的空元素，<br> 标签定义折行（换行）。在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。

<!DOCTYPE html>
<html>
<body>
  <p>我的第一个段落。</p>
  <p>这是一个<br />换行。</p>
</body>
</html>

注意：
即使<br>目前在所有浏览器中都是有效的，但为了获得更长远的保障，w3cschool 建议使用 <br />。

HTML提示：使用小写标签

HTML 标签对大小写不敏感：<P>等同于 <p>。许多网站都使用大写的 HTML 标签。

w3cschool使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 属性

属性是HTML提供的附加信息。

HTML 元素可以设置属性
属性可以在元素中添加 附加信息
属性一般描述与 开始标签
属性总是以 键值对（名称/值） 的形式出现，比如：name="value"。

属性实例：

这是一个链接使用了 href 属性。

<a href="http://www.w3cschool.cn">这是一个链接</a>

键值对的定义：
键：值的编号或名称。
值：要存放的数据。

HTML 属性值

属性值应该始终被包括在 引号内 。

双引号 是最常见的，不过使用单引号也没有问题。

在某些个别情况下，比如属性值本身就含有双引号，那么必须使用单引号，例如：

name='Bill "HelloWorld" Gates'

注意：
属性和属性值对大小写不敏感
但在推荐标准中，依然推荐使用小写的属性/属性值。

HTML 常用属性

下面列出了 HTML 常用的属性，适用于大多数 HTML元素 。

属性	描述
`class`	为html元素定义一个或多个类名（类名从外部样式文件引入或在HTML文件的 `<style>`标签中定义）
`id`	定义元素的唯一id
`style`	规定元素的内联样式
`title`	规定元素的额外信息（可在工具提示中显示）

HTML class 与 id属性

class 属性

class 属性 为 HTML 元素定义一个或多个类名。

class 属性 通常用于指向样式表中的类。

例子：

<p class="intro">这是一个段落，定义了一个类名。</p>

<p class="intro color">这是另一个段落定义多个类名。</p>

id 属性

id 属性定义 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

例子：

<h1 id="header">w3cschool</h1>

注意：
一个 id属性 只能定义给一个 HTML 元素，即 id 是唯一的。

布局 div 标签

div 标签是 HTML 页面中常用的标签，默认样式是独占一行，在页面显示时并无任何特殊的显示，它的样式，如宽度、高度等样式设置、内部字体大小、字体颜色，都需要通过CSS来实现。

div 标签的作用是做一个容器，在这个容器中放置各种标签内容，主要是通过 <div> 标签来实现各种各样的布局效果。

<div> 标签的宽度在没有使用CSS控制时，会自动设置为父容器的宽度，而高度会随着内容进行自适应。

示例：

<!DOCTYPE html5>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>div 标签示范</title>
</head>
<body>
	<div style="background - color: greenyellow;">
		div 标签是 HTML 页面中常用的标签，默认样式是独占一行，在页面显示时并无任何特殊的显示，它的样式，如宽度、高度等样式设置、内部字体大小、字体颜色，都需要通过CSS来实现。
	</div>

</body>
</html>

此时会发现 <div> 标签的宽度会随着浏览器窗口的宽度进行改变，而高度是随着内容的变化进行自动适应的。style规定了背景色为黄绿色。

文本控制标签

标题h标签

HTML提供了6个等级的标题有 <h1> 、<h2>、 <h3> 、<h4>、 <h5>、 <h6> ，其重要性从 <h1> \(\sim\) <h6> 依次降低，标题中的文字自动设置为粗体。如下例：

<!DOCTYPE html5>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>标题标签示范</title>
</head>
<body>
	<h1>1级标题</h1>
	<h2>2级标题</h2>
	<h3>3级标题</h3>
	<h4>4级标题</h4>
	<h5>5级标题</h5>
	<h6>6级标题</h6>
</body>
</html>

段落p标签

在页面中要把文字有条理地显示出来，离不开段落标签，它可以把内容分为若干段落。段落标签使用 <p> ，默认情况下，它会根据浏览器窗口的大小自动换行。 <p> 标签的语法格式为：

<p>段落文本</p>

和 <div> 标签一样，<p> 标签也会单独占一行，但不同的是，它会自动在段落前后各加上一个空行。例如：

<!DOCTYPE html5>
<html>
<head>
	<meta charset="utf-8">
	<title>段落标签使用示范</title>
</head>
<body>
	<p style="background-color:aquamarine;">在页面中要把文字有条理地显示出来，离不开段落标签，它可以把内容分为若干段落。段落标签使用 p标签，默认情况下，它会根据浏览器窗口的大小自动换行。 </p>
	<p style="background: greenyellow;">div 标签是 HTML 页面中常用的标签，默认样式是独占一行，在页面显示时并无任何特殊的显示，它的样式，如宽度、高度等样式设置、内部字体大小、字体颜色，都需要通过CSS来实现。</p>
</body>
</html>

会发现，段落标签在文字前后都各自添加了一个空行。

水平线 hr 标签

在页面中经常使用一些水平线将段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以通过水平线标签 <hr/> 来完成。在页面中输入一个 <hr/> ，就自动添加了一条默认样式的水平线。

hr: Horizontal label line

换行 br标签

在 HTML 中，一个段落的文字会自动从左到右排列，到浏览器窗口右端，自动换行。如果需要某段文本或标签内的内容强制换行显示，需要使用换行标签 <br/> 。

<!DOCTYPE html5>
<html>
<head>
	<meta charset="utf-8">
	<title>段落标签使用示范</title>
</head>
<body>
	<p style="background-color:aquamarine;">在页面中要把文字有条理地显示出来，离不开段落标签，它可以把内容分为若干段落。<br/>段落标签使用 p标签，默认情况下，它会根据浏览器窗口的大小自动换行。 </p><hr />
	<p style="background: greenyellow;">div 标签是 HTML 页面中常用的标签，默认样式是独占一行，在页面显示时并无任何特殊的显示，它的样式，如宽度、高度等样式设置、内部字体大小、字体颜色，都需要通过CSS来实现。</p>
</body>
</html>

特殊字符标记

在页面中常常用到一些包含特殊字符的文本，如数学公式、版权信息等，在HTML中为这些字符准备了特殊字符标记，下表为常用的特殊字符标记：

特殊字符	描述	相应的标记
	空格	` `
<	小于	`<`
>	大于	`>`
&	和	`&`
©	版权	`©`
®	注册商标	`®`
"	双引号	`"`
²	平方	`²`
°	摄氏度	`°`

修饰span标签

在页面中有时需要为一行文字的某部分使用不同的效果，例如单独设置为红色、粗体、斜体或下划线等，HTML有个特殊标签 <span> 标签，可以专门用来定义页面中某些特殊显示的文本，它本身没有任何固定的格式体现，只有应用CSS样式时，才会产生视觉上的变化。如下面给部分字体设置颜色。

<!DOCTYPE html5>
<html>
<head>
	<meta charset="utf-8">
	<title>段落标签使用示范</title>
</head>
<body>
	<p style="background-color:aquamarine;">在页面中要把文字有条理地显示出来，离不开<span style="color:red">段落标签</span>，它可以把内容分为若干段落。<br/>段落标签使用 p标签，默认情况下，它会根据浏览器窗口的大小自动换行。 </p><hr />
	<p style="background: greenyellow;">div 标签是 HTML 页面中常用的标签，默认样式是独占一行，在页面显示时并无任何特殊的显示，它的样式，如宽度、高度等样式设置、内部字体大小、字体颜色，都<span style="color: blue">需要通过CSS来实现</span>。</p>
</body>
</html>

图像 img 标签

在 HTML 页面中，任何元素的实现都要依靠 HTML 标签，要想在页面中显示图形，就需要使用图形标签 <img/> ，图形标签的基本语法格式为：

<img src="图像 URL" alt="文字提示"/>

src 属性用来指向图像的 URL 路径，可以使用相对路径，也可以使用网络路径；
alt 属性主要用于图形看不到或丢失时显示的文字，另外使用 alt 属性，也便于 Google 和 Baidu 等搜索引擎的 SEO(Search Engine Optimization，搜索引擎优化)，它对于网页有重要作用，便于收录。

图片标签使用示范代码如下：

<!DOCTYPE html5>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>图片标签使用示范</title>
</head>
<body>
	<!--这里图片的URL使用的是相对路径-->
	<img src="C:\Users\Administrator\Desktop\学习\计算机基础\1-1分析图.png" alt="1-1分析图"/>
	<br />
	<!--这里图片的URL使用的是网络路径-->
	<img src="http://www.meishihui68.com.cn/imgs/bd_logo.png" alt="百度的 Logo"/>
</body>
</html>

注意：在Chrome中，页面上的图片如果是使用标签显示的，可以把鼠标放在相应图片上，单击鼠标右键，可以使用菜单的不同选项进行不同的处理。

超链接 a 标签

超链接在网页中占有不可替代的地位，需要使用 <a> 标签就行了，基本的语法格式为：

<a herf="跳转的URL地址" target="新页面弹出方式">文本或图像</a>

herf 属性用于指定的链接的目标 URL 地址，可以使用当前网站内的相对地址，也可以使用外网地址（但必须加上http://）；
target 属性用于指定链接页面的打开方式，有_self 和 _blank 两种。默认值为 _self ,表示在原窗口中打开；_blank 表示在新窗口中打开。

除了常规的超链接用法，在移动设备上使用 <a> 标签，还可以用它来实现单击电话号码后，打开发送短信或拨打电话界面，也可以用于发邮件。下面是展示 <a> 标签不同用法的示例。

<!DOCTYPE html5>
<html>
<head>
	<meta charset="UTF-8">
	<title>超链接文本的不同用法</title>
</head>
<body>
	<!--普通的文字超链接-->
	<a href="http://www.163.com" target="_blank">网易</a>
	<a href="段落标签使用示范.html">段落标签使用示范</a>
	<br />
	<!--图片链接-->
	<a href="http://www.163.com"><img src="C:\Users\Administrator\Desktop\学习\HTML知识\用户.png"></a>
	<br /><br />
	<!--拨打电话-->
	<a href="tel:10086">拨打电话</a>
	<!--发送短信-->
	<a href="sms:10086">发送短信</a>
	<!--发送Email-->
	<a href="mailto:190037267@qq.com">发送邮件</a>

</body>
</html>

在 Chrome 中浏览这张页面，页面上展示了普通的文字超链接和图片超链接，把这张页面复制到手机上运行，单击对应的超链接可以打开电话、短信和邮件发送的 App。

列表标签

为了使页面更易读，经常需要将信息以列表的形式呈现，例如新闻 App 中新闻的呈现列表，排列有序，内容清晰。为了满足页面排版的需求，这里主要将解 HTML 语言提供的无序列表和有序列表。

无序列表 ul 标签

无序列表时网页最常用的列表，之所以成为“无序列表”，是因为其各个列表之间没有顺序级别之分，通常都是并列的，例如淘宝首页中各商品的分类排序不分先后，这就可以看作是一个无序列表。无序列表的基本语法格式为：

<u1>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</u1>

在上面的语法中，列表项是使用 <li> 标签定义的，<li> 标签类似于 <div> ，也是容器，它的标签体也可以包含各种内容，包括文字、图片等。<ul> 标签只能直接嵌套 <li> ，是不能直接输入文字的。

有序列表 ol标签

有序列表指的是按照字面或数字顺序排列的列表项目。要注意的是，有序列表的结果是带有前后顺序之分的编号，如果插入和删除一个列表项，编号会自动进行调整。无序列表的基本语法格式为：

<ol type="项目符合类数值" start="项目符合开始的数值">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ol>

与无序列表不同的是，列表项的前面可以自动出现字母或数字序号，这是由type属性值决定的，type的取值如下表所示，start 属性用于指定从第几个字母或数字开始。

取值	描述
1	项目符合用数字表示(1,2,3,···)
A	项目符合用大写字母表示(A,B,C,···)
a	项目符合用大写字母表示(a,b,c,···)
Ⅰ	项目符合用大写的罗马数字表示(\(Ⅰ,Ⅱ,Ⅲ,···\))
i	项目符合用数字表示(i,ii,iii,···)

使用示例如下：

<!DOCTYPE html5>
<html>
<head>
	<meta charset="UTF-8">
	<title>超链接文本的不同用法</title>
</head>
<body>
	<!--普通的文字超链接-->
	<a href="http://www.163.com" target="_blank">网易</a>
	<a href="段落标签使用示范.html">段落标签使用示范</a>
	<br />
	<!--图片链接-->
	<a href="http://www.163.com"><img src="C:\Users\Administrator\Desktop\学习\HTML知识\用户.png"></a>
	<br /><br />
	<!--拨打电话-->
	<a href="tel:10086">拨打电话</a>
	<!--发送短信-->
	<a href="sms:10086">发送短信</a>
	<!--发送Email-->
	<a href="mailto:190037267@qq.com">发送邮件</a>

	<u1>
    	<li>列表项1</li>
    	<li>列表项2</li>
    	<li>列表项3</li>
    	<li>列表项4</li>
	</u1>
	<ol type="A" start="4">
    	<li>列表项1</li>
    	<li>列表项2</li>
    	<li>列表项3</li>
    	<li>列表项4</li>
	</ol>

</body>
</html>

</DOCTYPE html5>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>有序列表示例</title>
</head>
<body>
	<ol>
		<li>列表项1</li>
		<li>列表项2</li>
		<li>列表项3</li>
		<li>列表项4</li>
	</ol>
	<ol type="a" start="2">
		<li>第1项</li>
		<li>第2项</li>
		<li>第3项</li>
		<li value="20">第4项</li>
	</ol>
	<ol type="I" start="2">
		<li>第1项</li>
		<li>第2项</li>
		<li>第3项</li>
		<li>第4项</li>
	</ol>
</body>
</html>

注意：列表项目是可以嵌套的，这意味着在 <li> </li> 的标签体中，可以再使用<ul>或<ol>

语义化标签

在 HTML5 标准出现之前，页面的布局全是使用 div+css完成的，这给搜索引擎的SEO带来了复杂性，网络蜘蛛（搜索引擎收集网站信息的程序）必须从页面的头读到尾，才能正确收录到需要的信息（例如网站版权信息），而 HTML5标准制定了许多语义化标签，它可以将每个区域语义化，让页面结构更清晰，更利于SEO

一些常用语义化标签：

<header> : 定义网页或文章的头部区域，可包含logo、导航、搜索条等内容。
<main> : 定义网页中的主体内容。
<nav> : 定义包含多个超链接的区域，标注页面导航链接。
<footer> : 定义网页或文章的尾部区域，可包含版权、备案等内容。
<section> : 通常标注为网页中的一个独立区域。
<article> : 完整、独立的内容块，可包含独立的 <header> 、<footer> 等结构元素。
如新闻、博客文章等独立的内容块（不包括评论或者作者简介）。
<aside> : 定义除主内容之外的内容，如注解。
<figure> : 代表一段独立的内容，经常与 <figcaption> (表示标题)配合使用，可用于文章中的图片、插图、表格、代码段等等。
<figcaption> : 定义 <figure> 元素的标题。

页面交互性标签

HTML5 不仅增加了许多Web页面的特性，为操作新增了一些对应的交互性标签，让界面体验更好。

细节展示 details 和 summary 标签

details 标签用于标书文档或文档某个部分的细节。summary 标签经常与 details 标签配合使用，作为 details标签的第一个元素，用于为 details 定义标题。当单击标题时，可以显示或隐藏 details 中的其他内容。例如书籍目录结构就可以使用这两个标签来制作，看下面这个例子。

details : 细微之处，直接，琐事，详情，全部细节，具体情况
summary : 总结，概括，概要，总结性的，概括的，即决的，草草的

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>details 和 summary标签</title>
</head>
<body>
	<details>
		<summary>1.1 Python 基础</summary>
		<u1>
			<li>1.1.1 Python的发展历史</li>
			<li>1.1.2 Python的安装</li>
			<li>1.1.3 Python的环境配置</li>
		</u1>
	</details>
	<details>
		<summary>1.2 Python 第一个程序</summary>
	</details>
</body>
</html>

进度条 progess 标签

过去要在页面上完成进度条，基本上是用 div+css效果制作的，HTML5标准中新增了 progress 标签来实现，进度条 progress 标签的语法格式为：

<progress value="当前值" max="最大值"></progress>

需要注意的是： value 和 max 属性的值都必须大于0，并且 value 的值要小于或等于 max 的值，progress 标签在 Chrome 中的显示效果如下图：

图像识别清晰到模糊检测_HTML

表格标签

表格是页面上经常用来展示数据的一个组件，在 HTML 中提供了 table 标签用来实现表格效果。表格的行使用 tr 标签，列使用 td 标签。下面是一个简单的存储利率表格的 HTML 的代码：

<!DOCTYPE html5>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>details 和 summary标签</title>
</head>
<body>
	<details>
		<summary>1.1 Python 基础</summary>
		<u1>
			<li>1.1.1 Python的发展历史</li>
			<li>1.1.2 Python的安装</li>
			<li>1.1.3 Python的环境配置</li>
		</u1>
	</details>
	<details>
		<summary>1.2 Python 第一个程序</summary>
	</details>
	<br /><br />
	<table border="1">
		<tr>
			<td>一年</td>
			<td>1.75</td>
		</tr>
		<tr>
			<td>二年</td>
			<td>2.25</td>
		</tr>
		<tr>
			<td>三年</td>
			<td>2.75</td>
		</tr>
		<tr>
			<td>五年</td>
			<td>2.75</td>
		</tr>
	</table>

</body>
</html>

border: 国界，边界，边疆地区，镶边，包边，和...毗邻，给...镶边，与...接壤，环绕...；
border 属性，它的作用是设置边框是否显示，值为0是没有边框，为1有边框；
除了 tr 和 td ，table 标签还有 thead、tbody、tfoot、caption 标签，它们用于对表格的不同部分进行分组：

thead 用于定义表格的头部，
tbody 用于表格的数据行
tfoot 用于表格的脚注（例如总计行）等
caption 用于表格标题

对上面的列子，用thead、tfoot、tbody进行改造，标题行中的列必须使用 th 标签，代码如下：

<!DOCTYPE html5>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>details 和 summary标签</title>
</head>
<body>
	<details>
		<summary>1.1 Python 基础</summary>
		<u1>
			<li>1.1.1 Python的发展历史</li>
			<li>1.1.2 Python的安装</li>
			<li>1.1.3 Python的环境配置</li>
		</u1>
	</details>
	<details>
		<summary>1.2 Python 第一个程序</summary>
	</details>
	<br /><br />
	<table border="1">
		<thead>
			<tr>
				<th>存款事件</th>
				<th>存款利率</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td>注：数据来源于中国工商银行</td>
				<td></td>
			</tr>
		</tfoot>
		<tbody>
		<tr>
			<td>一年</td>
			<td>1.75</td>
		</tr>
		<tr>
			<td>二年</td>
			<td>2.25</td>
		</tr>
		<tr>
			<td>三年</td>
			<td>2.75</td>
		</tr>
		<tr>
			<td>五年</td>
			<td>2.75</td>
		</tr>
	</tbody>
	</table>

</body>
</html>

结果是，标题行会自动加粗。但仍有改进的空间，如三年和五年的存储利率相同，让它们的数据合并显示，备注应该跨两格，HTML5中的表格有两个属性：

colspan : 跨列，和并列，合并单元格；
colspan可以设置横跨列数；
rowspan : 跨行，合并行，跨行属性，行宽；
rowspan ：可以设置横跨行数。

<!DOCTYPE html5>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表格以及表格的合并</title>
</head>
<body>
	<table border="1">
		<thead>
			<tr>
			    <th>存款时间</th>
				<th>存款利率</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="2">注：数据来源于中国工商银行</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>一年</td>
				<td>1.75</td>
			</tr>
			<tr>
				<td>二年</td>
				<td>2.25</td>
			</tr>
			<tr>
				<td>三年</td>
				<td rowspan="2">2.75</td>
			</tr>
			<tr>
				<td>五年</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

表单的应用

表单是页面的重要组成部分，它收集用户的输入信息，并将这些信息发送给服务端程序进行处理。例如注册、登录、查询等功能，表单由表单 form 标签和各种输入标签组成。

表单 form 标签

在 HTML5 中，<form>，</form> 标签用于定义表单，这个标签在页面上没有显示效果，单独使用也毫无意义。在标签体中的各输入信息将被收集，并向服务器发送。表单的语法格式如下所示：

<form method="提交方式" action="服务端 url" enctype="编码方式"></form>

form标签的属性说明：

method 属性：用于固定如何发送表单的数据，数据会发送到action属性所定义的服务端，它分为 get 和 post 两种方式。
get方式是默认值，使用这种方法提交的数据将会附加在服务端 url 之后，以？与 url 分开。使用这种方式传输的数据量小，由于受到url长度的限制，最多只能传输 1KB。字母数字字符原样发送，空格转换为 +，塔器符号转换为%XX，其中XX为该符号以十六进制表示的 ASCII（或 ISO Latin-1）值。例如 action 服务端的地址是：

http://www.example.com/

使用get方式提交数据 x 和 y 后，浏览器中记载的服务端地址会变成：

http://www.example.com/?x=2&y=3

post 方式传递的数据量较大，它把数据作为 http 请求的内容，数据不会附加在url之后。
action 属性：指明表单数据要发送到的页面或 API URL，如果这个属性是空的或未写，那么当前的文档URL将被启用。
enctype 属性：可省略，规定在发送到服务器之前应该如何对表单数据进行编码，它的取值见下表：

值	描述
application/x-www-form-urlencoded	默认值，数据编码为名称/值对
multipart/form-data	将数据内容分段，每段用分隔符隔开，在需要文件上传时，必须设置为该属性
text/plain	空格转换为加号，但不对特殊字符编码

各种 input 输入标签

input 标签是表单中最常见的标签，页面中常见的文本框、单选框、复选框等效果都是靠它实现的。input 标签有很多形式，只要使用 type 属性来设置，下面对它的各种形式进行讲解。

单行文本输入框

单行文本输入看常用于输入各种简短的信息，如账号、用户名、身份证号码等，HTML 代码格式为：

<input type="text" value="张三丰"/>

密码输入框

密码输入框用来输入密码，其内容会以圆点形式显示，对密码自动进行隐藏，HTML代码格式为：

<input type="password" value="12345"/>

普通按钮

普通按钮必须和 JavaScript 代码配合才有作用。对于的 HTML 代码为：

<input type="button" value="普通按钮"/>

单选框

单选框用于单项选择，如选择性别、是否同意等。要注意的是，在定义单选框时，必须为同一组的选项指定相同的 name 属性值，这样才能进行单选。另外，可以对它使用 checked 属性，指定选中状态。相应的 HTML 代码为：

<input type="radio" checked/>男
<input type="radio" checked/>女

复选框

复选框用于多项选择，如选择兴趣、爱好等。和单选框类似，必须为同一组的选项指定相同的 name 属性值，也可以对它使用 checked 属性，指定选中状态。HTML 代码为：

<input type="checkbox" checked/>同意与否
<input type="checkbox" checked/>送货速度快

提交按钮

当表单中的信息输入完成后，往往需要提交给服务器，在表单中单击提交按钮会自动触发表单的提交动作。可以使用 value 属性修改按钮上的文字，外观上与普通的按钮没有什么区别，不同的是它会使得表单提交，对应的 HTML 代码为：

<input type="submit" value="注册"/>

图片提交按钮

图片提交按钮的功能和提交按钮时一样的，也是单击后出发表单的提交，不同的是它可以使用图片作为按钮。HTML代码为：

<input type="image" src="C:\Users\Administrator\Desktop\学习\HTML知识\用户.png"/>

重置按钮

如果用户在表单中输入的信息有误，可以使用重置按钮恢复表单的初始状态。使用 value 属性修改按钮上的文字。HTML代码为：

<input type="reset" value="取消">

隐藏域

正如隐藏域的名称，它在界面上是不显示的，主要用来在表单向服务器提交一些隐藏的数据。对于的 HTML代码为：

<input type="hidden" value="这是隐藏的值"/>

文件上传域

在页面上经常会需要向服务器提交一些文件，例如照片或文档，这时可以使用文件上传域，它会产生一个按钮“选择文件”和一个提示“未选择任何文件”，如果单击按钮，就从计算机或移动设备上选取文件后，提示信息会进行相应的改变.

文件上传域还提供了一个 multiple 属性，如果设置了，则用于一次性上传多个文件，它的HTML代码格式为:

<input type="file" multiple/>

Email 输入文本框

显示效果和单行文本输入框完全相同，不同的是，它是专门用于输入 Email 的文本输入框，当表单被提交时，该输入框中的内容会被验证 Email 格式是否正确，如果不正确，会有相应的错误提示信息，对应的 HTML 代码如下：

<input type="email"/>

URL 输入文本框

显示效果和单行文本输入框完全相同，专门用于 URL 输入的文本框，表单提交时会自动验证 URL 地址格式，如果不正确，会有相应的错误提示信息。对应的 HTML 代码如下：

<input type="url"/>

电话输入文本框

显示效果和单行文本输入框完全相同，专门用于输入电话号码，但电话号码千差万别，所以它通常会和 pattern 属性配合使用，对应的 HTML 代码如下：

<input type="tel"/>

关键词搜索文本框

专业用于输入关键词搜索的文本框，在用户输入内容后，其右侧会自动出现一个删除图标，单击这个图标会快速清空输入框。它的 HTML 代码如下：

<input type="search"/>

颜色设置文本框

用于方面用户快速设置颜色的文本框，在过去要实现颜色选择，必须依靠大量的JavaScript 代码。HTML代码如下：

<input type="color"/>

数字输入框

数字输入框是专门用于输入数字的，并且还可以对输入的数字进行限制，它只能输入数字，不能输入字母，它的 HTML 代码如下：

<input type="number" value="当前值" min="最小值" max="最大值" step="值的间隔"/>

注意：数字输入框在 IOS 和 Android 中的显示效果都会只是一个文本框，只不过输入法会自动切换到数字。

滑动条

滑动条是专门用来提供一定范围内数值的输入范围，它的属性与数字输入框是类似的。HTML代码如下：

<input type="range" value="当前值" min="最小值" max="最大值" step="值的间隔"/>

日期和时间输入框

HTML5 中提供了多个可供日期和时间选择的输入框，这在以前，必须依靠大量的 JavaScript 代码或 jQuery 插件才能实现。在不同的操作系统这些输入框还能显示出不同的外观形式。

选择日期输入框的 HTML 代码如下：

<input type="date"/>

选择月份输入框的 HTML 代码如下：

<input type="month"/>

选择星期输入框的 HTML 代码如下：

<input type="week"/>

时间输入框的HTML 代码：

<input type="time"/>

时间和日期输入框的 HTML 代码：

<input type="datetime-local"/>

input 标签的其他属性

placeholder 属性

placeholder 属性用于为 input 类型的输入框提供相关提示信息，它在输入信息为空时以灰色显示出来，而输入框获得焦点时自动消失，这在过去是必须用JavaScript 处理才能实现的。

required 属性

required属性用于在 form 表单提交数据前，为 input 类型的输入框规定必须填入数据，如果未输入，则有错误消息提示（iOS并不支持这个属性）。

pattern 属性

pattern 属性用于在 form 表单提交数据前，为input类型的输入框对顶数据必须符号正则表达式，如果格式不正确，则有错误信息提示。

disabled 属性

disabled 属性用于禁用 input 类型的输入框，被禁用的输入框既不可用，也不能单击。可以设置 disabled 属性，直到满足某些其他的条件为止（例如选择了一个复选框等）。

autofocus 属性

autofocus 属性用于页面加载后，为 input 类型的输入框自动获取光标焦点。

其他表单标签

textarea 标签
当需要输入大量文本信息时，单行文本输入框不太适用，在 HTML 中可以通过 xtarea 标签轻松地创建多行文本输入框。
它的大小最好适用 CSS 来定义，另外，在 Chrome 下浏览，文本框的大小是可以适用鼠标拖拉控制的，HTML 代码如下：

<textarea>
    文字内容在这里！
</textarea>

select 标签

在浏览页面时，经常会看到包含多个选项的下拉菜单，例如选择所在的城市等。在HTML中定义了一个 select 标签用于实现，这是一个简单的下拉框代码：

<select>
    <option value="item1">初中</option>
    <option value="item2" selected>高中</option>
    <option value="item3">大专</option>
    <option value="item4">本科</option>
    <option value="item5">研究生</option>
</select>

select 标签中的每个选项是使用 option 标签定义的，<option> 和 </option> 之间定义的选项文字，value 属性表示选项的值(form 表单提交数据时，提交的是 value属性值)。

如果 value 属性没有定义，则该选项的值默认为当前文字。 selected 属性可以设置用于被选中的选项，为设置则默认第一个选项被选中。

注意：在表单中要提交数据的输入标签，必须为其设置 name 属性值，这是最容易忽略的地方。如果没有设置，则该输入标签的数据无法传递。

实例：注册表单

<!DOCTYPE html5>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>注册界面：表单和各输入框综合应用</title>
</head>
<body>
	<form action="http://www.meishihui68.com.cn/FormTest.ashx" method="post" enctype="multipart/form-data">
		<div>
			<span>用户名：</span>
			<input type="text" placeholder="请输入用户名" required name="uname"/>
			<input type="button" value="检查用户名是否存在"/>
		</div>
		<div>
			<span>密码：</span>
			<input type="password" placeholder="请输入密码" required name="upass"/>
		</div>
		<div>
			<span>确认密码：</span>
			<input type="password" placeholder="请确认密码" required/>
		</div>
		<div>
			<span>区域：</span>
			<select name="uprov">
				<option value="sichuan">四川省</option>
				<option value="hunan">湖南省</option>
				<option value="guangdong">广东省</option>				
			</select>
		</div>
		<div>
			<span>年龄：</span>
			<input type="radio" name="ugender" checked value="boy"/>男
			<input type="radio" name="ugender"  value="girl"/>女
		</div>
		<div>
			<span>年龄：</span>
			<input type="number" name="uage" value="20" min="20" max="40" step="1"/>
		</div>
		<div>
			<span>生日：</span>
			<input type="date" name="udate"/>
		</div>
		<div>
			<span>手机号：</span>
			<input type="tel" name="utel" required />
		</div>
		<div>
			<span>头像：</span>
			<input type="file" name="uphoto"/>
		</div>
		<div>
			<span>主页：</span>
			<input type="url" name="uurl" required />
		</div>
		<div>
			<span>Email：</span>
			<input type="email" name="uemail" required="" />
		</div>
		<div>
			<span>喜欢的颜色：</span>
			<input type="color" name="ubackcolor"/>
		</div>
		<div>
			<input type="checkbox" checked/>同意服务条款
		</div>
		<div>
			<input type="submit" name="注册"/>
			<input type="reset" name="取消"/>
		</div>
	</form>
</body>
</html>

效果如下：

图像识别清晰到模糊检测_图像识别清晰到模糊检测_02

移动开发中 meta 标签的应用

HTML5 移动开发中的一些 meta 专属头部标签，能够帮助浏览器更好地解析 HTML 代码，从而为 HTML5 移动开发提供更好的前端表现与体验。

控制页面的缩放

在 HTML5 App中的头部标签的标签体中，通常需要加入下面一行代码以控制页面的缩放，让页面自动适应设备的宽度。

<meta name="vieport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = no" />

meta 标签有很多用法，包括针对搜索引擎和更新频率的描述和关键词等，在用于移动页面缩放控制时，必须使用属性 name=“viewport”(viewport 是用来显示页面的那一块区域)，另外，content 中的参数含义如下：

width : 控制 viewport 的大小，device-width为设备的宽度。
initial-scale : 页面初始缩放程度，一个浮点值，是页面大小的一个乘数。
maximum-scale : 页面最大缩放程度，一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。
minimum-scale : 页面最小缩放程度，一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。
user-scalable : 用户是否能改变页面缩放程度，如果设置为 yes，则允许用户对其进行改变，反之为 no。默认值是 yes。

对于HTML5 App 中的页面，如果没有这个 meta 标签控制缩放，移动设备会重置文字大小，页面可能会模糊不清，而使用 meta 标签控制好缩放，字体大小不会被重置。

iOS 系统的一些控制

针对 iOS 系统，meta标签可以控制全屏、状态栏颜色、主屏标题等内容，设置如下：

<!-- 强制全屏 -->
<meta name-"Apple-mobile-web-App-capable" content="yes"/>
<!-- 设置状态栏颜色 -->
<meta name-"Apple-mobile-web-App-bar-style" content="black"/>
<!-- 强制添加至主屏标题 -->
<meta name-"Apple-mobile-web-App-title" content="标题"/>

控制是否自动识别电话号码和 Email

对于 HTML5 App 中的页面，如果不想让系统自动识别页面中出现的电话号码或 Email 格式数据，可以使用 meta 标签进行设置：

<meta name="format-detection" content="telphone=no,email=no"/>

Make progress every day！

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：java 文本相似度对比

下一篇：redis集群如何使用mset

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯