1.HTML中的框架ifram
<iframe>---表示一个框架,在html文件中开辟一个区域，可以单独显示另一个html文件.
【html文件中嵌套另一个html文件】src="URL"----另一个html文件访问路径height 和 width 属性----定义iframe标签的高度与宽度。可以使用百分比数字frameborder 属性用于定义iframe表示是否显示边框。【默认有边框，{0/1? yes/no}】。
可以使用iframe来显示目标链接页面。
用过点击<a>标记，切换显示iframe中显示的内容
<a>标提供target属性为iframe得name属性值为iframe设置name属性 <!DOCTYPE html> <html> <head> ? ? <meta charset="UTF-8"> ? ? <title>框架</title> </head> <body> ? ? <ul> ? ? ? ? <li><a href="list.html" target="my">查看list.html</a></li> ? ? </ul> ? ? <iframe src="table.html" ?frameborder="1" width="1000px" height="300px" name="my"></iframe> </body> </html>?
点击后
?
2.HTML中的<div><div></div>---在html中开辟一块空白表区域，可以包含其他的html元素显示，因此<div>是一个容器元素。
可以与css结合使用可以制作页面布局。
<!DOCTYPE html> <html> <head> ? ? <meta charset="UTF-8"> ? ? <title>div</title> </head> <body> ? ? <div style="width: 500px;height:400px; background-color:red;"> ? ? ? ? <h4>随便打的</h4> ? ? ? ? <p>问题解决不海商法</p> ? ? ? ? <img src="biaoqb.png" alt=""> ? ? </div> </body> </html>?
3.HTML中的<span><span>---没有实际的含义，与css一起可以改变某一端文本内容中的一部分。可以对一段文字中的某一部分进行改变。
<!DOCTYPE html> <html> <head> ? ? <meta charset="UTF-8"> ? ? <title>span</title> </head> <body> ? ? <p> ? ? ? ? <span style="color: brown;font-size:20px;;">注意的分配</span>是指在<span style="color: chartreuse;font-size:80px;">同一时间</span>内把注意指向不同的对象 ? ? </p> </body> </html>?
面试题:
区块元素与内联元素[行内元素]的区别?
Html中的元素有两大类区块元素与内联元素[行内元素]；
块级元素在浏览器显示时，通常会以新行来开始（和结束）。常见的：<h1>, <p>, <ul>, <table>,<div>
内联元素在显示时通常不会以新行开始。常见的：<b>, <td>, <a>, <img>,<span>
4.HTML字符实体字符实体----特殊符号，在html中有一些特殊的符号与文字结合就成一个html标记，在显示的时候这些特殊符号不会显示，而是被解释成一个标记，如果我们需要显示出这个特殊符号就要使用字符实体。
<form>---表示一个表单。表单作用：采集用户信息，发送给后端处理程序处理。
action----设置后端处理程序访问地址【后端开发者提供的访问接口】
method----设置表单信息的提交方式。
取值1:GET----将表单信息跟随在后端处理程序访问地址的后面明码发送。
GET有数据量限制255个字符；
文件上传时不使用GET方式。
例如:login?username=zhangsan&password=123456
取值2:POST----将表单信息封装在http协议中提交给后端处理程序，用户看不见。
POST没有数据量限制； ????? 文件上传时使用POST方式
enctype---规定在将表单数据发送到后台处理程序之前如何对其进行编码
注意:文件上传时使用POST方式，且设置enctype为multipart/form-data,包含<input?name="wenjiankuang"?type="file"/>
???? 表单元素：
????? 在需要提交给后端处理程序的时候，需要放在表单中。表单分为两大类，input类型的表单元素和非input类型的表单元素。
????? 表单元素有文本框，密码框，单选按钮，复选框，时间日期选择框，颜色框，邮箱，网址，隐藏域，文件选择框，表单提交按钮，表单重置按钮，普通按钮，下拉列表，文本域。
<!DOCTYPE html> <html> <head> ? ? <meta charset="UTF-8"> ? ? <title>表单</title> </head> <body> ? ? <form action="" method="post" > ? ? ? ? 用户名:<input type="text" name="username" ><br> ? ? ? ? 密码:<input type="password" name="password"><br> ? ? ? ? <!--有多个单选按钮时，为了保证每次只能选一个，要求name属性值要相同 ? ? ? ? ? ? checked表示默认被选中--> ? ? ? ? 男<input type="radio" name="radio" value="nan" checked=""> ? ? ? ? 女<input type="radio" name="radio" value="nv"><br> ? ? ? ? <!--复选框 ? ? ? ? 有多个复选框时,要求name属性值要相同,checked表示默认被选中 ? ? ? ? --> ? ? ? ? <input type="checkbox" name="checkbox" value="chinese" checked="">语文 ? ? ? ? <input type="checkbox" name="checkbox" value="math">数学 ? ? ? ? <input type="checkbox" name="checkbox" value="english">英语 ? ? ? ? <input type="checkbox" name="checkbox" value="PE">体育<br> ? ? ? ? <!--时间日期选择框 ? ? ? ? date年月日 ? ? time 时分 ? ? datetime-local ?年月日时分--> ? ? ? ? <input type="date" name="date"> ? ? ? ? <input type="time" name="time"><br> ? ? ? ? <input type="datetime-local" name="datetime-local"><br> ? ? ? ? <!--颜色框--> ? ? ? ? <input type="color" name="color"><br> ? ? ? ? <!--邮箱 ? ? ? ? 提交时会自动校验--> ? ? ? ? <input type="email" name="email"> ? ? ? ? <input type="submit" value="登录"><br> ? ? ? ? ?<!--网址 ? ? ? ? 提交时会自动校验--> ? ? ? ? <input type="url" name="url"><br> ? ? ? ? <!--隐藏域，需要发给后端的东西，但用户看不到--> ? ? ? ? <input type="hidden" name="hidden" value="i love you"><br> ? ? ? ? <!--文件选择框--> ? ? ? ? <input type="file" name="file"><br> ? ? ? ? <!--表单重置--> ? ? ? ? <input type="reset" value="重置"> ? ? ? ? <!--普通按钮 ? ? ? ? ? ? value表示按钮上显示的文本值，以后用js实现功能--> ? ? ? ? <input type="button" value="按钮"><br> ? ? ? ? <!--下拉列表 select option ? ? ? ? ?option--下拉列表中的每一项 ? ? ? ? ?value表示提交给后台处理程序的数据值 ? ? ? ? --> ? ? ? ? <select name="xialalist" id=""> ? ? ? ? ? ? <option value="sx">陕西省</option> ? ? ? ? ? ? <option value="jx">江西省</option> ? ? ? ? ? ? <option value="cq">重庆市</option> ? ? ? ? ? ? <option value="beijing">北京市</option> ? ? ? ? </select> ? ? ? ? <!--文本域 textarea ? ? ? ? ?cols--列数设置宽度,rows--行数设置高度 ? ? ? ? ?placeholder--设置样板文字 ? ? ? ? 输入超过大小空间之后自带滚动条 ? ? ? ? --> ? ? ? ? <textarea name="textarea" cols="30" rows="10" valeu="ss" placeholder="请输入自我评价"></textarea> ? ? </form> </body> </html>作业:完成一注册页面
?
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>表单练习作业</title> ????<style> ????????tr{ ????????????height:?60px; ????????} ????????input{ ????????????height:?30px; ????????} ????</style> </head>??? <body> ????<div?style="background-image:url(111.jpg); ?????????width:?700px;height:?730px;"> ????????<p?style="text-align:?center;?color:?white;?font-size:?30px;">欢迎注册</p> ????????<table?cellspacing="0px"?align="center"> ????????????<tr> ????????????????<td?style="font-size:?20px;color:?white; ???????????????text-align:?left;;width:150px;">用户名:</td> ????????????????<td?style="width:?400px;"?colspan="2"><input?type="text"?name="username"?style="width:?400px;"></td> ????????????</tr> ????????????<tr> ????????????????<td?style="font-size:?20px;color:?white; ????????????text-align:?left;">请设置密码:</td> ????????????????<td?style="width:?150px;"?colspan="2"><input?type="password"?name="password"?style="width:?400px;"?placeholder="请输入密码"></td> ????????????</tr> ????????????<tr> ????????????????<td?style="font-size:?20px;color:?white; ????????????text-align:?left;">请确认密码:</td> ????????????????<td?style="width:?150px;"?colspan="2"><input?type="password"?name="password"?placeholder="请再次确认密码"?style="width:?400px;"></td> ????????????</tr> ????????????<tr> ????????????????<td?style="font-size:?20px;color:?white; ????????????text-align:?left;">电子邮件:</td> ????????????????<td?style="width:?150px;"?colspan="2"><input?type="email"?name="email"?style="width:?400px;"?placeholder="请输入电子邮件"></td> ????????????</tr> ????????????<tr> ????????????????<td?style="font-size:?20px;color:?white; ????????????text-align:?left;">验证手机:</td> ????????????????<td?style="width:?150px;"?colspan="2"><input?type="email"?name="email"?style="width:?400px;"?placeholder="请输入手机号码"></td> ????????????</tr> ????????????<tr> ????????????????<td?style="font-size:?20px;color:?white; ????????????text-align:?left;">短信验证码:</td> ????????????????<td><input?type="email"?name="email"?style="width:?250px;"?placeholder="请输入手机六位验证码"></td> ????????????????<td><input?type="button"?value="获取短信验证码"></td> ????????????</tr> ????????????<tr> ????????????????<td?style="font-size:?20px;color:?white; ????????????text-align:?left;">性别:</td> ????????????????<td?style="color:?white;">男<input?type="radio"?name="radio"?checked> ????????????????????女<input?type="radio"?name="radio"></td> ????????????</tr> ????????????<tr> ????????????????<td?style="font-size:?20px;color:?white; ????????????text-align:?left;">联系地址:</td> ????????????????<td?style="width:?150px;"?colspan="2"><input?type="text"?name="address"?placeholder="请输入地址"?style="width:?400px;"></td> ????????????</tr> ????????????<tr> ????????????????<td></td> ????????????????<td><input?type="checkbox"?name="checkbox"?checked><span?style="color:?white;">我已阅读并同意</span>《嘿嘿用户注册协议》</td> ????????????</tr> ????????????<tr> ????????????????<td></td> ????????????????<td?colspan="2"><input?type="button"?name="button"?value="立即注册"? ????????????????????style="background-color:yellowgreen;color:?white;width:?400px;"></td> ????????????</tr> ????????????<tr> ????????????????<td></td> ????????????????<td><span?style="color:?white;">已有账号</span>直接登录</td> ????????????</tr> ????????</table> ????</div> </body> </html>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
