表格标签,图片标签,框架标签,表单标签

一)表格标签

<table>标签

表格里面需要设置单元格的行,在行内设置单元格代表该行的列。

通过改变table的属性还有单元格的属性可以设置单元格的跨度,字体,对齐方式等。

示例:

<table align="center" border="1px" width="400pt" height="300pt">

      <tr>

       <th colspan="3">学习成绩</th>

      </tr>

        <tr>

          <th rowspan="2">张三</th>

          <th>语文</th>

          <th>98</th> 

        </tr>

</table>

在<table>标签内<tr>标签表示表格的一行,通过在<tr>标签内使用<th>标签表示在该行增加一个单元格。

上面代码实现效果:

<table>常用属性

align属性:指定表格整体处在浏览器的那个位置

border属性: 定义表格边框线条的粗细

width 和 height属性:设置表格的宽度和高度

<th>中的colspan属性:表示这个单元格所占的列数。

rowspan属性:表示这个单元格所占的行数。

二)图片标签

<img>标签与<map>标签

可以插入图片,还可以在图片上创建可点击区域。

示例:

<img  src="JINX.PNG"  alt="金克斯之吻" border="0" usemap="#Map" />

    <map name="Map" id="Map">

      <area shape="rect" coords="134,191,254,272" href="Untitled-1.html" target="_blank" />

      <area shape="circle" coords="124,50,36" href="表格.html" target="_blank" />

    </map>

src指定图片的路径

alt作用:当指定的文件不存在时,用文字描述代替。

border:图片边框粗细

<map>标签用于在图片上创建可点击区域。这一点可以通过DreamWeaver工具来实现定位。

效果:

三)框架标签

<frameset>标签

这个标签用来组织多个页面的拼接。可是它只能以多少列和多小行的列表格式来拼接,所以要用到它的cols和rows属性。

需要注意的是<frameset>不能写在<body>标签结构内,因为<frameset>里面的包含多个页面,而每个页面已经有<body>结构了。

示例:

<frameset rows="20%,30%,30%">

         <frame src="媒体标签.html"/>

            <frame src="图片标签.html" />

            <frame src="表格.html" />       

</frameset>

设置每个页面的比例用百分比来设置。

效果:

想要实现复杂的网页,通常会用多个<frameSet>的嵌套来实现。

四)表单标签

表单标签用来创建表单,利于用户输入数据。

应用示例:

<form action="http://www.baidu.com" method="get">

        请输入用户名: <input type="text" name="userName" /><br/>

        密码:<input type="password" name="pass"/><br/>

        选择性别: 男<input  type="radio" checked name="sex"  value="man"/> 女<input type="radio"  name="sex" value="woman"/><br/>

        选择你的兴趣爱好: 篮球<input type="checkbox"   checked="checked" name="hobit" value="1"/> 乒乓球<input type="checkbox" name="hobit" value="2"/> 火球<input type="checkbox" name="hobit" value="3"/><br/>

        选择城市:<select name="city">
                    <option value="gz">广州</option>
                    <option value="bj">北京</option>
                    <option value="sz">深圳</option>
                    <option value="bd">冰岛</option>
                        </select><br/>

       头像:<input type="file" name="image" /><br/>

       个人简介:<textarea rows="10" cols="20" name="introduce"></textarea><br/>

       <input type="submit"  value="提交"/>
       <input type="reset"  value="重置" />

    </form>

可以看到,表单标签<form>内需要使用各种的表单原件来获取用户的数据,通常使用<input>标签的属性type来指定原件类型,但是一些特殊的原件就要使用其他标签,

例如下拉选择框<select>标签。

常用属性:

<form>:属性action用来指定接收表单的目标

     属性method指定数据如何发送到服务器的一个属性,该属性有两个选项get和post。

        post:官方解释是把数据通过post会话传送到服务器。实际就是提交数据。

          get:将表单中数据的按照variable=value的形式,添加到action所指向的URL后面,并且两者使用“?”连接,而各个变量之间使用“&”连接;                          一般用来从服务器得到数据。用get方法提交会吧数据显示在地址栏。如下图

单选栏和复选栏:

    checked属性:选项内设置checked属性该选项就会默认选上。

<textarea>常用属性:

    rows和cols属性:设置文字编辑区域的可见行数和可见宽度。

