目录
1.框架
1.1 内嵌框架iframe
属性:
- width\height: 框架宽\高
- frameborder:框架边框,如果是0就不显示
- name=‘aaa':给框架起个名字aaa
- 作用:对应于a标签中的target属性。
- src:默认打开的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习框架和表单</title>
<meta name="author" content="张梦姣,zmj,ZMJ,ZhangMengjiao"/>
<meta name="keywords" content="框架,表单,HTML5"/>
</head>
<body>
<h1 align='center'>开始学习框架和表单吧</h1>
<ul>
<li><a target="aaa" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=1688%E7%BD%91%E4%B8%8A%E5%95%86%E5%9F%8E&clk1=bf5904735adb92c1883e118aa0d4bf5a&upsId=bf5904735adb92c1883e118aa0d4bf5a">阿里巴巴</a></li>
<li><a target="aaa" href="https://www.tencent.com/">腾讯</a></li>
<li><a target="aaa" href="http://www.bjsxt.com">北京尚学堂</a></li>
</ul>
<iframe src="我的首页.html" frameborder="2" width="1030" height="600" name="aaa"></iframe>
</body>
</html>
效果展示:
1.2 框架标签升级使用
1.3 框架集合frameset
frameset元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset元素仅仅会规定在框架集中存在多少列或多少行。您必须使用cols或rows 属性。在使用frameset框架集时,当前页面不能再使用body标签,也不能再定义其他内容,只能作为引入其他页面来使用。
frameset:
- 使用frameset框架进行布局的时候必须删除body。
- rows:上下分成多少行
- cols:左右分成多少列 cols="第一列宽度,第二列宽度,... ...,"
- *含义:代表剩下所有的,eg:'20px,*,30px'
- frameborder='no':去掉边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<!-- 注意:使用frameset框架进行布局的时候必须删除body。 -->
<frameset rows='100px,640px,80px'><!-- 先横向再纵向划分 -->
<frame src='sxt/top.html'/>
<frameset cols="15%,*">
<frame src='sxt/left.html'/>
<frame src='' name='aaa'/>
</frameset>
<frame/>
</frameset>
</html>
1.4 iframe和frameset的对比
共同点:都可以实现网页中整体布局、都是框架标签。
不同点:
- frameset:对于移动端(手机/平板)支持效果比较差。
2.表单form
问题:
- 搜索的信息提交到了哪里去了?
https://www.baidu.com/s- 搜索的信息是如何传递过去的?
wd=bjsxt&rsv_spt=1https://www.baidu.com/s?wd=bjsxt&rsv_spt=1
- ?之前代表的是提交的地址URL
- ?之后代表的是携带的参数;参数和参数之间使用&进行分割;参数的形式都是name=value
重点:如果我们想要传递参数,input中必须含有name属性才可以
form属性:
- action:数据提交地址
- method:提交方式get/post
- get():默认,提交数据依附于URL,不安全; 地址栏有限定,传输数据量有限定;效率高
- post():提交数据依附于文本域,安全;传输数据量无限制;效率低
input属性:
- type:指定类型
- ‘text':普通文本框
- 'submit':提交
- 'password':密码框
- ‘radio':单选框 如果想要实现单选效果必须增加相同的name属性,真正提交的给网站的是value的值
- 'checkbox':多选框
- ‘file':文件表单项
- ’hidden':隐藏域 ==》定义隐藏字段,隐藏字段对于用户是不可见的。隐藏字段常常存储默认值,或者由JavaScript改变它们的值:
- ‘reset': 重置 ==》 相当于刷新一次,清空form中的内容【不常用,用户体验差】
- 'button':普通按钮,以后会结合js一起使用
- ’email':用于e-mail 地址的字段(当提交表单时会自动对email字段的值进行验证)
- ’url':定义用于输入URL的字段
- 'color':从拾色器中选取颜色
- ‘number':只能输入数字,输入字母不显示
- ’range':度量值
- ‘date':年月日
- ’month':年月
- 'week':年周
- value:给框框取名字
- checked:默认勾选,应用于type='radio'/'checkbox'
- autofocus:规定在页面加载时,域自动地获得焦点。
注释: autofocus属性适用于所有<input>标签的类型。autofocus/multiple/placeholder/required:
select:下拉框
- <option>。。。</option>
- selected:表示已经选中,用于下拉框,区别checked
textarea属性:多行文本框
- rows='10':文本框只显示10行的大小
- cols='30':文本框只显示30个字符的大小 ,但也许会多两个;一个中文占两个字符。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com/s" method="get"><!-- 必须写s -->
<input type="text" name='wd'/><!-- 普通文本框 -->
<input type="submit" value="牛逼一下" /><!-- value:给提交框取名字 -->
<input type="password"/><br/><br/>
男:<input type="radio" name='sex' value="男" checked/>
女:<input type="radio" name='sex' value='女'/><br/><br/>
抽烟:<input type="checkbox" value='抽烟' checked='checked'/>
喝酒:<input type="checkbox" value='喝酒'/> <!-- 属性和内容一样,可以只写一个 -->
打牌:<input type="checkbox" value='打牌' checked/><br/><br/>
<select><!-- 下拉框 -->
<option>--请选择--</option>
<option>北京</option>
<option selected>上海</option>
<option>深圳</option>
</select><br/><br/>
个人介绍:<textarea name="" id="" cols="20" rows="4"></textarea><br/><br/><br/>
<input type="file"/><br/><br/><br/><!-- 文件表单项 -->
<input type="hidden"/><!-- 隐藏域 -->
<input type="reset"/><!--重置 -->
<input type="button" value="2022.10.1" onclick="alert('国庆节快乐')"/><br/><br/><!-- 普通按钮 -->
Email:<input type="email"/><br/>
URL:<input type="url" /><br/>
<input type="submit"><br/><br/>
color:<input type="color"/><br/>
年龄:<input type="number"/><br/>
声音:<input type="range"/><br/><!-- 度量值 -->
生日(年月日):<input type="date"/><br/><!-- 定义选择年/月/日控件 -->
生日(年和月):<input type="month"/><br /><!-- ___年__月 -->
选择周:<input type="week"/><br /><!-- ____年第_周 -->
</form>
</body>
</html>
展示效果: