zoukankan      html  css  js  c++  java
  • HTML进阶

    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>
  • 相关阅读:
    贪心经典例题大赏
    【暑假培训1】7.13
    【7.10校内test】T1高级打字机
    【7.10校内test】T3经营与开发
    【7.10校内test】T2不等数列
    【7.9校内test】T2 极值问题
    【7.9校内test】T1挖地雷
    <知识整理>2019清北学堂提高储备D5
    <知识整理>2019清北学堂提高储备D4
    <知识整理>2019清北学堂提高储备D2
  • 原文地址:https://www.cnblogs.com/yangliguo/p/7398908.html
Copyright © 2011-2022 走看看