html(2)------表格,表单元素
任务:
1、表格
2、表单元素
---------------------------------------------------------------------------------
文档的基本结构:
<html>
<head>
<title></title>
</head>
<body>
此处用于编写html代码
</body>
</html>
-------------------
HTML的相关标记:
<h1>---<h6> 标题标签 H1最大,H6最小
<Font size="大小"> 字体标题
<br>换行
<p>段落
<hr>水平线
<img src="用于指定图片的路径" width="宽" heigh="高" border="">图片
<a href="" target="_blank">内容</a>
<a href="mailto:邮件地址">内容</a>
<a name="标记名称">标记</a> <a href="#标记名称">进入</a>
<center></center>
© < >
marquee--跑马灯
pre ---预定义格式
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
-------------------------------
表格: table (它主要用于样式控制----排版)
表格---------------------------------------------table
一个table是由很多单元行(行)构成---------------------tr
行是由很多单行格构成------------------------td
table中包含tr
tr中饱含td
<table border="1" width="50%" align="center">
<tr>
<td align="center">aaa</td>
<td>bbbb</td>
<tr>
</table>
tr与td同时设置对齐方式,优先使用td的对齐方式
table中,只能饱含tr (行)
tr 中可以包含 td(普通单元格) 或 th(标题单元格)
th(标题单元格): 字体黑体加粗,自动居中对齐
td(普通单元格):正常字体,左对齐
<Table>
<Tr>
<Th></th><Th></th><Th></th>
</tr>
<Tr>
<Td></td><Td></td><Td></td>
</tr>
</table>
合并单元格的要求: 合并以后,每一行的总列数,一定要相等
跨列合并单元格 colspan="列数"
<Td colspan="3"><td>
当前这个单元格,实际要占到3个单元格的宽度
跨行合并单元格 rowspan="3" 当前这个单元格,实际上占到3个单元格的高度
<img src="C:\Documents and Settings\bruce\桌面\HTML第二章\1\c.jpg">
绝对路径
<img src="c.jpg">
相对路径
建议使用相对路径
在网页中,要把数据提交到服务器,进行处理,必须有表单才可以完成
form--------表单
<form action="用于指定,把数据提交到什么地方">
写控件的地方
</form>
文本框 <input type="text" name="username" size="20">
密码框 <input type="password" name="username">
单选按钮 <input type="radio" name="gender" checked value="male">男
设置默认选中:
checked
checked="checked"
checked="true"
复选框 <input type="checkbox" name="language" value="java"/>java
<input type="checkbox" name="language" value="oracle"/>oracle
<input type="checkbox" name="language" value="spring"/>spring
下拉列表
<select name="age">
<option value="-1">请选择年龄</option>
<option value="18">18岁</option>
<option value="19">19岁</option>
<option value="20">20岁</option>
</select>
文本域 <textarea name="remark" rows="行" cols="列"></textarea>
提交按钮 <input type="submit" value="提交"/>
重置按钮 <input type="reset" value="重置"/>
普通按钮 <input type="button" value="普通按钮"/> 该按钮,没有任何功能,它的功能需要通过事件来动态绑定
文件选择控件 <input type="file" name="myfile" οnchange="photo.src=this.value">
<img id="photo" src="">
οnchange="代码";
如果选择的内容发生改变,代码就会自动运行
-----------------------------------------------------------------------------------------
<input type="button" value="显示" οnclick="shw()"/>
在html所有事件,都可以通过一段 javaScript脚本代码来处理
<html>
<head>
<script type="text/javascript">
function shw(){
}
</script>
<head>
<body>
</body>
</html>
在javascript取控件值的语法:
var name
=document.getElementById("username").value