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>
