<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格</title>
</head>
<body>
<div class="mr-box">
<table background="图片素材/黑白背景.jpg" align="center" height="445" width="66%">
<!--cellspadding规定单元边沿与其内容之间的空白
cellspacing规定单元之间的空间，bgcolor规定表格背景颜色，background规定表格的背景图片-->
<tr class="mr-tr1" align="center" valign="middle">
<th>门</th>
<th>木板</th>
<th>烟雾</th>
<th>涂鸦</th>
<!--表头标签th与td单元格属性相似-->
</tr>
<tr valign="middle" height="200" bgcolor="#CCCCCC" align="center"><!--设置行的高度为200,背景颜色为灰色-->
<td rowspan="4"><img src="图片素材/门.jpg" /></td>
<td><img src="图片素材/木板.jpg" /></td>
<td><img src="图片素材/烟雾——黑色背景.jpg" /></td>
<td><img src="图片素材/彩色涂鸦.jpg" /></td>
</tr>
<!--设置单元格对齐属性
<td align=value>
单元格垂直属性：
<td valign=value>
设置单元格水平跨度/合并？个单元格：
<td colspan=value>
设置单元格的垂直跨度：
<td rowspan=value>-->
<!--thead表首标签
tbady表主体标签
tfoot表尾标签：
align;bgcolor;valign-->
</table>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单标签form</title>
</head>
<body>
<!--表单是网页上的特定区域，由一对<form标签定义-->
<!--处理程序属性——action——表单要提交的地址-->
<!--传送方式属性——method——决定表单中收集的数据以什么样的方式(GET/POST)传送到服务器-->
<!--编码方式属性enctype——设置表单信息提交的编码方式
"application/x-www-form-urlencoded"——默认的编码形式
"multipart/form-data" ——MIME编码，上传文件的表单必须选用该项
"text/plain"——以纯文本的形式传送-->
<!--target属性——显示表单的返回信息的打开方式:
"_blank"——显示在新打开的窗口中
"_parent"——显示在父级浏览器窗口中
"_self"——显示在当前浏览器窗口中
"_top"——显示在顶级浏览器窗口中-->
<form action="test_5@test_5.com" name="regester" method="post" enctype="text/plain" target="_self">
</form>
<!--这是一个没有控件的表单-->
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单控件添加——input标签</title>
<link href="css/mr-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--文本框text
密码域password
单选按钮radio
复选框checkbox
按钮button
“提交”按钮submit
“重置”按钮reset
图像域image
隐藏域 hidden
文件域file-->
<div class="mr-content">
<form>
<label>个人信息表</label>
<br />
<h3>姓名：</h3>
<input type="text" name="userrname" size="10" maxlength="6" class="mr-username"/>
<br />
<h3>密码：</h3>
<input type="password" name="userpasswaord" size="10" maxlength="6" />
<p class="mr-pl">灰色</p>
<input type="radio" name="dxradio" checked="checked" class="mr-color1" />
<input type="checkbox" value="复选框" name="dbox" />
<br />
<input type="button" value="按钮" name="onebutton" οnclick="#top" /><!--onclick属性用于设置按下按钮时所进行的处理-->
<input type="submit" name="subbutton" value="提交按钮" />
<input type="reset" name="reset1" value="重置" />
<input type="image" src="图片素材/城市的线条简图.jpg" />
<input type="hidden" name="hiden" value="invest" /><!--隐藏域的内容并不能显示在页面中，但是在提交变淡时，name和value的值会被传送给处理程序，用来传递参数-->
<input type="file" name="file1" />
<!--文本域标签-->
<textarea cols="50" rows="10" class="mr-message"></textarea>
<!--列表/菜单标签
都是通过select和option标签实现的-->
<select class="mr-county">
<option>请选择</option>
<option>中国</option>
<option>美国</option>
</select>
</form>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5新增表单属性</title>
<link href="css/mr-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="mr-content">
<form>
placehoder属性——提示用户输入
<br />
<input type="text" name="1" placeholder="请输入：" autocomplete="on" autofocus="autofocus"/>
autocomplete属性——控制是否保存用户输入值
autofocus属性——控件加上该属性，当画面打开时，该控件自动获得光标焦点，需要用到JavaScript，一个页面只能有一个控件有该属性
</form>
audio标签——播放网络上的音频数据
vidio标签——播放网络上的视频电影
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div class="mr-bakg">
<div class="picboom">
<div class="pic"><img src="图片素材/1.JPG" alt="" />
</div>
<div class="picright"><img src="图片素材/2.JPG" alt="" /></div>
<div class="picleft"><img src="图片素材/3.JPG" alt="" /></div>
</div>
<style>
.mr-bakg{
margin:0 25%;
width:800px;
height:400px;
border:1px #f00 solid;
background:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/%E5%B0%8F%E5%9B%BE%E6%A0%872.jpg);
animation:cs1 10s linear normal infinite;
}
@keyframes{
25%{background:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/%E5%B0%8F%E5%9B%BE%E6%A0%872.jpg)}
50%{background:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/2.JPG)}
75%{background:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/3.JPG)}
100%{background:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/%E5%B0%8F%E5%9B%BE%E6%A0%872.jpg)}
}
.picbom{
position:relative;
margin:Opx 320px;
padding-top:120px;
width:220px;
height:220px;
}
.picleft,.picright{
position:absolute;
top:120px;
left:0;
}
.picbom:hover .picright{
transform:translateX(240px);
display:block;
transition:
all Is ease;}
.picbom:hover .picleft{
transform:translateX(-240px);
display:block;
transition:
all Is ease;}
</style>
<!-- <div id="mr1" class="divRed">编程</div>
<style>
#mr1{background:red}
[id=mr1]{background-color:red;}
</style>-->
</body>
</html>
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
