HTML基础进阶

简介: HTML表单form标签 标签代表一个表单,表单用于向服务器传输数据。 标签能够包含 ,可以是文本字段,复选框,单选框或提交按钮等。还可以包含 等。   常用属性:      name:用于定义表单的名称      action:用于规定提交表单时向何处发送表单数据。

HTML表单

form标签

<form> 标签代表一个表单,表单用于向服务器传输数据。
标签能够包含 <input> ,可以是文本字段,复选框,单选框或提交按钮等。还可以包含<textarea> <select>等。

   <form>常用属性:

      name:用于定义表单的名称

      action:用于规定提交表单时向何处发送表单数据。

      method:用于规定提交的方式。一般取值 POST或GET

关于POST与GET方式区别:

  1. get方式只能少量数据,而post可以携带大数据。
  2. get方式提交时,数据会在地址栏上显示,安全性差。Post方式提交不会在地址栏上显示数据,更加安全。

input种类

<input> 标签用于搜集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。

输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

关于<input>标签type属性值说明 :

text

<input type=”text”>

定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。
其它常用属性:

  • > name:定义标签名称
  • > value:定义标签值
  • > size:定义输入字段的长度
  • > maxlength:定义可输入最大字符个数

password

<input type=”password”>

定义密码字段。该字段中的字符被掩码.

其它常用属性:

  • name:定义标签名称
  • value:定义标签值
  • size:定义输入字段的长度
  • maxlength:定义可输入最大字符个数

radio

<input type=”radio”>

定义单选按钮。
其它常用属性:

  • name:定义标签名称.注意,对于单选按钮,如果要想做到单一选择,多个radion的name值必一样。
  • value:定义标签值
  • checked:定义该标签默认被选中。

checkbox

<input type=”checkbox”>

定义复选框。
其它常用属性:

  • name:定义标签名称.注意,一组的checkbox它们的name值应该是一样的。
  • value:定义标签值
  • checked:定义该标签默认被选中。

button

<input type=”button”>

定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)
其它常用属性:

  • name:定义标签名称
  • value:按钮显示名称

hidden

<input type=”hidden”>

定义隐藏的输入字段。
其它常用属性:

  • name:定义标签名称
  • value:定义标签值

file

<input type=”file”>
定义输入字段和 “浏览”按钮,供文件上传。
其它常用属性:

  • name:定义标签名称

submit

<input type=”submit”>

定义提交按钮。提交按钮会把表单数据发送到服务器。
其它常用属性:

  • name:定义标签名称
  • value:按钮显示名称

reset

<input type=”reset”>

定义重置按钮。重置按钮会清除表单中的所有数据。
其它常用属性:

  • name:定义标签名称
  • value:按钮显示名称

image

<input type=”image”>

定义图像形式的提交按钮。
这个标签主要是用了替换submit按钮,因为默认产生的提交按钮并不漂亮,这个标签允许你采用指定的图片做为提交按钮。
其它常用属性:

  • name:定义标签名称
  • src:定义作为提交按钮显示的图像的url
  • alt:定义作用图像的替代文本。

select与option标签

<select>

用于定义一个下拉列表
常用属性:

  • name:定义下拉列表的名称
  • size:定义下拉列表中可见选项的数目
  • multiple:定义可选择多个选项

<option>

用于定义下拉列表中的选项。
<option>需要位于<select>标签内部
常用属性:

  • value:定义送往服务器的选项值
  • selected:定义选项为选中状态。

textarea标签

<textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)
常用属性:

  • name:定义多行文本框名称
  • cols:定义多行文本框可见宽度
  • rows:定义多行文本框可见行数
  • wrap:规定多行文本框中文字如何换行。

文本格式化标签

标签            描述

  • <b>            定义粗体文本。
  • <big>         定义大号字。
  • <em>         定义着重文字。
  • <i>             定义斜体字。
  • <small>      定义小号字。
  • <strong>    定义加重语气。
  • <sub>        定义下标字。
  • <sup>        定义上标字。
  • <ins>         定义插入字。
  • <del>         定义删除字。
  • <s>            不赞成使用。使用 <del> 代替。
  • <strike>     不赞成使用。使用 <del> 代替。
  • <u>           不赞成使用。使用样式(style)代替。

表格标签

表格             描述 
<table>     定义表格 
<caption>   定义表格标题。 
<th>        定义表格的表头。 
<tr>        定义表格的行。 
<td>        定义表格单元。 
<thead>     定义表格的页眉。 
<tbody>     定义表格的主体。 
<tfoot>     定义表格的页脚。 
<col>       定义用于表格列的属性。 
<colgroup>  定义表格列的组。 

框架结构标签(<frameset>)

  • 框架结构标签(<frameset>)定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积

框架标签(Frame)

Frame 标签定义了放置在每个框架中的 HTML 文档。

在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 “frame_a.htm” 被置于第一个列中,而 HTML 文档 “frame_b.htm” 被置于第二个列中:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

注意事项

假如一个框架有可见边框,用户可以拖动边框来改变它的大小。为了避免这种情况发生,可以在 <frame> 标签中加入:noresize=”noresize”。

为不支持框架的浏览器添加 <noframes> 标签。

重要提示

不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes> 标签,就必须将这段文字嵌套于 <body></body> 标签内。(在下面的第一个实例中,可以查看它是如何实现的。)

iframe 用于在网页内显示网页。

<iframe src=”URL”></iframe>
URL 指向隔离页面的位置。

Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素,但也可以用百分比来设定(比如 “80%”)。

实例

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 “0” 就可以移除边框:

实例

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用 iframe 作为链接的目标

iframe 可用作链接的目标(target)。

链接的 target 属性必须引用 iframe 的 name 属性:

实例

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
相关文章
|
前端开发
前端基础 - HTML框架集之FrameSet
前端基础 - HTML框架集之FrameSet
76 0
|
2月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
37 1
前端基础(十七)_HTML5新特性
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
18 2
|
1月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
27 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
100 1
|
3月前
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
39 9
|
3月前
|
移动开发 前端开发 搜索推荐
前端基础101之HTML总结
【8月更文挑战第1天】
22 4
|
5月前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
32 0
前端基础学习(一)HTML入门
|
JavaScript 前端开发
前端基础 -JQuery之val,text,html
前端基础 -JQuery之val,text,html
79 1