HTML进阶

文章目录

一、iframe元素
二、在页面中使用flash
三、表单元素

一、iframe元素

框架页

通常用于在网页中嵌入另外一个页面

iframe 可替换元素

通常是行盒
通常显示的内容取决于元素的属性
css不能完全控制其中的样式
具有行块盒的特点

二、在页面中使用flash

object：可包含子元素param(参数),

embed

它们都是可替换元素
MIME(Multipurpose Unternet Mail Extensionns)
多用途互联网邮件类型：
比如，资源是一个jpg图片，MIME:image/jpeg

三、表单元素

一系列元素，主要用于收集用户数据

input元素

文本输入，输入框

type属性：输入框类型
type：text，普通文本输入框
type：password，密码框
type：date，日期选择框，兼容性问题
type：search，搜索框，兼容性问题
type：number，数字输入框
type：checkbox,多选框
type：radio,单选框

<p>

<input checked type="range" min="0" max="5">
p>

<p>

<input type="color" >
p>

<p>

<input type="number" min="0" max="100" step="20">p>

<p>

爱好：
<input type="checkbox" >
音乐<input name="lover" type="checkbox" >
电影<input name="lover" type="checkbox" >
其他<input name="lover" type="checkbox" >
p>

<p>

性别：
<input name="gender" type="radio" >
男<input  name="gender" type="radio" >
女
p>
<p> 
    <input type="file">
p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

value属性：输入框的值
placehoder属性:显示提示的文本，文本框没有内容时显示

input元素可以制作按钮
当type值为reset、button、submit、input白哦是按钮

select元素

下拉列表选择框，通常和option元素配合使用

<p>请选择城市：
    <select>
        <option>成都option>
        <option>北京option>
        <option selected>长沙option>
    select>
p>

<p>请选择你喜欢的主播：
    <select>
        <optgroup label="游戏主播">
        <option>慢慢option>
        <option>仅仅option>
        optgroup>
         <optgroup label="才艺主播">
        <option selected>长沙option>
        <option>慢option>
        <option>仅option>
           optgroup>
    select>
p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

textarea元素

文本域，多行文本框

按钮元素

button
type属性：reset、button、submit，默认值是submit

<body>
    <p>
        <button type="button">这是一个按钮元素
            <img src="" alt="" style="">

        button>
        p>
    body>
1
2
3
4
5
6
7
8

配合表单元素的其他元素

1)label

普通元素，通常配合单选和多选框使用

显示关联
可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值

<input id="radMale" name="gender" type="radio">
<label for="radMale">男label>

1
2
3

隐式关联

<label >
<input name="gender" type="radio">
男
label>

1
2
3
4
5

2)datalist

数据列表
该元素本身不会显示到页面，通常用于和普通文本框配合使用

<body>
<p>
    请输入你常用的浏览器：
    <input list="userAgent" type="text">
p>
<datalist id="userAgent">
    <option value="Chrome">
        谷歌浏览器
    option>
    <option value="IE">
        IE浏览器
    option>
    <option value="Opera">
        欧鹏浏览器
    option>
datalist>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3)form元素

通常，会将这个表单元素，放置到form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以适合的方式提交到服务器。

form元素对开发静态页面没有什么意义。

<body>
    <form action="http://www.baidu.com/" method="GET">
        <p>
            账号：
            <input name="loginid" type="text">
        p>
         <p>
            密码：
            <input type="password" name="loginid">
        p>
        <p>
        <button>提交button>    
        p>
        form>
    body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4)fieldset元素

表单分组

相关阅读:
rk3588硬件构成-rock5b
常见响应头，请求头
Spring Boot通过lombok提供的Slf4j省略日志的创建操作
报表工具，应该适用哪种部署方式？_光点科技
selenium 文件上传方法
【软件】智慧树/知到网课小助手
程序都不知道的代码
【TA-霜狼_may-《百人计划》】图形4.5 DoF景深基础
21天Python进阶学习挑战赛打卡------第4天(字典)
三维模型3DTile格式轻量化在三维展示效果上的重要性分析

原文地址：https://blog.csdn.net/qq_62217723/article/details/126504208