HTML基础知识——常用标签3

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的知识哦!

您的鼓励是我前进的动力,将会分享更多知识给您

欢迎点赞 + 收藏 + 关注!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值