html5

　　　　

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

 div：定义了文档的区域，块级的（block-level）

span 用来组合文档中的行内元素，内联元素（inline）

 <span>表示内联属性

使用 <span> 元素对文本中的一部分进行着色：

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

 

 

<div style="color:#0000FF"> <h3>这是一个在 div 元素中的标题。</h3> <p>这是一个在 div 元素中的文本。</p> </div>

 

 

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>
Password: <input type="password" name="pwd">
</form>

 

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项（使用radio来表示单选的时候，必须将name设置为一样的值，不然不会起作用）

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

浏览器显示效果如下:

Male
Female

表示发送电子邮件 。value表示默认值

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">

</form>

=====================================================

HTML 表单标签

New : HTML5新标签（http://www.runoob.com/html/html-forms.html）

<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

===========================================================================

---

复选框（Checkboxes） checked="checked"表示默认被勾选

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

浏览器显示效果如下:

I have a bike
I have a car

使用selec作为下拉菜单时候，如果在option中设置selected 作为默认被选中的 ，下面例子代表Fiat是默认被选中的。(也叫“预选下拉列表”)

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

文本域：使用textarea

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

对按钮上的字设置为自己想要的字，在value中设置即可。

<input type="button" value="Hello world!">

本例演示如何在数据周围绘制一个带标题的框。（legend表示标题名字　<fieldset>将form里面的内容放入一个框框里面　）

<fieldset>
<legend>我的个人信息</legend>
name:<input type="text" name="name">
email:<input type="text" name="email">
</fieldset>