HTML5_03_表单_语义

最新推荐文章于 2024-04-17 11:17:07 发布
最新推荐文章于 2024-04-17 11:17:07 发布
阅读量600 收藏
点赞数 1
分类专栏： # HTML/H5 文章标签： HTML 表单 语义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pre_eminent/article/details/79491676
版权




HTML5 新的 Input 类型

在本站的HTML教程中，你应该已经了解过HTML表单输入类型了，

而在本节的内容中，我们将介绍HTML5中新增的一些表单类型！

HTML5 拥有多个新的表单输入类型。

这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型：

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

注意:并不是所有的主流浏览器都支持新的input类型，

不过您已经可以在所有主流的浏览器中使用它们了。

即使不被支持，仍然可以显示为常规的文本域。

Input 类型: color

color 类型用在input字段主要用于选取颜色，如下所示

HTML代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form action="http://localhost/cgi-bin/ruby_12.rb" method="post">
		选择喜欢的颜色:<input type="color" name="color">
		<br/><br/>
		<input type="submit" value="提交">
	</form>
</div> 	
<p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

Ruby_12.rb代码如下:

#!/usr/bin/ruby 
# -*- coding: UTF-8 -*-
#coding=utf-8

require 'cgi'

cgi = CGI.new("html4")

color = cgi['color']
cgi.out{  
    cgi.html{  
        cgi.head{ "\n" +'<meta http-equiv=Content-Type content="text/html;charset=utf-8">' + cgi.title{"Ruby CGI"}}+  
        cgi.body{ "<p style='text-align:center'>选择的颜色 is #{color}</p>\n" 
        }  
    }  
}

效果如下:


Input 类型: date

date 类型允许你从一个日期选择器选择一个日期:

HTML代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form action="http://localhost/cgi-bin/ruby_11.rb" method="post">
		生日:<input type="date" name="birthday">
		<br/><br/>
		<input type="submit" value="提交">
	</form>
</div> 	
<p style="font-size:14px;text-align:center">Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>
Ruby_11.rb代码如下: 
#!/usr/bin/ruby 
# -*- coding: UTF-8 -*-
#coding=utf-8

require 'cgi'

cgi = CGI.new("html4")

birthday = cgi['birthday']
cgi.out{  
    cgi.html{  
        cgi.head{ "\n" +'<meta http-equiv=Content-Type content="text/html;charset=utf-8">' + cgi.title{"Ruby CGI"}}+  
        cgi.body{ "<p style='text-align:center'>birthday is #{birthday}</p>\n" 
        }  
    }  
}


效果如下:




Input 类型: datetime (经测试,无一能用)

datetime 类型允许你选择一个日期（UTC 时间）

HTML代码如下:

略

Ruby_13.rb代码如下:

略

效果如下:

略

Input 类型: datetime-local

datetime-local 类型允许你选择一个日期和时间 (无时区)

HTML代码如下:


Ruby_13.rb代码如下:

#!/usr/bin/ruby 
# -*- coding: UTF-8 -*-
#coding=utf-8

require 'cgi'

cgi = CGI.new("html4")

datetime = cgi['datetime']
cgi.out{  
    cgi.html{  
        cgi.head{ "\n" +'<meta http-equiv=Content-Type content="text/html;charset=utf-8">' + cgi.title{"Ruby CGI"}}+  
        cgi.body{ "<p style='text-align:center'>您的出发时间 is #{datetime}</p>\n" 
        }  
    }  
}

Chrome和 Opera可以正常显示,效果如下:



iPhone上的Safari可以弹出选择器,但是提交时告知请输入有效值!!!





Input 类型: email

email 类型用于应该包含 e-mail 地址的输入域

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form action="http://localhost/cgi-bin/ruby_14.rb" 
	      method="post">

		邮箱地址:<br/><input type="email" 
		name="email" />

		<br/><br/><br/><br/><br/>
		<input type="submit" value="提交">
	</form>
</div> 	

<p style="font-size:14px;text-align:center">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:



提示: 

iPhone 中的 Safari 浏览器支持 email 输入类型，

并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）???Excuse Me???

Input 类型: month

month 类型允许你只选择一个月份

效果如下:


代码如下:

Opera Safari Chrome Firefox Internet Explorer

实例

定义月与年 (无时区):

几月是妳的谎言: <input type="month" name="uso">

Input 类型: number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定:

效果如下:


代码如下:

Opera Safari Chrome Firefox Internet Explorer

实例

定义一个数值输入域(限定):

Loli多少岁?<br/><input type="number" name="loliage" min="8" max="13"/>

使用下面的属性来规定对数字类型的限定：

  • max- 规定允许的最大值
  • min - 规定允许的最小值
  • step - 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
  • value - 规定默认值

尝试一下带有所有限定属性的例子

代码如下:

Loli多少岁?<br/><input type="number" name="loliage" min="8" max="13" step="1" value="13"/>

Input 类型: range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form action="http://localhost/cgi-bin/ruby_16.rb" 
	      method="post">

		小Loli今年多少岁了呀?<br/>
		<a id="resultId"></a>
		<br/><input id="range_id" type="range" name="loliage" min="8" max="13" value="11" step="1" οninput="valueChanged()" οnchange="valueChanged()" />

		<br/>
		<input type="submit" value="提交">
	</form>
</div> 	

