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>
时间: 2024-09-17 04:26:07

HTML基础进阶的相关文章

深度学习零基础进阶第四弹!|干货分享

编者按:时隔一段时间,雷锋网独家奉送的深度学习零基础进阶第四弹又来了!经过前面三篇文章的研究和学习,相信大家在深度学习的方式与深度学习在不同领域的运用都有了一定的了解.而本次雷锋网(公众号:雷锋网)所推荐的论文,主要集中于自然语言处理层面,相对于此前比较枯燥的理论阶段,相信以下的内容会更能让初学者们有的放矢.原文首发于 GitHub,作者 songrotek,文章名为<Deep-Learning-Papers-Reading-Roadmap>,雷锋网对每篇论文都增加了补充介绍,未经许可不得转载

深度学习零基础进阶第三弹​|干货分享

雷锋网(公众号:雷锋网)曾编译<干货分享 | 深度学习零基础进阶大法!>,相信读者一定对深度学习的历史有了一个基本了解,其基本的模型架构(CNN/RNN/LSTM)与深度学习如何应用在图片和语音识别上肯定也不在话下了.今天这一部分,我们将通过新一批论文,让你对深度学习的方式与深度学习在不同领域的运用有个清晰的了解.由于第二部分的论文开始向细化方向延展,因此你可以根据自己的研究方向酌情进行选择.雷锋网对每篇论文都增加了补充介绍,分上下两篇,由老吕IO及奕欣编译整理,未经雷锋网许可不得转载. 4.

深度学习零基础进阶第四弹​|干货分享

雷锋网曾编译了<干货分享 | 深度学习零基础进阶大法!>系列,相信读者一定对深度学习的历史有了一个基本了解,其基本的模型架构(CNN/RNN/LSTM)与深度学习如何应用在图片和语音识别上肯定也不在话下了.今天这一部分,我们将通过新一批论文,让你对深度学习在不同领域的运用有个清晰的了解.由于第三部分的论文开始向细化方向延展,因此你可以根据自己的研究方向酌情进行选择.雷锋网对每篇论文都增加了补充介绍.这一弹主要从自然语言处理以及对象检测两方面的应用进行介绍. 本文编译于外媒 github,原文标

干货分享 | 深度学习零基础进阶大法!

pixabay 编者按:新手上路都会有一个疑问,如果自己没有相关基础,如何学习晦涩的专业知识?此前雷锋网编译了<从0到1:我是如何在一年内无师自通机器学习的?>,这篇文章讲述了 Per Harald Borgen 的自学历程.而关于深度学习,GitHub的 songrotek 同样有话要说.原文名为<Deep Learning Papers Reading Roadmap>,雷锋网奕欣及老吕IO整理编译,未经许可不得转载. 0. 深度学习的"圣经" 提到入门级的

css基础进阶

css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 border-bottom:下边框 border-left:左边框 border-right:右边框 padding: 代表边框内壁与内部元素之间的距离 padding:10px;代表上下左右都是10px padding:1px 2px 3px 4px;上右下左 padding:1px 2px;上下/左

【基础进阶】URL详解与URL编码

作为前端,每日与 URL 打交道是必不可少的.但是也许每天只是单纯的用,对其只是一知半解,随着工作的展开,我发现在日常抓包调试,接口调用,浏览器兼容等许多方面,不深入去理解URL与URL编码则会踩到很多坑.故写下此篇文章,详解一下 URL .    URL 与 URI 很多人会混淆这两个名词. URL:(Uniform/Universal Resource Locator 的缩写,统一资源定位符). URI:(Uniform Resource Identifier 的缩写,统一资源标识符). 关

七天LLVM零基础入门(Linux版本)------总结

七天LLVM零基础入门这系列文章,为了让刚接触LLVM的人在最短的时间内快速的熟悉LLVM.这系列文章,现在经过将近一年的时间的使用,有了不少反馈的意见,现在将这些情况总结一下. 1. 在按照这个七天的学习计划进行的学习过程中,不少人出现了延误现象,主要体现在读文档的时候,读的过于仔细,然后感觉时间不够用.虽然在文档上花了很长时间,但是到最后该用文档中的东西的时候,反而无从下手.出现这个问题,主要还是不会把握文档的重点,这个系列中列出来的文档,在日后接触LLVM的过程中,需要不断的去读,反复的去

c++-《C++ Primer》里面旁边没有标识的章节要如何对待?

问题描述 <C++ Primer>里面旁边没有标识的章节要如何对待? 就是上面三个标识,有的章节旁边没有. 解决方案 这不是写得很明白了.第一个你没必要学,除非接触到这些.第二个特别提示,第三个扩展性的参考. 解决方案二: 这个就是作者帮助表示的三种知识点吧,基础进阶高阶,读书嘛,读到四通八达或者用什么学什么,看个人了

深度学习全网最全学习资料汇总之入门篇

作为人工智能领域一个重要的研究分支,深度学习技术几乎出现在当下所有热门的AI应用领域,包括语音识别,语义理解,图像识别,大数据分析等等,甚至有人把当前的人工智能等同于深度学习.面对如此重要的江湖地位,我们相信一定有为数众多的 AI 开发者对深度学习技术充满了好奇心,想要快速着手使用这项强大的技术来解决现实生活中的实际问题.因此,雷锋网(公众号:雷锋网)将围绕深度学习技术整理一个系列文章,全面覆盖与其相关的各项知识点. 本文针对如何入门深度学习这一话题,整理了若干参考资料,希望对广大开发者有所裨益