注意:如果我们仔细观察代码,每个表单组件都设置了一个name属性,这个属性用于数据标识,在传输数据的时候这个name属性就会成为该数据的一个标识。

如果两个属性具有相同的name属性,那么就认为它们是一组的,同组的情况下,我们在通过设置它们的value属性来。

最后一个隐藏表单项,我们可以根据不同的用户来隐藏表单

<!-- 隐藏 的表单项 -->
    <input type="hidden" value="4408812345467"/>

效果:

隐藏表单项被隐藏。

时间: 2024-08-02 23:42:20

表格标签,图片标签,框架标签,表单标签的相关文章

Struts2的标签库(五)——表单标签

Struts2的标签库(五) --表单标签 几个特殊的表单标签的使用: 1.checkboxlist标签 该标签用于创建多个复选框,用于同时生成多个<input type="checkbox".../>的HTML标签.它根据list属性指定的集合来生成多个复选框.其标签有如下几个属性: list属性:指定要产生复选框的集合: listKey属性:该属性指定集合元素中的某个属性作为复选框的value.当集合为Map时,可以使用Key或者value来指定Map对象中的key或者

(三)HTML中的列表标签、框架集及表单标签

一.HTML的列表标签 在网页中,经常可以看到,有的内容排列如同word里面的项目编号,这就是HTML的无序排列和有序排列起到的作用.. HTML之无序排列:<ul></ul> 例子:<ul type="??"> // type的属性值可以为:disc---->实心黑色圆:circle---->空心圆:square---->实心正方形. <li>河南理工大学</li> <li>河南工业大学<

Java单体应用 - 常用框架 - 07.Spring MVC - 表单标签库

原文地址:http://www.work100.net/training/monolithic-frameworks-spring-mvc-form-tags.html更多教程:光束云 - 免费课程 表单标签库 序号 文内章节 视频 1 声明表单标签 - 2 表单标签 - 3 文本框 - 4 密码框 - 5 文本域 - 6 复选框 - 7 复选框(多选) - 8 单选按钮 - 9 单选按钮(多选) - 10 下拉列表 - 11 下拉列表(多选) - 12 隐藏域 - 请参照如上章节导航进行阅读

HTML table、form表单标签的介绍

本篇主要介绍 table.form标签以及表单提交方式. 目录 1. <table> 标签:在HTML 中定义表格布局. 2. <form> 标签:用于创建 HTML 表单. 3. 表单提交方式:介绍get.post方法. 1. <table> 标签 1.1 说明 在HTML 中定义表格布局. 1.2格式 <table> <caption></caption> <tr> <th></th></

Struts2中UI标签之表单标签介绍

1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.checkboxlist.select.doubleselect.combobox.optiontransferselect.optgroup.updownselect.textarea.hidden.file.label.submit.token.head.datepicker.reset.richte

028、HTML 标签3表单标签插入组件

内容:表单标签插入组件(经常使用)############################################################## form表单标签和input组件 <form> 用户名称:<input type="text" name="username" value="hehe" /><br/> 输入密码:<input type="password" n

HTML常用标签及表单标签

HTML初识 HTML(Hpyer Text Markup Language的缩写)译为"超文本标签语言",用来描述网页的一种语言.所谓超文本,因为它可以加入图片.声音.动画.多媒体.一个文件跳转到另外一个文件,与世界各地主机的文件连接. HTML的作用就是用标记标签来描述网页,把网页内容在浏览器中展示出来. HTML骨架格式 HTML标签分类 HTML标签:带有'<>'符号的元素.主要有2种标签:双标签和单标签. HTML标签关系 并列关系.父子关系.孙子关系. 文档类型

前端之head标签,基本标签,div和span,常用标签,表单标签

一.head标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="icon" href="https://www.jd.com/favicon.ico"> <meta name="keyw

第七节 认识SpringMVC中的表单标签

所谓成熟,就是:你要习惯,任何人的忽冷忽热:也要看淡,任何人的渐行渐远: --胖先生 SpringMVC的表单标签 回顾: JSTL标签 --C标签 FMT标签 自学:JSP如何自定义标签[开源社区当中有别人写好的标签] 表单标签:使用规则 模拟开发环境: 1.更新操作 A.通过主键进行查询 B.JSP显示 C.提交表单 @RequestMapping(value="/update/{user_id}",method=RequestMethod.GET) public ModelAnd