HTML的设计与元信息的探究-[基础篇]

了解html的设计,我觉得首先有两点必须要明确其中意思,特别对于初学者来说,需要从本质去考虑为什么html要这么设计,第一是html结构的语义化,第二是html的元信息

一、HTML语义化

HTML设计

最初HTML的设计场景就是‘超文本’,早期设计的一群人是一群 出版界书籍排版的专家。 主要是用来便于人们的阅读,符合人们的阅读习惯。
可想而知,那么既然最初的设计师用来便于人们阅读的,那么HTML也就自然符合人们阅读的习惯,有标题,内容,侧边栏,等等。

语义化标签

HTML是计算机语言,所以每一个页面在设计的最初就类似于一篇文章,那么文章自然也就有导航,标题,侧边栏,页尾等等,而此时的计算机就是人的角色,
所以我们探究html的时候,就需要使用看文章的眼光去看待它,只不过他是计算机的预言,需要符合计算机的‘阅读习惯’,
我们的语义的标签这就是告诉计算机哪里是导航,标题,侧边栏,页尾等等,和看人类看待文章报纸时是一样的。

头部 导航栏
区块(有语义化的div)
主要区域,只出现一个 具有明确的主体内容 侧边栏
底部

上面这些是常见的语义化标签,也是告诉浏览器你的页面的每一个部分是什么。

当然我们这里只展示了几个常用的语义标签,是为了便于理解,为了浏览器和用户的阅读还有更多的标签。
我简单再展示一些比较常用的

  //页面主体内容
<h1> ~ <h6>  // h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。
<p>  //段落文章
<strong></strong>  //字体加粗
<ul>  //无序列表
<ol>  //有序列表
<small>  //呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权
<em>   //将其中的文本表示为强调的内容,表现为斜体。
<figure>  //规定独立的流内容(图像、图表、照片、代码等等)
<figcaption>  //定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置
<cite>  //表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题
<blockquoto>  //定义块引用,块引用拥有它们自己的空间
<progress>  //定义运行中的进度
<abbr>  //表示缩写 比如 <abbr title='World wide Web'>WWW</abbr>
<hr> // 分割线,表示故事的走向,或者转变
。。。
</code></pre> 
  <p>大家看这些标签和描述就能很清晰的理解,语义化的意思就是以语言合理的行为去展示和叙述的意思。<br> 还不理解的同学可以查找一些 <strong>典型的WIKI网页</strong> 去看看页面结构标签的使用。</p> 
  <h2>什么时候用语义化标签</h2> 
  <p>语义化标签并不是所有的地方都适用,其实一般的功能,或者简单的业务功能<code><div><span></code>这些已经足够使用了。<br> 并且HTML这种语言,本身并不是非常严谨的,就像写文章一样,有一些语义的使用还会带来更多的分歧和争议,<br> 所以在使用上尽量用自己所熟悉的常用的语义标签,在合理的地方,内容明确的地方使用。</p> 
  <h2>语义化的好处</h2> 
  <ol> 
   <li>代码上,结构清晰,利于项目的维护和共同开发,统一标准,减少维护时间和成本</li> 
   <li>利于浏览器解析,和部分设备的解析,比如盲人阅读等等</li> 
   <li>有利于SEO,语义化的标签有助于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重</li> 
  </ol> 
  <h1>二、HTML元信息</h1> 
  <blockquote> 
   <p>HTML自身的信息,而用来描述HTML自身信息的标签 则就是元信息类标签。标签的属性定义了与文档相关联的名称/值对。</p> 
  </blockquote> 
  <blockquote> 
   <p>元信息是关于信息的信息,用于描述信息的结构、语义、用途和用法等,其实也就是meta标签,位于文档的头部。<br> 简单来说,<strong>就是我们需要告诉浏览器他应该按照什么规则去解析我们的文章</strong>。</p> 
  </blockquote> 
  <h2>meta 标签</h2> 
  <h3>name/content</h3> 
  <p>meta标签是一组键值对,他是一种通用的元信息表示标签,也就是name / content。</p> 
  <p>基本用法:</p> 
  <pre><code>//百度网页 随便复制的一组
