HTML进阶

最新推荐文章于 2024-10-11 14:28:21 发布

实力比头发更重要

最新推荐文章于 2024-10-11 14:28:21 发布

阅读量155

点赞数

分类专栏： Web前端开发文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_62217723/article/details/126504208

版权

Web前端开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

一、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>

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>

textarea元素

文本域，多行文本框

按钮元素

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

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

        </button>
        </p>
    </body>

配合表单元素的其他元素

1)label

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

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

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

隐式关联

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

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>

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>