<script type="text/javascript">
	function valueChanged () {
		var rangeNode = document.getElementById("range_id");
		var value = rangeNode.value;
		var resultNode = document.getElementById("resultId");
		resultNode.innerHTML = value+"岁";
	}
</script>

<p style="font-size:14px;text-align:center">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:



请使用下面的属性来规定对数字类型的限定：

  • max - 规定允许的最大值
  • min - 规定允许的最小值
  • step - 规定合法的数字间隔
  • value - 规定默认值

Input 类型: search (没有任何效果)

search 类型用于搜索域，

比如站点搜索或 Google 搜索。

Opera Safari Chrome Firefox Internet Explorer

实例

定义一个搜索字段 (类似站点搜索或者Google搜索):

Search Google: <input type="search" name="googlesearch">

Input 类型: tel (没有任何效果,全都不支持,写上来干嘛呀)

Opera Safari Chrome Firefox Internet Explorer

实例

定义输入电话号码字段:

电话号码: <input type="tel" name="usrtel">

Input 类型: time

time 类型允许你选择一个时间

效果如下:


代码如下:

Opera Safari Chrome Firefox Internet Explorer

实例

定义可输入时间控制器（无时区）：

选择起床时间: <input type="time" name="wakeuptime">

Input 类型: url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值,

必须是http或者https开头的网址。

效果如下:



www开头的也不行,

必须是http://或者https://的才行




代码如下:

Opera Safari Chrome Firefox Internet Explorer

实例

定义输入URL字段:

添加您的个人主页: <input type="url" name="userwebsite">

提示: 

iPhone 中的 Safari 浏览器支持 url 输入类型，

并通过改变触摸屏键盘来配合它（添加 .com 选项）???Excuse Me???

Input 类型: week

week 类型允许你选择周和年

效果如下:


代码如下:

Opera Safari Chrome Firefox Internet Explorer

实例

定义周和年 (无时区):

选择周: <input type="week" name="weekinyear">

HTML5 <input> 标签

标签描述
<input>描述input输入器

扩展阅读

input杂谈：HTML5的Input类型


HTML5 表单元素

HTML5 新的表单元素

HTML5 有以下新的表单元素:

  • <datalist>
  • <keygen>
  • <output>

注意:

不是所有的浏览器都支持HTML5 新的表单元素，

但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。

HTML5 <datalist> 元素

<datalist> 元素规定 输入域的 选项列表。

<datalist> 属性规定 form 或 input 域 应该拥有 自动完成功能。

当用户在 自动完成域 中开始输入时，浏览器应该在该域中 显示 填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form action="http://localhost/cgi-bin/ruby_20.rb" 
	      method="post">
		自动补全:<br/>
		<input list="animelist" name="anime">
		<datalist id="animelist">
			<option value="未闻花名" />
			<option value="龙与虎" />
			<option value="石头门" />
			<option value="鲁鲁修" />
			<option value="来自深渊" />
			<option value="来自新世界" />
		</datalist>

		<input type="submit" value="提交">
		<br/>
	</form>
</div> 	
<p style="font-style:normal;"><strong>注意</strong>:IE9(更早IE版本)<br/>Safari不支持 datalist 标签</p>
<p style="font-size:14px;text-align:center">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:


Ruby_20.rb代码如下:

#!/usr/bin/ruby 
# -*- coding: UTF-8 -*-
#coding=utf-8

require 'cgi'

cgi = CGI.new("html4")

anime = cgi['anime']
cgi.out{  
    cgi.html{  
        cgi.head{ "\n" +'<meta http-equiv=Content-Type content="text/html;charset=utf-8">' + cgi.title{"Ruby CGI"}}+  
        cgi.body{ "<p style='text-align:center'>最爱の动漫 : #{anime}</p>\n" 
        }  
    }  
}

 

HTML5 <keygen> 元素 (???完全搞不懂???)

<keygen> 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键:一个是私钥，一个公钥。

私钥（private key）存储于客户端，

公钥（public key）则被发送到服务器。

公钥可用于之后 验证用户的 客户端证书（client certificate）。

Opera Safari Chrome Firefox Internet Explorer

实例

带有keygen字段的表单???Excuse Me???

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

HTML5 <output> 元素

<output> 元素用于不同类型的输出，比如计算或脚本输出

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form οninput="age.value=parseInt(x.value) + parseInt(y.value)+'岁'">
	8
	<input type="range" id="x" value="11" min="8" max="13" />
	13
	+ 
	<input type="number" id="y" value="3" min="1" max="5"/>岁
	<br/>
	<output name="age" for="x y"></output>
	<br/><br/>
			output标签演示
	</form>
</div> 	
<p style="font-size:14px;text-align:center">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:


 

HTML5 新表单元素

标签描述
<datalist><input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen><keygen> 标签规定用于表单的密钥对生成器字段。(???Excuse Me???完全看不懂)
<output><output> 标签定义不同类型的输出，比如脚本的输出。



HTML5 表单属性

在之前的章节内容中，我们介绍了HTML5表单元素，
进一步的，在本节内容中，你会了解到HTML5的表单属性。

HTML5 新的表单属性

HTML5 的 <form> 和 <input>标签添加了几个新属性.

<form>新增了2个属性：

  • autocomplete

  • novalidate

<input>新增了16个属性：

  • autocomplete

  • autofocus

  • form

  • formaction

  • formenctype

  • formmethod

  • formnovalidate

  • formtarget

  • height and width

  • list

  • min and max

  • multiple

  • pattern (regexp)

  • placeholder

  • required

  • step

