HTML总结1【转】

以下内容转载和参考自:w3school的HTML学习内容,HTML 简介 。

一、概述

   HTML不是一种编程语言,它是超文本标记语言 (Hyper Text Markup Language),使用标记标签来描述网页内容。HTML标签是由尖括号包围的关键词,标签通常是成对出现的,标签对中的第一个标签是开始标签(开放标签),第二个标签是结束标签(闭合标签)。一个HTML文档就是由HTML标签和其中的文本组成的,浏览器不会显示 HTML 标签,而是使用标签来解释并展示文本内容。

  开始标签到结束标签的所有内容又称为HTML 元素。HTML元素中的属性包含在标签头中,属性值应该始终使用引号包围,如果属性值里含有双引号,那么必须使用单引号来包围属性值。 默认情况下HTML 会自动地在段落、标题这种块级元素前后添加一个额外的空行(换行),其它元素则不会。HTML 标签对大小写不敏感,但推荐使用小写。搜索引擎使用标题为您的网页的结构和内容编制索引,所以应该合理的使用标签来设置标题。一些html元素和属性并不是所有浏览器都兼容的,有些元素和属性对于老式浏览器也不兼容。

 
 


这是一个标题

这是一个标题

这是一个段落。

这是一个文本 这里是引用内容

这是一个标题

This is a para graph
with line breaks

站内链接

站外链接


describe text
HTML总结1【转】_第1张图片

  有的HTML首行是,这是一个声明,它用来告知 Web 浏览器页面了HTML 5版本。

  仅有 16 种颜色名被 HTML 4.0 标准支持,如black、white、blue、gray、green、red、yellow。

  应该通过标签或属性来改变样式输出,如下所示的p段落中,并不会根据源代码来显示段落,源代码中的空行、换行和连续的空格都会被算作一个空格来显示。可以使用pre 标签来定义预格式文本,这样就能保留文本中的空格、换行和空行:

HTML总结1【转】_第2张图片

下面为一些文本格式化标签的使用:

HTML总结1【转】_第3张图片

  a元素还可以创建滚动到本页面指定位置的“锚”,如下所示,当我们点击“转到提示”文本后,页面会滚动到“提示”文本处,也可以使用a打开指定的超链接后滚动到该页面的锚处:

HTML总结1【转】_第4张图片

     对于子目录的URL,应该将正斜杠添加到URL中,比如href = "http://www.w3school.com.cn/html/",假如这样书写链接:href = "http://www.w3school.com.cn/html",就会向服务器产生两次 HTTP 请求。

  可以将a、img等元素放到p、h中来混合显示,也可以将img放置a中来设置一个图片链接。图片与文本混合显示的时候,图片默认是底部与文字对齐,也可给img元素添加align属性来设置顶部对齐(align="top")或中间对齐(align = "middle"),如果将align设置成“left”或“right”的话,图像就会在整个段落的最左或最右来显示:

HTML总结1【转】_第5张图片

  也可以设置图片为整个页面的背景,通过设置body元素的background属性:。

  创建图像映射:usemap是标签的一个属性,用来指示使用的图像地图,图像地图把一幅图像分成若干个区域,点击不同的区域会进入不同的页面。如下所示的图片使用planetmap图像地图,点击不同的星球会跳转指定的页面:

HTML总结1【转】_第6张图片

  可以在网页中嵌入另一个网页,通过iframe元素:

HTML总结1【转】_第7张图片  

  绝对路径:

  相对路径1:,使用本网站根目录中images目录中的picture.jpg。

  相对路径2:,使用当前目录中的image目录中的picture.jpg。

