首页 > 编程知识 正文

web前端之HTML5 入门(7):布局、表单和框架

时间:2023-05-06 00:49:47 阅读:253496 作者:1774

HTML 布局

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

<div> 元素是用于分组 HTML 元素的块级元素。

使用 HTML <table> 标签是创建布局的一种简单的方式。

使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。

由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。

<div> 标签 <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。<div> 元素经常与 CSS 一起使用,用来布局网页。<div>标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。 <span> 标签 <span> 用于对文档中的行内元素进行组合。<span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

提示:被 <span> 元素包含的文本,您可以使用 CSS 对它定义样式,或者使用 JavaScript 对它进行操作。

表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

HTML 表单和输入

表单使用表单标签 <form> 来设置,语法:

<form>...<input> 元素...</form>

多数情况下被用到的表单标签是输入标签(<input>)。

输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如有:

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
注意:表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符

密码字段通过标签 来定义:
注意:密码字段字符不会明文显示,而是以星号或圆点替代。

标签定义了表单单选框选项

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

定义了提交按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

HTML 框架

使用框架标签<iframe>,你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:

<iframe src="URL"></iframe> #该URL指向不同的网页。

height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位, 但是你可以指定其按比例显示 (如:“80%”)。

frameborder 属性用于定义iframe表示是否显示边框(0-移除)。

显示一个目标链接的页面,目标链接的属性必须使用iframe的属性

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。