<meta name="theme-color" content="#2932e1"> 
// 表示:页面风格颜色,实际并不影响页面,但是浏览器会根据此约定调整页面之外的颜色,比如窗口边框等等

<meta name="参数"content="具体的参数值">。 
// name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
</code></pre> 
  <p>上述代码顾名思义就是 页面所在的 theme-color 是#2932e1<br> 首先我们要明白,这里的name是一种<strong>自由的约定</strong>,并不是绝对的值,白话文的意思就是<strong>你可以随意的去定义</strong>。</p> 
  <p>既然是约定 那么自然就有了<strong>通俗的约定</strong>,也就是大家都会准守的,比如:</p> 
  <pre><code>//keywords用来告诉搜索引擎你网页的关键字是什么。
<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">   

//description用来告诉搜索引擎你的网站主要内容。
<meta name="description"content="XX的博客"> 

//robots(机器人向导)
<meta name="robots"content="none"> 

//author(作者)
<meta name="author"content="root,root@xxxx.com"> 

</code></pre> 
  <p>上面这些只是常用的其中一部分,也就是我们用来定义网页信息的基本情况的一些约定。</p> 
  <h4>这里有一个常用,并特殊的,就介绍一下。就是name 为 viewport的mate</h4> 
  <p>这个约定并没有定义在HTML标准中,但是却是移动端开发所准守的事实标准</p> 
  <pre><code><meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'>

width 页面宽度
height 页面高度
initial-scalse 初始缩放比例
minimum-scale 最小缩放比例
maximum-scale 最大缩放比例
user-scalable 是否允许用户缩放
</code></pre> 
  <p>上面这一个meta应该是很常见的</p> 
  <h3>http-equiv属性 ttp-equiv/content</h3> 
  <pre><code>具有http-equiv属性的meta标签,表示执行一个命令,它可以传递给浏览器一些命令信息,也就是对应的content。
</code></pre> 
  <pre><code><meta http-equiv="参数"content="参数变量值">

//:举个例子
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
//它的参数是 content-type ,告诉了浏览器内容的解析‘content-type’ 需要‘text/html; charset=UTF-8’格式去解析
</code></pre> 
  <p>它还有常用一些命令:<br> default-style 指定默认样式表;</p> 
  <pre><code><meta http-equiv="default-style" content="the document's preferred stylesheet">
注释:上面 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值,或者必须匹配同一文档中的一个 style 元素上的 title 属性的值。
</code></pre> 
  <p>refresh 定义文档自动刷新的时间间隔。</p> 
  <pre><code><meta http-equiv="refresh" content="300">
注释:值 "refresh" 应该慎重使用,因为它会使得页面不受用户控制
</code></pre> 
  <p>keywords 关键字,给搜索引擎用的</p> 
  <pre><code><meta http-equiv="keywords" content="keyword1,keyword2">
</code></pre> 
  <p>Cache-Control 清除缓存(再访问这个网站要重新下载!)</p> 
  <pre><code><meta http-equiv="Cache-Control" content="no-cache"/>
</code></pre> 
  <p>content-language指定内容的语言;<br> set-cookie模拟http头set-cookie,设置cookie;<br> 等等</p> 
  <p>本章总结:HTML就像一篇文章,只是阅读的角色由人变为了机器,所以我们需要站在机器的角度去思考怎么编写会更容易去理解它,为了文章结构清晰和提取信息,我们需要<strong>进行语义化的编写</strong>,而元信息标签则是对文章的表述标签,我们需要明确告诉它(浏览器)该怎么去解析我们的文章,它才会跟根据你所约定的信息进行编译和解析。</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1680586358407639040"></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">你可能感兴趣的:(html,搜索引擎,前端)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835509770287673344.htm"
                           title="swagger访问路径" target="_blank">swagger访问路径</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
                        <div>Swagger2.x版本访问地址:http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口,通常为8080。{context-path}是你的应用上下文路径,如果应用部署在根路径下,则为空。Swagger3.x版本对于Swagger3.x版本(也称为OpenAPI3)访问地址:http://{ip</div>
                    </li>
                    <li><a href="/article/1835508130608410624.htm"
                           title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a>
                        <span class="text-muted">某公司摸鱼前端</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>示例代码:Documentconsole.log(window);效果展示:好了,现在就可以uni.使用相关的方法了</div>
                    </li>
                    <li><a href="/article/1835499615491813376.htm"
                           title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a>
                        <span class="text-muted">彩云飘过</span>

                        <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835497792265613312.htm"
                           title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a>
                        <span class="text-muted">加密社</span>
