简单详细的html前端补充–框架、媒体和表单

1、框架元素 iframe (作用嵌套)可与a标签结合使用

        1、src:设置嵌套窗口打开的页面资源路径

        2、frameborder:设置嵌套窗口边框是否显示

        3、height width: 高度和宽度

        4、name:设置窗口名称

        5、与a标签的 traget:设置页面打开的方式 _self(默认,本窗口), _blank(新窗口), _top(顶级窗口)parent(父级窗口),自定义窗口联系,iframe的超链接默认是在自己本身窗口里面打开,若设置了parent(父级窗口)则是在打开本窗口的页面打开即父级窗口打开,_top(顶级窗口)类似,直接在最高级的父级打开,自定义窗口则是规定超链接打开在哪个窗口name

2、媒体元素 audio video

        audio相关属性:

                1、src:设置音频资源路径

                2、controls:设置是否显示

                3、autoplay:自动播放

                4、loop:设置是否循环播放

        video相关属性:

                1、src:设置音频资源路径

                2、controls:设置是否显示

                3、autoplay:自动播放

                4、loop:设置是否循环播放

                5、width height 设置宽高

3、表单元素 form 表单控件元素 input select extarea (一般放form里)

input相关元素:

        type:设置控件类型

                1、text:单行文本

                2、password:密码框

                3、radio:单选框 checked是否默认选中

                4、checkbox:复选框 checked是否默认选中

                5、file:文件上传器

                6、submit:提交按钮

                7、button:普通按钮

                8、reset:重置按钮

                9、color:颜色拾取器

                10、number:设置输入格式为数字

       使用举例:

 <input type="number" min="0" max="1000" value="1" step="2">

        可以设置最小值、最大值、默认值、倍数

                11、range:滑块

                12、date:日期控件

                13、time:时间控件

                14、datetime-local:本地日期时间控件

                15、month:月控件

                16、week:周控件

        name:控件名称

        value:内容

        disabled:是否可以操作

        readonly:是否只读

        placeholder:设置输入框内部提示信息

        autofocus:输入框选中加粗 一个form中只能有一个

        select相关控件(下拉菜单)

                1、name:控件名称

                2、size:显示下拉项的个数

                3、multiple:设置是否多选

        子控件

                1、option:下拉选项 value:下拉值 selected:默认选中

                2、optgroup:下拉项分组 label:下拉项组名

        extarea相关控件(多行文本框)

                1、cols 宽度

                2、rows 高度

fieldset和legend——主要用于表单控件分类

<fieldset>

<legend>账号密码</legend>

账号:<input type="text" placeholder="请输入账号" autofocus>

密码:<input type="password" placeholder="请输入密码">

</fieldset>

实现效果: