JAVA Web入门之HTML中表格、表单、下列列表框、多行文本、超链接和图片标记的应用(超详细,附源码)

简介: JAVA Web入门之HTML中表格、表单、下列列表框、多行文本、超链接和图片标记的应用(超详细,附源码)

1:表格标记


用<table>表示 里面的属性有width设置宽度 border设置边框 align设置表格对齐方式 bgcolor设置表格背景色等等


标题标记以<caption>开头


表头<th>开头


表格行标记<tr>开头


单元格标记<td>开头


上述结尾统一在前面加一个/结束


效果如下

1666432368196.jpg

代码如下

<html>
    <head>
          <title>表格</title>
    </head>
    <body>
            <table width="318" height="167" border="1" align="center">
            <caption>学生考试成绩单</caption>
             <tr>
                 <td align="center" valign="middle">姓名</td>
                  <td align="center" valign="middle">操作系统</td>
                  <td align="center" valign="middle">计算机组成原理</td>
                  <td align="center" valign="middle">数据库原理</td>
               </tr>
               <tr>
                  <td align="center" valign="middle">张三</td>
                    <td align="center" valign="middle">53</td>
                    <td align="center" valign="middle">69</td>
                     <td align="center" valign="middle">99</td>
              </tr>
</table>
         <b>
             应用记事本编写HTML代码
          </b>
     </body>
</html>

2:表单标记


用<form>表示 各属性如下


action 处理表单数据程序的URL地址


method 用来指定数据传送到服务器的方式 包括post和get get表示将输入的数据追加在action指定的地址后面并传送到服务器 post则将输入数据按照HTTP协议中的post方式传送到服务器


name指定表单名称


onsubmit 指定用户单机按钮时发生的事件


<input>为表单输入标记 通过这个标记可以向页面中添加单行文本 多行文本 按钮等等...


效果如下

1666432415922.jpg

代码如下

<html>
    <head>
          <title>表单标记</title>
    </head>
    <body>
   <form action="" method="post" name="myform">
 用户名:<input name="username" type="text" id="username4" maxlength="20">
密码:<input name="pwd1" type="password" id="pwd14" size="20" maxlength="20">
爱好: <input name="like" type="checkbox" id="like" value="旅游"> 旅游
 <input name="like" type="checkbox" id="like" value="篮球">篮球
 <input name="like" type="checkbox" id="like" value="LOL">LOL
 <input name="like" type="checkbox" id="like" value="羽毛球">羽毛球
</form>
     </body>
</html>


3:下拉列表框标记和多行文本标记


下拉列表框标记用<select>表示 属性包括


name 名称


size 列表框中显示选项数量


disabled 指定当前列表框不可使用


multiple 让多行列表框支持多选


<option> 添加下拉列表框


多行文本标记用<textarea>表示


col表示列数


row表示行数


name 名称


wrap 表示文字是否自动换行


效果如下

1666432451454.jpg

1666432469426.jpg


代码如下


<html>
    <head>
          <title>下拉列表框</title>
    </head>
    <body>
   <form action="" method="post" name="myform">
 用户名:<input name="username" type="text" id="username4" maxlength="20">
密码:<input name="pwd1" type="password" id="pwd14" size="20" maxlength="20">
爱好: <input name="like" type="checkbox" id="like" value="旅游"> 旅游
 <input name="like" type="checkbox" id="like" value="篮球">篮球
 <input name="like" type="checkbox" id="like" value="LOL">LOL
 <input name="like" type="checkbox" id="like" value="羽毛球">羽毛球
</form>
<select name="seiect">
    <option>数码相机区</option>
    <option>摄影器材</option>
    <option>MP3/MP4/MP5</option>
    <option>U盘/移动硬盘</option>
   </select>
&nbsp; 多行列表框(不可多选):
<select name="select 2" size="2">
<option>篮球</option>
<option>足球</option>
<option>英雄联盟</option>
<option>羽毛球</option>
</select>
&nbsp;多行列表框(可多选):
<select name="select3" size="3" multiple>
  <option>反方向的钟</option>
  <option>玫瑰少年</option>
