Application of tables, forms, following list boxes, multi-line text, hyperlinks and image tags in HTML for JAVA Web entry (super detailed, with source code)

Creation is not easy to feel helpful, please like, follow and collect

1: Table markup

Use <table> to indicate that the properties inside have width set width border set border align set table alignment bgcolor set table background color, etc.

Title tags start with <caption>

Beginning with header <th>

Begin with table row tag <tr>

Start of cell tag <td>

The above ends are uniformly preceded by a / end

The effect is as follows

code show as below


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

Use <form> to represent the attributes as follows

action URL address of the program that handles the form data

method is used to specify the way data is transmitted to the server, including post and get get means append the input data to the address specified by the action and transmit it to the server post means transmit the input data to the server according to the post method in the HTTP protocol

name specifies the form name

onsubmit specifies the event that occurs when the user clicks the button

<input> is the form input tag. This tag allows you to add single-line text, multi-line text buttons, etc. to the page...

The effect is as follows

 code show as below



<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: Drop-down list box tags and multi-line text tags

The drop-down list box tag uses <select> to indicate that the attribute includes

name name

The number of options displayed in the size list box

disabled specifies that the current list box cannot be used

multiple allows multi-line list boxes to support multiple selection

<option> Add drop-down list box

Multi-line text tags are represented by <textarea>

col indicates the number of columns

row represents the number of rows

name name

wrap Indicates whether the text wraps automatically

The effect is as follows

 

code show as below




<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: Hyperlinks and Image Tags

The hyperlink tag is a very important element in the page. Its function is to jump from one page to another. The syntax is as follows

<a href=""></a>

The image tag syntax is as follows

<img>

src indicates the source of the image

width image width

height image height

The effect is as follows

code show as below






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

 Creation is not easy to feel helpful, please like, follow and collect

Guess you like

Origin blog.csdn.net/jiebaoshayebuhui/article/details/127061414