<form> / <input> autocomplete 属性

autocomplete 属性规定 form 或 input 域  应该拥有 自动完成 功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

提示: 

autocomplete 属性有可能在 form元素中是开启的，而在input元素中却是关闭的。

注意: 

autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：

text, search, url, telephone, email, password, datepickers, range 以及 color。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form action="http://localhost/cgi-bin/ruby_21.rb" 
	      method="post" autocomplete="on">
		自动补全:<br/>
		name:<input type="text" name="name" value="beyond" /></br>
		age:<input type="text" name="age"></br>
		e-mail:<input type="text" name="email" autocomplete="off" placeholder="username@qq.com"></br>

		<input type="submit" value="提交">
		<br/>
	</form>
</div> 	
<p style="font-style:normal;"><strong>注意</strong>:填写并提交表单<br/>
然后重新刷新页面查看如何自动填充内容<br/>
form的 autocomplete属性为"on"(开)<br/>
但是e-mail自动为("off")关</p>
<p style="font-size:14px;text-align:center">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:



提交之后的效果如下:




 

提示:

某些浏览器中，您可能需要启用自动完成功能，以使该属性生效。

<form> novalidate 属性

novalidate 属性是一个boolean 属性.

novalidate 属性规定在提交表单时不应该验证 form 或 input 域

注意:type是email时,会强制检查email的格式;

格式错误是无法提交的,但是:

form标签 指定了novalidate属性之后, 也就不会再强制检测email是否合规了

。

OperaSafariChromeFirefoxInternet Explorer

实例

无需验证提交的表单数据

<form action="demo-form.php" novalidate > 
 E-mail: <input type=" email " name="user_email"> 
 <input type="submit"> 
</form> 


<input> autofocus 属性

autofocus 属性是一个 boolean 属性.

autofocus 属性规定在页面加载时，域 会自动地获得焦点。

OperaSafariChromeFirefoxInternet Explorer

实例

让 "name" input 输入域在页面载入时自动聚焦：

name:<input type="text" name="name" autofocus >


<input> form 属性

form 属性规定输入域  所属的一个或多个表单。

提示:

如需引用一个以上的表单，请使用空格分隔的列表

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form action="http://localhost/cgi-bin/ruby_21.rb" 
	      method="post" autocomplete="on" novalidate
	      id="form_id">
		自动补全:<br/>
		name:<input type="text" name="name" value="beyond" autofocus/></br>
		
		e-mail:<input type="email" name="email" autocomplete="on" placeholder="username@qq.com"></br>

		<input type="submit" value="提交">
		<br/>
	</form>
</div> 	
<p style="font-style:normal;"><strong>注意</strong>:age不在form表单内部</br>但是仍是form表单的一部分<br/></p>

<div style="margin:0 auto;">
	age:<input form="form_id" type="text" name="age"></br>
</div>


<p style="font-size:14px;text-align:center">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:


<input> formaction 属性

注意： IE9 及更早IE版本不支持 input 标签的 formaction 属性。

The formaction 属性用于描述表单提交的URL地址.

The formaction 属性会覆盖<form> 元素中的action属性.

注意:

 The formaction 属性用于 type="submit" 和 type="image".

代码如下:

OperaSafariChromeFirefoxInternet Explorer

实例

以下HTMLform表单包含了两个不同地址的提交按钮：

<form action="http://localhost/cgi-bin/ ruby_11.rb "> 
 name: <input type="text" name="name"><br> 
 age: <input type="text" name="age"><br> 
 <input type="submit" value="Submit"><br> 
 <input type="submit" formaction ="http://localhost/cgi-bin/ ruby_22.rb " 
  value="Submit as admin"> 
</form> 


<input> formenctype 属性

注意： IE 9及更早IE版本不支持input标签的 formenctype 属性。

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

主要: 

该属性与 type="submit" 和 type="image" 配合使用.

经过抓包发现,普通提交时如下:

POST /cgi-bin/ruby_22.rb HTTP/1.1
Host: localhost
Content-Length: 41
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: null
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: sex=loli; beyond=8dc21ef533cdecc7d78ec4955ab24302e; session_id_number=85e2294d32263b05b342892b5f5375580

name=loli&email=loli%40qq.com&age=13


通过multipart/form-data提交时,抓包如下:

POST /cgi-bin/ruby_22.rb HTTP/1.1
Host: localhost
Content-Length: 339
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: null
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryvvz3Nrs7PD782DsA
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.167 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: sex=loli; beyond=8dc21ef53cdecc7d378ec4955ab24302e; session_id_number=85e2294d32262b05b342892b5f5375580

------WebKitFormBoundaryvvz3Nrs7PD782DsA
Content-Disposition: form-data; name="name"

loli
------WebKitFormBoundaryvvz3Nrs7PD782DsA
Content-Disposition: form-data; name="email"

loli@qq.cn
------WebKitFormBoundaryvvz3Nrs7PD782DsA
Content-Disposition: form-data; name="age"

13
------WebKitFormBoundaryvvz3Nrs7PD782DsA--


OperaSafariChromeFirefoxInternet Explorer

实例

第一个提交按钮已默认编码发送表单数据，

第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:

<form action="http://localhost/cgi-bin/ruby_22.rb" method="post"> 
 name: <input type="text" name="name"><br> 
 <input type="submit" value="Submit"> 
 <input type="submit" formenctype =" multipart/form-data " 
  value="Submit as Multipart/form-data"> 
