2019.10.12【iframe\列表标签\表单标签】

最新推荐文章于 2023-11-02 11:33:12 发布

冷太阳a

最新推荐文章于 2023-11-02 11:33:12 发布

阅读量247

点赞数

分类专栏： HTML 、CSS 文章标签： iframe 列表标签表单标签

本文链接：https://blog.csdn.net/A_9888/article/details/102531553

版权

HTML 、CSS 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

四、HTML框架标签 iframe

iframe 元素会创建包含另外一个网页文档的内联框架（即行内框架），所有浏览器都支持标签。

基本使用

常用属性 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191013123133579.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfOTg4OA==,size_16,color_FFFFFF,t_70)

提示
把需要的文本放置在和之间，这样就可以应对无法理解 iframe 的超低版本的特殊浏览器。

抱歉，你的浏览器不支持iframe标签

a标签与iframe标签的混合使用

通过将标签的target属性设为页面中一个嵌入式框架的“name"属性的值，使文件内容在这个内打开。
代码

<a href="https://www.baidu.com/" target="ifr"> 百度</a>
<a href="http://www.blogzl.com/" target="ifr"> blogzl</a>
<a href="http://www.hao123.com/" target="ifr"> hao123</a>
<br/>
<br/>
<iframe name="ifr"></iframe>

效果
在这里插入图片描述

通过iframe标签引入一个html文件，文件中含有一个a标签，链接百度地址。如果此a标签的target属性值为"
_parent 表示在框架的父级打开页面或文件
__top 在框架的最顶层打开新的页面或文件（若包含多个框架的嵌套）

五、列表标签

列表概述
1.
列表为对某件事物进行步骤的描述，
或者一系列有关联的事项的描述的标签。
或者对某些名词进行定义。
2. 列表标签为双标签，写法如下：

或

3. 列表默认情况是一个“块级标签"，占据整行。 4. 列表类型：“无序列表

" 和 “有序列表
1. " 和 “定义列表
  " 【注意：他们的子li,dt,dd标签也是块级标签】无序列表【

type属性
无序列表可以通过“type"属性来设置“列表项目符号"的类型
disc 项目符号以实心圆“●"表示，默认值。
circle 项目符号以空心圆“○"表示。
square 项目符号以实心方块“■"表示。

在这里插入图片描述
列表嵌套
以用于对列表项内的内容进行更为精细的结构划分和内容说明

注意：
当进行无序列表嵌套时，前三层分别是实心圆点，空心圆点，方块，三层以后就去全是方块了。
【当然，你可以通过显式的修改type值来修改】

有序列表【

</ol】
基本形式
有序列表项前不再是用“●"表示，而是“阿拉伯数字的表现形式。

reversed、start 、type 属性

reversed 规定有序列表的顺序为“倒序"。

start 规定有序列表的起始值【以阿拉伯数字表示各种类型】

type 规定有序列表的序号显示类型，有以下值：
“1"，默认，以阿拉伯数字作为列表符号
“A"，以大写英文字母作为列表符号
“a"，以小写英文字母作为列表符号
“I"，以大写罗马数字作为列表符号
“i"，以小写罗马数字作为列表符号

有序列表嵌套

注意
有序列表嵌套时，它的“type"属性需要手动设置后才能显示为不同的项目符号，否则全部都为以默认的“阿拉伯数字"显示。
如下：

定义列表

作用
定义列表适用于对名词进行描述,
形式

说明
类似于ul、ol，定义列表的最外层为

，然后还有dt,dd两个标签

用于定义列表中的项目，

用于描述定义的项目，在写代码时，dt和dd没有包含关系，他们是同级的。然后它们的显示类型都为“块级元素（block）列表总结 (1) 列表（ol/ul标签）概述双标签/块级标签/作用/分为有序和无序 (2) 无序列表可以通过“type"属性来设置“列表项目符号"的类型并且能进行嵌套 (3) 有序列表具有以下属性 reversed 规定有序列表的顺序为“倒叙"。 start 规定有序列表的起始值。 type 规定有序列表的序号显示类型， (4) 定义列表dl--->dt dd

用于定义列表中的项目，

用于描述定义的项目， (5) 有序列表嵌套时，需要手动设置“type"属性，否则默认为阿拉伯数字显示八、表格标签【

