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

创作不易觉得有帮助麻烦点赞关注收藏啦

1：表格标记

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

标题标记以<caption>开头

表头<th>开头

表格行标记<tr>开头

单元格标记<td>开头

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

效果如下

代码如下


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

效果如下

代码如下



<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 表示文字是否自动换行

效果如下

代码如下




<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 图片高度

效果如下

代码如下






<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>

创作不易觉得有帮助麻烦点赞关注收藏啦

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

猜你喜欢