推荐学习网站:http://www.w3school.com.cn/
标签:
以<开始,以>结束
标签是成对出现的,结束标签有/
关键字即为名字
标签需要嵌套
字节数标签不能嵌套其他标签
标签的属性写在标签内 属性的写法 key=value
<head></head>为配置,不显示
补充:
用iframe 内联框架,在一个页面中嵌入另一个页面(常用)(被嵌套的窗体为子窗体)
必加属性:frameborder 边框 取0或1 默认为1
heigth 高
weigth 宽
name iframe的名称
scrolling 是否有滚动条(一般为no)
src 在iframe中显示的文档的URL
<!--在页面hello中嵌套一个2.html页面-->
<iframe name="kid" src="2.html" width="500" height="300" scrolling="no" ></iframe>
超链接<a></a>
href:加锚点或者超链接
target:
_blank 在新标签页打大
_self 在当亲页面打开
_parent 在父窗体打开(iframe中包含的窗体为子窗体)
_top 在祖宗窗体(最顶层的窗体)打开
子窗体的名字(inframe中的name) 在该子窗体打开
<iframe name="kid" src="2.html" width="500" height="300" scrolling="no" ></iframe> <!--添加链接,鼠标单击百度,子页面kid跳转为百度--> <a href="http://baidu.com" target="kid">百度</a>
表单代码练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.html</title>
</head>
<body>
<!--表单-->
<!--method 提交的方式 不写的话默认get-->
<!--get:显式提交,一次最高255个字符,容易出现中文乱码
post:隐式提交,一次可以提交2M字符,更安全,使用https加密
共同:只能提交文本,以文本的方式提交-->
<!--action 为提交地址-->
<form action="/login" method="post" >
<!-- input ->文本 name必须有 type 是类型 -->
<!-- 前三个是H4有的,其他都是新加的-->
<!-- value表示显示的值-->
<input name="userName" type="text" value="2131">
<input name="password" type="password" value="dsad">
<input name="" type="tel">
<input name="" type="number">
<br>
<input name="" type="hidden">
<input name="" type="search">
<input name="" type="date">
<input name="" type="email">
<br>
<!--input-> 选择:单选,复选-->
<input type="radio" name="sex" value="man" checked>男<!--单选,name相同的为一组 checked为默认选项-->
<input type="radio" name="sex" value="women">女
<input type="checkbox" name="in" value="lan">篮球<!--复选-->
<input type="checkbox" name="in" value="zu">足球
<input type="checkbox" name="in" value="pai">排球
<!--input -> 按钮 submit reset button image-->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
<input type="image" value="提交" src="" width=""><!--效果跟提交一样-->
<!--input -> 其他 file color -->
<input type="file">浏览<!--选择文件,返回文件地址-->
<!--非input-->
<!--下拉列表 value为提交值,一月为显示值-->
<select name="month">
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5" selected>五月</option><!--selected 为默认选项-->
</select>
<br>
<!--文本域-->
<textarea name="" rows="5" cols="10" >两个标签之间写值,表示默认值</textarea><!--行数和列数控制宽度和长度-->
</form>
</body>
</html>
效果图
表单综合练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formTest.html</title>
</head>
<body>
填写用户注册信息
<form action="/login" method="post">
<table border="1" >
<tr>
<td>用户名:</td>
<td>
<input name="name" type="text">
</td>
<td>登录用户名</td>
</tr>
<tr>
<td>密码</td>
<td><input name="password" type="password"></td>
<td>登录密码,6个以上字母,<br>
数字组合,不区分大小写</td>
</tr>
<tr>
<td>注册邮箱:</td>
<td><input name="email" type="email"></td>
<td>录入后不可更改</td>
</tr>
<tr>
<td>性别:</td>
<td><input name="sex" type="radio" value="man">男
<input name="sex" type="radio" value="women">女</td>
<td>选择您的性别</td>
</tr>
<tr>
<td>出生年月:</td>
<td>
<select>
<option value="2013" selected>2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
年
<select>
<option value="10" selected>10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
</select>
月
</td>
<td>选择您的出生年月</td>
</tr>
<tr>
<td>兴趣标签:</td>
<td>
<input name="happy" type="checkbox" value="live">生活
<input name="happy" type="checkbox" value="play">娱乐
<input name="happy" type="checkbox" value="sport">体育<br>
<input name="happy" type="checkbox" value="money">财经
<input name="happy" type="checkbox" value="fashion">时尚
<input name="happy" type="checkbox" value="view">新闻
</td>
<td>选择您感兴趣的标签</td>
</tr>
<tr>
<td>头像</td>
<td>
<input name="headPicture" type="file" value="浏览" accept="image/jpeg">
</td>
<td>选取您的图像文件</td>
</tr>
<tr>
<td>个人简介</td>
<td><textarea name="" rows="5" cols="20" ></textarea>
</td>
<td>请添加您的个人简介情况<br>
以方便朋友们更了解您</td>
</tr>
</table>
<input name="save" type="submit" value="免费注册">
</form>
</body>
</html>
效果