HTML 排版与标签（五）
来源：互联网 发布：mysql-python和mysqldb 编辑：程序博客网 时间：2024/06/05 15:42
框架标签
框架标签适用情形
有时候我们需要在一个页面上面显示两个或者多个界面时可以使用框架标签。
框架标签使用
框架标签使用<frameset>和<frame>
使用例子：
分为上下两部分时使用rows属性，上半部分占200像素，下班部分占剩下的部分
<frameset rows="200,*" ><frame src="top.html" ></frame><frame src="bottom.html" noresize></frame></frameset>分为左右两部分时使用cols属性，左半部分占200像素，右半部分占剩下的部分
<frameset cols="200,*" ><frame src="left.html" ></frame><frame src="right.html"></frame></frameset>属性
<frameset>属性：bordercolor
<frame>属性：noresize：控制边框不能拖动
scrolling="no"：控制没有滚动条PS:使用框架标签要在head标签内进行编写。
实例
</head><frameset rows="200,*" ><frame src="top.html" noresize></frame><frameset cols="300,*"><frame src="bottom.html" noresize></frame><frame src="right.html" scrolling="no"></frameset></frameset> <body> </body></html>top页面：
不写target属性时默认只在top区域内显示超链接界面，写target属性为_top时，点击超链接将会重新打开一个新的界面
<body> <a href="right.html" target="_top"> <font face="幼圆" size="7" >Top</font></a> </body>补充：想要将超链接界面显示在左下区域部分时可以给bottom的frame标签添加name=“bottom”，在taregt属性中添加target=“bottom”
内嵌框架
内嵌框架适用情形：
在页面某个部分嵌入页面。
内嵌框架的使用
标签：<iframe>，在body标签内使用
属性：width height scrolling=”no”
使用实例：
<body> <a href="top.html" target="iframe">top</a> <iframe src="right.html" name="iframe"></iframe> </body>表单标签
表单标签主要是用于搜集数据的。使用<form>标签
输入框：
用户名：<input type="text" value="请输入用户名" size="50" ><br>密码：<input type="password" value="请输入用户名" size="50"><br>上面的输入框中size是html中唯一一个不以像素为单位的，它的单位是字符，当设置readonly 或者 disabled都不能输入文本
隐藏框：
隐藏框：<input type="hidden"><br>单选框
想要达到单选的效果必须设置name值相同
性别<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female" >女多选框
爱好：<input type="checkbox" name="hobby" value="eat">吃饭 <input type="checkbox" name="hobby" value="sleep">睡觉 <input type="checkbox" name="hobby" value="dadoudou">打豆豆<br>下拉框
下拉单选框不需要设置multiple属性，下拉多选框需要设置multiple属性
籍贯：<select name="jiguan" > <option value="Beijing">北京</option> <option value="Shandong">山东</option> <option value="Hunan">湖南</option> </select><br>文本输入框
rows：行数 cols:列数
备注：<textarea rows="5" cols="10">吴亦凡</textarea> 几种按钮
<input type="button" value="普通按钮" onclick="alert('普通按钮')"> <input type="submit" value="提交按钮"> <input type ="reset" value="重置按钮"> <input type="image" src="psb.jpg" width="100" height="100"> <button>普通按钮</button>表单的语义化
语义化表单主要起到美化表单的作用，使用标签<fieldset>如下
<fieldset> <legend>必填项</legend>用户名：<input type="text" value="请输入用户名" size="50" ><br>密码：<input type="password" value="请输入用户名" size="50"><br></fieldset>实例
<body>表单标签：搜集数据 value：文本框中输入的内容 size唯一一个不是像素的，是字符 readonly disabled<form action="top.html" method="get">用户名：<input type="text" value="请输入用户名" size="50" ><br>密码：<input type="password" value="请输入用户名" size="50"><br>隐藏框：<input type="hidden"><br>性别<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female" >女爱好：<input type="checkbox" name="hobby" value="eat">吃饭 <input type="checkbox" name="hobby" value="sleep">睡觉 <input type="checkbox" name="hobby" value="dadoudou">打豆豆<br>籍贯：<select name="jiguan" multiple> <option value="Beijing">北京</option> <option value="Shandong">山东</option> <option value="Hunan">湖南</option></select><br> 备注：<textarea rows="5" cols="10">吴亦凡</textarea> <input type="button" value="普通按钮" onclick="alert('普通按钮')"> <input type="submit" value="提交按钮"> <input type ="reset" value="重置按钮"> <input type="image" src="psb.jpg" width="100" height="100"> <button>普通按钮</button></form> </body></html> 0 0
- HTML 排版与标签（五）
- Html 排版与标签（一）
- HTML 排版与标签（二）
- HTML 排版与标签（三）
- HTML 排版与标签（四）
- HTML 排版与标签（六）
- HTML-排版标签
- HTML中的排版标签
- HTML排版标签
- UID-排版常用HTML标签
- 关于HTML的排版标签
- (转)排版常用HTML标签
- HTML+CSS基础（五）：表单标签，与用户交互
- 导师信息页面（HTML概述，字体，排版标签）
- HTML 语法教学之排版标签
- HTML学习02-排版相关标签
- 过一遍HTML标签（五）
- 五、Html表单标签
- 为什么使用dojo？dojo与jquery有什么不同？dojo适合什么开发场景？
- JS常见插件
- 1-HTML元素 属性 格式化
- 38. Count and Say
- 2-HTML5样式、链接和表格
- HTML 排版与标签（五）
- 3-HTML5列表、块和布局
- 进程的调度算法
- 384. Shuffle an Array
- Stm32串口控制
- Day17、链式存储结构动态分配内存、栈的顺序存储结构和链式存储结构
- 4-HTML5表单提交和PHP环境搭建
- MFC--利用Haru库生成PDF文件
- Longest Prefix_usaco 2.3.1_dp