】表格标签（table）概述 1. 具有使网页展示表格形式内容的标签-------table标签 2. 表格标签为双标签，写法如下：

3. 表格标签默认情况是一个“类似于块级标签的table类型"，即在他会占据整行。（虽然有点特殊，给上一个边框他没法完全占据一行，显示的加上display:block，又能独占一行）的基本格式

简写格式可以不要tbody

的完整格式完整的表格为：表头+表体+表尾

注意：一般表头表尾都只有一个，但是表体tbody可以写多个

完整格式实例

通过标签属性对表格进行控制
border属性
border：给表格加上边框，其值为一个边框大小，默认单位为像素。

cellspacing与cellpadding
单元格与单元格之间的距离(cellspacing),
单元格与内容之间的距离 (cellpadding)

width、height
Width与height用于设置表格的宽度(width),高度(height)，
宽度高度的值可以为具体的像素，也可以为一个百分比。
（百分比的意思是让当前元素的高宽占据父元素的相应百分比的高宽）

background与 bgcolor
background设置表格背景图片

bgcolor设置背景的颜色

注意：如果两个属性都给了的话，一般而言，背景图片会覆盖背景颜色
align
align设置表格对齐方式或单元格内容的对齐方式

注意：
当align设置在单元格里面时，会起作用的是单元格内容
当align设置在表格中时，起作用的是整个表格
Valign
垂直居中方式

rowspan 与 colspan
有的时候我们需要像“Excel"那样进行“单元格合并"，
这个在HTML中我们叫做“表格跨行"和“表格跨列"
如下：

这时我们就要使用rowspan 与 colspan 了，其中
colspan 用于设置跨列 ,
rowspan 用于设置跨行
跨行时：将rowspan属性写在要跨行的列上，其值为要跨的行数：

跨列时：将colspan属性写在要跨列的列上，其值为要跨的列数：

注意

跨行为向下跨，跨列的向右跨，
跨行跨列时需要下方的行和右方的列是存在的，才能正常跨越，
设置了跨行或者跨列的单元格，我们不能把他当作一个单元格看，而应该当作多个列或者行来看，具体为几就看设置的跨行和跨列数。
如果下方或者右方存在的行列数小于你要跨的行列数，当设置的表格高度大于所有内容的高度时，你的表格就会突出去，如下：

如果没有显式的设置高度，则不会突出

对于宽度的话，会有点细微的影响，影响不大。

表格标签【table】总结

(1)	<table>的基本格式
(2)	<table>的完整格式
(3)	thead, tbody, tfoot标签的作用

更加语义化/让大表格(table)在下载的时候可以分段的显示/让表格行从头到尾显示/符合主流开发规范.
(4) 通过属性设置表格样式
①　给表格设置边框【border属性】
②　设置表格单元格之间的距离(cellspacing),
③　单元格与内容之间的距离 (cellpadding)
④　设置表格的宽度(width),高度(height)
⑤　设置表格背景图片【background】与背景的颜色【bgcolor】
⑥　设置表格对齐方式或单元格内容的对齐方式【align】
⑦　colspan【跨列】属性与 rowspan【跨行】属性

六、表单标签【】

表单元素示例

表单标签form概述

form标签为具有接收用户输入并提交的功能的标签
form标签为双标签，写法如下：
form默认情况是一个“块级标签"，他会占据整行空间
它里面的input,button等标签是行内块元素
表单标签form基本写法

基本表单 == 外层的form标签 + 在form里面的表单元素标签
其中，表单元素一般要放置于表单标签中，不然某些表单元素将会失效，如：“提交"按钮和“重置"按钮。
表单标签form的主要属性
最常用属性：action，method，target
action
规定当提交表单时向何处发送表单数据，它的属性值应该是一个“URL"。
这样当我们点击提交按钮后，网页就会跳转到url所代表的站点或页面处。

method
规定用于发送表单数据的方法，值为 : get / post , 默认为get方式.

注意：

发送数据时，input标签的name属性一定要加上，
否则数据就无法发送出去。
get / post 的比较
①　可见性
get方式发送的数据会直接附加到表单的action属性所指的URL的后面，用户可见！
post方式发送的数据会放置在header里发送到action属性所指的URL地址处。用户不可见。
②　数据量
get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
③　安全与效率
get安全性低于post，但效率高于post
④　作用
一般而言：get 用于查询居多，post用于更新居多。
target
规定在何处打开“action"中设定的URL。和a标签一样，具有以下值：
_blank 【在新窗口打开】
_self 【就在当前窗口打开】
_parent 【在父窗口打开】
_top 【在顶层窗口打开】