<option>一路向北</option>
<option>夜空中最亮的星</option>
</select>
     </body>
</html>
<html>
    <head>
          <title>多行文本标记</title>
    </head>
    <body>
   <form action="" method="post" name="myform">
 用户名:<input name="username" type="text" id="username4" maxlength="20">
密码:<input name="pwd1" type="password" id="pwd14" size="20" maxlength="20">
爱好: <input name="like" type="checkbox" id="like" value="旅游"> 旅游
 <input name="like" type="checkbox" id="like" value="篮球">篮球
 <input name="like" type="checkbox" id="like" value="LOL">LOL
 <input name="like" type="checkbox" id="like" value="羽毛球">羽毛球
</form>
<form name="form1" method="post" action="">
<textarea name="content" cols="30" rows="5" wrap="hard">
</textarea>
</form>
     </body>
</html>

4:超链接和图片标记


超链接标记是页面中非常重要的元素 其作用是从一个页面跳转到另一个页面  语法如下


<a href=""></a>


图片标记 语法如下


<img>


src表示图片来源


width 图片宽度


height 图片高度


效果如下

1666432538335.jpg

代码如下

<html>
    <head>
          <title>超链接和图片</title>
    </head>
    <body>
   <form action="" method="post" name="myform">
 用户名:<input name="username" type="text" id="username4" maxlength="20">
密码:<input name="pwd1" type="password" id="pwd14" size="20" maxlength="20">
爱好: <input name="like" type="checkbox" id="like" value="旅游"> 旅游
 <input name="like" type="checkbox" id="like" value="篮球">篮球
 <input name="like" type="checkbox" id="like" value="LOL">LOL
 <input name="like" type="checkbox" id="like" value="羽毛球">羽毛球
</form>
<form name="form1" method="post" action="">
<textarea name="content" cols="30" rows="5" wrap="hard">
</textarea>
</form>
<table width="409" height="523: border="1" align="center">
<tr>
   <td width="199" height="208">
   </td>
<td width="194">
<img src="玫瑰少年.jpg"/>
</td>
</tr>
<tr>
<td height="35" align="center" valign="middle"><a herf="textarea.html">查看详情</a></td>
</table>>
     </body>
</html>
相关文章
|
4天前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
|
4天前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
|
11天前
|
移动开发 前端开发 数据安全/隐私保护
Web网页制作-知识点(2)——常用文本标签、列表标签、表格标签、Form表单、块元素与行内元素(内联元素)
Web网页制作-知识点(2)——常用文本标签、列表标签、表格标签、Form表单、块元素与行内元素(内联元素)
5 0
|
11天前
|
存储 移动开发 前端开发
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接
10 0
|
17天前
|
前端开发 搜索推荐 UED
HTML基础-文本格式化标签:美化网页内容
【6月更文挑战第1天】本文介绍了HTML的文本格式化标签,包括`<b>`、`<strong>`、`<i>`、`<em>`、`<u>`、`<s>`、`<mark>`、`<small>`、`<sub>`和`<sup>`等,强调了语义化使用和避免常见错误的重要性。示例代码展示了这些标签的用法,帮助提升网页内容的可读性和吸引力。
|
17天前
|
前端开发 JavaScript Java
Java语言在Web前端开发中的技术应用
Java语言在Web前端开发中的技术应用
|
18天前
|
前端开发 UED
HTML 文本格式化
HTML 文本格式化
|
19天前
|
设计模式 存储 前端开发
Java的mvc设计模式在web开发中应用
Java的mvc设计模式在web开发中应用
|
20天前
|
搜索推荐 SEO
HTML文本格式化标签的深入解析与应用
HTML文本格式化标签的深入解析与应用
19 0
|
25天前
|
iOS开发
iOS中如何显示后台返回的带有html标签的富文本字符串
iOS中如何显示后台返回的带有html标签的富文本字符串
23 0