</form> 


<input> formmethod 属性

 IE 9及更早IE版本不支持 input 标签的 formmethod 属性。

formmethod 属性重新定义了一下表单提交的方式。

formmethod 属性会覆盖 <form> 元素的的method 属性。

注意: 

该属性可以与 type="submit" 和 type="image" 配合使用。

OperaSafariChromeFirefoxInternet Explorer

实例

重新定义表单提交方式实例:

<form action="http://localhost/cgi-bin/ruby_11.rb" method="get"> 
 name: <input type="text" name="name"><br> 
 age: <input type="text" name="age"><br> 
 <input type="submit" value="Submit by Get"> 
 <input type="submit" formmethod =" post " formaction ="http://localhost/cgi-bin/ruby_22.rb" 
  value="Submit Using POST"> 
</form> 


<input> formnovalidate 属性

注意： IE 9及更早IE版本,或Safari不支持 input 标签的 formnovalidate 属性。

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

注意: 

formnovalidate 属性与type="submit”一起使用


OperaSafariChromeFirefoxInternet Explorer

实例

两个提交按钮的表单(使用与不适用验证 ): 

<form action="demo-form.php"> 
 E-mail: <input type="email" name="email"><br> 
 <input type="submit" value="Submit"><br> 
 <input type="submit" formnovalidate value="Submit without validation"> 
</form>   


<input> formtarget 属性

注意： IE 9及更早IE版本不支持 input 标签的 formtarget 属性。

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示位置。

input标签的formtarget 属性将覆盖 <form>元素的target属性.

注意: 

formtarget 属性与type="submit" 和 type="image"配合使用.

OperaSafariChromeFirefoxInternet Explorer

实例

两个提交按钮的表单, 在不同窗口中显示:

<form action="demo-form.php" targe="_top"> 
 name: <input type="text" name="name"><br> 
 age: <input type="text" name="age"><br> 
 <input type="submit" value="Submit as normal"> 
  <input type="submit" formtarget =" _blank " 
  value="Submit to a new window"> 
</form> 


<input> height 和 width 属性

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

注意: height 和 width 属性只适用于 image 类型的<input> 标签。

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）.

定义了一个图像提交按钮, 使用了 height 和 width 属性:

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form action="http://localhost/cgi-bin/ruby_22.rb" 
	      method="post" target="_top">
		
		name:<input type="text" name="name" value="beyond" autofocus/></br>
		
		a g e:<input type="age" name="age"/></br>

		<input type="image" src="http://localhost/static/images/sakura.png" width="150" height="150" value="当前打开提交" />
	</form>
</div> 	

<p style="font-size:14px;text-align:center">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:


 

<input> list 属性

注意: Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。

list 属性规定输入域的 datalist。datalist 是输入域的选项列表

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form action="http://localhost/cgi-bin/ruby_20.rb" 
	      method="post">
		自动补全:<br/>
		<input list="animelist" name="anime">
		<datalist id="animelist">
			<option value="未闻花名" />
			<option value="龙与虎" />
			<option value="石头门" />
			<option value="鲁鲁修" />
			<option value="来自深渊" />
			<option value="来自新世界" />
		</datalist>

		<input type="submit" value="提交">
		<br/>
	</form>
</div> 	
<p style="font-style:normal;"><strong>注意</strong>:IE9(更早IE版本)<br/>Safari不支持 datalist 标签</p>
<p style="font-size:14px;text-align:center">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:

 

<input> min 和 max 属性

.

注意: IE 9及更早IE版本，Firefox不支持input标签的 max 和 min 属性。

注意: 在IE 10中max 和 min属性不支持输入日期和时间，IE 10 不支持这些输入类型。

min、max 和 step 属性用于为包含数字 number或日期 date的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin:0 auto;">
	<form action="http://localhost/cgi-bin/ruby_22.rb" method="post">
		
		2006-06-07之前的日期:<input type="date" name="startdate" max="2006-06-06" autofocus/></br>

		2010-05-20之后的日期:<input type="date" name="startdate" min="2010-05-21" autofocus/></br>
		
		a g e:<input type="number" name="age" min="8" max="13"/></br>

		<input type="submit" value="提交" />
	</form>
</div> 	

<p style="font-size:14px;text-align:center">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下(图片中灰色的是不能选的):




<input> multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

注意: multiple 属性适用于以下类型的<input> 标签：email 和 file。

效果如下:


HTML代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<p style="text-align:center;">
	<form action="http://localhost/cgi-bin/cgi_10.py" enctype="multipart/form-data" method="post">
		
		<input type="file" name="choosefile"  multiple/>
		<br/><br/>
		<input type="submit" value="提交" />
	</form>
</p>

<p style="font-size:14px;text-align:left;">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

Python的CGI文件cgi_10.py如下:

#!/usr/bin/env python
# -*- coding: UTF-8 -*-
# 千万要记得chmod 755 cgi_10.py
import cgi, os
import cgitb; cgitb.enable()
form = cgi.FieldStorage()
# 目前只能处理多个同时上传,只传一个会报500错误
result =''
for fileModel in form['choosefile']:
	if fileModel.filename:
		tmpFileNameStr = os.path.basename(fileModel.filename)
		# 当前路径放置新的上传文件
		desFilePath =  tmpFileNameStr
		open(desFilePath,'wb').write(fileModel.file.read())
		msg = 'file "'+tmpFileNameStr+'" was successful uploaded'
		result = result + msg + '<br/>'
	else:
		msg = "no file uploaded"
	