的“name"【在某个iframe中打开】

位于form内的一些标签
label标签
*label 标签包裹 input标签后会定位到表格中去；果有多个，给相应的for值 ： <label for="wto">用户名:<input title="请输入6位英文账号" type="text"> <input type="text" id="two></label><br>

用于显示一些说明/提示信息，行内元素，不会占据整行。
就显示效果上而言，加了和没加并没什么区别，但是对搜索引擎会更加的友好

For属性可以和对应的input绑到一起

<label for="inp1">用户名：</label> <input id="inp1" placeholder="请输入你的用户名..." name="username" />

input标签
用于接收用户输入，为行内块元素。他不仅仅是接收文本的输入，通过type属性的设置我们还可以接收不同类型值的输入。
type属性
input标签的type属性的一些常用可选值：
text 普通文本
search 搜索框
password 密码
radio 单选按钮
checkbox 复选框
file 文件上传
image 定义图像作为提交按钮
button 按钮类型
submit 普通提交按钮
reset 重置按钮
hidden 隐藏输入域

Value属性
设置“文本类型"的输入框中默认显示的值内容。
maxlength 属性
规定输入字段中的字符的最大长度。
Readonly属性
使表单元素成为“只读"状态，在这个状态下只能读取元素内容，而不能进行编辑。
Disabled属性
使表单元素成为“禁用"状态，表单元素将“失效"
Size属性
规定文本框可见字符显示的宽度，但不同浏览器对此的支持有所不同，我们现在基本都是使用CSS去控制
placeholder 属性
提示文本
autofocus 属性
自动聚焦

多行文本域textarea标签

用于输入多行文本的标签对，
行内块元素，不会占据整行。
textarea标签是双标签，它拥有闭合标签。<textarea>文本</textarea>
它显示文本内容是通过标签的内容，而非“value"属性。
它可以通过“cols"和“rows"属性来设置显示的尺寸

下拉框select标签

用于显示单选和多选的下拉菜单，option是它必须的子菜单，否则将不能提供任何可选项
形式如下：
可以通过“size"属性设置该标签在一个选项菜单中可见的选项个数，当它的值设为“1"时，将显示为默认的select下拉菜单的样式
其他属性：multiple，selected
multiple：允许选中多个option
selected:设置默认选中的option
对下拉菜单进行分组

按钮button标签对
⑤　 button标签对和其它表单元素一样，为行内（块）标签
⑥　 Button它是一个双标签。
⑦　通过type属性可以设置其类型【button/submit/reset】

⑧　<input type="button" value="">与<button>的区别
(1) button按钮文本是放置于该标签的内容上，而input是将按钮文本设置于它的“value"属性上
(2) button标签对内可以同时显示文本、图片、表格甚至是多媒体，而input标签显示内容要单调很多。
(3) button标签的“type"属性不进行设置的话，
在“IE浏览器"中将默认设为“button"，
而在其它浏览器中（包括 W3C 规范）都会默认设为“submit"
所以，为了统一浏览器的行为，我们通常都会为<button的属性“type"设置一个初始值

实现表单文字对齐

通过表格实现

<form>
<table border="1" width="600px" height="600px">
<tbody>
<tr>
<td align="right" ><label>用户名：</label></td>
<td align="left"><input placeholder="请输入用户名..." /></td>
</tr>
<tr>
<td align="right"><label>昵称：</label></td>
<td align="left"><input placeholder="请输入昵称..." /></td>
</tr>
<tr>
<td align="right"><label>密码：</label></td>
<td align="left"><input placeholder="请输入密码..." /></td>
</tr>
</tbody>
</table>
</form>

通过css实现

 <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
label{
border: 0px solid red;
display: inline-block;
width: 100px;
text-align: right;
}
</style>
</head>
<body>
<form>
<div>
<label>用户名：</label>
<input placeholder="请输入用户名..." />
</div>
<div>
<label>昵称：</label>
<input placeholder="请输入昵称..." />
</div>
<div>
<label>密码：</label>
<input placeholder="请输入密码..." />
</div>
</form>
</body>
</html>
**加粗样式**