html(2)------表格,表单元素

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>


&nbsp;  &copy;   &lt;  &gt;

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



























评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值