print "Content-Type:text/html\r\n\r\n"
print result
print "<html>"
print "<head>"
print """
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
"""
print "<title>CGI</title>"
print "</head>"
print "<body>"
print "<h2>this is website by python</h2>"
print "</body>"
print "</html>"


<input> pattern 属性

注意: IE 9及更早IE版本，或Safari不支持input标签的 pattern 属性。

pattern 属性描述了一个正则表达式用于验证<input> 元素的值。

注意:

pattern 属性适用于以下类型的<input> 标签:

 text, search, url, tel, email, 和 password.

提示： 全局 title 属性 用来描述模式.

效果如下:


代码如下:


 

<form action="http://localhost/cgi-bin/cgi_11.py" method="post">
		loli age:<input type="text" name="age" pattern="[8,9,10,11,12,13]" title="萝莉的年龄是8到13岁">岁
		<br/><br/><br/><br/><br/><br/>
		<input type="submit" value="提交" />
</form>


<input> placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域  所期待的值。

简短的提示  在用户输入值前  会显示在输入域上。

注意: 

placeholder 属性适用于以下类型的<input> 标签：

text, search, url, telephone, email 以及 password

效果如下:


代码如下:

Opera Safari Chrome Firefox Internet Explorer

实例

input 字段提示文本t:

<input type="text" name="name" placeholder="your nick name"> 


<input> required 属性

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的<input> 标签：

text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

效果如下:


代码如下:

OperaSafariChromeFirefoxInternet Explorer

实例

不能为空的input字段:

Username: <input type="text" name="usrname" required >


<input> step 属性

step 属性为输入域规定合法的数字间隔。

如果 step="3"，则合法的数是min + 3*n 或者 max - 3*n

提示： step 属性可以与 max 和 min 属性创建一个区域值.

注意: step 属性与以下type类型一起使用: 

number, range, date, datetime, datetime-local, month, time 和 week.

Opera Safari Chrome Firefox Internet Explorer

实例

规定input step步长为3:

loli's age :<input type="number" name="age" min="8" max="13" step="1" /> 


HTML5 <input> 标签

标签描述
<form>定义一个form表单
<input>定义一个 input 域


HTML5 语义元素

语义= 意义.

语义元素 = 元素的意义.

什么是语义元素?

一个语义元素能够清楚的把它所代表的意思传递给 浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容,名字没有任何意义.


语义元素实例: <form>, <table>, and <img> - 清楚的定义了它所代表的内容.

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

IE 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。

注意: IE 8及更早版本不支持该元素. 但是文章底部提供了兼容的解决方法.

HTML5中新的语义元素

曾经,世界上有许多现有网站都包含了以下的HTML代码： 

<div id="nav">, 

<div class="header">, 

或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部

现如今!终于解放了!

HTML5提供了全新的语义元素来明确一个Web页面的不同部分:

  • <header>
  • <nav>
  • ......
  • <section>
  • <article>
  • ......
  • <aside>
  • <figcaption>
  • <figure>
  • ......
  • <footer>













 

HTML5 <section> 元素 (自动居中)

<section> 标签定义文档中的节（section、区段）。

比如章节、页眉、页脚或文档中的其他部分。

根据W3C HTML5文档:

 section 包含了一组 内容及其标题.。

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestyle.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>

	<section>
		<h1 class="fontStyleNormal">未闻花名</h1>
		<p class="fontStyleNormal">我们仍未知道那年夏天所见过的花的名字</p>
	</section>

<br/>
	<section>
		<h1 class="fontStyleNormal">龙与虎</h1>
		<p class="fontStyleNormal">逢坂大河与高须龙儿的...</p>
	</section>


<p style="font-size:14px;text-align:center;">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:



HTML5 <article> 元素

<article> 标签定义独立的内容

<article> 元素使用实例:

  • Forum post
  • Blog post
  • News story
  • Comment
代码如下: 
<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestyle.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>

	<article>
		<h1 style="text-align:center;">未闻花名</h1>
		<p class="fontStyleNormal" style="text-align:center;">
			
在我们走过的季节里<br/>
路旁盛开的花朵也在不断变化<br/>
那个季节盛开的花是叫什么来着?<br/>
轻轻摇曳着,一碰会微微刺痛<br/>
靠近一闻,隐约有股青涩的阳光的气息<br/>
那气息渐渐地淡去,我们也在慢慢长大<br/>
可是,那朵花一定还在某个地方盛开着……<br/>
对,我们永远都会继续实现那朵花的愿望
			
		</p>
	</article>


<p style="font-size:14px;text-align:center;">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:



HTML5 <nav> 元素

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中,

效果如下:


代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
	<nav style="text-align:center;">
		<a href="http://baidu.com/s?wd=未闻花名">未闻花名</a>|
		<a href="http://baidu.com/s?wd=龙与虎">龙与虎</a>|
		<a href="http://baidu.com/s?wd=石头门">石头门</a>|
		<a href="http://baidu.com/s?wd=轻音少女">轻音少女</a>
	</nav>

<p style="font-size:14px;text-align:center;">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>


HTML5 <aside> 元素 (???有什么鬼用???)

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

aside 标签的内容应与主区域的内容相关

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
	<h3>未闻花名</h3>
	<aside>
		<h4>那朵花</h4>
		<a>我们仍未知道那年夏天所见到的花的名字</a>
	</aside>

