前端小白HTML——html表格布局

原创
2018/07/23 18:33
阅读数 184

表格布局:表格的嵌套
---------------------------
表单:
作用:从访问web站点的用户那里获得信息。
客户端与服务器端进行信息交流的途径。
表单标记:
1.创建表单:所有的表单元素只有在表单里面才会起作用。


2.表单的属性:
action=url(传送目标)
method:get:明文提交,对提交的文件的大小有限制,一般用于比较小的内容
post:加密提交,对提交文件的大小没有限制。
name:设置表单的名称。
表单的元素标记:

 

 

 

type:  
    text:普通文本框类型  
    password:定义密码输入  
    radio:单选按钮,name的名字必须相同,才会互相排斥,默认选中checked="checked"  
    file:上传文件,只要form表单中需要上传文件,就必须设置form的一个属性,enctype="multipart/form-data"  
    checkbox:复选框,可以提交多个,名字相同,默认选中,checked="checked"  
    按钮:  

        type:  
            "submit":提交表单  
            button:普通的按钮  
            reset:重置按钮  
            image:自动提交  
        src:图片路径  

        name:名字  
        value="显示值"  
        disabled:不可点  

     隐藏域:  
     type="hidden"  


不用input的标签  
select:下拉列表  
    name="后台读取"  
    选项:  
        <option value="传给后的的真正值">列表显示值</option>  
    默认选中:  
        在option中加select属性  
    multiple属性:  
        设置多选,和size属性搭配使用,size为显示的条数  
    <optgroup lable="分组名称"></optgroup>  
textarea:多行文本框  
    name:名字  
    cols:每行显示的字数  
    rows:显示的行数  


lable标签:  
    标注内容  
    for="要标注标签的id"  
    <input type="radio" name="sex" value="女" id="woman"/>  
    <label for="woman">女</label>  
提交按钮:  
<button></button>  

<fieldset>  
    <legend title="测试">注册信息</legend>  
    包含的内容  
</fieldset>  

----------------------------
html5的新特性
---------------------------
属于input标签:
type=
date:用于日期选择的表单域,支持日期,月份。
search:用于显示一个输入搜索关键字的表单。
range:显示为滑块。
number:用于包含数字值的输入字段。您可以设置可接受数字的限制。
color:用于输入颜色的表单。
例:哔哩哔哩登录页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>哔哩哔哩弹幕网注册</title>
		<link rel="icon" href="../img/logo.jpg" />
	</head>

	<body>
		<!--导航栏-->
		<table style="width:1350px;" border="0" cellspacing="0">
			<tr>
				<td>
					<ul style="list-style-type: none;">
						<li style="float: left;font-size: 8px;padding-left: 300px;"><img src="../img/logo2.png" height="25px" width="25px" /></li>
						<li style="font-size:15px;float: left;padding-left: 50px;">主站</li>
						<li style="font-size:15px;float: left;padding-left: 50px;">画友</li>
						<li style="font-size:15px;float: left;padding-left: 50px;">游戏中心</li>
						<li style="font-size:15px;float: left;padding-left: 50px;">直播</li>
						<li style="font-size:15px;float: left;padding-left: 50px;">会员购</li>
						<li style="font-size:15px;float: left;padding-left: 50px;">周边</li>
					</ul>
				</td>
			</tr>
			<!--横幅-->
			<tr bgcolor="#00A0D8">
				<td>
					<img src="../img/rl_top.35edfde.png" height="100%" />
				</td>
			</tr>
		</table>
		<br />
		<hr color="lightgray" width="80%" size="1" />
		<!--滚动字幕-->
		<marquee onmouseout="this.start()" onmousemove="this.stop()" align="middle">
			<font color="grey">bilibili弹幕大家庭欢迎你</font>
		</marquee>
		<marquee onmouseout="this.start()" onmousemove="this.stop()" scrollamount="10">
			<font color="grey">二次元少年少女聚集区</font>
		</marquee>
		<!--登录-->
		<div align="center">
			<form>
				<table width="600px" border="0" cellpadding="20px">
					<caption>
						<font size="6" style="font-family: '微软雅黑';color: #666666;">登录</font>
					</caption>
					<tr>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="2"><input type="text" name="username" size="30" placeholder="你的手机号/邮箱" /> </td>
					</tr>
					<tr>
						<td colspan="2"><input type="password" name="userpsw" size="30" placeholder="输入你的密码" /> </td>
					</tr>
					<tr>
						<td colspan="2"><input type="checkbox" />
							<font color="darkgrey" size="2">记住我      如果不是你的电脑,请不要勾选此项</font>
						</td>
					</tr>
					<tr>
						<td>
							<a href="#"><img src="../img/login.jpg" /></a>
						</td>
						<td>
							<a href="text3.html"><img src="../img/zc.jpg" /></a>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>

</html>
展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部