HTML2

最新推荐文章于 2023-06-15 17:19:58 发布

天金小麻花

最新推荐文章于 2023-06-15 17:19:58 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/ATCG7/article/details/108183237

版权

iframe元素

框架页

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

iframe 可替换元素

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

通常用于播放别人网站的视频

<a href="https://www.baidu.com">百度</a>
    <a href="https://www.jingdong.com" >京东</a>
    <a href="https://www.taobao.com" target="myframe">淘宝</a>

    <iframe name="myframe" src="https://www.baidu.com" ></iframe>

在页面中使用flash

object

embed

都是可替换元素

MIME：多用途互联网邮件类型，标准格式：image/jpg

<object data="./***" type=""></object>
  <!-- data嵌入资源  type：嵌入资源的类型（图片、flash）-->

类型在百度搜索MIME，进入然后Ctrl+F，搜索后缀名（比如.swf），然后复制搜索结果粘贴到type里面

object里面可以加子元素：param（参数）

<param name="quality" value="high">
<!-- 设置画面质量为高 -->

<embed quality="high" src="" type="">

浏览器对这两个元素的兼容性不一样，有的浏览器能识别有的不能，所以通常这样写（兼容的写法）：

<object data="./***" type="">
      <param name="quality" value="high">
      <embed src="" type="">
  </object>

表单元素

一系列元素，主要用于收集用户数据（大部分是可替换元素）

input元素

输入框

type属性：输入框类型

type:text 普通文本输入框
type:password 密码框
type:date 日期选择框，兼容性问题
type:search 搜索框，兼容性问题
type:range 滑块
type:color 颜色选择器
type:number 数字输入框(min max 最小值和最大值 step旁边增加的值，默认是1)
type:checkbox 多选框用name分组
type:radio 单选要用name将同一组的单选取一个名字，让浏览器知道哪些是一组的
type:file 让用户选择文件

性别：
        <input name="gender" type="radio">
        男
        <!-- checked默认选中 -->
        <input checked name="gender" type="radio">
        女

可以用input mdn查

value属性：输入框的值（文本框开始的值）
placeholder属性：显示提示的文本，文本框没有内容时显示，有内容时消失。

input元素可以制作按钮：
当type值为reset、button、submit的时候，分别表示重置按钮、普通按钮、提交按钮
通过value可以改按钮的值

select元素

下拉列表选择框，通常和option元素配合使用（select子元素只能是option）

请选择城市：
        <select name="" id="">
            <option value="">成都</option>
            <!-- 默认选择重庆 -->
            <option selected="selected" value="">重庆</option>
            <option value="">上海</option>
        </select>

<p>
  <!-- 单选 -->
        最喜欢的软件
        <select name="" id="">
            <!-- optgroup表示分组 label表示分组名 -->
            <optgroup label="社交类">
                <option value="">QQ</option>
                <option value="">微信</option>
                <option value="">微博</option>
            </optgroup>
            <optgroup label="网购类">
                <option value="">京东</option>
                <option value="">淘宝</option>
                <option value="">苏宁</option>
            </optgroup>
        </select>
    </p>
    <!-- 多选 -->
    <p>
        喜欢的软件
        <select multiple name="" id="">
            <!-- optgroup表示分组 label表示分组名 -->
            <optgroup label="社交类">
                <option value="">QQ</option>
                <option value="">微信</option>
                <option value="">微博</option>
            </optgroup>
            <optgroup label="网购类">
                <option value="">京东</option>
                <option value="">淘宝</option>
                <option value="">苏宁</option>
            </optgroup>
        </select>
    </p>

textarea元素

文本域，多行文本框

<p>
        请填写简介：
        <!-- cols多少行(按英文字母) rows多少列 超过文本框会自动出现滚动条-->
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>

  <!-- 通常用css控制宽高，也可以使用placeholder -->
        <textarea style="width: 100px;height: 100px;" placeholder="请输入简介"></textarea>

按钮元素

button

type属性：reset、submit、button，默认值是submit
button 里面可以加各种元素

<button type="button">
        
        <img src="./按钮.jpg" alt="" style="width: 50px;height: 50px;">
        <p>
            999
        </p>
    </button>

表单状态

readonly属性：布尔属性，是否只读，不会改变表单显示样式

 <p>
                账号
                <input type="text" value="12345" readonly>
    
            </p>

disabled属性：布尔属性，是否禁用，会改变表单显示样式

<p>
            姓名
            <input disabled value="***" type="text">
        </p>

配合表单元素的其他元素

label

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

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

<p>
        请选择性别：
        <input id="radmale" name="gender" type="radio">
        <!-- for表示label关联到的表单元素的ID -->
        <label for="radmale">男</label>
        <!-- 这时候点中文字也可以选中选项 -->
        <input id="radfe" name="gender" type="radio">
        <label for="radfe">女</label>
    </p>

隐式关联

 请选择性别：
        <label >
            <input name="gender" type="radio">
            男
        </label>
        <label >
            <input name="gender" type="radio">
            女
        </label>

datalist

数据列表

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

 <p>
        请输入你常用的浏览器
        <input list="useragent" type="text">
    </p>
    <datalist id="useragent">
        <option value="Chrome">谷歌浏览器</option>
        <option value="IE">IE浏览器</option>
        <option value="Opera">欧鹏浏览器</option>
        <option value="Safari">苹果浏览器</option>
        <option value="fire fox">火狐浏览器</option>
    </datalist>

form元素

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

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

<!-- action是提交到哪里 method是提交方式（有GET和）-->
 <form action="https://www.baidu.com" method="GET">
        <p>
            账号：
            <!-- 必须写上name -->
            <input name="" type="text">
        </p>
        <p>
            密码：
            <input name="" type="password">
        </p>
        <p>
            <button>提交</button>
        </p>
    </form>

fieldset元素

表单分组

  <fieldset>
            <!-- 分组标题 -->
            <legend>账号信息</legend>
            <p>
                账号
                <input type="text">
    
            </p>
            <p>
                密码
                <input type="password">
            </p>
        </fieldset>

美化表单元素

新的伪类

focus

元素聚焦时的样式

<style>
        input:focus{
            outline: 1px solid #008c8c;
            outline-offset: 0;
        }
    </style>

checked

单选或多选框被选中的样式

 <style>
        input:checked+label{
           color: blue ;
        }
    </style>

    <p>
        请选择性别：
        <input id="radmale" name="gender" type="radio">
       
        <label for="radmale">男</label>
        <input id="radfe" name="gender" type="radio">
        <label for="radfe">女</label>
    </p>

常见用法

重置表单元素样式
设置textarea是否允许调整尺寸

both：两个方向都能调整（默认）
horizontal：水平方向可以调整
none：两个方向都不能调整
vertical：垂直方向

<style>
        textarea{
          /* 两个方向上都可以调整尺寸 */
            resize: both;
        }
    </style>

文本框边缘到内容的距离

<style>
 /* 方式1，padding */
        input{
            padding-left: 10px;
        }
        /* 方式2 text-indent 首行缩进*/
        input，textarea{
            text-indent: 1em;
        }
         </style>