<form> 标签用于为用户输入创建 HTML 表单
类型有
text 文本域,显示明文
password 文本域,显示星号或圆点,起到遮蔽作用
url 输入链接,会判断格式
tel 输入电话,好像不会判断格式
file 上传文件
email 输入邮箱，会判断格式
radio单选按钮
checkbox多选框
submit提交表单
reset重置
<!doctype HTML>
<html>
<body>
<form name="input" action="next.php" method="get">
账号名:<input type="text" name="username"><br>
密码: <input type="password" name="pwd"><br>
添加你的主页: <input type="url" name="homepage"><br>
电话号码: <input type="tel" name="usrtel"><br>
选择一个文件: <input type="file" name="img"> <br>
E-mail: <input type="email" name="usremail"><br>
<input type="radio" name="sex" value="male">男生<br>
<input type="radio" name="sex" value="female">女生<br>
<input type="checkbox" name="game" value="DOTA">打dodo不拉<br>
<input type="checkbox" name="game" value="CSGO">打gogo不拉<br>
<input type="submit" value="Submit"><br>
<input type="reset"><br>
</form>
</body>
</html>
当用户单击确认按钮时，表单的内容会被传送到另一个文件,就是我们action里指定的下一个链接,表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理
比如说我们的用户名，我可以在下一个链接中查询变量username的值来判断用户的输入
<!doctype HTML>
<html>
<body>
<form name="input" action="next.php" method="get">
<select>
<option value ="csgo">csgo</option>
<option value ="dota">dota</option>
<option value="lol">lol</option>
</select>
<input type="submit" value="Submit"><br>
<input type="reset"><br>
</form>
</body>
</html>
这就是那种下拉选择的，和前面也可以放一起，不过是我刚才发现还有这种类型，就单独说了…都可以弄在一个表单里面
<iframe>html框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面,相当于内置一个界面
frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 “0” 移除iframe的边框
<!doctype HTML>
<html>
<body>
<iframe src="http://www.baidu.com" width="500" height="500" frameborder="0"></iframe>
<iframe src="http://www.baidu.com" width="500" height="500" frameborder="1"></iframe>
</body>
</html>
确实有区别
还有一个好玩的
<!doctype HTML>
<html>
<body>
<iframe src="haha" name="1"></iframe>
<a href="http://www.jcrb.com/" target="1">点击一下显示</a>
</body>
</html>
效果是这样的
这个原理是这样的，因为如果没有在head里面指定base,所以默认目录是当前html目录，而在这个目录里没有haha，所以一开始报错，然后后来我们通过指定了准确的url,并且在target里用的是iframe，所以就会显示在框架里面，还挺好玩哈哈
<div> 元素是用于分组 HTML 元素的块级元素。
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:red;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:blue;height:200px;width:100px;float:left;">
GAME<br>
dota<br>
csgo</div>
<div id="content" style="background-color:pink;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:grey;clear:both;text-align:center;">
made by azrealxuemo</div>
</div>
</body>
</html>
最大的div就是我们生成的整个板块，叫container,整体宽度为500px
首先生成header，背景颜色为红色，margin-bottom设置下边界与下面板块的间距，这里为0就是紧密挨着
然后是左边的game,背景颜色蓝色，宽度高度，float:left字体向左浮动，类似左对齐
然后是内容，跟game类似，不详细说了
clear:both意思就是清除浮动,因为我们之前设置了向左浮动，所以如果不清除的话我们的底部也会默认靠在刚才设置的那一行，清除了之后就会沉到底部,text-align:center;中间对齐
但是我发现自己重新弄了一下也可以
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:red;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:blue;height:100px;width:100px;float:left;">
GAME<br>
dota<br>
csgo</div>
<div id="content" style="background-color:pink;height:100px;width:400px;float:left;">
内容在这里</div>
<div id="menu" style="background-color:red;height:100px;width:100px;float:left;">
GAME<br>
dota<br>
csgo</div>
<div id="content" style="background-color:white;height:100px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:grey;text-align:center;">
made by azrealxuemo</div>
</div>
</body>
</html>
希望有大佬可以指点一下 …不过如果这样可以的话也行…
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
