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/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/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/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/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> <span class="text-muted">九旬大爷的梦</span> <div>最近在折腾一个cms系统,用的vue+express,但是就一个表单提交就弄了好久,记录一下。环境:Node10+前端:Vue服务端:Express依赖包:vueexpressaxiosexpress-formidableelement-ui(可选)前言:axiosget请求参数是:paramsaxiospost请求参数是:dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景:构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景:构建高效、可扩展的Web架构</a> <span class="text-muted">张某布响丸辣</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx,作为当今最流行的Web服务器和反向代理软件之一,凭借其高性能、稳定性和灵活性,在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站,还是大型企业级应用,Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景,帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件(如HTML、CSS、JavaScript、图片等)的网站,Ngin</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>