创作不易 觉得有帮助麻烦点赞关注收藏啦
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> 多行列表框(不可多选):<select name="select 2" size="2"><option>篮球</option><option>足球</option><option>英雄联盟</option><option>羽毛球</option></select> 多行列表框(可多选):<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中表格 表单 下列列表框 多行文本 超链接和图片标记的应用（超详细 附源码）