<a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a>
                        <div>加密社引言在Solidity合约开发过程中,事件(Events)是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更,还能够让外部系统(如前端应用)监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时,该事件会被记录在区块链的交易收据中。具体而言,事件</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835454543471669248.htm"
                           title="Java:爬虫框架" target="_blank">Java:爬虫框架</a>
                        <span class="text-muted">dingcho</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
                        <div>一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分</div>
                    </li>
                    <li><a href="/article/1835448238103162880.htm"
                           title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a>
                        <span class="text-muted">苹果酱0567</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>这段时间抽空给女朋友搭建一个个人博客,想着记录一下建站的过程,就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站,或者用cms系统,三四个小时就可以做出一个前后台都有的网站,而且想做成啥样也都行。但是就是要从新做,自己做的意义不一样,更何况,俺就是专门干这个的,嘿嘿嘿要做一个网站,而且从零开始,首先呢就是技术选型了,经过一番思量决定选择-SpringBoot做后端,前端使用Vue做一</div>
                    </li>
                    <li><a href="/article/1835437775344726016.htm"
                           title="博客网站制作教程" target="_blank">博客网站制作教程</a>
                        <span class="text-muted">2401_85194651</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                        <div>首先就是技术框架:后端:Java+SpringBoot数据库:MySQL前端:Vue.js数据库连接:JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div>
                    </li>
                    <li><a href="/article/1835435506645692416.htm"
                           title="00. 这里整理了最全的爬虫框架(Java + Python)" target="_blank">00. 这里整理了最全的爬虫框架(Java + Python)</a>
                        <span class="text-muted">有一只柴犬</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div>
                    </li>
                    <li><a href="/article/1835435141535723520.htm"
                           title="详解:如何设计出健壮的秒杀系统?" target="_blank">详解:如何设计出健壮的秒杀系统?</a>
                        <span class="text-muted">夜空_2cd3</span>

                        <div>作者:Yrion博客园:cnblogs.com/wyq178/p/11261711.html前言:秒杀系统相信很多人见过,比如京东或者淘宝的秒杀,小米手机的秒杀。那么秒杀系统的后台是如何实现的呢?我们如何设计一个秒杀系统呢?对于秒杀系统应该考虑哪些问题?如何设计出健壮的秒杀系统?本期我们就来探讨一下这个问题:image目录一:****秒杀系统应该考虑的问题二:****秒杀系统的设计和技术方案三:*</div>
                    </li>
                    <li><a href="/article/1835428317084348416.htm"
                           title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a>
                        <span class="text-muted">全能全知者</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
                        <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了,所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态:sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器:安装Apache:sudoyuminstallhttpd启动Apache:sudosystemctl</div>
                    </li>
                    <li><a href="/article/1835427057752961024.htm"
                           title="补充元象二面" target="_blank">补充元象二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.请尽可能详细地说明,防抖和节流的区别,应用场景?你的回答中不要写出示例代码。防抖(Debounce)和节流(Throttle)是两种常用的前端性能优化技术,它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明:防抖和节流的定义防抖:在一段时间内,多次执行变为只执行最后一次。防抖的原理是,当事件被触发后,设置一个延迟定时器。如果在这个延迟时间内事件再次被触发,则重</div>
                    </li>
                    <li><a href="/article/1835424412342513664.htm"
                           title="ChatGPT 高效学习套路揭秘:让知识获取事半功倍的秘诀" target="_blank">ChatGPT 高效学习套路揭秘:让知识获取事半功倍的秘诀</a>
                        <span class="text-muted">kkai人工智能</span>
