html区块

●区块元素

大多数html元素被定义为块级元素或内联元素.

块级元素在浏览器显示时,通常以新行来开始(和结束)

例如:<h1>,<p>,<ul>,<table>,<div>等

●内联元素

内联元素在显示时通常不会以新行开始

例如:<b>,<td>,<a>,<img>等

●div元素

html<div>元素是块级元素,它可用于组合其他html元素的容器.

<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.

如果与css一同使用,<div>元素可用于对大的内容块设置样式属性.

●<span>元素

html<span>元素是内联元素,可用作文本的容器.

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

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

二 html表单

html表单用于搜集不同类型的用户输入.

<form>标签用于创建供用户输入的html表单.

<form>

...

</form>

使用action属性规定:当提交表单时,向何处发送表单数据.

<form action="url">

</form>

method属性

method属性指定在提交表单时使用的http方法:get或post

下面是两个示例:

<form action="url" method="get">

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

提示:

当你使用get时,表单数据将在页面地址中使用.

如果表单正在更新数据或使用敏感信息(密码),请使用post.post提供更好的安全性,因为提交的数据不会再页面地址中显示.

name属性

name属性指定表单的名称

要接手用户的输入,你需要相应的表单元素,如文本字段.而输入类型是由类型属性(type)定义的,大多数经常被用到的输入类型有:text,password,radio,checkbox,submit等

下面是一个请求用户名和密码的表单例子:

<form>

<input type="text" name="username" /><br/>

<input type="password" name="password" />

</form>

单选框

<input type="radio">标签定义了表单单选框选项

下面是一个单选框的例子:

<form>

<input type="radio" name="sex" value="male">Male<br>

<input type="radio" name="sex" value="female">Female

</form>

运行效果如下:

注意:没有结束标签,也能正常显示,但是有时候会出现意想不到的情况.所以建议还是要加上结束标签.

复选框

<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>

运行效果如下:

提交按钮将表单提交到其action属性:

<input type="submit" value="Submit">

运行效果如下:

表单提交后,应该使用服务器端语言(如php)进行数据处理.当完成html和css课程后,你可以试着学习php课程.

三 html颜色

html颜色由一个十六进制符号来定义,这个符号由红色,绿色和蓝色的值组成(rgb)

rgb颜色的最小值是0(十六进制:#000).最大值是255(十六进制:#FFF)

四 html框架

通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面

<iframe>标签规定一个内联框架

一个内联框架被用来在当前html文档中嵌入另一个文档

标记一个内联框架:

<iframe src="url"></iframe>

提示:你可以把需要的文本放置在<iframe>和</iframe>之间,这样就可以应对不支持<iframe>的浏览器.html5中不支持<frame>标签.

定义iframe标签的高度与宽度

height和width属性用来定义iframe标签的高度与宽度.

属性默认以像素为单位,但是你可以指定其按比例显示(如:80%)

下面是一个例子:

<iframe src="url" width="200" height="200"></iframe>

定义iframe表示是否显示边框

frameborder属性用来定义iframe表示是否显示边框

设置属性值为"0"移除iframe的边框:

<iframe src="url" frameborder="0"></iframe>

个表单的form标签是必不可少的，所有的表单元素都应该被他包含。一个页面可能有多个表单，就需要对每个表单的区域进行分组，防止表单信息混杂。

目标

1. 表单的完整结构？
2. 表单内如何进行元素分组？

表单

可以在一个网页中收集用户的数据，比如填写用户注册数据、留言板、评论等内容。

Form标签

一个表单的form标签是必不可少的，所有的表单元素都应该被他包含。

<form >
	<input type="text" />			
</form>

一个网页可能会有多个表单，就需要声明每个表单的区域，防止表单信息混杂。

以下就是两个表单，他们之间的表单元素就会跟随自己的表单。

分组

有时候，表单内的元素过多，就需要将他们进行分类。

fieldset标签可以将表单内的相关元素分组。

legend标签是为 fieldset元素定义标题。

<fieldset >
	<legend>学生信息</legend>
	姓名：<input type="text" /><br>
	班级：<input type="text" /><br>			
</fieldset>

总结

lt;form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

下面小编为大家介绍几个常用的表单标签。

<datalist>标签

这个标签规定了 <input> 元素可能的选项列表。

一般会被用来在为<input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

我们来演示一个案例，大家就知道怎么用了：

上面这个小代码，我们看得出，input标签的list属性值和datalist标签的id是一样的，没错，它们就是这样来相互关联起来的。当它们结合起来之后，不仅可以像select标签一样可以通过下拉来选择已有的选项，还可以根据用户输入的字符，对选项进行匹配筛选。

效果图如下：

有了datalist标签，我们实现这种效果起来十分简单，不需要任何的JavaScript代码也能轻松实现。

<output>标签：

标签定义不同类型的输出。比如脚本的输出、一些加减乘除的运算结果，我们都可以使用这个标签。

我们来举个例子：输入的数字乘以2后得到的结果，我们用output输出显示。

我们用oninput属性监听着表单的变化，并把得到的结果赋值到output标签的value。我们来看看效果图：

其中，output标签是可以离开form表单标签的，但是，如果你这样做的话，必须给output标签添加form属性，其属性值是与其相关联form表单的id。

我们来将output移到form表单的外面试试：

<form id="demo" oninput="b.value = parseInt(a.value)*2">
 <input type="number" name="a"> 乘以2=
</form>
<output form="demo" name="b" for="a"></output>

跟上面的代码有几处不同之处，form标签多了一个id，值为“demo”，output标签被移到了form标签外面，不再是form标签的子节点，变成了兄弟节点（当然你可以把它移到文档的其他位置）。output标签还多了一个form属性，此时，它的值正好是form标签的id值：“demo”。这种写法，代码同样是奏效的。

<keygen>标签

这个标签相信大家很少用到，但是也是为了学习，我们来了解一下就好。

这个标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器，这种机制是专为使用基于Web的证书管理系统。

我在MDN（Mozilla Developer Network）的网站上看到了关于它的一些介绍：

There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.

大意是：目前各大浏览器厂商还在讨论是否要保留它，在讨论结束之前，你最好还是别用它。

而另一段话则是更加直接明了：

This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.

大意是：虽然有些浏览器还支持它，但是这个特性已经被移除出web标准了，以后别使用它了。