二、head  

   元素是所有头部元素的容器,以下标签都可以添加到 head 部分:、<base>、<link>、<style>、<meta>、<script> 。<title>用来设置标签栏的标题,<base>可以为页面上的所有链接规定统一的跳转地址或目标;<link> 标签常用于连接外部样式表;<style>用来定义内部样式表;<meta> 提供HTML 文档的元数据(元数据(metadata)是关于数据的信息),元数据不会显示在页面上,它用于提供给浏览器,比如用于设置页面的描述, 如使用的字符编码、关键词、文档作者、最后修改时间等,一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面;<script> 用于定义客户端脚本,比如 JavaScript。</p> <p><a href="http://img.e-com-net.com/image/info8/84db3aa6df53444eb29ed655dbd3d6f7.jpg" target="_blank"><img alt="HTML总结1【转】_第8张图片" src="http://img.e-com-net.com/image/info8/84db3aa6df53444eb29ed655dbd3d6f7.jpg" width="650" height="233" style="border:1px solid black;"></a></p> <p></p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/e1c0dd8f809f4be7b927c0fb29bb8088.jpg" target="_blank"><img alt="HTML总结1【转】_第9张图片" src="http://img.e-com-net.com/image/info8/e1c0dd8f809f4be7b927c0fb29bb8088.jpg" width="650" height="196" style="border:1px solid black;"></a></p> <p></p> <p><strong>三、样式</strong></p> <p>  style属性即样式,它提供了一种改变所有 HTML 元素样式的通用方法,有了它之后一些标签和属性就被弃用了,如<center>和<font>标签以及align和bgcolor属性:</p> <div> <div> <div> <a href="http://img.e-com-net.com/image/info8/f6225ff361364f1ca2e2f35a70446509.jpg" target="_blank"><img alt="" src="http://img.e-com-net.com/image/info8/f6225ff361364f1ca2e2f35a70446509.jpg" width="650" height="82"></a> </div> </div> </div> <p style="text-align:center;">  <a href="http://img.e-com-net.com/image/info8/33823ff6b1744e888ad17daa359bc911.jpg" target="_blank"><img alt="HTML总结1【转】_第10张图片" src="http://img.e-com-net.com/image/info8/33823ff6b1744e888ad17daa359bc911.jpg" width="650" height="104" style="border:1px solid black;"></a></p> <p>  <span>可以用来设置标签中部分元素的样式:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/8a3a9c9f36c041a78e1a04790de2530d.jpg" target="_blank"><img alt="HTML总结1【转】_第11张图片" src="http://img.e-com-net.com/image/info8/8a3a9c9f36c041a78e1a04790de2530d.jpg" width="650" height="339" style="border:1px solid black;"></a></p> <p>   单个标签内元素的样式可以使用<span>来定义,对多个标签使用相同样式的话使用<div>。<div>可以将多个标签形成一个块,块里边的元素可以使用相同的样式,如下所示。<div> 是一个块级元素,这意味着它的内容自动地开始一个新行。div中的align属性不赞成使用,请使用样式取而代之。</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/e1399b3cf9d5432ebc4d16837c7eaac6.jpg" target="_blank"><img alt="HTML总结1【转】_第12张图片" src="http://img.e-com-net.com/image/info8/e1399b3cf9d5432ebc4d16837c7eaac6.jpg" width="650" height="154" style="border:1px solid black;"></a></p> <p>    div块中元素也可以有自己独特的样式,而且div中部分样式只是针对这个div块而不是块中的元素,如下所示的标题h1的背景颜色没有使用div中设置的,div中设置的边框没有应用到标题h1和段落p,只应用到了整个div块的显示:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/b7fe3dee3dc2411b81a6e647b8f25e42.jpg" target="_blank"><img alt="HTML总结1【转】_第13张图片" src="http://img.e-com-net.com/image/info8/b7fe3dee3dc2411b81a6e647b8f25e42.jpg" width="650" height="109" style="border:1px solid black;"></a></p> <p>   大多数 HTML 元素被定义为块级元素( block level element)或内联元素(inline element),块级元素在浏览器显示时,通常会以新行来开始(和结束), 如<h1>, <p>, <ul>, <table>, <div>。内联元素在显示时通常不会以新行开始,如<b>, <td>, <a>, <img>, <span>。<div> 元素可用于对大的内容块设置样式属性,以及进行文档布局,<span> 元素可用于为元素内部分文本设置样式属性。</p> <p>  使用样式改变网页外观有三种方法,第一种就是上面所说的在在相关的标签中使用样式属性,样式属性可以包含任何 css 属性,这种方式属于内联样式。</p> <p>  第二种方法就是使用内部样式表(internal css),如下所示,在html的head 部分通过 <style> 标签定义内部样式表,这样这些样式就能够被本文件中所有的元素共用:</p> <div> <div> <div> <a href="http://img.e-com-net.com/image/info8/182708717a074ec1a579eb8d2c9fe21f.jpg" target="_blank"><img alt="HTML总结1【转】_第14张图片" src="http://img.e-com-net.com/image/info8/182708717a074ec1a579eb8d2c9fe21f.jpg" width="650" height="179" style="border:1px solid black;"></a> </div> </div> </div> <p>  内部样式也可以与class、id结合使用,如下同时也标识了magin和padding的区别,其它的还有magin-left:10px(仅保留10像素的左边距)、margin:10px 20px(上下边距为10,左右边距为20)、padding:10px 20px 30px 40px(上右下左外边距)、margin:10px(上右下左外边距):</p> <p><a href="http://img.e-com-net.com/image/info8/12b0de07c5a7465aa256883c770016c9.jpg" target="_blank"><img alt="HTML总结1【转】_第15张图片" src="http://img.e-com-net.com/image/info8/12b0de07c5a7465aa256883c770016c9.jpg" width="650" height="189" style="border:1px solid black;"></a></p> <p></p> <p style="text-align:center;">需要注意的是,使用padding的话会增加元素的大小,如下所示的h1使用了50的padding,所以h1的宽度变成了150而不是100:  </p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/90c3d051348a47e8afe31a75adf80f7f.jpg" target="_blank"><img alt="HTML总结1【转】_第16张图片" src="http://img.e-com-net.com/image/info8/90c3d051348a47e8afe31a75adf80f7f.jpg" width="650" height="126" style="border:1px solid black;"></a></p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/baec2337f248409d8adc3c8634d5b0a1.jpg" target="_blank"><img alt="HTML总结1【转】_第17张图片" src="http://img.e-com-net.com/image/info8/baec2337f248409d8adc3c8634d5b0a1.jpg" width="650" height="150" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/7b45bcb3de1c406c80e4b833bb5aff85.jpg" target="_blank"><img alt="HTML总结1【转】_第18张图片" src="http://img.e-com-net.com/image/info8/7b45bcb3de1c406c80e4b833bb5aff85.jpg" width="650" height="163" style="border:1px solid black;"></a></p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/19f54b2b8ea745e5b4af64d364eebf66.jpg" target="_blank"><img alt="HTML总结1【转】_第19张图片" src="http://img.e-com-net.com/image/info8/19f54b2b8ea745e5b4af64d364eebf66.jpg" width="650" height="176" style="border:1px solid black;"></a>  </p> <p>  使用样式的第三种方法是使用外部样式表(external css),当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个样式文件来改变整个站点的外观:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/294b39cbd1c04d28b13c431f1fadba71.jpg" target="_blank"><img alt="HTML总结1【转】_第20张图片" src="http://img.e-com-net.com/image/info8/294b39cbd1c04d28b13c431f1fadba71.jpg" width="650" height="229" style="border:1px solid black;"></a></p> <p> 如下为为上面使用的csstest.css样式文件:</p> <div> <div> <div></div> </div> </div> <div> <div> <div> <a href="http://img.e-com-net.com/image/info8/2eb24cb50f6346b98fb1fe4ac7bc608b.png" target="_blank"><img alt="HTML总结1【转】_第21张图片" src="http://img.e-com-net.com/image/info8/2eb24cb50f6346b98fb1fe4ac7bc608b.png" width="213" height="377" style="border:1px solid black;"></a> </div> </div> </div> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/b786886bc9e44ea6821eba1eb6a6c0c0.jpg" target="_blank"><img alt="HTML总结1【转】_第22张图片" src="http://img.e-com-net.com/image/info8/b786886bc9e44ea6821eba1eb6a6c0c0.jpg" width="650" height="175" style="border:1px solid black;"></a></p> <p><strong> 四、id与class</strong></p> <p>  可以为 <span> 应用 id 或 class 属性,这样便于对 span 应用外部样式。id、class、style属于HTML全局属性,即除了<span>外可以在所有HTML 元素中使用的属性(其它全局属性参见:HTML 全局属性)。class与id的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素(一个 HTML文档中不能存在拥有相同 id 的元素)。如下所示,我们通过<span>为"提示"文本设置了单独的样式:红色加粗显示,其它地方文本也想设置这一样式的话,同样使用<span>对其包围,然后使用class="tip"属性即可:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/6f9edd5afb484faf9d9538e70123d59a.jpg" target="_blank"><img alt="HTML总结1【转】_第23张图片" src="http://img.e-com-net.com/image/info8/6f9edd5afb484faf9d9538e70123d59a.jpg" width="650" height="461" style="border:1px solid black;"></a></p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/e702dfa621084105953c9a4bfabce9f3.jpg" target="_blank"><img alt="HTML总结1【转】_第24张图片" src="http://img.e-com-net.com/image/info8/e702dfa621084105953c9a4bfabce9f3.jpg" width="501" height="242" style="border:1px solid black;"></a></p> <p></p> <p>  也可以用 id 或 class 来标记 <div>, 如下所示,两个div块通过使用同一个div class,使这两个块中的元素使用相同的外部样式:</p> <p> <a href="http://img.e-com-net.com/image/info8/9ab2642c0ac34c59acce6a905c7baf31.jpg" target="_blank"><img alt="HTML总结1【转】_第25张图片" src="http://img.e-com-net.com/image/info8/9ab2642c0ac34c59acce6a905c7baf31.jpg" width="368" height="481" style="border:1px solid black;"></a></p> <p>  如下所示,如果不对 span/div 应用样式,那么span/div中元素会正常的默认显示,但实际上span/div仍然增加了额外的结构,它们指示了一些元素是属于一个块里的(将这些元素进行了结构化):</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/ee68fd4a2a6f4512a33ecb957ab20813.jpg" target="_blank"><img alt="HTML总结1【转】_第26张图片" src="http://img.e-com-net.com/image/info8/ee68fd4a2a6f4512a33ecb957ab20813.jpg" width="306" height="261" style="border:1px solid black;"></a></p> <p>   div/span 通过与 id、class 、role 属性配合,提供了向html文档添加额外结构的机制,如果这个结构是通用的话使用class属性,如果这个结构是特定块使用的话使用id属性,id 属性为一个元素或多个元素(div块)分配一个唯一的名字,class属性则适合被多次使用的情况。id/class 的值必须以字母或者下划线开始,不能以数字开始且大小写敏感,值中不能出现空格,最好也不要使用下划线( CSS2.0(以及某些浏览器)中的限制)。</p> <p>  前面说过id、class、style属于全局属性,所以除了div和span,它们还可以应用到h和p等元素:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/f91a697cd9254ba3b39af655095dcb44.jpg" target="_blank"><img alt="HTML总结1【转】_第27张图片" src="http://img.e-com-net.com/image/info8/f91a697cd9254ba3b39af655095dcb44.jpg" width="650" height="137" style="border:1px solid black;"></a></p> <p>   如下所示的三个div分别标识了网页上的头部、导航栏、侧边栏三个块,导航栏实际上是一个菜单,所以将ul列表的id属性值设置为menu:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/30922f9ba4cd43f8a270aef1a3a5414f.jpg" target="_blank"><img alt="HTML总结1【转】_第28张图片" src="http://img.e-com-net.com/image/info8/30922f9ba4cd43f8a270aef1a3a5414f.jpg" width="650" height="267" style="border:1px solid black;"></a></p> <p style="text-align:center;"> <a href="http://img.e-com-net.com/image/info8/e32385023ddf49b49ce7ed12cf4f66fd.jpg" target="_blank"><img alt="HTML总结1【转】_第29张图片" src="http://img.e-com-net.com/image/info8/e32385023ddf49b49ce7ed12cf4f66fd.jpg" width="650" height="523" style="border:1px solid black;"></a></p> <p><strong> 五、html布局</strong>  </p> <p>  <div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。如下所示,可以直接使用div块来实现一个色块,这三个色块又在名为outside的div块中,outside块通过内部样式表来设置样式,每个色块又可以单独设置其样式,通过内部样式表和style样式属性。可以看到,outside块的高度会自动使用三个内部div块的高度和,而outside的宽度在没有指定的时候会使用body的宽度:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/3856b2da94884fad88b05838e39085d6.jpg" target="_blank"><img alt="HTML总结1【转】_第30张图片" src="http://img.e-com-net.com/image/info8/3856b2da94884fad88b05838e39085d6.jpg" width="650" height="160" style="border:1px solid black;"></a></p> <p>   从上面可以看到,我们可以通过样式表来设置一些通用的样式,比如每个色块使用的inside来实现相同的大小,同时还可以对每个元素设置单独的样式,比如通过色块的style属性来设置色块的单独颜色。如下所示,我们可以再增加一个标题h1,可以看到,div使用的样式表中的border样式并不会应用到div块中的所有元素(色块和h1并没有红色的边框),而是被本div块所使用:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/bfd2e0f309bb43ae93076734dccd6396.jpg" target="_blank"><img alt="HTML总结1【转】_第31张图片" src="http://img.e-com-net.com/image/info8/bfd2e0f309bb43ae93076734dccd6396.jpg" width="650" height="177" style="border:1px solid black;"></a></p> <p>   从上面可以看到,div块和标题h都会换行显示(标题h还会存在默认的margin-top和margin-bottom),如果我们想要这三个色块在同一行显示的话,可以通过display属性将div设置为行内模式(div默认是单行显示:一个div一行,两个div两行...),这样这三个div块就会在一个行内而不是每个div都是一行,如下所示:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/5c134a0bcf364219b2f8fc818f7545af.jpg" target="_blank"><img alt="HTML总结1【转】_第32张图片" src="http://img.e-com-net.com/image/info8/5c134a0bcf364219b2f8fc818f7545af.jpg" width="650" height="186" style="border:1px solid black;"></a></p> <p>   下面为将外边的div块设置行内模式的效果,可以看到其宽度会自动使用内部div块的宽度而不是body的宽度:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/777f547d0cf541c5b8088dcc93e65c08.jpg" target="_blank"><img alt="HTML总结1【转】_第33张图片" src="http://img.e-com-net.com/image/info8/777f547d0cf541c5b8088dcc93e65c08.jpg" width="650" height="253" style="border:1px solid black;"></a></p> <p>  虽然使用display可以实现模块的一些布局,但有时候会有一些问题,比如上面三个水平的色块中会有一些空隙,因为div中间存在的换行符,我们可以将outside中添加font - size: 0px就可以消除这些空隙,但是一般我们会使用下面的float来实现精准的布局。 </p> <p>  float就是浮动的意思,它可以使某一模块脱离外部的限制来成为一个新的块,其值有left(向左浮动)、right、none(不浮动,默认)、inherit(从父元素继承)。如下使用float使三个色块并排显示,可以看到,因为三个色块跳出了原来的div块,所以原来的div块里就没了元素,所以只留下了红色的边框:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/7b426e8171654069a4fc4c903a5ef1d9.jpg" target="_blank"><img alt="HTML总结1【转】_第34张图片" src="http://img.e-com-net.com/image/info8/7b426e8171654069a4fc4c903a5ef1d9.jpg" width="650" height="166" style="border:1px solid black;"></a></p> <p>   </p> <p>  可以在outside中添加高度样式属性,这样就能撑起外边的div块了:</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/ddc85e6a0fb04691bcece7fa0056fd2f.jpg" target="_blank"><img alt="HTML总结1【转】_第35张图片" src="http://img.e-com-net.com/image/info8/ddc85e6a0fb04691bcece7fa0056fd2f.jpg" width="650" height="168" style="border:1px solid black;"></a></p> <p>  如下所示,如果我们仅对第一个div块使用float:left的话,那么第二个div块的起始位置会与第一个div块重合(因为第一个div块浮动出来了):</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/3cd3aca25d914e14b6904ad30f1b7d8c.jpg" target="_blank"><img alt="HTML总结1【转】_第36张图片" src="http://img.e-com-net.com/image/info8/3cd3aca25d914e14b6904ad30f1b7d8c.jpg" width="650" height="155" style="border:1px solid black;"></a></p> <p>  而如果第一个div块后面紧跟的不是div块而是一个p或者h等元素的话,那么这个p会在div块的右边展示,因为float的浮动是相对于div块来说的: </p> <p><a href="http://img.e-com-net.com/image/info8/8fbbfd04b92c40d3ab7abf421fe75c43.jpg" target="_blank"><img alt="HTML总结1【转】_第37张图片" src="http://img.e-com-net.com/image/info8/8fbbfd04b92c40d3ab7abf421fe75c43.jpg" width="650" height="154" style="border:1px solid black;"></a></p> <p>  如果我们想要上面的p元素在最左边展示,那么可以使用clear属性,如下所示。clear属性规定了元素的哪一侧不允许出现浮动元素,值为left/right表示左边/右边不允许浮动元素,both表示左边跟右边都不允许浮动元素,inherit表示从父元素继承 clear 属性的值,none表示允许浮动(默认值)。</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/e87a26d6499144b6968f7a75872250f1.jpg" target="_blank"><img alt="HTML总结1【转】_第38张图片" src="http://img.e-com-net.com/image/info8/e87a26d6499144b6968f7a75872250f1.jpg" width="650" height="162" style="border:1px solid black;"></a></p> <p>   下面的h1在一个div中,默认div是单行模式,所以h1会占一行,而且h1没有设置长度,所以其长度为整行(去除margin) 。第二个div和第三个idv因为使用了左浮动,所以其靠左展示,第四个div使用了clear并且设置了both值,所以其会被放置nav和section的下边:</p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <body bgcolor=#7fffd4> <style> #header { background-color:black; color:white; text-align:center; <!--文本对齐方式:居中--> padding:5px; } #nav { line-height:30px; <!--行高--> background-color:#eeeeee; height:300px; <!--整个块的高度--> width:100px; <!--整个块的宽度--> float:left; padding:5px; } #section { background-color:#faebd7; width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> </div> <div id="section"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> </div> <p>测试数据</p> <div id="footer"> Copyright ? W3Schools.com </div> </body> </html> </code></pre> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/a1df48080ba04a519b286bed5e4cc8e1.jpg" target="_blank"><img alt="HTML总结1【转】_第39张图片" src="http://img.e-com-net.com/image/info8/a1df48080ba04a519b286bed5e4cc8e1.jpg" width="650" height="538" style="border:1px solid black;"></a></p> <p>   还可以使用<header>, <nav>, <section>, 以及 <footer>这些语义元素标签来进行布局,下面的代码可以实现与上面相同的效果:</p> <table> <tbody> <tr> <td>header</td> <td>定义文档或节的页眉</td> </tr> <tr> <td>nav</td> <td>定义导航链接的容器</td> </tr> <tr> <td>section</td> <td>定义文档中的节</td> </tr> <tr> <td>article</td> <td>定义独立的自包含文章</td> </tr> <tr> <td>aside</td> <td>定义内容之外的内容(比如侧栏)</td> </tr> <tr> <td>footer</td> <td>定义文档或节的页脚</td> </tr> <tr> <td>details</td> <td>定义额外的细节</td> </tr> <tr> <td>summary</td> <td>定义 details 元素的标题</td> </tr> </tbody> </table> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <body bgcolor=#7fffd4> <style> header { background-color:black; color:white; text-align:center; padding:5px; } nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } section { background-color:#faebd7; width:350px; float:left; padding:10px; } footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <header> <h1>City Gallery</h1> </header> <nav> London<br> Paris<br> Tokyo<br> </nav> <section> <h1>London</h1> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> </section> <p>测试数据</p> <footer> Copyright W3Schools.com </footer> </body> </html> </code></pre> <p>  可以使用position来设置元素的位置,如下所示将按钮的位置设置为在右下角指定位置显示。如果想要鼠标滚动的时候按钮也不跟着滚动还是固定在右下角现实的话,使用fixed替换absolute(比如一些网站会将一张宣传图片固定显示在top,鼠标滚动的话该图片也不会移动,这就是使用fixed的效果)。其中的cursor:pointer设置按钮的鼠标光标形状为小手,text-align:right设置按钮文本为右对齐显示:</p> <p><a href="http://img.e-com-net.com/image/info8/2added2b58894f618a7ae58e4356f73a.jpg" target="_blank"><img alt="HTML总结1【转】_第40张图片" src="http://img.e-com-net.com/image/info8/2added2b58894f618a7ae58e4356f73a.jpg" width="650" height="169" style="border:1px solid black;"></a></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1694600266017484800"></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,html,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1882491371030376448.htm" title="大模型GUI系列论文阅读 DAY2续2:《使用指令微调基础模型的多模态网页导航》" target="_blank">大模型GUI系列论文阅读 DAY2续2:《使用指令微调基础模型的多模态网页导航》</a> <span class="text-muted">feifeikon</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BA%E6%96%87%E9%98%85%E8%AF%BB/1.htm">论文阅读</a> <div>摘要自主网页导航的进展一直受到以下因素的阻碍:依赖于数十亿次的探索性交互(通常采用在线强化学习),依赖于特定领域的模型设计,难以利用丰富的跨领域数据进行泛化。在本研究中,我们探讨了基于视觉-语言基础模型的数据驱动离线训练方法,以改进网页代理的性能。我们提出了一种名为WebGUM的指令跟随多模态代理,该代理能够同时观察网页截图和HTML页面,并输出网页导航操作,例如点击和输入文本等。WebGUM通过</div> </li> <li><a href="/article/1882475859294613504.htm" title="HTML常用标签" target="_blank">HTML常用标签</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一.标题标签-1.HTML提供了6个等级的网页标题-二.段落和换行标签2.标签用于定义段落,它可以将整个网页分为若干个段落。特点:1)文本在一个段落中会根据浏览器窗口的大小自动换行。2)段落和段落之间保有空隙。3.换行标签,将某段文本强制换行显示。三、文本格式化标签1)加粗或者2)倾斜或者3)删除线或者4)下划线或者四、特殊标签1)和标签是没有语义的,它们就是一个盒子,用来装内容的。2)标签用来布</div> </li> <li><a href="/article/1882459090265894912.htm" title="Vue全家桶 - 电商后台管理系统项目开发实录(详)" target="_blank">Vue全家桶 - 电商后台管理系统项目开发实录(详)</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>目录1.项目概述1.1电商项目基本业务概述1.2电商后台管理系统的功能1.3电商后台管理系统的开发模式(前、后端分离)2.项目初始化2.1前端项目初始化步骤码云相关操作2.2后台项目的环境安装配置3.登录/退出功能3.1登录概述3.2登录-token原理分析3.3实现登录功能3.4实现退出功能处理ESLint警告4.主页布局4.1后台首页基本布局4.2顶部布局,侧边栏布局4.2.1.顶部布局4.2</div> </li> <li><a href="/article/1882453920530362368.htm" title="爬取电影天堂" target="_blank">爬取电影天堂</a> <span class="text-muted">越哥的女人</span> <div>爬取每部电影的详细信息分析每页的url,可以得到规律是:第t页的url为:http://dytt8.net/html/gndy/dyzz/list_23_t.html于是可以先分析第一页,然后对页数进循环,就可得到所有最新电影的详细信息。fromlxmlimportetreeheaders={"User-Agent":"Mozilla/5.0(WindowsNT6.1;Win64;x64)Appl</div> </li> <li><a href="/article/1882452910051225600.htm" title="python爬取电影天堂beautiful_Python爬虫 -- 抓取电影天堂8分以上电影" target="_blank">python爬取电影天堂beautiful_Python爬虫 -- 抓取电影天堂8分以上电影</a> <span class="text-muted">carafqy</span> <div>看了几天的python语法,还是应该写个东西练练手。刚好假期里面看电影,找不到很好的影片,于是有个想法,何不搞个爬虫把电影天堂里面8分以上的电影爬出来。做完花了两三个小时,撸了这么一个程序。反正蛮简单的,思路和之前用nodejs写爬虫一样。爬虫的入口从分页的列表开始,比如美剧的列表第一页地址这样:http://www.ygdy8.net/html/gndy/oumei/list_7_1.html,</div> </li> <li><a href="/article/1882452026999238656.htm" title="用 Java 发送 HTML 内容并带附件的电子邮件" target="_blank">用 Java 发送 HTML 内容并带附件的电子邮件</a> <span class="text-muted">五行星辰</span> <a class="tag" taget="_blank" href="/search/%E4%B8%9A%E5%8A%A1%E7%B3%BB%E7%BB%9F%E5%BA%94%E7%94%A8%E6%8A%80%E6%9C%AF/1.htm">业务系统应用技术</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>实现思路首先,设置邮件服务器的相关属性,包括是否需要认证、使用的邮件协议、服务器地址、端口等。创建一个会话对象,使用Session.getInstance方法,并提供邮件服务器的属性和认证信息。创建一个MimeMessage对象作为邮件消息,设置发件人、收件人、邮件主题等信息。为了发送HTML内容,使用setContent方法并指定内容类型为text/html。对于附件,创建一个MimeMulti</div> </li> <li><a href="/article/1882446477771468800.htm" title="Mathtype使用记录" target="_blank">Mathtype使用记录</a> <span class="text-muted">白粥行</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%B7%A5%E5%85%B7/1.htm">软件工具</a><a class="tag" taget="_blank" href="/search/Mathtype/1.htm">Mathtype</a> <div>1、把大括号中的公式左对齐https://jingyan.baidu.com/article/86fae346d436053c48121a50.html2、加粗字符https://www.mathtype.cn/jiqiao/mathtype-wjsjc.html3、修改公式编号todo4、插入省略号https://office.tqzw.net.cn/office/mathtype/21827.</div> </li> <li><a href="/article/1882446225119178752.htm" title="搭建vue项目" target="_blank">搭建vue项目</a> <span class="text-muted">LYy0</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>一、VueVue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue都可以胜任。二、环境1.nodejs环境:下载地址三、创建Vue应用创建的项目将使用基于Vite的构建设置,并允许我们使用Vue的单文件组件(SFC)。$npmcreatevue@l</div> </li> <li><a href="/article/1882443062668488704.htm" title="【YashanDB知识库】非YCM方式的自动备份方案示例" target="_blank">【YashanDB知识库】非YCM方式的自动备份方案示例</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>本文内容来自YashanDB官网,原文内容请见https://www.yashandb.com/newsinfo/7281310.html?templateId=171...概述如果有YCM,推荐使用YCM自动备份,详情请参考YCM官方文档。但是如果没有YCM,则可通过crontab实现自动备份。目前示例的自动备份方案是每周的周3、周6的凌晨0点做全量备份;每天的凌晨2点做增量备份;每天的凌晨4点</div> </li> <li><a href="/article/1882439421492523008.htm" title="vue项目开发总结——任务悬赏平台(前端)" target="_blank">vue项目开发总结——任务悬赏平台(前端)</a> <span class="text-muted">boboj1</span> <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E6%80%BB%E7%BB%93/1.htm">项目总结</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/tailwindcss/1.htm">tailwindcss</a> <div>项目简介:该项目实习中的第一个项目,该项目分为用户端、企业端、后台管理端。用户可以在任务大厅接受任务,每完成任务都会获得响应的报酬,用户只能接受一个任务,该任务完成后才能继续下一个任务。任务进行期间,该任务可以被企业取消,若企业取消用户正在完成的任务,则返回5%的奖励给用户。企业可以发布任务,发布任务之前需要上传企业认证凭证给后台管理端,后台管理员审核通过之后企业才可发布任务,企业可以对用户已完成</div> </li> <li><a href="/article/1882436521097752576.htm" title="React 路由导航与传参详解" target="_blank">React 路由导航与传参详解</a> <span class="text-muted">疯狂小料</span> <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>随着单页面应用(SPA)已经成为主流。React作为最流行的前端框架之一,提供了强大的路由管理工具react-router-dom,帮助开发者轻松实现页面导航和传参。本文将详细介绍如何使用react-router-dom构建路由导航、传参以及嵌套路由的实现。1.构建路由导航1.1创建路由实例在React项目中,通常会在src目录下创建一个router文件夹来管理路由。我们可以使用react-rou</div> </li> <li><a href="/article/1882433857744072704.htm" title="Exa CEO惊人预测:前端工程师三年内消失?数学家700天后失业?AI代码生成器时代来临!" target="_blank">Exa CEO惊人预测:前端工程师三年内消失?数学家700天后失业?AI代码生成器时代来临!</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Exa公司CEO威廉·布里克近日做出了一个惊人的预测:前端工程师将在三年内消失,而数学家则只有700天的时间!这个预测的背后,是英伟达千万美元投资以及对AI技术突破的深刻观察。那么,这个大胆的预测究竟有多少可信度呢?AI代码生成器等工具的兴起,又将如何重塑前端开发和数学领域?让我们深入探讨。AI对前端开发的颠覆性影响布里克的预测并非空穴来风。近年来,AI在代码生成领域的进步日新月异。例如,Scri</div> </li> <li><a href="/article/1882426936358137856.htm" title="html两级地区选择级联,index.html · RockYang/JAreaSelect-js省市区级联选择插件 - Gitee.com..." target="_blank">html两级地区选择级联,index.html · RockYang/JAreaSelect-js省市区级联选择插件 - Gitee.com...</a> <span class="text-muted">猫咪兔兔</span> <a class="tag" taget="_blank" href="/search/html%E4%B8%A4%E7%BA%A7%E5%9C%B0%E5%8C%BA%E9%80%89%E6%8B%A9%E7%BA%A7%E8%81%94/1.htm">html两级地区选择级联</a> <div>地区选择插件.form-control{margin-right:5px;}传统表单selectUI样式获取地址仿京东UI样式选择区域vararea=$("#area-select-box").JAreaSelect({prov:1,city:72,dist:2839,level:3});$(".btn-success").on('click',function(){$(this).text(ar</div> </li> <li><a href="/article/1882423025425510400.htm" title="如何使用 Emmet 快捷方式提高开发效率" target="_blank">如何使用 Emmet 快捷方式提高开发效率</a> <span class="text-muted">木觞清</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>前端开发是一个高度依赖效率的领域,开发者们常常需要处理大量的HTML和CSS代码。为了解决重复工作和提高开发效率,Emmet快捷方式应运而生。Emmet作为一款强大的前端工具,能够通过简化的快捷命令快速生成HTML和CSS结构,极大地提升了开发者的编码速度。本文将介绍如何在日常开发中使用Emmet,帮助你节省宝贵的时间。什么是Emmet快捷方式?Emmet是一款广泛应用于前端开发的插件,它通过一系</div> </li> <li><a href="/article/1882416221970821120.htm" title="freebsd12 安装gnome3图形界面" target="_blank">freebsd12 安装gnome3图形界面</a> <span class="text-muted">sayang_shao</span> <a class="tag" taget="_blank" href="/search/FreeBSD/1.htm">FreeBSD</a><a class="tag" taget="_blank" href="/search/FreeBSD12/1.htm">FreeBSD12</a><a class="tag" taget="_blank" href="/search/gnome3/1.htm">gnome3</a><a class="tag" taget="_blank" href="/search/freebsd12/1.htm">freebsd12</a> <div>1、准备工作注:由于我是在实体机上做的所以没有提供截图。也可以访问官方文档进行安装:https://www.freebsd.org/doc/en_US.ISO8859-1/books/handbook/x11-wm.html已经安装完Freebsd12系统可以联网2、开始安装pkg更新#pkgupdate安装显卡驱动(本机为intel)#pkginstallxf86-video-intel开启li</div> </li> <li><a href="/article/1882412563321384960.htm" title="vue - 实现省市区的级联选择" target="_blank">vue - 实现省市区的级联选择</a> <span class="text-muted">紫菀檀ss</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>  最近要实现一个省市区级联选择效果,省市区的数据都是使用的本地数据,实现起来逻辑会有一点复杂,我在这里列举PC端的总结分享一下,移动端的代码也是差不多的,除了html之外,其它的可以复制根据需求使用即可。希望对大家有所帮助。一、效果图  PC端的效果图:  移动端的效果图:二、实现逻辑  我这里的实现逻辑是先通过省份来获取城市,然后通过城市来获取区县,街道因为不是固定的,所以让用户自己输入。获取</div> </li> <li><a href="/article/1882391013130039296.htm" title="uniapp或小程序使用jsencrypt" target="_blank">uniapp或小程序使用jsencrypt</a> <span class="text-muted">钢铁熊猫33</span> <a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/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/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/jsencrypt/1.htm">jsencrypt</a><a class="tag" taget="_blank" href="/search/rsa/1.htm">rsa</a> <div>uniapp或小程序使用报错jsencrypt.js使用了window对象,app、小程序中没有窗口对象的环境解决办法在jsencrypt.js文件插入以下代码varnavigator2={appName:'Netscape',userAgent:'Mozilla/5.0(iPhone;CPUiPhoneOS9_1likeMacOSX)AppleWebKit/601.1.46(KHTML,like</div> </li> <li><a href="/article/1882390380159234048.htm" title="【AI日志分析】基于机器学习的异常检测:告别传统规则的智能进阶" target="_blank">【AI日志分析】基于机器学习的异常检测:告别传统规则的智能进阶</a> <span class="text-muted">网罗开发</span> <a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/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/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a> <div>网罗开发(小红书、快手、视频号同名)  大家好,我是展菲,目前在上市企业从事人工智能项目研发管理工作,平时热衷于分享各种编程领域的软硬技能知识以及前沿技术,包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者:《ESP32-C3物联网工程开发实战》图书作者:《SwiftUI入门,进阶与实战》超级个体:CO</div> </li> <li><a href="/article/1882383953344655360.htm" title="uniapp小程序项目从0到1开发" target="_blank">uniapp小程序项目从0到1开发</a> <span class="text-muted">扶园</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>一、在HBuilderX新建项目,然后可以先把可能用到的文件夹建好二、引入UI框架,根据npm方式配置文档uView2地址:https://uviewui.com/components/install.htmlcmd执行npminstalluview-ui@2.0.36引入并使用uView的JS库,注意这两行要放在importVue之后。//main.jsimportuViewfrom"uview</div> </li> <li><a href="/article/1882377773666856960.htm" title="前端——Html+CSS" target="_blank">前端——Html+CSS</a> <span class="text-muted">逆风局?</span> <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/html5/1.htm">html5</a> <div>目录CSS引入方式颜色表达方式CSS选择器去掉超链接的下划线路径表示行高和首行缩进常见标签布局标签flex布局表单标签表单项标签改变鼠标指针的样式表格标签div{box-sizing:border-box;}CSS引入方式具体有3种引入方式,语法如下表格所示:名称语法描述示例行内样式在标签内使用style属性,属性值是css属性键值对。中国新闻网内部样式定义标签,在标签内部定义css样式。h1{.</div> </li> <li><a href="/article/1882377143401377792.htm" title="Vue.js 深度剖析:2024 前端高频面试题详解" target="_blank">Vue.js 深度剖析:2024 前端高频面试题详解</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/javascript/1.htm">javascript</a> <div>Vue.js深度剖析:2024前端高频面试题详解1.Vue的响应式原理是什么?2.Vue组件通信方式有哪些?3.Vue的生命周期是什么?4.如何优化Vue应用性能?5.什么是Vue的CompositionAPI?6.什么是Vue的VirtualDOM?7.Vuex与Pinia的区别是什么?1.Vue的响应式原理是什么?答:Vue的响应式系统基于数据劫持和发布-订阅模式。数据劫持:Vue2使用Obj</div> </li> <li><a href="/article/1882376638465896448.htm" title="Vue-Router路由动态缓存组件(keep-alive),vue2/vue3不同写法" target="_blank">Vue-Router路由动态缓存组件(keep-alive),vue2/vue3不同写法</a> <span class="text-muted">码喽的自我修养</span> <a class="tag" taget="_blank" href="/search/vue2%2F3/1.htm">vue2/3</a><a class="tag" taget="_blank" href="/search/%E4%BB%8E%E5%9F%BA%E7%A1%80%E5%88%B0%E8%B5%B7%E9%A3%9E/1.htm">从基础到起飞</a><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><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a> <div>个人简介:某大型国企资深软件开发工程师,信息系统项目管理师、CSDN优质创作者、阿里云专家博主、华为云云享专家,分享前端后端相关技术与工作常见问题~作者:码喽的自我修养❣️专栏:vue2/3从基础到起飞若有帮助,还请关注➕点赞➕收藏,不行的话我再努努力文章目录一、简介它的主要作用是缓存不活动的组件实例,而不是销毁它们。基本用法生命周期钩子二、定义是否缓存组件三、缓存组件相关配置1.通过:inclu</div> </li> <li><a href="/article/1882375629068890112.htm" title="Vue 3中的路由(Router)详解" target="_blank">Vue 3中的路由(Router)详解</a> <span class="text-muted">scorpion_V</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>在前端开发中,路由是构建单页应用程序的核心慨念之一。允许应用根据URL的变化动态地渲染不同的组件或页面。Vue.js提供了官方的路由管理工具——VueRouter。接下来这篇文章将逐步讲解Vue3中的路由概念以及使用。一、什么是路由?路由其实就是URL与应用程序视图之间的映射关系。在传统的多页应用里面,每次跳转都是向服务器发送请求,服务器返回新的页面的过程。但是在SPA中,页面并不会刷新,而是根据</div> </li> <li><a href="/article/1882374493255561216.htm" title="Element修改表格结构样式集合(后续实时更新)" target="_blank">Element修改表格结构样式集合(后续实时更新)</a> <span class="text-muted">白嫖叫上我</span> <a class="tag" taget="_blank" href="/search/element-ui/1.htm">element-ui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>场景修改前端Element组件el-table样式实现线表格-->-->执行-->轨迹轨迹-->.guiji-pop{height:100%;width:100%;.tablepro{width:100%;height:calc(100%-0.82rem);margin-top:0.16rem;::v-deep.el-table__body-wrapper{height:calc(100%-0.4</div> </li> <li><a href="/article/1882373447099674624.htm" title="Exa CEO惊人预测:前端工程师三年内消失?数学家700天后失业?AI代码生成器时代来临!" target="_blank">Exa CEO惊人预测:前端工程师三年内消失?数学家700天后失业?AI代码生成器时代来临!</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Exa公司CEO威廉·布里克近日做出了一个惊人的预测:前端工程师将在三年内消失,而数学家则只有700天的时间!这个预测的背后,是英伟达千万美元投资以及对AI技术突破的深刻观察。那么,这个大胆的预测究竟有多少可信度呢?AI代码生成器等工具的兴起,又将如何重塑前端开发和数学领域?让我们深入探讨。AI对前端开发的颠覆性影响布里克的预测并非空穴来风。近年来,AI在代码生成领域的进步日新月异。例如,Scri</div> </li> <li><a href="/article/1882372179350319104.htm" title="【YashanDB知识库】YCM数据库托管遇到的问题" target="_blank">【YashanDB知识库】YCM数据库托管遇到的问题</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>本文内容来自YashanDB官网,原文内容请见https://www.yashandb.com/newsinfo/7281308.html?templateId=171...YCM托管了集群,现在显示数据库处于故障状态,按照告警项建议检查实例的状态是正常运行的问题现象:查看dba\_users视图发现yasom用户不存在。问题原因:YCM运维工具是通过yasdb中的yasom用户进行数据库管理的,</div> </li> <li><a href="/article/1882368190961479680.htm" title="无@RequestBody获取数据为null" target="_blank">无@RequestBody获取数据为null</a> <span class="text-muted">爱恰鸡米花</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>知识点参考:https://blog.csdn.net/justry_deng/article/details/80972817/今天在做一个post提交数据时,发现后台接收到的数据总为null,这是vue前端代码submitForm(formName){this.ruleForm.pic='/img/singerPic/666.jpg';const_this=this;this.$refs[fo</div> </li> <li><a href="/article/1882366874432368640.htm" title="EventLoop事件循环机制(浏览器和Node EventLoop)" target="_blank">EventLoop事件循环机制(浏览器和Node EventLoop)</a> <span class="text-muted"></span> <div>前端的同学们应该都听说过EventLoop的概念,网上各大平台关于它的文章也是成百上千质量参差不一,其实在笔者刚开始接触js的时候这对这方面一头雾水,也是看了高程、官方文档以及大量的文章后才对它有了深刻认识,在这儿就来和大家分享下我对它的的认识和理解,不过要讲明白EventLoop这个东东还是要从头说起。本篇内容循序渐进比较长,需要耐心看完。注:如遇到有一些链接无法访问可能需要科学上网文章首发本人</div> </li> <li><a href="/article/1882366674858995712.htm" title="python把列表插入列表" target="_blank">python把列表插入列表</a> <span class="text-muted">Zoert</span> <div>python相关学习资料:https://edu.51cto.com/video/4102.htmlhttps://edu.51cto.com/video/1158.htmlhttps://edu.51cto.com/video/4645.htmlPython中列表的嵌套与操作在Python编程中,列表(List)是一种非常重要的数据结构,它不仅可以存储数据,还可以进行各种操作,如插入、删除、排序</div> </li> <li><a href="/article/1882357717692116992.htm" title="Spring MVC中HandlerInterceptor和Filter的区别" target="_blank">Spring MVC中HandlerInterceptor和Filter的区别</a> <span class="text-muted">码农小灰</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/SpringMVC/1.htm">SpringMVC</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><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>目录一、处理阶段二、功能范围三、参数访问四、配置方式五、使用场景说明在SpringMVC中,HandlerInterceptor和Filter都是用于拦截请求的重要组件,但它们在多个方面存在显著的差异。本文将详细解析这两种拦截机制的区别,并结合使用场景进行说明。一、处理阶段Filter:是基于Servlet的,作用于请求的最前端,即请求进入Servlet容器后、进入Servlet之前被调用。它可以</div> </li> <li><a href="/article/101.htm" title="数据采集高并发的架构应用" target="_blank">数据采集高并发的架构应用</a> <span class="text-muted">3golden</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>问题的出发点:          最近公司为了发展需要,要扩大对用户的信息采集,每个用户的采集量估计约2W。如果用户量增加的话,将会大量照成采集量成3W倍的增长,但是又要满足日常业务需要,特别是指令要及时得到响应的频率次数远大于预期。       &n</div> </li> <li><a href="/article/228.htm" title="不停止 MySQL 服务增加从库的两种方式" target="_blank">不停止 MySQL 服务增加从库的两种方式</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux%E8%A7%86%E9%A2%91/1.htm">linux视频</a><a class="tag" taget="_blank" href="/search/linux%E8%B5%84%E6%96%99/1.htm">linux资料</a><a class="tag" taget="_blank" href="/search/linux%E6%95%99%E7%A8%8B/1.htm">linux教程</a><a class="tag" taget="_blank" href="/search/linux%E8%87%AA%E5%AD%A6/1.htm">linux自学</a> <div>现在生产环境MySQL数据库是一主一从,由于业务量访问不断增大,故再增加一台从库。前提是不能影响线上业务使用,也就是说不能重启MySQL服务,为了避免出现其他情况,选择在网站访问量低峰期时间段操作。  一般在线增加从库有两种方式,一种是通过mysqldump备份主库,恢复到从库,mysqldump是逻辑备份,数据量大时,备份速度会很慢,锁表的时间也会很长。另一种是通过xtrabacku</div> </li> <li><a href="/article/355.htm" title="Quartz——SimpleTrigger触发器" target="_blank">Quartz——SimpleTrigger触发器</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/SimpleTrigger/1.htm">SimpleTrigger</a><a class="tag" taget="_blank" href="/search/TriggerUtils/1.htm">TriggerUtils</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a> <div>转载请出自出处:http://eksliang.iteye.com/blog/2208166 一.概述 SimpleTrigger触发器,当且仅需触发一次或者以固定时间间隔周期触发执行;   二.SimpleTrigger的构造函数 SimpleTrigger(String name, String group):通过该构造函数指定Trigger所属组和名称; Simpl</div> </li> <li><a href="/article/482.htm" title="Informatica应用(1)" target="_blank">Informatica应用(1)</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/lookup/1.htm">lookup</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E4%BB%B6/1.htm">组件</a><a class="tag" taget="_blank" href="/search/Informatica/1.htm">Informatica</a> <div>1.如果要在workflow中调用shell脚本有一个command组件,在里面设置shell的路径;调度wf可以右键出现schedule,现在用的是HP的tidal调度wf的执行。 2.designer里面的router类似于SSIS中的broadcast(多播组件);Reset_Workflow_Var:参数重置 (比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要</div> </li> <li><a href="/article/609.htm" title="python 获取图片验证码中文字" target="_blank">python 获取图片验证码中文字</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>根据现成的开源项目 http://code.google.com/p/pytesser/改写 在window上用easy_install安装不上  看了下源码发现代码很少  于是就想自己改写一下   添加支持网络图片的直接解析   #coding:utf-8 #import sys #reload(sys) #sys.s</div> </li> <li><a href="/article/736.htm" title="AJAX" target="_blank">AJAX</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担   2.代码结构:    <html> <head> <script type="text/javascript"> function loadXMLDoc() { .... AJAX script goes here ... </div> </li> <li><a href="/article/863.htm" title="创业OR读研" target="_blank">创业OR读研</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/%E5%88%9B%E4%B8%9A/1.htm">创业</a> <div>        现在研一,有种想创业的想法,不知道该不该去实施。因为对于的我情况这两者是矛盾的,可能就是鱼与熊掌不能兼得。                研一的生活刚刚过去两个月,我们学校主要的是</div> </li> <li><a href="/article/990.htm" title="需求做得好与坏直接关系着程序员生活质量" target="_blank">需求做得好与坏直接关系着程序员生活质量</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/IT+%E7%94%9F%E6%B4%BB/1.htm">IT 生活</a> <div>         这个故事还得从去年换工作的事情说起,由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司,专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发,从此苦逼的日子开始了。        系统背景:五月份就有同事前往甲方了解需求一直到6月份,后续几个月也完</div> </li> <li><a href="/article/1117.htm" title="如何定义和区分高级软件开发工程师" target="_blank">如何定义和区分高级软件开发工程师</a> <span class="text-muted">aoyouzi</span> <div>在软件开发领域,高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置,但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为,单纯使用年限来划分开发人员存在问题,两个同样具有 10 年开发经验的开发人员可能大不相同。近日,他发表了一篇博文,根据开发者所能发挥的作用划分软件开发工程师的成长阶段。   初</div> </li> <li><a href="/article/1244.htm" title="Servlet的请求与响应" target="_blank">Servlet的请求与响应</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/get%E6%8F%90%E4%BA%A4/1.htm">get提交</a><a class="tag" taget="_blank" href="/search/java%E5%A4%84%E7%90%86post%E6%8F%90%E4%BA%A4/1.htm">java处理post提交</a> <div>  Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介     1,Http的请求方式(get  ,post);   客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法,  http的get方式 servlet就是都doGet(</div> </li> <li><a href="/article/1371.htm" title="web.xml配置详解之listener" target="_blank">web.xml配置详解之listener</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/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/listener/1.htm">listener</a> <div>一.定义 <listener> <listen-class>com.myapp.MyListener</listen-class> </listener>   二.作用        该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响</div> </li> <li><a href="/article/1498.htm" title="Web页面性能优化(yahoo技术)" target="_blank">Web页面性能优化(yahoo技术)</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/Yahoo/1.htm">Yahoo</a> <div>1.尽可能的减少HTTP请求数 content 2.使用CDN server 3.添加Expires头(或者 Cache-control) server 4.Gzip 组件 server 5.把CSS样式放在页面的上方。 css 6.将脚本放在底部(包括内联的) javascript 7.避免在CSS中使用Expressions css 8.将javascript和css独立成外部文</div> </li> <li><a href="/article/1625.htm" title="【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序" target="_blank">【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>游标   游标,简单的说就是一个查询结果的指针。游标作为数据库的一个对象,使用它是包括 声明 打开 循环抓去一定数目的文档直到结果集中的所有文档已经抓取完 关闭游标   游标的基本用法,类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档),在获取一个文档集时,可以提供一个类似JDBC的FetchSize</div> </li> <li><a href="/article/1752.htm" title="ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法" target="_blank">ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/ORA-12514/1.htm">ORA-12514</a> <div> 今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”,遂在网上找到了解决方案: ①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件,你会看到如下信息:   # listener.ora Network Configuration File: D:\database\Oracle\net</div> </li> <li><a href="/article/1879.htm" title="Eclipse 问题 A resource exists with a different case" target="_blank">Eclipse 问题 A resource exists with a different case</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>在使用Eclipse进行开发的时候,出现了如下的问题: Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&</div> </li> <li><a href="/article/2006.htm" title="编程之美-小飞的电梯调度算法" target="_blank">编程之美-小飞的电梯调度算法</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> public class AptElevator { /** * 编程之美 小飞 电梯调度算法 * 在繁忙的时间,每次电梯从一层往上走时,我们只允许电梯停在其中的某一层。 * 所有乘客都从一楼上电梯,到达某层楼后,电梯听下来,所有乘客再从这里爬楼梯到自己的目的层。 * 在一楼时,每个乘客选择自己的目的层,电梯则自动计算出应停的楼层。 * 问:电梯停在哪</div> </li> <li><a href="/article/2133.htm" title="SQL注入相关概念" target="_blank">SQL注入相关概念</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>SQL Injection:就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。 具体来说,它是利用现有应用程序,将(恶意)的SQL命令注入到后台数据库引擎执行的能力,它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句。 首先让我们了解什么时候可能发生SQ</div> </li> <li><a href="/article/2260.htm" title="[光与电]光子信号战防御原理" target="_blank">[光与电]光子信号战防御原理</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%90%86/1.htm">原理</a> <div>       无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢?       我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下       根据光</div> </li> <li><a href="/article/2387.htm" title="oracle 11g新特性:Pending Statistics" target="_blank">oracle 11g新特性:Pending Statistics</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/dbms_stats/1.htm">dbms_stats</a> <div>oracle 11g新特性:Pending Statistics 转 从11g开始,表与索引的统计信息收集完毕后,可以选择收集的统信息立即发布,也可以选择使新收集的统计信息处于pending状态,待确定处于pending状态的统计信息是安全的,再使处于pending状态的统计信息发布,这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。 在 11g 之前的版本中,D</div> </li> <li><a href="/article/2514.htm" title="快速理解RequireJs" target="_blank">快速理解RequireJs</a> <span class="text-muted">dengkane</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/requirejs/1.htm">requirejs</a> <div>RequireJs已经流行很久了,我们在项目中也打算使用它。它提供了以下功能: 声明不同js文件之间的依赖 可以按需、并行、延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂。 在html中引入requirejs 在HTML中,添加这样的 <script> 标签: <script src="/path/to</div> </li> <li><a href="/article/2641.htm" title="C语言学习四流程控制if条件选择、for循环和强制类型转换" target="_blank">C语言学习四流程控制if条件选择、for循环和强制类型转换</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div># include <stdio.h> int main(void) { int i, j; scanf("%d %d", &i, &j); if (i > j) printf("i大于j\n"); else printf("i小于j\n"); retu</div> </li> <li><a href="/article/2768.htm" title="dictionary的使用要注意" target="_blank">dictionary的使用要注意</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/IO/1.htm">IO</a> <div>NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys: user.user_id , @"id", user.username , @"username", </div> </li> <li><a href="/article/2895.htm" title="Android 中的资源访问(Resource)" target="_blank">Android 中的资源访问(Resource)</a> <span class="text-muted">finally_m</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/String/1.htm">String</a><a class="tag" taget="_blank" href="/search/drawable/1.htm">drawable</a><a class="tag" taget="_blank" href="/search/color/1.htm">color</a> <div> 简单的说,Android中的资源是指非代码部分。例如,在我们的Android程序中要使用一些图片来设置界面,要使用一些音频文件来设置铃声,要使用一些动画来显示特效,要使用一些字符串来显示提示信息。那么,这些图片、音频、动画和字符串等叫做Android中的资源文件。 在Eclipse创建的工程中,我们可以看到res和assets两个文件夹,是用来保存资源文件的,在assets中保存的一般是原生</div> </li> <li><a href="/article/3022.htm" title="Spring使用Cache、整合Ehcache" target="_blank">Spring使用Cache、整合Ehcache</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%40Cacheable/1.htm">@Cacheable</a> <div>Spring使用Cache            从3.1开始,Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的,其核心思想是这样的:当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中,等到下次利用同样的</div> </li> <li><a href="/article/3149.htm" title="当druid遇上oracle blob(clob)" target="_blank">当druid遇上oracle blob(clob)</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>http://blog.csdn.net/renfufei/article/details/44887371 众所周知,Oracle有很多坑, 所以才有了去IOE。 在使用Druid做数据库连接池后,其实偶尔也会碰到小坑,这就是使用开源项目所必须去填平的。【如果使用不开源的产品,那就不是坑,而是陷阱了,你都不知道怎么去填坑】 用Druid连接池,通过JDBC往Oracle数据库的</div> </li> <li><a href="/article/3276.htm" title="easyui datagrid pagination获得分页页码、总页数等信息" target="_blank">easyui datagrid pagination获得分页页码、总页数等信息</a> <span class="text-muted">ldzyz007</span> <div>var grid = $('#datagrid');  var options = grid.datagrid('getPager').data("pagination").options;  var curr = options.pageNumber;  var total = options.total;  var max =</div> </li> <li><a href="/article/3403.htm" title="浅析awk里的数组" target="_blank">浅析awk里的数组</a> <span class="text-muted">nigelzeng</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/array/1.htm">array</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a><a class="tag" taget="_blank" href="/search/awk/1.htm">awk</a> <div>awk绝对是文本处理中的神器,它本身也是一门编程语言,还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论,如何利用数组来帮助完成文本分析。   有这么一组数据:   abcd,91#31#2012-12-31 11:24:00 case_a,136#19#2012-12-31 11:24:00 case_a,136#23#2012-12-31 1</div> </li> <li><a href="/article/3530.htm" title="搭建 CentOS 6 服务器(6) - TigerVNC" target="_blank">搭建 CentOS 6 服务器(6) - TigerVNC</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>安装GNOME桌面环境 # yum groupinstall "X Window System" "Desktop" 安装TigerVNC # yum -y install tigervnc-server tigervnc 启动VNC服务 # /etc/init.d/vncserver restart # vncser</div> </li> <li><a href="/article/3657.htm" title="Spring 数据库连接整理" target="_blank">Spring 数据库连接整理</a> <span class="text-muted">tomcat_oracle</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><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>1、数据库连接jdbc.properties配置详解   jdbc.url=jdbc:hsqldb:hsql://localhost/xdb   jdbc.username=sa   jdbc.password=   jdbc.driver=不同的数据库厂商驱动,此处不一一列举   接下来,详细配置代码如下:    Spring连接池    </div> </li> <li><a href="/article/3784.htm" title="Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常" target="_blank">Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常</a> <span class="text-muted">xp9802</span> <div>用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错      异常栈:java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常       导入包 jaxen-1.1-beta-6.jar 解决; &nb</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>