<p style="font-size:14px;text-align:left;">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:



HTML5 <header> 元素 (???有什么鬼用???)

<header>元素描述了文档的头部区域

<header>元素注意用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

以下实例定义了文章的头部:

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestyle.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
	<article>
		<header>
			<h1 style="text-align:center;">未闻花名</h1>
			<p>
				<time pubdate datetime="2018-03-09"></time>
			</p>
		</header>

		<p class="fontStyleNormal" style="text-align:center;">
			
在我们走过的季节里<br/>
路旁盛开的花朵也在不断变化<br/>
那个季节盛开的花是叫什么来着?<br/>
轻轻摇曳着,一碰会微微刺痛<br/>
靠近一闻,隐约有股青涩的阳光的气息<br/>
那气息渐渐地淡去,我们也在慢慢长大<br/>
可是,那朵花一定还在某个地方盛开着……<br/>
对,我们永远都会继续实现那朵花的愿望
			
		</p>
	</article>

<p style="font-size:14px;text-align:center;">
Copyright © <a>2018</a> Powered by <a>beyond</a></p>
</body>
</html>

效果如下:



HTML5 <footer> 元素

<footer> 元素描述了文档的底部区域.

<footer> 元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个 <footer>元素

效果如下:


代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestylewhite.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>

	<footer>
		<p style="font-size:14px;text-align:center;">
		Copyright © <a>2018</a> Powered by <a>beyond</a>
		</p>

		<p><time pubdate datetime="2018-03-09" ></time>
		</p>
	</footer>


</body>
</html>


HTML5 <figure> 和 <figcaption> 元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置.

代码如下:

<!DOCTPYE html>
<html>
<head>
	<link rel="icon" href="beyond.jpg" type="image/x-icon"/>
	<meta charset="UTF-8">
	<meta name="author" content="beyond">
	<meta http-equiv="refresh" content="520">
	<meta name="description" content="免费零基础教程">
	<meta name="viewport" content="width=device-width, 
	initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
	<meta name="keywords" content="HTML,CSS,JAVASCRIPT">
	<title>beyondの心中の动漫神作</title>
	<link rel="stylesheet" type="text/css" href="beyondbasestyle.css">

	<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
	<p class="fontStyleNormal" style="text-align:center;">
在我们走过的季节里<br/>
路旁盛开的花朵也在不断变化<br/>
那个季节盛开的花是叫什么来着?<br/>
轻轻摇曳着,一碰会微微刺痛<br/>
靠近一闻,隐约有股青涩的阳光的气息<br/>
那气息渐渐地淡去,我们也在慢慢长大<br/>
可是,那朵花一定还在某个地方盛开着……<br/>
对,我们永远都会继续实现那朵花的愿望
	</p>


	<figure style="text-align:center;">
		<img src="http://localhost/static/images/menma.png" width="150" height="150" />
		<figcaption class="fontStyleNormal">Fig.1-A 未闻花名</figcaption>
	</figure>


	<footer>
		<p style="font-size:14px;text-align:center;">
		Copyright © <a>2018</a> Powered by <a>beyond</a>
		</p>

		<p><time pubdate datetime="2018-03-09" ></time>
		</p>
	</footer>
</body>
</html>

效果如下:



我们可以开始使用这些语义元素吗?

以上的元素都是块元素(除了<figcaption>).

为了让这些 块及元素 在所有版本的浏览器中生效，

你需要 在样式表文件中 设置一下属性:

 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure
{
display: block;
}

Internet Explorer 8 及更早IE版本中的问题

IE8 及更早IE版本无法在这些元素中渲染CSS效果，

以至于你不能使用:

 <header>, <section>, <footer>, 

<aside>, <nav>, <article>, <figure>

 或者其他的HTML5 elements


解决办法:

你可以使用HTML5 Shiv Javascript脚本来解决IE的兼容问题。

HTML5 Shiv下载地址：http://code.google.com/p/html5shiv/

下载后，将以下代码放入的网页中：

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

以上代码在浏览器小于IE9版本时会加载html5shiv.js文件. 

你必须将其放置于<head> 元素中，

因为 IE浏览器需要在头部加载后渲染这些HTML5的新元素。

注意：

在上述内容中介绍的语义元素不会给页面内容造成任何视觉上的改变，

它们只是提供HTML文档的结构，供计算机和开发者读取和阅读！


或者,使用百度的镜像:

<!--[if lt IE 9]>
		<script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

 

附录:

HTML 参考手册- (HTML5 标准)

按字母顺序排列

New : HTML5新标签

