杂七杂八的知识

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了CSS精灵图的原理与优势，如何通过合并图片提高加载速度，并对比了`display:none`和`visibility:hidden`的隐藏效果。此外，详细讲解了单选框、下拉菜单、文本域等表单元素的使用和高级特性，如Radio单选功能和Select选项设置。

1.精灵图；图片整合技术称之为css精灵图或者是雪碧图
1.将导航背景图片，按钮背景图片按照规律进行合并成一张背景图片，即多张图片合成一张被禁图片，来实现背景图的定位
作用：通过整合图片可以减少图片的体积；
通过图片整合来减少对服务器的请求次数，从而提高加载速度
每次都向服务器请求图片，有多少张，请求多少次。使用精灵图之后可请求一次即可

2.隐藏内容两个方法：display：none 和visibility：hidden
区别：display：none 不占位隐藏摸不着；
visibility：hidden 占着位置看不见但是摸得着

表单进阶：
1.单选框 type=“radio”
案例：

<div>
        <input type="radio" name="aa">非常满意
    </div>
<div>
        <input type="radio" name="aa">很满意
    </div>

radio出现单选框记住name作用是让这一组只能选择一个

2.下拉菜单select 和option

select name="" id="">
            <option value="">辽宁</option>
            <option value="">河北</option>
            <option value="">河南</option>

select支持的属性：size、multiple
size 支持同时显示几个例如<select size="3">
multiple 支持多选

3.文本域（支持多行输入）textarea

<textarea name="" id="" cols="30" rows="10"></textarea>

cols输入列数 row行数一般不设置，如果真的要设置高度用css设置

<textarea name="" id="" placeholder="请输入" >提前设置好的value</textarea>

placeholder 预输入提示文字；
注意：空格或者回车问题

.textarea{
            width: 500px;
            height: 500px;
            resize: vertical;
        }

resize重新设置大小
默认值both 什么方向都可以拉升
vertical只可垂直方向可以拉伸
horizon只可水平方向拉伸
none 什么方向都不可以拉伸

4.字段集fieldset

<fieldset>
        <legend>选择性别</legend>
        <input type="radio">男
        <br>
        <input type="radio">女
    </fieldset>

legend 是左上角悬浮的字可以进行说明

5.表单剩余特性
表格增强属性

 <form action="">
        <input type="属性" name="属性名">  /*不加属性名的话 提交不了 */
        <input type="submit">
    </form>

form默认是post方式提交
属性：
颜色color ： <input type="color" name="color">
邮箱email ：<input type="email" name="email">
url网址(完整地址)：<input type="url">
电话号码：<input type="tel">
滑块效果：<input type="range" name="range" min="100" max="200" value="100" step="10">可以设置范围 value设置初始值 step步长
数字类型：<input type="number" min="5" max="10" step="2" value="5" name="age">
搜索：<input type="search">
日历选择：<input type="date">
月份：<input type="month">