1、iframe标签
iframe标签能在html网页中,打开一个小窗口去加载一个单独的页面
<!--
ifarme和a标签组合使用的步骤:
1 在iframe标签中使用name属性定义一个名称
2 在a标签的target属性上设置iframe的name的属性值
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>iframe标签</title>
</head>
<body>
<font color="red" face="楷体" size="4" >我是一个单独的完整的页面</font><br/><br/>
<iframe src="3.标题标签.html" width="300" height="200" name="ifram" ></iframe>
<br/>
<ul>
<li>
<a href="test2.html" target="ifram">
<font color="blue">列表标签</font>
</a>
</li>
</ul>
</body>
</html>
运行结果:
2、表单标签(重点)
什么是表单?
表单就是 html 页面中,用来收集用户信息的所有元素的集合.然后将这些信息发送给服务器
<!--
form标签就是表单
input type=text 是文件输入框 value设置默认显示内容
input type=password 是密码输入框 value设置默认显示内容
input type=radio 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
input type=checkbox 是复选框 checked="checked"表示默认选中
input type=reset 是重置按钮 value属性修改按钮上的文本
input type=submit 是提交按钮 value属性修改按钮上的文本
input type=button 是按钮 value属性修改按钮上的文本
input type=file 是文件上传域
input type=hidden 是隐藏域 当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器)
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
table 标签是进行排版
textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
rows 属性设置可以显示几行的高度
cols 属性设置每行可以显示几个字符宽度
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
</head>
<body>
<form>
<h1 align="center">Login</h1>
<table align="center">
<tr>
<td>用户名:</td>
<td>
<input type="text" value="UserName">
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" value="PassWord">
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" value="PassWord">
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked="checked"/>女
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td>
<input type="checkbox" checked="checked"/>离散数学
<input type="checkbox" />Java
<input type="checkbox" />Web前端
</td>
</tr>
<tr>
<td>国籍:</td>
<td>
<select>
<option>--请选择您的国籍</option>
<option selected="selected">中国</option>
<option>法国</option>
<option>美国</option>
<option>德国</option>
<option>意大利</option>
<option>日本</option>
</select>
</td>
</tr>
<tr>
<td>自评:</td>
<td>
<textarea rows="5" cols="15">默认</textarea>
</td>
</tr>
<tr>
<td>文件上传:</td>
<td>
<input type="file">
</td>
</tr>
<tr>
<td><input type="reset" /></td>
<td align="center"><input type="submit"/></td>
</tr>
</table>
</form>
</body>
</html>
运行结果:
3、其他标签
- div标签
- span标签
- p段落标签
<!--
div标签 默认独占一行
span标签 它的长度是封装数据的长度
p段落标签 默认会在段落的上方或下方各空出一行来(如果已有就不再空)
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他标签</title>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p段落标签1</p>
<p>p段落标签2</p>
</body>
</html>
运行结果:
有关标签的知识就先分享到这里啦!下一篇将分享有关CSS的知识哦!
您的鼓励是我前进的动力,将会分享更多知识给您
欢迎点赞 + 收藏 + 关注!!!