标签描述
<!--...-->-->√定义注释
<!DOCTYPE>-->√定义文档类型
<a>-->√定义超文本链接
<abbr>-->√定义缩写
<acronym>定义只取首字母的缩写，不支持HTML5  ???Excuse Me???
<address>定义文档作者或拥有者的联系信息
<applet>定义嵌入的 applet。HTML5中不支持使用。
<area>-->√定义图像映射内部的区域
<article>New-->√定义一个文章区域
<aside>New-->√定义页面的侧边栏内容
<audio>New-->√定义音频内容
<b>-->√定义文本粗体
<base>-->√定义页面中所有链接的默认地址或默认目标。
<basefont>定义页面中文本的默认字体、颜色或尺寸。HTML5不支持使用。
<bdi>New允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo>-->√定义文字方向, 例如:从右往左,就是 dir="rtl"
<big>定义大号文本，HTML5不支持使用。
<blockquote>-->√定义长的引用
<body>-->√定义文档的主体
<br>-->√定义换行
<button>-->√定义一个点击按钮
<canvas>New-->√定义图形，比如图表和其他图像,标签只是图形容器，您必须使用脚本来绘制图形
<caption>-->√定义表格标题
<center>定义居中文本。HTML5不支持使用。
<cite>-->√定义引用(citation)
<code>-->√定义计算机代码文本
<col>-->√定义表格中一个或多个列的属性值
<colgroup>定义表格中供格式化的列组
<command>New定义命令按钮，比如单选按钮、复选框或按钮
<datalist>New-->√定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<dd>-->√定义定义列表中项目的描述
<del>-->√定义被删除文本 (删除线效果)
<details>New用于描述文档或文档某个部分的细节
<dfn>定义定义项目
<dialog>New定义对话框，比如提示框
<dir>定义目录列表。HTML5不支持使用。
<div>-->√定义文档中的节
<dl>-->√定义列表详情
<dt>-->√定义列表中的项目
<em>-->√定义强调文本
<embed>New-->√定义嵌入的内容，比如插件。无关闭标签
<fieldset>-->√定义围绕表单中元素的边框
<figcaption>New-->√定义<figure> 元素的标题
<figure>New-->√规定独立的流内容（图像、图表、照片、代码等等）。
<font>定义文字的字体、尺寸和颜色。HTML5不支持使用。
<footer>New-->√定义 section 或 document 的页脚。(在body标签内部)
<form>-->√定义了HTML文档的表单
<frame>-->√定义框架集的窗口或框架
<frameset>-->√定义框架集
<h1> to <h6>-->√定义 HTML 标题
<head>-->√定义关于文档的信息
<header>New-->√定义了文档的头部区域 (在body标签内部)
<hr>-->√定义水平线
<html>-->√定义 HTML 文档
<i>-->√定义斜体字
<iframe>-->√定义内联框架
<img>-->√定义图像
<input>-->√定义输入控件
<ins>-->√定义被插入文本 (下划线效果)
<kbd>-->√定义键盘文本
<keygen>New规定用于表单的密钥对生成器字段。
<label>定义 input 元素的标注
<legend>-->√定义 fieldset 元素的标题。
<li>-->√定义列表的项目
<link>-->√定义文档与外部资源的关系
<map>-->√定义图像映射
<mark>New定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<menu>定义菜单列表。HTML5不支持使用。
<meta>-->√定义关于 HTML 文档的元信息。
<meter>New定义度量衡。仅用于已知最大和最小值的度量。
<nav>New-->√定义导航链接的部分
<noframes>定义针对不支持框架的用户的替代内容。HTML5不支持
<noscript>-->√定义针对不支持客户端脚本的用户的替代内容。
<object>-->√定义内嵌对象 源使用的是data属性
<ol>-->√定义有序列表。
<optgroup>定义选择列表中相关选项的组合。
<option>-->√定义选择列表中的选项。
<output>New-->√定义不同类型的输出，比如脚本的输出。
<p>-->√定义段落。
<param>定义对象的参数。
<pre>-->√定义预格式文本。
<progress>New定义运行中的进度（进程）。
<q>-->√定义短的引用。
<rp>New<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New<rt> 标签定义字符（中文注音或字符）的解释或发音。
<ruby>New<ruby> 标签定义 ruby 注释（中文注音或字符）。
<s>不赞成使用。定义加删除线的文本。
<samp>-->√定义计算机代码样本。
<script>-->√定义客户端脚本。
<section>New-->√<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。(自动居中)
<select>-->√定义选择列表（下拉列表）。
<small>-->√定义小号文本。
<source>New-->√<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<span>定义文档中的节。
<strike>HTML5不支持，不赞成使用。定义加删除线文本。
<strong>-->√定义强调文本。
<style>-->√定义文档的样式信息。
<sub>-->√定义下标文本。
<summary>New<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
<sup>-->√定义上标文本。
<table>-->√定义表格。
<tbody>定义表格中的主体内容。
<td>-->√定义表格中的单元。
<textarea>-->√定义多行的文本输入控件。
<tfoot>定义表格中的表注内容（脚注）。
<th>-->√定义表格中的表头单元格。
<thead>定义表格中的表头内容。
<time>New定义日期或时间，或者两者。
<title>-->√定义文档的标题。
<tr>-->√定义表格中的行。
<track>New<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
<tt>定义打字机文本。
<u>不赞成使用。定义下划线文本。
<ul>-->√定义无序列表。
<var>定义文本的变量部分。
<video>New-->√<video> 标签定义视频，比如电影片段或其他视频流。
<wbr>New规定在文本中的何处适合添加换行符。


未完待续,下一章节,つづく

