阅读HTML实践前五章 归纳总结

一、 HTML5常用的交互元素

1、内容交互元素
1.1、details元素----------用于说明文档或某个细节信息的作用,常与元素配合使用
          details元素有显示脚本注释作用,但一般默认为隐藏,因此若想显示脚注,需附加属性open="open"

                                                                                         配合
1.2、summary元素-------+
=====>说明文档的标题/
说明文档的详细信息
          summary元素包含在details元素中,是details元素的子元素(在摆放位置时尽量放在第一个)

2菜单交互元素
2.1、menu元素-----------一般与
  • 元素结合使用,用来定义一个列表式的菜单
  •          在使用menu元素定义菜单列表时,通常使用元素来定义菜单的框架,框架中的内容使用
  • 元素来进行构造,以形成列表形    
  •          状.    [ 注: 菜单还可以嵌套在别的菜单中,形成带层次的菜单结构]

    2.2、command元素------定义各种类型的命令按钮,利用该标记的"url"属性可以添加图片,并且实现图片按钮效果,"type"设置按钮类型
             command元素的disabled属性,通过JavaScript控制,可以实现单击禁用功能,防止用户反复单击或提示用户按钮已经提交成功.

    3、状态交互元素
    3.1、progress元素--------用来表示页面中的某个任务完成的进度

    3.2、meter元素-----------用于表示在一定范围内的值,比如投票中,候选人各占比例情况及考试分数等
            meter元素仅是帮助浏览器识别HTML中的数量,而不对该数量做任何的格式修改


    二、HTML5重要元素

    1、html根元素
        1.1 manifest----------URL值----------------------------------------该URL指向描述文档缓存信息的地址
        1.2 xmlns(非必须)----http://www.w3.org/1999/xhtml----------设置xml  namespace的属性

    2、文档元素
       
        -----------设置文档的标题内容</strong></span> </div> <div style="line-height:24px;"> <span><strong>    <base>----------设置页面中URL为空时的值----------href(当页面的URL为空时的链接地址) _target(打开页面链接的方式)</strong></span> </div> <div style="line-height:24px;"> <span><strong>    <link>-----------设置导入页面中的样式文件</strong></span> </div> <div style="line-height:24px;"> <span><strong>    <meta>---------设置页面的文档信息(如针对搜索引擎的关键字)</strong></span> </div> <div style="line-height:24px;"> <span><strong>    <style>----------定义HTML文档中的样式信息</strong></span> </div> <div style="line-height:24px;"> <span><strong>    <script>---------定义客户端脚本代码或文件</strong></span> </div> <div> <div> <span style="line-height:1.5;">注 : 在一个页面文档中,<base>和<title>文件只能用一次,并且必须包含在<head>元素中,而其他元素可以重复多次使用.<base>元素应</span> </div> <div> <span style="line-height:1.5;">      该</span> <span style="line-height:1.5;">排在其他元素之前,以便于其他元素能够调用<base>元素的属性.</span> </div> <div> <strong style="font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">3<strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、脚本</span></strong></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">   <span> </span><script>---------包含脚本语言,也可以通过src属性导入;同时选择元素的必选属性type和MIME类型</strong> </div> <div> <strong style="line-height:1.5;">     <noscript>------一个检测工具,即浏览器如果支持<script>脚本,则不会显示<noscript>中的内容.</strong> </div> <div> <strong style="line-height:1.5;"><br></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">4<strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、节点</span></strong></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">   </strong> <span style="line-height:1.5;"><strong><span> </span><section></strong></span> </div> <div> <strong style="font-size:14px;line-height:1.5;">   <span> </span><nav></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">   <span> </span><hgroup></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">     ... ...</strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">5<strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、分组内容</span></strong></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">   <span> </span><ul>-------------定义页面中的<span>无序</span>列表</strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">   <span> </span><ol>-------------定义页面中的<span>有序</span>列表</strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">   <span> </span><dl>-------------定义页面创建术语列表</strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">6<strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、文本层次语义</span></strong></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">   <span> </span><time>---------用于定义时间或日期</strong> </div> <div> <strong style="line-height:1.5;">     <mark>--------在文本中高亮显示某个或某几个字符,旨在引起用户注意</strong> </div> <div> <strong style="line-height:1.5;">               <strong>是作者对文档中某段文字的重要性进行的强调</strong> </div> <div> <strong style="line-height:1.5;">                     <em>是作者为了突出文章的重点而进行的设置</strong> </div> <div> <strong style="line-height:1.5;">     <cite>----------可以创建一个引用标记,用于文档中参考文献的引用说明</strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">7<strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、嵌入内容</span></strong></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">     <img>---------是在页面中导入图像</strong> </div> <div> <strong style="line-height:1.5;">      <iframe>------用于在页面中创建包含另一文档的框架</strong> </div> <div> <strong style="line-height:1.5;">      <object>-------用于在界面中嵌入一个对象,这个对象包括视频,音频,Flash等多媒体文件</strong> </div> <div> <strong style="line-height:1.5;"><br></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">8<strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、公共属性</span></strong></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;">     draggable属性------------用于设置是否允许用户拖动元素</strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;">     hidden属性----------------用于元素是否显示</strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;">     spellcheck属性-------------用于检测文本框或输入框中的拼音或语法是否正确</strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;">     contenteditable属性-------直接对显示在页面中的文字进行编辑</strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;">三、HTML5——表单</strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;">1<strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、input元素i新增类型</span></strong></strong></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">     e</span></strong></strong>mail邮件类型</strong> </div> </div> <div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-size:14px;">      </span><span>url地址类型</span></strong></strong></strong> </div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-size:14px;">      </span><span>number数字类型<span> </span></span><span style="font-size:14px;">   </span></strong></strong></strong> </div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-size:14px;">      </span><span>range数字滑动条</span></strong></strong></strong> </div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span>      date日期类型</span></strong></strong></strong> </div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span>      search搜索类型</span></strong></strong></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><br></span></strong></strong></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">2<strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、input元素新增的公用属性</span></strong></strong></span></strong></strong></strong> </div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-size:14px;">      </span><span>autofocus----------页面加载成功后,设置对应的元素自动获取焦点</span></strong></strong></span></strong></strong></strong> </div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-size:14px;">      </span><span>pattern-------------使用正则表达式验证<input>元素的内容</span></strong></strong></span></strong></strong></strong> </div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-size:14px;">      </span><span>placeholder--------设置文本输入框的默认内容 (只支持纯文本)</span></strong></strong></span></strong></strong></strong> </div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span>      required------------是否检测文本输入框中的内容为空</span></strong></strong></span></strong></strong></strong> </div> <div>       <span> </span> <strong>novalidate---------是否验证文本输入框中的内容</strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><br></span></strong></strong></span></strong></strong></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">3<strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、新增表单元素</span></strong></strong></span></strong></strong></span></strong></strong></strong> </div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-size:14px;">      </span><span>datalist-------------辅助表单中文本框的输入 (</span><span>本身是隐藏的,与表单文本框的"list"属性绑定==>list属性值设定为datalist的"ID"</span><span>)</span></strong></strong></span></strong></strong></span></strong></strong></strong> </div> <div> <strong style="line-height:1.5;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span>      output--------------在页面中显示各种不同类型的表单元素内容</span></strong></strong></span></strong></strong></span></strong></strong></strong> </div> <div> <strong>      keygen--------------用于生成页面的密钥 (<span>在表单提交时,该元素生成一对密钥,私密钥保存在客户端,公密钥保存在服务器端,公密钥<span> </span></span>   </strong> </div> <div> <strong>                                                                         <span> </span><span>用于客户端证书的验证</span>)</strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><br></span></strong></strong></span></strong></strong></span></strong></strong></strong> </div> <div> <strong style="font-size:14px;line-height:1.5;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><font><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">4<strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、表单新增的验证方法和属性</span></strong></strong></span></strong></strong></span></strong></strong></font></strong></strong></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;">   <span> </span> checkValidity-------每个元素都可以调用公用方法checkValidity(),核实本身是否与验证条件匹配,如果一致,返回true,否则flase;</strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;">     setCustomValidity-修改提示信息,为了与系统出错信息的格式一致</strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;">     noValidity-----------用于取消表单的全部元素的验证</strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;">四、HTML5——文件</strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;">1<strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">、选择文件</span></strong></strong></strong></strong> </div> <div> <strong style="color:rgb(112,48,160);line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;">1<strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span>、1  选择单个文件</span></strong></strong></strong><br></span></strong></strong></strong></strong> </div> <div> <strong style="color:rgb(112,48,160);line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><br></span></strong></strong></strong></span></strong></strong></strong></strong> </div> <div> <strong style="color:rgb(112,48,160);line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;">2<strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span>、1  选择多个文件</span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong> <span><span><br></span></span> </div> <div> <span style="color:rgb(112,48,160);line-height:1.5;"><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="font-weight:bold;color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-weight:bold;font-style:normal;text-align:left;"><span>     <span> </span><span style="font-weight:normal;">    通过添加"Multiple" 属性,将该属性设置为true,可实现多文件上传   </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </div> <div> <span style="color:rgb(112,48,160);line-height:1.5;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span>          当多个文件被选中时,在上传文件元素中,将会产生一个"FileList"对象,用来装载各文件基本信息</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </div> <div> <strong style="color:rgb(112,48,160);line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><br></span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong> </div> <div> <strong style="color:rgb(112,48,160);line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;">3<strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span>、1  使用Blob接口获取文件的类型云大小</span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong> <span><span><br></span></span> </div> <div> <span style="color:rgb(112,48,160);line-height:1.5;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong>         </strong><span> </span>Blob表示二进制数据块.该接口提供一个slice方法,通过该方法可以访问指定长度与类型的字节内部数据块</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </div> <div> <span style="line-height:1.5;">并且该接口提供两个属性 : size------表示返回数据块的大小</span> </div> <div> <span style="line-height:1.5;">                                         type------表示返回数据块的MIME类型,如果不确定,则返回一个空字符串</span> </div> <div> <br> </div> <div> <strong style="color:rgb(112,48,160);line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span>4、1  通过类型过滤选择的文件</span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong> <span><span><br></span></span> </div> <div> <span style="color:rgb(112,48,160);line-height:1.5;"><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><font><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="font-weight:bold;color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="font-weight:bold;color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="font-weight:bold;color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="font-weight:bold;color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-weight:bold;font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-weight:bold;font-style:normal;text-align:left;"><span>          具体流程 :<span> </span><span style="font-weight:normal;">当选择上传文件后,遍历每一个"file"对象,获取该对象的类型,并将该类型与设置的过滤类型进行匹配;如果不符合,则提示</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></font></span></span></span></span> </div> <div> <span style="color:rgb(112,48,160);line-height:1.5;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><font><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><font><span style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><font><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span>                           上传文件类型错误或拒绝上传,从而实现在选择文件时过滤掉不需要上传的文件.</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></font></span></span></span></span></font></span></span></span></font></span></span></span></span> </div> <div> <strong style="color:rgb(112,48,160);line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><br></span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span>5、1  通过accept属性过滤选择文件的类型</span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong><span style="font-size:14px;"><span style="font-size:14px;"><br></span></span></strong> </div> <div> <span style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><span style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong>         <span> </span></strong>设置accept属性为过滤文件的类型,在打开窗口选择文件时,默认的文件类型就是所设置的类型</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(112,48,160);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><br></span></strong></strong></strong></span></strong></strong></strong></strong></span></strong></strong></strong></span></strong></strong></strong></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">2、使用FileReader接口读取文件</span></strong></strong></strong><br></span></strong></strong></strong></strong> </div> <div> <span style="color:rgb(112,48,160);line-height:1.5;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-size:14px;font-weight:bold;">       </span><span>readAsDataURL----图片预览的实质是 : 图片文件被读取后,展示在页面中的过程</span></span></span></span></span></span></span></span></span> </div> <div> <span style="color:rgb(112,48,160);line-height:1.5;"><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><span style="color:rgb(0,0,0);font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span style="font-family:'微软雅黑';font-style:normal;text-align:left;"><span><br></span></span></span></span></span></span></span></span></span> </div> <div> <strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">3、使用DataTransfer对象拖放上传图片文件</span></strong></strong></strong> <br> </div> <div> <strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><br></span></strong></strong></strong> </div> <div> <strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;"><strong style="color:rgb(0,0,0);font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><strong style="font-family:'微软雅黑';font-size:14px;font-style:normal;text-align:left;"><span style="font-size:14px;">4、文件读取时的错误与异常</span></strong></strong></strong></span></strong></strong></strong> </div> <div> <span style="line-height:1.5;"><strong>发生错误和异常的条件</strong></span> </div> <div> <strong style="line-height:1.5;">(1)访问某个文件的过程中,该文件被移动或被移除及被其他应用程序并发式修改;</strong> </div> <div> <strong style="line-height:1.5;">(2)由于权限,无法读取文件的数据信息;</strong> </div> <div> <strong style="line-height:1.5;">(3)文件出于安全因素的考虑,在读取文件时返回一个无效的数据信息;</strong> </div> <div> <strong style="line-height:1.5;">(4)读取文件太大,超出URL网址的限制,将无法返回一个有效的数据结构信息;</strong> </div> <div> <strong style="line-height:1.5;">(5)在读取文件的过程中,,应用程序本身触发了中止读取文件abort()事件;</strong> </div> <div> <strong style="line-height:1.5;">使用FileError接口------该接口主要用于异步报告错误,</strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong>五、HTML5——视频和音频</strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong><br></strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong>六、HTML5——绘图基础</strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong><br></strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong>七、HTML5——数据存储</strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong><br></strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong>八、HTML5——离线应用</strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong><br></strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong>九、HTML5——其他应用型API</strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong><br></strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong>十、HTML5——元素的拖放</strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong><br></strong></span></span> </div> <div> <span style="font-size:14px;color:#7030a0;"><span style="line-height:24px;"><strong><br></strong></span></span> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <div> <strong style="color:rgb(112,48,160);font-size:14px;line-height:1.5;"><br></strong> </div> <br> </div> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1280682209086291968"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端开发)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1900993693742067712.htm" title="前端开发:Web蜜罐详解" target="_blank">前端开发:Web蜜罐详解</a> <span class="text-muted">三掌柜666</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>前言在当今数字化时代,网络安全威胁日益复杂,攻击手段层出不穷。对于前端开发人员来说,不仅要关注代码的性能和用户体验,还需要具备应对安全威胁的能力。在网络安全领域,Web蜜罐作为一种主动防御技术,正逐渐受到关注,它通过模拟真实的Web应用程序,吸引攻击者并记录其行为,为安全专家提供了宝贵的情报。对于前端开发人员来说,了解Web蜜罐的工作原理、特点和应用场景具有重要意义。那么本文就来探讨Web蜜罐的工</div> </li> <li><a href="/article/1900993189330874368.htm" title="Angular 16 Standalone 项目创建指南" target="_blank">Angular 16 Standalone 项目创建指南</a> <span class="text-muted">t0_54program</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%89%8B%E5%86%8C/1.htm">编程问题解决手册</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a> <div>在前端开发领域,Angular一直是一个强有力的框架,尤其是在处理复杂的单页应用时。随着Angular16的发布,引入了Standalone组件的概念,这为开发者提供了一种新的方式来组织和管理组件。今天,我将详细介绍如何从头开始创建一个基于Angular16的Standalone项目,并解决一些常见的问题。环境准备首先,确保你的开发环境已安装Node.js和npm(NodePackageManag</div> </li> <li><a href="/article/1900949688119521280.htm" title="Sass:深度解析与实战应用" target="_blank">Sass:深度解析与实战应用</a> <span class="text-muted">li_Michael_li</span> <a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>在前端开发的浪潮中,CSS预处理器因其强大的功能和灵活性而备受推崇。其中,Sass(SyntacticallyAwesomeStylesheets)无疑是这些预处理器中的佼佼者。本文将深入解析Sass的核心概念、语法特性以及实战应用,并通过代码样例展示其强大的功能。Sass是什么?Sass(SyntacticallyAwesomeStylesheets)是一种CSS预处理器,它允许我们使用变量、嵌</div> </li> <li><a href="/article/1900936697814773760.htm" title="【CSS 面经】如何画一条 0.5px 的线 ️" target="_blank">【CSS 面经】如何画一条 0.5px 的线 ️</a> <span class="text-muted">Peter-Lu</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/CSS%E9%9D%A2%E7%BB%8F/1.htm">CSS面经</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>文章目录一、为什么浏览器中0.5px难以实现?二、实现0.5px线条的几种方法1.使用`transform:scale()`实现缩放2.使用`border`和`transform`结合3.使用`box-shadow`实现0.5px4.使用伪元素`::after`结合`transform`三、如何选择合适的方法?在前端开发中,我们经常会遇到这样一个问题:如何画一条0.5px的线?由于像素是浏览器渲染</div> </li> <li><a href="/article/1900916653416312832.htm" title="HTML5前端页面设计,HTML5网页前端设计" target="_blank">HTML5前端页面设计,HTML5网页前端设计</a> <span class="text-muted">设计师马丁</span> <a class="tag" taget="_blank" href="/search/HTML5%E5%89%8D%E7%AB%AF%E9%A1%B5%E9%9D%A2%E8%AE%BE%E8%AE%A1/1.htm">HTML5前端页面设计</a> <div>HTML5网页前端设计编辑锁定讨论上传视频《HTML5网页前端设计》是2017年6月清华大学出版社出版的图书,作者是周文洁。书名HTML5网页前端设计作者周文洁ISBN9787302463597定价59.50元出版社清华大学出版社出版时间2017年6月HTML5网页前端设计内容简介编辑本书是一本从零开始学习的Web前端开发教材,无须额外的基础。全书以项目驱动为宗旨,详细介绍了HTML5、CSS3与</div> </li> <li><a href="/article/1900915770511126528.htm" title="AI人工智能对前端的冲击?" target="_blank">AI人工智能对前端的冲击?</a> <span class="text-muted">理想不理想v</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>‌AI人工智能对前端开发的冲击主要体现在以下几个方面‌:‌代码生成与自动化‌:AI工具如GPT-4和GitHubCopilot能够自动生成高质量的前端代码,从简单的组件到复杂的应用程序,这不仅提高了开发效率,还降低了人为错误的可能性。自动化代码生成工具可以显著减少开发者编写重复性代码的时间,使他们能够专注于创新和解决复杂问题‌。‌跨平台开发支持‌:AI可以帮助生成适用于不同平台的代码,简化跨平台开</div> </li> <li><a href="/article/1900909214260326400.htm" title="数字马力ai面试题" target="_blank">数字马力ai面试题</a> <span class="text-muted">泠波</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>有关前端工程化的工具前端工程化是指将前端开发过程中的各种任务自动化、流程化、标准化,以提高开发效率、代码质量和可维护性。在前端工程化中,通常会用到一些工具来辅助完成各种任务,比如构建、测试、部署等。以下是一些常用的前端工程化工具:1.**构建工具(BuildTools)**-**Webpack**:是一个非常流行的模块打包器,可以处理各种类型的文件,并且支持插件扩展。-**Rollup**:另一个</div> </li> <li><a href="/article/1900825752740360192.htm" title="深入解析React 18核心特性:构建未来级Web应用的全面指南" target="_blank">深入解析React 18核心特性:构建未来级Web应用的全面指南</a> <span class="text-muted">斯~内克</span> <a class="tag" taget="_blank" href="/search/react%E7%9F%A5%E8%AF%86%E7%82%B9/1.htm">react知识点</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>一、React18的里程碑意义React18作为近年来最具革命性的版本更新,标志着前端开发正式进入并发渲染时代。这个版本不仅带来了底层架构的革新,更重新定义了现代Web应用的性能标准与开发范式。根据npm官方统计,React18发布首周下载量突破1800万次,GitHub星标数新增3.4万,充分展现了开发者社区对其技术价值的认可。二、架构革命:并发模式深度解析2.1并发渲染原理//传统同步渲染模式</div> </li> <li><a href="/article/1900816035892752384.htm" title="深入解析 React 最新特性:革新、应用与最佳实践" target="_blank">深入解析 React 最新特性:革新、应用与最佳实践</a> <span class="text-muted">赵大仁</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ReactNative/1.htm">ReactNative</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>深入解析React最新特性:革新、应用与最佳实践1.引言React作为前端开发的核心技术之一,近年来不断推出新的API和优化机制,从ConcurrentRendering(并发模式)到ServerComponents(服务器组件),都在不断提升开发体验和应用性能。本文将深入解析React最新特性,包括React18并发模式、useTransition、useDeferredValue、ReactS</div> </li> <li><a href="/article/1900767983433740288.htm" title="HarmonyOS 实战开发 —— 基于HMRouter的路由跳转方案" target="_blank">HarmonyOS 实战开发 —— 基于HMRouter的路由跳转方案</a> <span class="text-muted">CTrup</span> <a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/HarmonyOS/1.htm">HarmonyOS</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E4%BB%B6%E5%8C%96/1.htm">组件化</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/ArkUI/1.htm">ArkUI</a><a class="tag" taget="_blank" href="/search/HMRouter/1.htm">HMRouter</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E4%BB%B6%E5%8C%96%E8%B7%AF%E7%94%B1/1.htm">组件化路由</a> <div>往期笔录记录:鸿蒙(HarmonyOS)北向开发知识点记录~鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景?嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~对于大前端开发来说,转鸿蒙开发究竟是福还是祸?鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?记录一场鸿蒙开发岗位面试经历~持续更新中……HMRouter简介HMRouter作为Har</div> </li> <li><a href="/article/1900767224105332736.htm" title="web前端开发工程师工作的岗位职责(合集)" target="_blank">web前端开发工程师工作的岗位职责(合集)</a> <span class="text-muted">极客11</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E4%B8%8E%E6%B1%82%E8%81%8C/1.htm">面试与求职</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>web前端开发工程师工作的岗位职责1职责:1、根据设计图进行前端页面开发并设计编写业务交互脚本2、优化前端页面,保证良好的用户体验以及不同浏览器的兼容性3、web前沿技术研究和新技术调研,将主流的特效应用到业务场景中4、配合后台开发人员实现网站界面和功能,为产品后期运营提供升级、维护等技术支持。5、工作积极主动,善于沟通,协调项目与项目之间的工作安排与配合,确保开发工作顺利进行。6、具备较强的学习</div> </li> <li><a href="/article/1900731923349696512.htm" title="我的创作纪念日" target="_blank">我的创作纪念日</a> <span class="text-muted">我爱学习_zwj</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a> <div>机缘在前端开发的广袤天地中,我的创作之旅始于一次充满挑战与机遇的契机。初涉前端领域时,面对复杂多变的项目需求和飞速更新的技术栈,我深刻感受到知识的浩瀚无边,也意识到自身能力的不足。在参与一个大型项目时,我遭遇了许多棘手难题,像页面加载速度的优化、不同浏览器兼容性的处理等。那时,我便产生了一个想法:把在实战中积累的经验以及过去学习的知识记录下来,既能作为自己成长的见证,也能与同行交流分享,携手攻克技</div> </li> <li><a href="/article/1900719683020058624.htm" title="Vue.js的内联样式绑定:style的多种用法" target="_blank">Vue.js的内联样式绑定:style的多种用法</a> <span class="text-muted">阿珊和她的猫</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录引言`style`属性的基本概念`style`属性的用法1.绑定对象2.</div> </li> <li><a href="/article/1900717416204267520.htm" title="从前端视角理解消息队列:核心问题与实战指南" target="_blank">从前端视角理解消息队列:核心问题与实战指南</a> <span class="text-muted">秋水为渡</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>消息队列(MessageQueue)是现代分布式系统的核心组件之一,它在前后端协作、系统解耦、流量削峰等场景中发挥着重要作用。本文从前端开发者视角出发,解析消息队列的关键问题,并结合实际场景给出解决方案。一、为什么要使用消息队列?1.前端常见场景异步任务处理:用户行为日志上报、实时通知推送流量削峰:应对秒杀活动、大文件上传等瞬时高并发场景系统解耦:前端与后端服务、第三方服务之间的松耦合通信2.前端</div> </li> <li><a href="/article/1900662653718687744.htm" title="前端工具链:Gulp和Grunt有什么区别?如何使用它们进行自动化构建?" target="_blank">前端工具链:Gulp和Grunt有什么区别?如何使用它们进行自动化构建?</a> <span class="text-muted">破碎的天堂鸟</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%95%99%E7%A8%8B/1.htm">学习教程</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/gulp/1.htm">gulp</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a> <div>Gulp和Grunt是前端开发中常用的自动化构建工具,它们都基于Node.js,但它们在设计理念、使用方式和性能表现上存在显著差异。以下将详细说明它们的区别以及如何使用它们进行自动化构建。Gulp与Grunt的区别1.设计理念Grunt:基于配置(Configuration-based)。Grunt通过定义任务配置文件(如Gruntfile.js)来完成任务,强调的是“配置优于代码”,即通过配置文</div> </li> <li><a href="/article/1900628203911835648.htm" title="Vue Markdown 编辑器全攻略:轻松集成 MD 编辑器到前端项目" target="_blank">Vue Markdown 编辑器全攻略:轻松集成 MD 编辑器到前端项目</a> <span class="text-muted">算法探险家</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>VueMarkdown编辑器全攻略:轻松集成MD编辑器到前端项目1.为什么选择Markdown编辑器?2.安装v-md-editor3.全局配置与集成4.在组件中使用Markdown编辑器5.高级配置与自定义功能6.总结在现代前端开发中,Markdown编辑器被广泛应用于博客、内容管理系统、在线文档等场景。本文将以Vue3为例,详细介绍如何使用v-md-editor库在项目中集成Markdown编</div> </li> <li><a href="/article/1900618621839798272.htm" title="Sass (Scss) 与 Less 的区别与选择" target="_blank">Sass (Scss) 与 Less 的区别与选择</a> <span class="text-muted">智能编织者</span> <a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/scss/1.htm">scss</a><a class="tag" taget="_blank" href="/search/less/1.htm">less</a> <div>Sass与Less的区别与选择1.语法差异2.特性与支持3.兼容性4.选择建议在前端开发中,CSS预处理器如Sass(SyntacticallyAwesomeStylesheets)和Less被广泛使用,它们通过引入变量、嵌套规则、混合、函数等特性,使CSS的开发过程更加高效和灵活。Sass和Less作为两大主流CSS预处理器,各自具有独特的优点和特性。本文将详细探讨Sass(特别是其语法扩展Sc</div> </li> <li><a href="/article/1900586092499890176.htm" title="React 和 Vue _使用区别" target="_blank">React 和 Vue _使用区别</a> <span class="text-muted">开心小老虎</span> <a class="tag" taget="_blank" href="/search/react%E7%9F%A5%E8%AF%86%E7%82%B9%2B%E7%BB%84%E4%BB%B6/1.htm">react知识点+组件</a><a class="tag" taget="_blank" href="/search/vue3%E7%9F%A5%E8%AF%86%E7%82%B9%2B%E7%BB%84%E4%BB%B6/1.htm">vue3知识点+组件</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9/1.htm">前端知识点</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录一、框架介绍1.Vue2.React二、框架结构1.创建应用2.框架结构三、使用区别1.单页面组成2.样式3.显示响应式数据4.响应式html标签属性5.控制元素显隐6.条件渲染7.渲染列表react和vue是目前前端比较流行的两大框架,前端程序员应该将两种框架都掌握,本文总结一些基本知识点的使用区别。一、框架介绍1.VueVue是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。</div> </li> <li><a href="/article/1900508759512379392.htm" title="Web 开发的“三件套”" target="_blank">Web 开发的“三件套”</a> <span class="text-muted">zhangpeng455547940</span> <a class="tag" taget="_blank" href="/search/Web%E5%BC%80%E5%8F%91/1.htm">Web开发</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>HTML:定义内容结构。CSS:控制样式布局。JavaScript:实现动态行为和复杂逻辑。JavaScript应用场景前端开发:操作DOM、处理用户事件、实现动画等。后端开发:通过Node.js构建服务器端应用。跨平台开发:Electron(桌面应用)、ReactNative(移动端)等。</div> </li> <li><a href="/article/1900468020422176768.htm" title="HTML5拼图游戏开发经验分享" target="_blank">HTML5拼图游戏开发经验分享</a> <span class="text-muted">木木黄木木</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>HTML5拼图游戏开发经验分享这里写目录标题HTML5拼图游戏开发经验分享前言项目架构1.文件结构2.核心功能模块技术要点解析1.响应式布局2.图片处理3.拖拽交互4.动画效果性能优化开发心得项目亮点总结源码分享写在最后前言在Web前端开发领域,通过实战项目来提升编程技能是最有效的学习方式之一。今天我要分享一个HTML5拼图游戏的开发经验,这个项目涵盖了现代前端开发的多个重要概念,包括响应式设计、</div> </li> <li><a href="/article/1900434224117248000.htm" title="Sass (Scss) 与 Less 的区别与选择" target="_blank">Sass (Scss) 与 Less 的区别与选择</a> <span class="text-muted">王强你强</span> <a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/scss/1.htm">scss</a><a class="tag" taget="_blank" href="/search/less/1.htm">less</a> <div>在前端开发中,CSS预处理器如Sass(SyntacticallyAwesomeStylesheets)和Less被广泛使用,它们通过引入变量、嵌套规则、混合、函数等特性,使CSS的开发过程更加高效和灵活。Sass和Less作为两大主流CSS预处理器,各自具有独特的优点和特性。本文将详细探讨Sass(特别是其语法扩展Scss)与Less之间的区别,并提供选择建议。1.语法差异Sass最初是使用缩进</div> </li> <li><a href="/article/1900348863470956544.htm" title="鸿蒙(HarmonyOS)应用开发实战——数据库版本升级案例" target="_blank">鸿蒙(HarmonyOS)应用开发实战——数据库版本升级案例</a> <span class="text-muted">CTrup</span> <a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/HarmonyOS/1.htm">HarmonyOS</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/%E8%A3%85%E9%A5%B0%E5%99%A8%E6%A8%A1%E5%BC%8F/1.htm">装饰器模式</a><a class="tag" taget="_blank" href="/search/ArkUI/1.htm">ArkUI</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>往期推文全新看点学鸿蒙开发的优劣势,你清楚吗?建议你了解一下!鸿蒙(HarmonyOS)北向开发知识点记录~鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景?嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~对于大前端开发来说,转鸿蒙开发究竟是福还是祸?鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?记录一场鸿蒙开发岗位面试经历~持续更新中…</div> </li> <li><a href="/article/1900233133979136000.htm" title="封装AJAX(带详细注释)" target="_blank">封装AJAX(带详细注释)</a> <span class="text-muted">Rverdoser</span> <a class="tag" taget="_blank" href="/search/okhttp/1.htm">okhttp</a> <div>封装AJAX请求是前端开发中常见的需求,可以帮助我们简化代码,提高可重用性。下面我将通过JavaScript(使用XMLHttpRequest对象)和现代JavaScript(使用FetchAPI)两种方式来展示如何封装AJAX请求。1.使用XMLHttpRequest封装AJAXfunctionajax(method,url,data,callback){//创建XMLHttpRequest对象</div> </li> <li><a href="/article/1900228348102111232.htm" title="大厂前端实战之如何实现精确的setInterval" target="_blank">大厂前端实战之如何实现精确的setInterval</a> <span class="text-muted">代码简单说</span> <a class="tag" taget="_blank" href="/search/2025%E5%BC%80%E5%8F%91%E5%BF%85%E5%A4%87/1.htm">2025开发必备</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/setInterval/1.htm">setInterval</a><a class="tag" taget="_blank" href="/search/%E7%B2%BE%E5%87%86setInterval/1.htm">精准setInterval</a><a class="tag" taget="_blank" href="/search/js%E7%B2%BE%E5%87%86%E8%AE%A1%E6%97%B6%E5%99%A8/1.htm">js精准计时器</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFsetInterval/1.htm">前端setInterval</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E6%97%B6%E5%99%A8%E7%B2%BE%E7%A1%AE/1.htm">计时器精确</a> <div>大厂前端实战之如何实现精确的setInterval前言在大厂的前端开发中,setInterval是一个非常常见的定时器方法。它常用于定时执行某些任务,比如轮播图、定时刷新数据等。然而,setInterval在一些高频率或复杂应用场景下,可能会出现误差,导致任务执行不精确,甚至错过预定的执行时间。这是因为setInterval依赖于浏览器的事件循环机制,而事件循环有时会受到其他任务(如渲染、网络请求</div> </li> <li><a href="/article/1900226371897061376.htm" title="深度掌握 ReactJS 高级概念:前端开发者必备" target="_blank">深度掌握 ReactJS 高级概念:前端开发者必备</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a> <div>ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读这篇文章汇总了ReactJS中值得深入研究的高级概念。读完后,不仅在前端面试中能更胸有成竹,还能自行开发一个类似ReactJS的UI库。目录Rendering的含义与过程Re-rendering发生的机制及原因VirtualDOM的原理Reconciliation算法的运行方式ReactJS的性能优化方案1</div> </li> <li><a href="/article/1900221037925167104.htm" title="React 如何实现组件懒加载以及懒加载的底层机制" target="_blank">React 如何实现组件懒加载以及懒加载的底层机制</a> <span class="text-muted">乐闻x</span> <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E4%BD%B3%E5%AD%A6%E4%B9%A0%E6%89%8B%E5%86%8C/1.htm">最佳学习手册</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>前言在现代前端开发中,性能优化始终是一个核心课题。React作为当下流行的前端库之一,提供了一些非常有用的工具和技术来提升应用的性能,其中懒加载(LazyLoading)就是一项不可忽视的重要技术。通过懒加载,我们可以有效地减少初始页面加载时间,提高应用的响应速度,从而显著改善用户体验。那么,React的懒加载是如何实现的呢?它的底层原理和运行流程又是什么?本文将通过通俗易懂的方式,带你深入解析R</div> </li> <li><a href="/article/1900219904074772480.htm" title="【harmonyOS NEXT 下的前端开发者】WAV音频编码实现" target="_blank">【harmonyOS NEXT 下的前端开发者】WAV音频编码实现</a> <span class="text-muted">九酒6</span> <a class="tag" taget="_blank" href="/search/HarmonyOS/1.htm">HarmonyOS</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a> <div>继6年前使用js实现的mp4封装之后,再次回顾编解码的知识是在23年8月接收到的私信,让补充下插件里的音频部分。被迫回去翻了一下6年前的代码,然而发现当初提交的也没有音频的部分,而由于时间久远,早已忘记的差不多了,没能力赚这笔外快了。视频编码部分还是因为有保留的代码支持,才能捡回来一些。背景原文js实现封装MP4格式文件并下载中,因为近几年的技术更新与变化,一些重要的资料网站也被关停了。然而,我现</div> </li> <li><a href="/article/1900135561562222592.htm" title="vue3+ts+vite+pinia+element-plus搭建一个项目" target="_blank">vue3+ts+vite+pinia+element-plus搭建一个项目</a> <span class="text-muted">貂蝉空大</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/axios/1.htm">axios</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/vite/1.htm">vite</a><a class="tag" taget="_blank" href="/search/pinia/1.htm">pinia</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>创建一个基于Vue3、TypeScript、Vite、Pinia和ElementPlus的项目是一个现代化的前端开发流程,这种配置通常用于构建轻量级、快速和模块化的单页应用程序(SPA)。下面是一个简单的介绍:1.Vue3是Vue.js的最新主要版本,提供了CompositionAPI、更好的TypeScript支持、自定义渲染器等功能。2.TypeScript是JavaScript的一个超集,添</div> </li> <li><a href="/article/1900130515160199168.htm" title="纯前端全文检索的两种实现方案:ElasticLunr.js 和 libsearch" target="_blank">纯前端全文检索的两种实现方案:ElasticLunr.js 和 libsearch</a> <span class="text-muted">传而习乎</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%85%A8%E6%96%87%E6%A3%80%E7%B4%A2/1.htm">全文检索</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>纯前端全文检索的两种实现方案:ElasticLunr.js和libsearch在前端开发中,实现全文检索功能可以显著提升用户体验,尤其是在处理大量文本数据时。本文将介绍两种流行的纯前端全文检索方案:ElasticLunr.js和libsearch。这两种方案各有特点,适用于不同的场景。1.使用ElasticLunr.js实现纯前端全文检索方案特点基于Lunr.js的扩展:支持字段搜索、查询时加权和</div> </li> <li><a href="/article/1900072137335566336.htm" title="# 2025年前端开发趋势:全栈化、AI化与跨端融合" target="_blank"># 2025年前端开发趋势:全栈化、AI化与跨端融合</a> <span class="text-muted">沈大大520</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%9C%80%E6%96%B0%E6%8A%80%E6%9C%AF%E5%8A%A8%E6%80%81/1.htm">前端最新技术动态</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>本文深度分析2025年前端开发的技术趋势、岗位变革和能力要求,助你提前布局职业发展。作者:沈大大更新时间:2025-03-10一、技术栈演进1.1全栈化趋势//全栈应用示例import{createApp}from'vue'import{createServer}from'nitro'import{PrismaClient}from'@prisma/client'//前端应用constapp=cr</div> </li> <li><a href="/article/12.htm" title="eclipse maven" target="_blank">eclipse maven</a> <span class="text-muted">IXHONG</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>eclipse中使用maven插件的时候,运行run as maven build的时候报错 -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match.   可以设一个环境变量M2_HOME指</div> </li> <li><a href="/article/139.htm" title="timer cancel方法的一个小实例" target="_blank">timer cancel方法的一个小实例</a> <span class="text-muted">alleni123</span> <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a> <div>package com.lj.timer; import java.util.Date; import java.util.Timer; import java.util.TimerTask; public class MyTimer extends TimerTask { private int a; private Timer timer; pub</div> </li> <li><a href="/article/266.htm" title="MySQL数据库在Linux下的安装" target="_blank">MySQL数据库在Linux下的安装</a> <span class="text-muted">ducklsl</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1.建好一个专门放置MySQL的目录 /mysql/db数据库目录 /mysql/data数据库数据文件目录 2.配置用户,添加专门的MySQL管理用户 >groupadd mysql ----添加用户组 >useradd -g mysql mysql ----在mysql用户组中添加一个mysql用户 3.配置,生成并安装MySQL >cmake -D</div> </li> <li><a href="/article/393.htm" title="spring------>>cvc-elt.1: Cannot find the declaration of element" target="_blank">spring------>>cvc-elt.1: Cannot find the declaration of element</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a> <div>将-------- <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"     xmlns:xsi="http://www.w3</div> </li> <li><a href="/article/520.htm" title="maven发布第三方jar的一些问题" target="_blank">maven发布第三方jar的一些问题</a> <span class="text-muted">cugfy</span> <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>maven中发布 第三方jar到nexus仓库使用的是 deploy:deploy-file命令 有许多参数,具体可查看 http://maven.apache.org/plugins/maven-deploy-plugin/deploy-file-mojo.html 以下是一个例子: mvn  deploy:deploy-file -DgroupId=xpp3 </div> </li> <li><a href="/article/647.htm" title="MYSQL下载及安装" target="_blank">MYSQL下载及安装</a> <span class="text-muted">357029540</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>    好久没有去安装过MYSQL,今天自己在安装完MYSQL过后用navicat for mysql去厕测试链接的时候出现了10061的问题,因为的的MYSQL是最新版本为5.6.24,所以下载的文件夹里没有my.ini文件,所以在网上找了很多方法还是没有找到怎么解决问题,最后看到了一篇百度经验里有这个的介绍,按照其步骤也完成了安装,在这里给大家分享下这个链接的地址</div> </li> <li><a href="/article/774.htm" title="ios TableView cell的布局" target="_blank">ios TableView cell的布局</a> <span class="text-muted">张亚雄</span> <a class="tag" taget="_blank" href="/search/tableview/1.htm">tableview</a> <div>  cell.imageView.image = [UIImage imageNamed:[imageArray objectAtIndex:[indexPath row]]];           CGSize itemSize = CGSizeMake(60, 50);   &nbs</div> </li> <li><a href="/article/901.htm" title="Java编码转义" target="_blank">Java编码转义</a> <span class="text-muted">adminjun</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E8%BD%AC%E4%B9%89/1.htm">编码转义</a> <div> import java.io.UnsupportedEncodingException; /** * 转换字符串的编码 */ public class ChangeCharset { /** 7位ASCII字符,也叫作ISO646-US、Unicode字符集的基本拉丁块 */ public static final Strin</div> </li> <li><a href="/article/1028.htm" title="Tomcat 配置和spring" target="_blank">Tomcat 配置和spring</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>简介 Tomcat启动时,先找系统变量CATALINA_BASE,如果没有,则找CATALINA_HOME。然后找这个变量所指的目录下的conf文件夹,从中读取配置文件。最重要的配置文件:server.xml 。要配置tomcat,基本上了解server.xml,context.xml和web.xml。 Server.xml --  tomcat主</div> </li> <li><a href="/article/1155.htm" title="Java打印当前目录下的所有子目录和文件" target="_blank">Java打印当前目录下的所有子目录和文件</a> <span class="text-muted">ayaoxinchao</span> <a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92/1.htm">递归</a><a class="tag" taget="_blank" href="/search/File/1.htm">File</a> <div>其实这个没啥技术含量,大湿们不要操笑哦,只是做一个简单的记录,简单用了一下递归算法。   import java.io.File; /** * @author Perlin * @date 2014-6-30 */ public class PrintDirectory { public static void printDirectory(File f</div> </li> <li><a href="/article/1282.htm" title="linux安装mysql出现libs报冲突解决" target="_blank">linux安装mysql出现libs报冲突解决</a> <span class="text-muted">BigBird2012</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>linux安装mysql出现libs报冲突解决 安装mysql出现 file /usr/share/mysql/ukrainian/errmsg.sys from install of MySQL-server-5.5.33-1.linux2.6.i386 conflicts with file from package mysql-libs-5.1.61-4.el6.i686  </div> </li> <li><a href="/article/1409.htm" title="jedis连接池使用实例" target="_blank">jedis连接池使用实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/jedis%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">jedis连接池</a><a class="tag" taget="_blank" href="/search/jedis/1.htm">jedis</a> <div>实例代码: package com.bijian.study; import java.util.ArrayList; import java.util.List; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.clients.jedis.JedisPoo</div> </li> <li><a href="/article/1536.htm" title="关于朋友" target="_blank">关于朋友</a> <span class="text-muted">bingyingao</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8B%E5%8F%8B/1.htm">朋友</a><a class="tag" taget="_blank" href="/search/%E5%85%B4%E8%B6%A3%E7%88%B1%E5%A5%BD/1.htm">兴趣爱好</a><a class="tag" taget="_blank" href="/search/%E7%BB%B4%E6%8C%81/1.htm">维持</a> <div>  成为朋友的必要条件:    志相同,道不合,可以成为朋友。譬如马云、周星驰一个是商人,一个是影星,可谓道不同,但都很有梦想,都要在各自领域里做到最好,当他们遇到一起,互相欣赏,可以畅谈两个小时。     志不同,道相合,也可以成为朋友。譬如有时候看到两个一个成绩很好每次考试争做第一,一个成绩很差的同学是好朋友。他们志向不相同,但他</div> </li> <li><a href="/article/1663.htm" title="【Spark七十九】Spark RDD API一" target="_blank">【Spark七十九】Spark RDD API一</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>aggregate package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} //测试RDD的aggregate方法 object AggregateTest { def main(args: Array[String]) { val conf = new Spar</div> </li> <li><a href="/article/1790.htm" title="ktap 0.1 released" target="_blank">ktap 0.1 released</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/kernel/1.htm">kernel</a><a class="tag" taget="_blank" href="/search/tracing/1.htm">tracing</a> <div>Dear, I'm pleased to announce that ktap release v0.1, this is the first official release of ktap project, it is expected that this release is not fully functional or very stable and we welcome bu</div> </li> <li><a href="/article/1917.htm" title="能保存Properties文件注释的Properties工具类" target="_blank">能保存Properties文件注释的Properties工具类</a> <span class="text-muted">BrokenDreams</span> <a class="tag" taget="_blank" href="/search/properties/1.htm">properties</a> <div>        今天遇到一个小需求:由于java.util.Properties读取属性文件时会忽略注释,当写回去的时候,注释都没了。恰好一个项目中的配置文件会在部署后被某个Java程序修改一下,但修改了之后注释全没了,可能会给以后的参数调整带来困难。所以要解决这个问题。     &nb</div> </li> <li><a href="/article/2044.htm" title="读《研磨设计模式》-代码笔记-外观模式-Facade" target="_blank">读《研磨设计模式》-代码笔记-外观模式-Facade</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明: 本文只为方便我个人查阅和理解,详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* * 百度百科的定义: * Facade(外观)模式为子系统中的各类(或结构与方法)提供一个简明一致的界面, * 隐藏子系统的复杂性,使子系统更加容易使用。他是为子系统中的一组接口所提供的一个一致的界面 * * 可简单地</div> </li> <li><a href="/article/2171.htm" title="After Effects教程收集" target="_blank">After Effects教程收集</a> <span class="text-muted">cherishLC</span> <a class="tag" taget="_blank" href="/search/After+Effects/1.htm">After Effects</a> <div>1、中文入门 http://study.163.com/course/courseMain.htm?courseId=730009 2、videocopilot英文入门教程(中文字幕) http://www.youku.com/playlist_show/id_17893193.html 英文原址: http://www.videocopilot.net/basic/ 素</div> </li> <li><a href="/article/2298.htm" title="Linux Apache 安装过程" target="_blank">Linux Apache 安装过程</a> <span class="text-muted">crabdave</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>Linux Apache 安装过程   下载新版本: apr-1.4.2.tar.gz(下载网站:http://apr.apache.org/download.cgi) apr-util-1.3.9.tar.gz(下载网站:http://apr.apache.org/download.cgi) httpd-2.2.15.tar.gz(下载网站:http://httpd.apac</div> </li> <li><a href="/article/2425.htm" title="Shell学习 之 变量赋值和引用" target="_blank">Shell学习 之 变量赋值和引用</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F%E5%BC%95%E7%94%A8/1.htm">变量引用</a><a class="tag" taget="_blank" href="/search/%E8%B5%8B%E5%80%BC/1.htm">赋值</a> <div>本文转自:http://www.cnblogs.com/papam/articles/1548679.html Shell编程中,使用变量无需事先声明,同时变量名的命名须遵循如下规则: 首个字符必须为字母(a-z,A-Z) 中间不能有空格,可以使用下划线(_) 不能使用标点符号 不能使用bash里的关键字(可用help命令查看保留关键字) 需要给变量赋值时,可以这么写: </div> </li> <li><a href="/article/2552.htm" title="Java SE 第一讲(Java SE入门、JDK的下载与安装、第一个Java程序、Java程序的编译与执行)" target="_blank">Java SE 第一讲(Java SE入门、JDK的下载与安装、第一个Java程序、Java程序的编译与执行)</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>Java SE 第一讲: Java SE:Java Standard Edition Java ME: Java Mobile Edition Java EE:Java Enterprise Edition Java是由Sun公司推出的(今年初被Oracle公司收购)。 收购价格:74亿美金 J2SE、J2ME、J2EE JDK:Java Development </div> </li> <li><a href="/article/2679.htm" title="YII给用户登录加上验证码" target="_blank">YII给用户登录加上验证码</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>1、在SiteController中添加如下代码: /** * Declares class-based actions. */ public function actions() { return array( // captcha action renders the CAPTCHA image displ</div> </li> <li><a href="/article/2806.htm" title="Lucene使用说明" target="_blank">Lucene使用说明</a> <span class="text-muted">dyy_gusi</span> <a class="tag" taget="_blank" href="/search/Lucene/1.htm">Lucene</a><a class="tag" taget="_blank" href="/search/search/1.htm">search</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">分词器</a> <div>Lucene使用说明 1、lucene简介 1.1、什么是lucene     Lucene是一个全文搜索框架,而不是应用产品。因此它并不像baidu或者googleDesktop那种拿来就能用,它只是提供了一种工具让你能实现这些产品和功能。 1.2、lucene能做什么     要回答这个问题,先要了解lucene的本质。实际</div> </li> <li><a href="/article/2933.htm" title="学习编程并不难,做到以下几点即可!" target="_blank">学习编程并不难,做到以下几点即可!</a> <span class="text-muted">gcq511120594</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>不论你是想自己设计游戏,还是开发iPhone或安卓手机上的应用,还是仅仅为了娱乐,学习编程语言都是一条必经之路。编程语言种类繁多,用途各 异,然而一旦掌握其中之一,其他的也就迎刃而解。作为初学者,你可能要先从Java或HTML开始学,一旦掌握了一门编程语言,你就发挥无穷的想象,开发 各种神奇的软件啦。 1、确定目标 学习编程语言既充满乐趣,又充满挑战。有些花费多年时间学习一门编程语言的大学生到</div> </li> <li><a href="/article/3060.htm" title="Java面试十问之三:Java与C++内存回收机制的差别" target="_blank">Java面试十问之三:Java与C++内存回收机制的差别</a> <span class="text-muted">HNUlanwei</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/finalize%28%29/1.htm">finalize()</a><a class="tag" taget="_blank" href="/search/%E5%A0%86%E6%A0%88/1.htm">堆栈</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/1.htm">内存回收</a> <div>大家知道, Java 除了那 8 种基本类型以外,其他都是对象类型(又称为引用类型)的数据。 JVM 会把程序创建的对象存放在堆空间中,那什么又是堆空间呢?其实,堆( Heap)是一个运行时的数据存储区,从它可以分配大小各异的空间。一般,运行时的数据存储区有堆( Heap)和堆栈( Stack),所以要先看它们里面可以分配哪些类型的对象实体,然后才知道如何均衡使用这两种存储区。一般来说,栈中存放的</div> </li> <li><a href="/article/3187.htm" title="第二章 Nginx+Lua开发入门" target="_blank">第二章 Nginx+Lua开发入门</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a> <div>Nginx入门 本文目的是学习Nginx+Lua开发,对于Nginx基本知识可以参考如下文章: nginx启动、关闭、重启 http://www.cnblogs.com/derekchen/archive/2011/02/17/1957209.html agentzh 的 Nginx 教程 http://openresty.org/download/agentzh-nginx-tutor</div> </li> <li><a href="/article/3314.htm" title="MongoDB windows安装 基本命令" target="_blank">MongoDB windows安装 基本命令</a> <span class="text-muted">liyonghui160com</span> <div>  windows安装    安装目录:   D:\MongoDB\   新建目录   D:\MongoDB\data\db   4.启动进城:   cd D:\MongoDB\bin   mongod -dbpath D:\MongoDB\data\db   &n</div> </li> <li><a href="/article/3441.htm" title="Linux下通过源码编译安装程序" target="_blank">Linux下通过源码编译安装程序</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一、程序的组成部分   Linux下程序大都是由以下几部分组成:   二进制文件:也就是可以运行的程序文件   库文件:就是通常我们见到的lib目录下的文件   配置文件:这个不必多说,都知道   帮助文档:通常是我们在linux下用man命令查看的命令的文档    二、linux下程序的存放目录   linux程序的存放目录大致有三个地方:   /etc, /b</div> </li> <li><a href="/article/3568.htm" title="WEB开发编程的职业生涯4个阶段" target="_blank">WEB开发编程的职业生涯4个阶段</a> <span class="text-muted">shw3588</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a> <div>觉得自己什么都会 2007年从学校毕业,凭借自己原创的ASP毕业设计,以为自己很厉害似的,信心满满去东莞找工作,找面试成功率确实很高,只是工资不高,但依旧无法磨灭那过分的自信,那时候什么考勤系统、什么OA系统、什么ERP,什么都觉得有信心,这样的生涯大概持续了约一年。 根本不是自己想的那样 2008年开始接触很多工作相关的东西,发现太多东西自己根本不会,都需要去学,不管是asp还是js,</div> </li> <li><a href="/article/3695.htm" title="遭遇jsonp同域下变作post请求的坑" target="_blank">遭遇jsonp同域下变作post请求的坑</a> <span class="text-muted">vb2005xu</span> <a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/%E5%90%8C%E5%9F%9Fpost/1.htm">同域post</a> <div>今天迁移一个站点时遇到一个坑爹问题,同一个jsonp接口在跨域时都能调用成功,但是在同域下调用虽然成功,但是数据却有问题. 此处贴出我的后端代码片段 $mi_id = htmlspecialchars(trim($_GET['mi_id '])); $mi_cv = htmlspecialchars(trim($_GET['mi_cv ']));  贴出我前端代码片段: $.aj</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>