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>
创作不易 觉得有帮助麻烦点赞关注收藏啦