pre_eminent
关注
专栏目录
第三章 表单(语义化)
qq_36074150的博客
10-12 847
语义化的标签 岗位信息表 姓名 职务 小咪咕 程序员 fieldset标签 用户信息 姓名: 年龄: 性别: 男  女 手机: 邮箱: 爱好:滑雪 唱歌 打游戏
html.rar_CSS html5_html5_多表格
09-14
HTML5是现代网页开发的重要标准，它在HTML4的基础上进行了许多增强和改进，尤其是在表单控制、多媒体支持以及语义化元素方面。本资源“html.rar”包含了一系列关于HTML5和CSS的学习资料，特别是对HTML5中的多表格...
请输入有效值。两个最接近的有效值分别为1和2
九段刀客的博客
04-16 3162
问题描述 当input的type=“number” 并且border:none时，输入小数就会提示。 解决办法 <input type="number" min="-999999999" max="9999999999" step="0.0000001" />
type=“datetime-local“ 介绍与使用
BrotherJinJin的博客
02-19 1万+
1.如何获取 input type=“datetime-local” 的值 耐心看完，一定会有收获。有两个 type=“datetime-local” 时间相减的小案例哦 1.1先说获取输入框中的值 type=“datetime-local” 的时间选择器要在年月日，以及小时和分钟都选完了之后，才可以获取到数据。笔者最初只选择日期，所以获得的数据一直为空，后来把这个dom对象打印出来才发............
给input框设置成选择日期，并且精确到时分秒
最新发布
zhang20040217的博客
04-17 2077
虽然大多数现代浏览器都支持它，但一些较旧的或非主流的浏览器可能不支持。创建了一个可以让用户选择日期和时间的输入框。用户可以选择年、月、日、小时、分钟和秒。这会允许用户选择日期和时间，精确到小时、分钟和秒。的浏览器中，输入框将回退到普通的文本输入框。
＜input type=“datetime-local“＞
weixin_45249263的博客
04-01 3501
<input>元素的 datetime-local类型创建让用户便捷输入日期和时间的输入控件，包括 “年”、“月”、“日”，以及 “时” 和 “分”。
testHtml5_HTML5_CSS3源码_
10-01
本文将深入探讨这两个领域的关键知识点，并结合"testHtml5_HTML5_CSS3源码_"这个主题，分析如何利用它们来构建网页实例。 **HTML5：** HTML（超文本标记语言）是网页内容的结构标准，而HTML5是其最新版本，引入了...
HTML5.zip_c# html5_html5_html5 IOS_html5 web sql_ios html5
09-21
首先，HTML5是超文本标记语言（HTML）的第五个版本，引入了许多新特性，包括语义化标签（如、）、离线存储（App Cache）、表单控制增强（如）、媒体元素（、）以及Canvas和SVG图形等。这些特性使得开发者可以创建...
html5.rar_HTML5移动开发_Html5 pdf_html5_html5 ppt_html5 移动
09-21
1. HTML5基础：HTML5是超文本标记语言的第五个主要版本，引入了新的元素、API和功能，旨在提高网页的语义性、可访问性和交互性。例如，`<header>`、`<footer>`、`<nav>`等元素用于增强页面结构，`<canvas>`和`<svg>`...
html5_user_login.rar_com/html/user.html_html login_登陆 html5
09-21
总结，"html5_user_login.rar"这个压缩包展示了一个完整的HTML5用户登录系统，涵盖了HTML5的新特性，如语义化标签、表单控制、验证功能、Web存储和响应式设计。开发者可以在此基础上进一步完善，增加如记住密码、...
html5 input type=datetime-local 无法赋值问题
Elvis技术小屋
06-30 1万+
T在php的date函数中格式化后是CST   所以不能写成date('Y-m-dTH:i:s',time()) 得把把年月日和时间用date函数分别格式化  再用大写T分割开  放在value里 就可以了 echo(date('H:i:s',time())."T".date('H:i:s',time())); php代码：
datetime-local，input新属性，显示年月日时分
飞一样的编程
06-06 1万+
-->
html5 input type="datetime-local"时间赋值问题
songjuntao8的专栏
06-30 4万+
1.input type="datetime-local" min="2017-06-30T00:00">,把现有的时间格式赋值给他，必须是“yyyy-MM-dd HH:mm”这种格式的，切记：日期格式必须是2017-06-30 13:30这种的，不能是2017/06/30 13:30或2017-6-30 13:30。HTML5是严格验证了，因为这个小问题，折腾了好久，希望对用到有帮助.
关于input标签type="datetime-local"属性赋值问题！
hack289099734的博客
11-17 8921
由于datetime-local的格式必须是 yyyy-MM-ddTHH:MM 这样的，所以需要对时间进行格式化，获取当前默认时间的方法如下： function getFormat(){        format = "";        var nTime = new Date();        format += nTime.getFullYear()+"-";        forma...
html5 常用 标签
weixin_30684743的博客
11-21 129
一、主体结构 header 页面头部，不同与<head></head> aside 边栏 nav 外部链接集合 section 章节或段落 article 类似文章、摘要或留言POST等形式的记录（一般搭配内嵌头部、尾部、底部结构使用） hggroup 类似子标题，标题信息、可选标题、TAG标签这样...
一些常见html5语义化标签
热门推荐
前端笔记
10-26 5万+
我们知道，创建结构清晰的页面可以建立良好的语义化基础，也降低了使用css的难度，下面总结了一些常用的语义化标签，有空慢慢更新，欢迎大家补充          语义化HTML：用最恰当的HTML元素标记的内容。                优点：1 提升可访问性；                     2 SEO；                     3 结构清晰，利于维
HTML5语义标签在blog页面的实践解析
在这个例子中，侧边栏包含多个元素，并且有一个包含placeholder属性的搜索框，展示HTML5表单的新特性。 元素代表页面的底部，通常包含版权信息、联系方式等。在布局上，它通常放置在div容器外部，以便跨越整个页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值