前端杂记

最新推荐文章于 2025-03-12 16:54:25 发布

suofeier123

最新推荐文章于 2025-03-12 16:54:25 发布

阅读量156

点赞数

CC 4.0 BY-SA版权

分类专栏： java

本文链接：https://blog.youkuaiyun.com/suofeier123/article/details/89646817

java 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨前端开发中的关键技巧，包括HTML与CSS的最佳实践、WebStorage的运用、表格布局优化及图片处理策略，旨在提升前端项目的效率与用户体验。

<html>

<head>
    <title>前端杂记</title>
    <script type="text/javascript">
    function onLoad(){
        if(typeof(Storage)=="undefined")
        {
            alert("sorry");
        }else{
            // alert("ok");
            btn_save.addEventListener("click",save);
            btn_load.addEventListener("click",load);
        }
    }
    function save(){
        localStorage.username = inputname.value;
    }
    function load() {
        show_LocalStorage.innerHTML = Date.now();
    }
    </script>
</head>

<body onload="onLoad()">
    <input type="text" id="inputname" value=""><br/>
    <div id="show_LocalStorage"></div><br/>
    <button id="btn_save">存储到localStorage</button><br/>
    <button id="btn_load">从localStorage读取数据</button><br/>
    <p></p>换行并且增加一行空行
    <br />换行
    <pre>标记可以使文字按照原始代码的排列方式进行显示</pre>
    <blockquote>标记用来表示引用文字,会让标记内的文字换行并缩进</blockquote>
    <hr />html5中不再支持hr标记中的align、size、width、color、noshade等属性，
    建议使用css语法改变分割线外观。
    <b><strong>b和strong都是将文字设置为粗体</strong></b>
    <br />
    b、i、u标签在html5中已经不建议使用,可以使用css样式来改变.
    b对应css的font-weight语法.i对应css的font-style语法.u对应text-decoration语法.
    <br />
    <sub>将文字设置为上标</sub>
    <sup>将文字设置问下标</sup>
    <ol type="1">
        <li value="3">html5不支持ul标签使用type属性设置项目符号的样式,改为使用css的list-style-type语法来定义样式</li>
        <li>li标签有value属性,用于设置编号列表的开始值,可以设置值为1、2、3等整数值，默认为1，只有搭配有序列表ol才有用</li>
    </ol>
    <a href="index.html" target="_top">a标签的href属性设置的是该链接所要链接的网址或文件路径</a>
    <br />
    a标签的target属性有_blank链接的目标网页会在新的窗口中打开、_parent链接的目标
    会在当前的窗口中打开，如果在框架网页中，则会在上一层框架打开目标网页、
    _self链接的目标会在当前运行的窗口中打开，这是默认值、_top链接的目标会在浏览器窗口打开，
    如果有框架的话，网页中的所有框架也将被删除、窗口名称 链接的目标会在有指定名称的窗口或框架中打开。
    <a href="mailto:eileen@mail.com">发邮件</a>
    <table>
        <tr>
            <td nowrap>这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话</td>
            <td>td标签中加了nowrap后，强制单元格内的文字不换行，没加的时候默认换行</td>
        </tr>
        <tr>
            <td>这是很短的话</td>
            <td>这是很短的话</td>
        </tr>
    </table>
    <hr />
    <div>td标签的colspan属性用于合并列，rowspan用于合并行</div>
    <div>fieldset 元素可将表单内的相关元素分组</div>
    <div>图片建议静态用jpeg，png，动态用gif，不要用bmp，图片分辨率为72dpi就足够了，图片大小不要超过30kb，大图片建议分隔成小图片拼接处理</div>
    <div>web Storage与cookie的区别：
        <br />
        存储大小方面：web Storage容量由客户端程序（浏览器）决定，1MB-5MB大小左右。cookie只允许每个网站在客户端存储4KB的数据。
        <br />
        安全性：cookie每次处理网页的请求都会连带发送cookie值给服务器（server），使得安全性降低，而web Storage纯粹运行于客户端。
        <br />
        存储数据：两者一样，都是以一组key-value对应的组合保存数据。
        <br />
        web Storage提供两种方式将数据保存在客户端：一种是localStorage，另一种是sessionStorage，两者主要差异在于生命周期和有效范围。
        <br />
        localStorage是执行删除命令才会消失，同一网站的网页可以跨窗口和分页。sessionStorage是浏览器窗口或分页（tab）关闭就会消失，仅
        <br />
        对当前浏览器窗口或分页有效。
    </div>
</body>

</html>