<a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</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%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AA%92%E4%BD%93/1.htm">媒体</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
                        <div>最近这段时间,AI热潮因ChatGPT的火爆再次掀起。如今,网上大部分内容都在调侃AI,但很少有人探讨如何正经使用ChatGPT做事情。作为一名靠搜索引擎和GitHub自学编程的开发者,第一次和ChatGPT深度交流后,我就确信:ChatGPT能够极大提高程序员学习新技术的效率。使用ChatGPT一个月后,我越发感受到它的颠覆性。因此,我想从工作和学习的角度,分享它的优势及我的一些使用技巧,而非娱</div>
                    </li>
                    <li><a href="/article/1835420753252675584.htm"
                           title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a>
                        <span class="text-muted">jun778895</span>
<a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a>
                        <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务(可选)以及微信小程序平台特性的综合性项目。这里,我将详细介绍一个典型的小程序开发项目的全过程,包括项目规划、设计、开发、测试及部署上线等各个环节,并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序,旨在为学生提供一站式校园生活服务,包括课程表查询、图书馆座位预约、食堂</div>
                    </li>
                    <li><a href="/article/1835411044768509952.htm"
                           title="字节二面" target="_blank">字节二面</a>
                        <span class="text-muted">Redstone Monstrosity</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                        <div>1.假设你是正在面试前端开发工程师的候选人,面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中,我获得了宝贵的实践经验和深刻的行业洞察,以下是我的主要收获和感悟:一、专业技能提升框架应用熟练度:通过实际项目,我深入掌握了React、Vue等前端框架的使用,不仅提升了编码效率,还学会了如何根据项目需求选择合适的框架。问题解决能力:在实习期间,我遇到了许多预料之外的技术难题。通过查阅文</div>
                    </li>
                    <li><a href="/article/1835403246865313792.htm"
                           title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a>
                        <span class="text-muted">和自己一起成长</span>

                        <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div>
                    </li>
                    <li><a href="/article/1835398064727224320.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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div>
                    </li>
                    <li><a href="/article/1835395039572881408.htm"
                           title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a>
                        <span class="text-muted">清风怎不知意</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</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>许多同学不知道Dockerfile应该如何写,不清楚Dockerfile中的指令分别有什么意义,能达到什么样的目的,接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是,按照惯例,它们应该是大写的,以便更容易地将它们与参数区分开来。(引用</div>
                    </li>
                    <li><a href="/article/1835389111658180608.htm"
                           title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a>
                        <span class="text-muted">陈在天box</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</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>
                        <div>一、引言在当今数字化时代,人们使用各种不同的设备访问互联网,包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验,响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术,在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性(一)概念响应式设计是一种网页设计方法,旨在</div>
                    </li>
                    <li><a href="/article/1835387977480630272.htm"
                           title="【C语言】- 自定义类型:结构体、枚举、联合" target="_blank">【C语言】- 自定义类型:结构体、枚举、联合</a>
                        <span class="text-muted">Cavalier_01</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a>
                        <div>【C语言】:操作符(https://mp.csdn.net/editor/html/115218055)数据类型(https://mp.csdn.net/editor/html/115219664)自定义类型:结构体、枚举、联合(https://mp.csdn.net/editor/html/115373785)变量、常量(https://mp.csdn.net/editor/html/11523</div>
                    </li>
                    <li><a href="/article/1835385458356482048.htm"
                           title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a>
                        <span class="text-muted">2401_85123349</span>
<a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a>
                        <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢?比如说上面gif图中的这些人物对象,有一些已被该用户添加为关心,那么当用户下一次进入该页面时,这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大,只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先,整体的思路是利用动态类名对不同的元素进行选择。</div>
                    </li>
                    <li><a href="/article/1835382685745377280.htm"
                           title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a>
                        <span class="text-muted">html+css+js网页设计</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a>
                        <div>html+css网页设计旅游网站首页1个页面网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源码1,访问该网站https://download.csdn.net/download/qq_42431718/897527112,点击</div>
                    </li>
                    <li><a href="/article/1835379153730367488.htm"
                           title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a>
                        <span class="text-muted">zoyation</span>
<a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a>
                        <div>通过如下配置:text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时,默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div>
                    </li>
                    <li><a href="/article/1835377684025274368.htm"
                           title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a>
                        <span class="text-muted">Derek重名了</span>

                        <div>最快方法,当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来,非常快非常容易参考:https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div>
                    </li>
                    <li><a href="/article/1835376759739084800.htm"
                           title="处理标签包裹的字符串,并取出前250字符" target="_blank">处理标签包裹的字符串,并取出前250字符</a>
                        <span class="text-muted">周bro</span>
<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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落,包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div>
                    </li>
                    <li><a href="/article/1835373236217540608.htm"
                           title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a>
                        <span class="text-muted">马小蜗</span>

                        <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点:灵活度、可控性、性能</div>
                    </li>
                    <li><a href="/article/1835372727582683136.htm"
                           title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a>
                        <span class="text-muted">红匣子实力推荐</span>

                        <div>随着科技的不断发展,移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下,H5小游戏应运而生,为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式,正逐渐受到市场的关注和青睐。那么,什么是H5小游戏定制开发呢?它又具有哪些特点和优势呢?让我们一起来深入了解一下。首先,我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏,可以在移动端、PC端等多平台</div>
                    </li>
                                <li><a href="/article/109.htm"
                                       title="统一思想认识" target="_blank">统一思想认识</a>
                                    <span class="text-muted">永夜-极光</span>
<a class="tag" taget="_blank" href="/search/%E6%80%9D%E6%83%B3/1.htm">思想</a>
                                    <div>1.统一思想认识的基础,才能有的放矢 
 原因: 
   总有一种描述事物的方式最贴近本质,最容易让人理解. 
   如何让教育更轻松,在于找到最适合学生的方式. 
         难点在于,如何模拟对方的思维基础选择合适的方式.   &</div>
                                </li>
                                <li><a href="/article/236.htm"
                                       title="Joda Time使用笔记" target="_blank">Joda Time使用笔记</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/joda+time/1.htm">joda time</a>
                                    <div>Joda Time的介绍可以参考这篇文章: 
 
http://www.ibm.com/developerworks/cn/java/j-jodatime.html 
 
工作中也常常用到Joda Time,为了避免每次使用都查API,记录一下常用的用法: 
    
 
   /**
     * DateTime变化(增减)
     */
    @Tes</div>
                                </li>
                                <li><a href="/article/363.htm"
                                       title="FileUtils API" target="_blank">FileUtils API</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/FileUtils/1.htm">FileUtils</a><a class="tag" taget="_blank" href="/search/FileUtils+API/1.htm">FileUtils API</a>
                                    <div>转载请出自出处:http://eksliang.iteye.com/blog/2217374 一、概述 
这是一个Java操作文件的常用库,是Apache对java的IO包的封装,这里面有两个非常核心的类FilenameUtils跟FileUtils,其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装,开发中对文件的操作,几乎都可以在这个框架里面找到。 非常的好用。 </div>
                                </li>
                                <li><a href="/article/490.htm"
                                       title="各种新兴技术" target="_blank">各种新兴技术</a>
                                    <span class="text-muted">不懂事的小屁孩</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/1.htm">技术</a>
                                    <div>1:gradle Gradle 是以 Groovy 语言为基础,面向Java应用为主。基于DSL(领域特定语言)语法的自动化构建工具。 
 
现在构建系统常用到maven工具,现在有更容易上手的gradle, 
搭建java环境:
http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 
搭建android环境:
http://m</div>
                                </li>
                                <li><a href="/article/617.htm"
                                       title="tomcat6的https双向认证" target="_blank">tomcat6的https双向认证</a>
                                    <span class="text-muted">酷的飞上天空</span>
<a class="tag" taget="_blank" href="/search/tomcat6/1.htm">tomcat6</a>
                                    <div>1.生成服务器端证书 
  
keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36</div>
                                </li>
                                <li><a href="/article/744.htm"
                                       title="托管虚拟桌面市场势不可挡" target="_blank">托管虚拟桌面市场势不可挡</a>
                                    <span class="text-muted">蓝儿唯美</span>

                                    <div>用户还需要冗余的数据中心,dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台,提供服务或者MSP也可以自己来控制。 
在某些情况下,MSP会在dinCloud的云服务上进行服务分层,如监控和补丁管理。 
MSP的利润空间将根据其参与的程度而有所不同,Din说。 
“我们有一些合作伙伴负责将我们推荐给客户作为个</div>
                                </li>
                                <li><a href="/article/871.htm"
                                       title="spring学习——xml文件的配置" target="_blank">spring学习——xml文件的配置</a>
                                    <span class="text-muted">a-john</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>在Spring的学习中,对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中,采用XML配置也是最常见的。以下是一个简单的XML配置文件: 
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.or</div>
                                </li>
                                <li><a href="/article/998.htm"
                                       title="HDU 4342 History repeat itself 模拟" target="_blank">HDU 4342 History repeat itself 模拟</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%8B%9F/1.htm">模拟</a>
                                    <div>来源:http://acm.hdu.edu.cn/showproblem.php?pid=4342 
题意:首先让求第几个非平方数,然后求从1到该数之间的每个sqrt(i)的下取整的和。 
思路:一个简单的模拟题目,但是由于数据范围大,需要用__int64。我们可以首先把平方数筛选出来,假如让求第n个非平方数的话,看n前面有多少个平方数,假设有x个,则第n个非平方数就是n+x。注意两种特殊情况,即</div>
                                </li>
                                <li><a href="/article/1125.htm"
                                       title="java中最常用jar包的用途" target="_blank">java中最常用jar包的用途</a>
                                    <span class="text-muted">asia007</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>java中最常用jar包的用途 
jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口,提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法,以及接收和处理SOAP错误的方法.  w</div>
                                </li>
                                <li><a href="/article/1252.htm"
                                       title="ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法" target="_blank">ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/json%E7%BC%96%E7%A0%81%E8%BF%94%E5%9B%9E%E5%BC%82%E5%B8%B8/1.htm">json编码返回异常</a>
                                    <div>一:ajax获取自定义Struts框架中的json编码  出现以下 问题:     
  
1,强制flush输出  json编码打印在首页 
2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 
3,  ajax中的dataType的json 改为text 会</div>
                                </li>
                                <li><a href="/article/1379.htm"
                                       title="JUnit使用的设计模式" target="_blank">JUnit使用的设计模式</a>
                                    <span class="text-muted">bijian1013</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><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a>
                                    <div>JUnit源代码涉及使用了大量设计模式 
1、模板方法模式(Template Method) 
        定义一个操作中的算法骨架,而将一些步骤延伸到子类中去,使得子类可以不改变一个算法的结构,即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构,也就是步骤,而步骤的实现可以在子类中完成。 
  </div>
                                </li>
                                <li><a href="/article/1506.htm"
                                       title="Linux常用命令(摘录)" target="_blank">Linux常用命令(摘录)</a>
                                    <span class="text-muted">sunjing</span>
<a class="tag" taget="_blank" href="/search/crond/1.htm">crond</a><a class="tag" taget="_blank" href="/search/chkconfig/1.htm">chkconfig</a>
                                    <div>chkconfig --list   查看linux所有服务 
chkconfig --add servicename 添加linux服务 
netstat -apn | grep 8080  查看端口占用 
env 查看所有环境变量 
echo $JAVA_HOME 查看JAVA_HOME环境变量 
  
安装编译器 
yum install -y gcc</div>
                                </li>
                                <li><a href="/article/1633.htm"
                                       title="【Hadoop一】Hadoop伪集群环境搭建" target="_blank">【Hadoop一】Hadoop伪集群环境搭建</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
                                    <div> 结合网上多份文档,不断反复的修正hadoop启动和运行过程中出现的问题,终于把Hadoop2.5.2伪分布式安装起来,跑通了wordcount例子。Hadoop的安装复杂性的体现之一是,Hadoop的安装文档非常多,但是能一个文档走下来的少之又少,尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布,但是它的配置跟2.5.0,2.5.1没有分别。   &nb</div>
                                </li>
                                <li><a href="/article/1760.htm"
                                       title="Anychart图表系列五之事件监听" target="_blank">Anychart图表系列五之事件监听</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/chart/1.htm">chart</a>
                                    <div>创建图表事件监听非常简单:首先是通过addEventListener('监听类型',js监听方法)添加事件监听,然后在js监听方法中定义具体监听逻辑。 
以钻取操作为例,当用户点击图表某一个point的时候弹出point的name和value,代码如下: 
<script>
//创建AnyChart
var chart = new AnyChart();
//添加钻取操作&quo</div>
                                </li>
                                <li><a href="/article/1887.htm"
                                       title="Web前端相关段子" target="_blank">Web前端相关段子</a>
                                    <span class="text-muted">braveCS</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a>
                                    <div>Web标准:结构、样式和行为分离 
  
使用语义化标签 
0)标签的语义:使用有良好语义的标签,能够很好地实现自我解释,方便搜索引擎理解网页结构,抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容,具有很好的可读性,从而实现对特殊终端的兼容。 
1)div和span是没有语义的:只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时,才会适当添加div</div>
                                </li>
                                <li><a href="/article/2014.htm"
                                       title="编程之美-24点游戏" target="_blank">编程之美-24点游戏</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a>
                                    <div>

