三天学完HTML基础（三）

最新推荐文章于 2023-04-14 16:42:43 发布

RoddyLD

最新推荐文章于 2023-04-14 16:42:43 发布

阅读量176

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/RoddyLD/article/details/111068922

版权

三天学完HTML基础（三）

表单标签
浮动框架(iframe)
跑马灯标签(marquee)
无语义标签

表单标签

表单的作用

用于显示、收集用户信息，并且提交给服务器

表单的组成

1.表单元素 -------将信息提交给服务器
2.表单控件 --------负责接收用户的数据
表单提交：点了提交按钮就会跳转到新的页面
form 代表的就是一个表单元素

表单的属性

action 设置提交表单的地址
method 设置表单的提交方式
get 显示传输
post 隐式传输

表单的控件

属性：
type 类型
value 值
name 名称
type类型：
text 普通文本输入框
password 密码框
image 图片（默认是提交属性）
file 文件上传
radio 单选
checkbox 多选
email 邮箱
tel 电话
submit 提交
reset 重置

表单实例
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册表单</title>
</head>
<body>
    <h1>&emsp;&emsp;用户注册</h1>
    <form>
       <p>
           <label>
                姓&emsp;&emsp;名：
                <input type="text" size="12">
            </label>
       </p>
       <p>
           性&emsp;&emsp;别：
           <label><input type="radio" name="sex"/>男</label>
           <label><input type="radio" name="sex"/>女</label>                    
       </p>
       <p><label>
            年&emsp;&emsp;龄：
            <input type="text">
       </label>
        </p>
        <p><label>
            联系电话：
            <input type="tel"></label>
        </p>
        <p><label>
            电子邮件：
            <input type="email"value="请输入你的电子邮件"></label>
        </p>
        <p><label>
            联系地址：
            <input type="text" placeholder="请输入你的详细的家庭地址"></label>
        </p>
        <p>
            <input type="submit" value="提交"/>
            <input type="reset" value="清除"/>
        </p>
    </form>
</body>
</html>

浏览器显示结果如下：
在这里插入图片描述

关联标签（label）

属性： for
第一种用法
1.给要关联的控件加上一个id
2.通过for属性连接id
第二种方法
直接包裹input元素

文本域（textarea）

文本域的大小不取决于宽高
而是行数列数
cols 列数
rows 行数

下拉菜单（select）

列表项(option)
size : 默认选项的数量如果取值大于1的话则成为一个滚动列表
selected 默认选中
文本域下拉菜单实例
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <textarea cols="20" rows="5"></textarea>
        <hr/>
        请输入你的爱好：<br/>
        <select size="3" multiple>
            <option>唱</option>
            <option>跳</option>
            <option selected>rap</option>
            <option>篮球</option>
        </select>
        <br>
        <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        </p>
    </form>
</body>
</html>

浏览器显示结果如下：
在这里插入图片描述

按钮标签（button）

button 默认的情况下是一个普通按钮

浮动框架(iframe)

1.第一个作用在一个屏幕中显示多个页面（小窗口的形式展现的）
2.第二个作用可以在小窗口中显示不同的网页
实例
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <p align="center">
        <a href="https://www.youkuaiyun.com/" target="call">CSDA</a>
        <a href="https://www.cnblogs.com/" target="call">博客园</a>
        <a href="https://www.runoob.com/" target="call">菜鸟教程</a>
        <br/>
        <iframe src="index5.html"height="500" width="500" name="call"></iframe></p>
        <iframe src="" frameborder="0"></iframe>
</body>
</html>

浏览器显示结果如下：
在这里插入图片描述

跑马灯标签(marquee)

behavior 滚动的方式（属性值可以是slide、alternate）
scrollamount 速度
direction滚动的方向（属性值可以是up、down、left、right）
实例
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <marquee behavior="scroll" scrollamount="50" direction="right" height="100"><img src="images/1.jpg"></marquee>
    <marquee behavior="scroll" scrollamount="40" direction="up" height="100"><img src="images/1.jpg"></marquee>
    <marquee behavior="scroll" scrollamount="30" direction="down" height="100"><img src="images/1.jpg"></marquee>
    <marquee behavior="scroll" scrollamount="50" direction="left" height="100"><img src="images/1.jpg"></marquee>
    <marquee behavior="scroll" scrollamount="60" direction="" height="100"><img src="images/1.jpg"></marquee>
    <marquee behavior="scroll" scrollamount="10" direction="" height="100"><img src="images/1.jpg"></marquee>
    <marquee behavior="scroll" scrollamount="80" direction="right" height="100"><img src="images/1.jpg"></marquee>
    <marquee behavior="scroll" scrollamount="70" direction="" height="100"><img src="images/1.jpg"></marquee>
    <marquee behavior="scroll" scrollamount="10" direction="" height="100"><img src="images/1.jpg"></marquee>
    <marquee behavior="scroll" scrollamount="80" direction="right" height="100"><img src="images/1.jpg"></marquee>
    <marquee behavior="scroll" scrollamount="70" direction="" height="100"><img src="images/1.jpg"></marquee>
</body>
</html>

浏览器显示结果如下：
在这里插入图片描述
给网页标题前添加小图标实例
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon " type="images/x-icon" href="images/狗.png">
</head>
<body>
    <q>制作网页标题前的小图标</q>左边文字运用q标签产生双引号
</body>
</html>