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标记，在显示的时候这些特殊符号不会显示，而是被解释成一个标记，如果我们需要显示出这个特殊符号就要使用字符实体。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
5.HTML表单form
<form>---表示一个表单。表单作用：采集用户信息，发送给后端处理程序处理。
action----设置后端处理程序访问地址【后端开发者提供的访问接口】
method----设置表单信息的提交方式。
取值1:GET----将表单信息跟随在后端处理程序访问地址的后面明码发送。
GET有数据量限制255个字符；
文件上传时不使用GET方式。
例如:login?username=zhangsan&password=123456
取值2:POST----将表单信息封装在http协议中提交给后端处理程序，用户看不见。
POST没有数据量限制；
文件上传时使用POST方式
enctype---规定在将表单数据发送到后台处理程序之前如何对其进行编码
| application/x-www-form-urlencoded | 默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。 |
| multipart/form-data | 不对字符编码。当使用有文件上传控件的表单时，该值是必需的。 |
| text/plain | 将空格转换为 "+" 符号，但不编码特殊字符。 |
注意:文件上传时使用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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