import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashSet;
import java.util.List;
import java.util.Random;
import java.util.Set;


public class PointGame {

	/**编程之美 </div>
                                </li>
                                <li><a href="/article/2141.htm"
                                       title="主页面子页面传值总结" target="_blank">主页面子页面传值总结</a>
                                    <span class="text-muted">chengxuyuancsdn</span>
<a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a>
                                    <div>1、showModalDialog
returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值
主界面
 var sonValue=window.showModalDialog("son.jsp");
子界面
  window.retu</div>
                                </li>
                                <li><a href="/article/2268.htm"
                                       title="[网络与经济]互联网+的含义" target="_blank">[网络与经济]互联网+的含义</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91%2B/1.htm">互联网+</a>
                                    <div> 
      互联网+后面是一个人的名字 = 网络控制系统 
 
      互联网+你的名字 =  网络个人数据库 
 
      每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不</div>
                                </li>
                                <li><a href="/article/2395.htm"
                                       title="oracle 创建视图 with check option" target="_blank">oracle 创建视图 with check option</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/%E8%A7%86%E5%9B%BE/1.htm">视图</a><a class="tag" taget="_blank" href="/search/view/1.htm">view</a><a class="tag" taget="_blank" href="/search/oralce/1.htm">oralce</a>
                                    <div>我们来看下面的例子: 
create or replace view testview 
as 
select empno,ename from emp where ename like ‘M%’ 
with check option; 
 
这里我们创建了一个视图,并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果: 
select * from testv</div>
                                </li>
                                <li><a href="/article/2522.htm"
                                       title="ToastPlugin插件在cordova3.3下使用" target="_blank">ToastPlugin插件在cordova3.3下使用</a>
                                    <span class="text-muted">dibov</span>
<a class="tag" taget="_blank" href="/search/Cordova/1.htm">Cordova</a>
                                    <div>    自己开发的Todos应用,想实现“ 
再按一次返回键退出程序 ”的功能,采用网上的ToastPlugins插件,发现代码或文章基本都是老版本,运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。      
    ToastPlugin.java        
package&nbs</div>
                                </li>
                                <li><a href="/article/2649.htm"
                                       title="C语言22个系统函数" target="_blank">C语言22个系统函数</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/function/1.htm">function</a>
                                    <div>C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分(尾数)x和 以2位的指数部分n,即num=x*2n,指数n存放在exp指向的变量中,返回x。D</div>
                                </li>
                                <li><a href="/article/2776.htm"
                                       title="开发一个类的流程" target="_blank">开发一个类的流程</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91/1.htm">开发</a>
                                    <div>本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件,并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库,供以后复用。 
  
以下是开发流程: 
1. 明确类的功能,抽象出类的大概结构 
2. 初步设想类的接口 
3. 类名设计(驼峰式命名) 
4. 属性设置(权限设置) 
判断某些变量是否有必要作为成员属</div>
                                </li>
                                <li><a href="/article/2903.htm"
                                       title="java 并发" target="_blank">java 并发</a>
                                    <span class="text-muted">shuizhaosi888</span>
<a class="tag" taget="_blank" href="/search/java+%E5%B9%B6%E5%8F%91/1.htm">java 并发</a>
                                    <div>能够写出高伸缩性的并发是一门艺术 
  
在JAVA SE5中新增了3个包  
 
 java.util.concurrent 
 java.util.concurrent.atomic 
 java.util.concurrent.locks 
  
在java的内存模型中,类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享,局部变量与方法参数都是线程私有的,不会被共享。 </div>
                                </li>
                                <li><a href="/article/3030.htm"
                                       title="Spring Security(11)——匿名认证" target="_blank">Spring Security(11)——匿名认证</a>
                                    <span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/ROLE_ANNOYMOUS/1.htm">ROLE_ANNOYMOUS</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D/1.htm">匿名</a>
                                    <div>匿名认证 
目录 
1.1     配置 
1.2     AuthenticationTrustResolver 
  
       对于匿名访问的用户,Spring Security支持为其建立一个匿名的AnonymousAuthenticat</div>
                                </li>
                                <li><a href="/article/3157.htm"
                                       title="NODEJS项目实践0.2[ express,ajax通信...]" target="_blank">NODEJS项目实践0.2[ express,ajax通信...]</a>
                                    <span class="text-muted">逐行分析JS源代码</span>
<a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a>
                                    <div>  
一、前言 
        通过上节学习,我们已经        ubuntu系统搭建了一个可以访问的nodejs系统,并做了nginx转发。本节原要做web端服务 及 mongodb的存取,但写着写着,web端就</div>
                                </li>
                                <li><a href="/article/3284.htm"
                                       title="在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值" target="_blank">在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值</a>
                                    <span class="text-muted">lhbthanks</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a><a class="tag" taget="_blank" href="/search/checkbox/1.htm">checkbox</a>
                                    <div>第一种方法:获取结果String类型 
在 Action 中获得的是一个 String 型数据,每一个被选中的 checkbox 的 value 被拼接在一起,每个值之间以逗号隔开(,)。 
 
所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 
以下是实现的代码: 
 前台 HTML 代码: 
 
 
 </div>
                                </li>
                                <li><a href="/article/3411.htm"
                                       title="003.Kafka基本概念" target="_blank">003.Kafka基本概念</a>
                                    <span class="text-muted">nweiren</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a>
                                    <div>Kafka基本概念:Topic、Partition、Message、Producer、Broker、Consumer。   Topic:               消息源(Message)的分类。   Partition:               Topic物理上的分组,一</div>
                                </li>
                                <li><a href="/article/3538.htm"
                                       title="Linux环境下安装JDK" target="_blank">Linux环境下安装JDK</a>
                                    <span class="text-muted">roadrunners</span>
<a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>1、准备工作 
创建JDK的安装目录: 
mkdir -p /usr/java/ 
  
下载JDK,找到适合自己系统的JDK版本进行下载: 
http://www.oracle.com/technetwork/java/javase/downloads/index.html 
  
把JDK安装包下载到/usr/java/目录,然后进行解压: 
tar -zxvf jre-7</div>
                                </li>
                                <li><a href="/article/3665.htm"
                                       title="Linux忘记root密码的解决思路" target="_blank">Linux忘记root密码的解决思路</a>
                                    <span class="text-muted">tomcat_oracle</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>1:使用同版本的linux启动系统,chroot到忘记密码的根分区passwd改密码     2:grub启动菜单中加入init=/bin/bash进入系统,不过这时挂载的是只读分区。根据系统的分区情况进一步判断.     3: grub启动菜单中加入 single以单用户进入系统.     4:用以上方法mount到根分区把/etc/passwd中的root密码去除     例如:     ro</div>
                                </li>
                                <li><a href="/article/3792.htm"
                                       title="跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现" target="_blank">跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现</a>
                                    <span class="text-muted">xueyou</span>
<a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
                                    <div>postMessage 是 HTML5 新方法,它可以实现跨域窗口之间通讯。到目前为止,只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持,而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样,前者是前端擅长跨域文档数据即时通讯,后者擅长针对跨域服务端数据通讯,p</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>