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/1891979733613211648.htm" title="深度求索-DeepSeek-R1本地部署指南" target="_blank">深度求索-DeepSeek-R1本地部署指南</a> <span class="text-muted">0小和尚化缘12</span> <a class="tag" taget="_blank" href="/search/%E4%B8%AA%E4%BA%BA%E5%BC%80%E5%8F%91/1.htm">个人开发</a> <div>1、参考:部署指南2、参考:deepseek本地部署只需三步DeepSeek本地部署只需三步:1、安装运行环境:安装Ollama:Ollama官网:官网2、下载模型:参数越大,需要物里硬件越多3、安装部署前端交互程序:都是现成的开源架构</div> </li> <li><a href="/article/1891970024835444736.htm" title="[生活杂项][运动教程]自由泳" target="_blank">[生活杂项][运动教程]自由泳</a> <span class="text-muted">xcy6666</span> <a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a> <div>https://v.youku.com/v_show/id_XMzgzMjkwMzg0MA==.html?spm=a2h0k.11417342.soresults.dtitlehttps://v.youku.com/v_show/id_XMzgxNjM2NjY4NA==.html?spm=a2h0k.11417342.soresults.dtitle</div> </li> <li><a href="/article/1891959043426152448.htm" title="请解释设备像素、CSS 像素、设备独立像素、DPR、PPI 之间的区别 ?" target="_blank">请解释设备像素、CSS 像素、设备独立像素、DPR、PPI 之间的区别 ?</a> <span class="text-muted">程序员黄同学</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/Java%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">Java面试题</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</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>一、核心概念解释1.设备像素(PhysicalPixel)定义:屏幕物理发光点的最小单位,硬件决定不可变。例如iPhone12的屏幕分辨率2532×1170表示横向2532个物理像素点。特点:不同设备物理像素密度不同,高密度屏幕(如Retina)单位面积像素更多。2.CSS像素(CSSPixel)定义:前端开发中使用的逻辑像素单位,如width:300px。浏览器根据DPR自动换算为物理像素。特点</div> </li> <li><a href="/article/1891946314548178944.htm" title="Java利用itextpdf实现pdf文件生成" target="_blank">Java利用itextpdf实现pdf文件生成</a> <span class="text-muted">小码农吗</span> <a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%B8%B8%E6%A0%8F%E7%9B%AE/1.htm">日常栏目</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a> <div>前言最近公司让写一个数据页面生成pdf的功能,找了一些市面代码感觉都太麻烦,就自己综合性整合了一个便捷的工具类,开发只需简单组装数据直接调用即可快速生成pdf文件。望大家一起学习!!!代码获取方式:资源下载下载源码后台私信(一键三连哦!!!)二、前期准备1、html模版(放置接口所在项目的resourcess/templates/)需要准备一个要看到的pdf模版,利用html代码形式简单输出,其中</div> </li> <li><a href="/article/1891942406304100352.htm" title="防重复提交思路" target="_blank">防重复提交思路</a> <span class="text-muted">harmful_sheep</span> <a class="tag" taget="_blank" href="/search/springboot/1.htm">springboot</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>本文将从以下几个方面展开:(1)重复提交产生的原因(2)什么是幂等性(3)针对重复提交,前后端的解决方案(4)如果实现一个防重复提交工具产生原因由于重复点击或者网络重发eg:点击提交按钮两次;点击刷新按钮;使用浏览器后退按钮重复之前的操作,导致重复提交表单;使用浏览器历史记录重复提交表单;浏览器重复的HTTP请求;nginx重发等情况;分布式RPC的try重发等;主要有2个部分:(1)前端用户操作</div> </li> <li><a href="/article/1891934331341959168.htm" title="vue中onclick如何调用methods中的方法" target="_blank">vue中onclick如何调用methods中的方法</a> <span class="text-muted">库库的写代码</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>文章目录前言一、代码一开始效果二、解决方案前言今天在开发vue项目中使用的第三方地图,地图上绘制的marker内容需要自定义,因为绘制的内容是原生HTML,所以遇到点击事件的时候就用了onclick来定义,此时想要调用methods中的方法,直接通过this.xx是获取不到的,因为onclick后面的事件是调用的window中的事件,所以需要把此事件绑定到window上即可一、代码一开始效果thi</div> </li> <li><a href="/article/1891933572399427584.htm" title="html5 二进制数据解析,JavaScript读写二进制数据的方法详解" target="_blank">html5 二进制数据解析,JavaScript读写二进制数据的方法详解</a> <span class="text-muted">如果有片海</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%95%B0%E6%8D%AE%E8%A7%A3%E6%9E%90/1.htm">二进制数据解析</a> <div>前言二进制是计算技术中广泛采用的一种数制。二进制数据是用0和1两个数码来表示的数,如果想要在前端中处理音频和视频。那你必须要对二进制数据有很好地掌握和操作能力。下面话不多说了,来一起看看详细介绍的吧类型化数组的出现类型化数组是HTML5中引入的API,它能够让开发者使用JavaScript直接操作二进制数据。在类型化数组出现之前,我们是无法直接通过JavaScript操作二进制数据,通常都是操作J</div> </li> <li><a href="/article/1891924486438055936.htm" title="前端如何播放二进制音频数据" target="_blank">前端如何播放二进制音频数据</a> <span class="text-muted">尼古拉斯网页匠</span> <a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>音频数据播放数据consttryListen=async(row)=>{awakenPlay(row.sid).then((res)=>{//请求接口,拿到二进制音频数据constbinaryData=atob(res.data);//将二进制数据转换为Uint8ArrayconstbyteArray=newUint8Array(binaryData.length);for(leti=0;i<bi</div> </li> <li><a href="/article/1891913256025518080.htm" title="literal用法" target="_blank">literal用法</a> <span class="text-muted">格桑花</span> <a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/server/1.htm">server</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/asp/1.htm">asp</a><a class="tag" taget="_blank" href="/search/div/1.htm">div</a> <div>spell">Literal控件支持Mode属性,该属性用于指定控件对您所添加的标记的处理方式。可以将Mode属性设置为以下值:Transform。添加到控件中的任何标记都将进行转换,以适应请求浏览器的协议。如果向使用HTML外的其他协议的移动设备呈现内容,此设置非常有用。PassThrough。添加到控件中的任何标记都将按原样呈现在浏览器中。Encode。添加到控件中的任何标记都将使用HtmlE</div> </li> <li><a href="/article/1891896722997702656.htm" title="【Linux探索学习】第二十九弹——线程概念:Linux线程的基本概念与线程控制详解" target="_blank">【Linux探索学习】第二十九弹——线程概念:Linux线程的基本概念与线程控制详解</a> <span class="text-muted">GG Bond.ฺ</span> <a class="tag" taget="_blank" href="/search/Linux%E6%8E%A2%E7%B4%A2%E5%AD%A6%E4%B9%A0/1.htm">Linux探索学习</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>Linux学习笔记:https://blog.csdn.net/2301_80220607/category_12805278.html?spm=1001.2014.3001.5482前言:在现代操作系统中,线程是程序执行流的最小单元。与进程相比,线程更加轻量级,创建和销毁的开销更小,且线程之间可以共享内存空间,因此在多任务处理、并发编程中,线程的使用非常广泛。Linux作为一个多用户、多任务的操</div> </li> <li><a href="/article/1891889020959518720.htm" title="NameError: name ‘xxx’ is not defined" target="_blank">NameError: name ‘xxx’ is not defined</a> <span class="text-muted">一直幸运</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>第一个练手小项目遇到N个NameError,技能熟练度蹭蹭往上涨,哈哈…转发一个网上的比较全的解决贴,共勉。原址:https://www.cnblogs.com/zyh19980816/p/11844659.html问题一:name‘name’isnotdefined“name"两端是双下划线”_",不是只有一个""。问题二:name‘messagebox’isnotdefined“”内为某个数据</div> </li> <li><a href="/article/1891881200465801216.htm" title="HTML之JavaScript DOM(document)编程处理事件" target="_blank">HTML之JavaScript DOM(document)编程处理事件</a> <span class="text-muted">录大大i</span> <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/JavaScript/1.htm">JavaScript</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML之JavaScriptDOM(document)编程处理事件Document/*事件:本质是行为,用户的行为或者浏览器的行为;事件发生指的是处罚js函数执行事件的三要素:事件源、事件、事件处理程序事件的绑定:1.通过元素的属性绑定on***2.通过DOM编程动态绑定注:1.一个事件可以绑定多个函数;eg:onclick="show(),show1()2.一个元素可以绑定多个事件eg:onc</div> </li> <li><a href="/article/1891880690992082944.htm" title="前端面试题" target="_blank">前端面试题</a> <span class="text-muted">阿芯爱编程</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>以下是一些前端面试题:一、HTML/CSS部分请描述HTML的语义化标签的重要性,并列举一些常用的语义化标签。答案:重要性:对搜索引擎优化(SEO)有帮助,搜索引擎能够更好地理解页面结构,从而提高网站在搜索结果中的排名。提高代码的可读性和可维护性,使开发者更容易理解页面布局和功能逻辑。对于辅助技术(如屏幕阅读器)更友好,能够准确地向用户传达页面内容。常用语义化标签::定义页面或区域的头部内容,通常</div> </li> <li><a href="/article/1891880430798434304.htm" title="微软Edge浏览器全解析" target="_blank">微软Edge浏览器全解析</a> <span class="text-muted">109702008</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/edge/1.htm">edge</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>GPT-4o(OpenAI)微软Edge浏览器是由微软开发的一款网络浏览器,深受用户喜爱,以下是对其全面解析:1.简介微软Edge浏览器最早在2015年伴随Windows10发布。最初版本基于EdgeHTML引擎,2019年微软宣布Edge浏览器将基于开源的Chromium引擎重新构建,并于2020年1月正式发布。2.用户界面-简洁设计:Edge浏览器的界面简洁、现代化,易于导航。-自定义:用户可</div> </li> <li><a href="/article/1891878027105726464.htm" title="【linux numa】 NUMA 绑核" target="_blank">【linux numa】 NUMA 绑核</a> <span class="text-muted">Dayu_log</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>1.NUMA的前世今生NUMA(NonUniformMemoryAccess)和UMA(UniformMemoryAccess)是两种CPU相关的硬件架构。在早期的UMA架构中,CPU通过前端总线(FSB,FrontSideBus)连接到北桥芯片,然后北桥芯片连接到内存,即内存控制器集成在北桥芯片中。外部IO设备与南桥芯片相连,南桥芯片与北桥芯片通过内部总线相连。下图为UMA架构图下图为早期的UM</div> </li> <li><a href="/article/1891873861125861376.htm" title="前端高级面试题" target="_blank">前端高级面试题</a> <span class="text-muted">阿芯爱编程</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>以下是一些前端高级面试可能涉及到的内容:一、前端工程化如何构建一个适合大型团队的前端代码规范和构建流程?答案:代码规范方面:使用ESLint结合Prettier来统一JavaScript和CSS(包括预处理器如Sass或Less)的语法风格。例如,规定变量命名采用驼峰命名法,函数名要有明确含义等。对于HTML结构,制定语义化标签的使用规范,如导航栏使用标签,页脚使用标签等。确定组件化的规范,包括组</div> </li> <li><a href="/article/1891866674978680832.htm" title="javascript当中insertBefore的用法" target="_blank">javascript当中insertBefore的用法</a> <span class="text-muted">qq_44594371</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/insertBefore/1.htm">insertBefore</a><a class="tag" taget="_blank" href="/search/insertBefore/1.htm">insertBefore</a> <div>例1.3(insertBeforeIEFF.html)1111msgtest222aaaaaaaaendinsertedNodevarinsertedNode=document.getElementById("insertedNode");varaaa=document.getElementById("aaa");vartest=document.getElementById("contain")</div> </li> <li><a href="/article/1891859592703438848.htm" title="用 Python 撸一个 Web 服务器-第7章:重构——更好的组织代码" target="_blank">用 Python 撸一个 Web 服务器-第7章:重构——更好的组织代码</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/pythonweb/1.htm">pythonweb</a> <div>通过前几章的学习,我们完成了TodoList程序的todo管理部分,实现了对todo的增、删、改、查基本操作,这也是几乎所有Web程序都具备的功能。我们当然可以按照目前的思路继续来实现用户管理部分,在models.py中编写用户相关的模型,在templates/目录下新建用户相关HTML,在controllers.py中编写用户相关的视图函数。但是,随着新功能的加入,把不同功能的代码都写在相同的文</div> </li> <li><a href="/article/1891850155372638208.htm" title="Vue 实现省市区三级联动选择(附带JSON数据)" target="_blank">Vue 实现省市区三级联动选择(附带JSON数据)</a> <span class="text-muted">夜璨如炽</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC%E5%8A%9E%E5%85%AC/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>功能需求:做一个省市区三级联动得选择控件,效果如图1.html部分代码请选择省{{index.label}}请选择市{{index.label}}请选择区、县{{index.label}}2.js部分varvm=newVue({el:'#rrapp',data:{address:{g_dict:'',f_dict:'',s_dict:'',s_province:'defualt',s_city:'</div> </li> <li><a href="/article/1891850152411459584.htm" title="Vue 实现全球国家国旗的使用,附全球国家的JSON数据" target="_blank">Vue 实现全球国家国旗的使用,附全球国家的JSON数据</a> <span class="text-muted">Song_Estelle</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>有时在前端展示中需要用到全球国家的国旗图标,我们可以用到flag-icon-css这个插件。1.安装flag-icon-cssnpminstallflag-icon-css2.在main.js中全局引用import'flag-icon-css/css/flag-icons.css'3.在界面中使用换不同的国旗,将flag-icon-后的国家代码换掉就行,国家代码对照表iso-3166-1全球国家名</div> </li> <li><a href="/article/1891849774223650816.htm" title="html5+ push-消息推送" target="_blank">html5+ push-消息推送</a> <span class="text-muted">代码简单说</span> <a class="tag" taget="_blank" href="/search/html5%2B/1.htm">html5+</a><a class="tag" taget="_blank" href="/search/h5%2B/1.htm">h5+</a><a class="tag" taget="_blank" href="/search/mui/1.htm">mui</a><a class="tag" taget="_blank" href="/search/js%E6%8E%A8%E9%80%81/1.htm">js推送</a><a class="tag" taget="_blank" href="/search/%E6%89%93%E5%8C%85app/1.htm">打包app</a> <div>push-消息推送Push模块管理推送消息功能,可以实现在线、离线的消息推送,通过plus.push可获取推送消息管理对象。方法:addEventListener:添加推送消息事件监听器clear:清空所有推送消息createMessage:创建本地消息getAllMessage:获取所有推送消息getClientInfo:获取客户端推送标识信息setAutoNotification:设置程序是否</div> </li> <li><a href="/article/1891849521944653824.htm" title="服务器数据传输协议,详解前端websocket服务器之数据传输协议 前言 服务器发送数据 服务端接受数据 总结..." target="_blank">服务器数据传输协议,详解前端websocket服务器之数据传输协议 前言 服务器发送数据 服务端接受数据 总结...</a> <span class="text-muted">weixin_39980575</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%95%B0%E6%8D%AE%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE/1.htm">服务器数据传输协议</a> <div>前言上一篇文章我们初步搭建了一个websocket,但是还不能发送和接收数据,这篇文章我们聊一聊它是如何收发数据的。websocket支持文本和二进制的传输,内部是如何接收和发送数据的对使用者来说是不可见的,虽然这不影响使用,但是为了更加深入了解websocket的原理,我们还是有必要一探究竟!我们首先来看一张数据结构的二进制图,如下:如图1,乍一看可能看不懂,我先来解释一下:图1最上面表示的是二</div> </li> <li><a href="/article/1891844087418515456.htm" title="如何使用Vue3创建在线三维模型展示?" target="_blank">如何使用Vue3创建在线三维模型展示?</a> <span class="text-muted">ScriptEcho</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>本文由ScriptEcho平台提供技术支持项目地址:传送门代码相关的技术博客代码应用场景介绍本段代码使用RoughJS库在HTML5Canvas上创建了手绘风格的图像,展示了RoughJS库的强大功能,可用于创建具有有机手绘外观的图形。代码基本功能介绍代码通过RoughJS库创建了一个火焰状的图形,包括:火焰主体:使用path()函数绘制,采用不规则的形状和粗糙的线条。火焰细节:添加了额外的pat</div> </li> <li><a href="/article/1891842321465536512.htm" title="JS(1-69)" target="_blank">JS(1-69)</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>01_JS介绍1.1JS是什么1.JavaScript(是什么?)是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。2.作用(做什么?)网页特效(监听用户的一些行为让网页作出对应的反馈)表单验证(针对表单数据的合法性进行判断)数据交互(获取后台的数据,渲染到前端服务端编程(node.js)3.JavaScript的组成(有什么?)ECMAScript:规定了js基础语法核心知识。口比如:变</div> </li> <li><a href="/article/1891841060418678784.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/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>撮合前端平台在低代码平台上的落地探索:解锁中台架构的更多可能前言在当前技术高速发展的环境中,中台架构的应用早已成为大规模企业的常态,尤其是在拥有多业务线的公司。中台不仅简化了跨部门协作的流程,还提高了业务的响应速度和创新能力。这种架构的核心在于复用已有能力,实现快速上线和低成本运维。然而,前端业务高度依赖用户需求的变化,需要更灵活的动态能力,因此构建一个灵活的“前端中台”成为我们新的探索方向。在撮</div> </li> <li><a href="/article/1891823144788881408.htm" title="成功撒花特效" target="_blank">成功撒花特效</a> <span class="text-muted">吉吉安</span> <a class="tag" taget="_blank" href="/search/css%E7%89%B9%E6%95%88/1.htm">css特效</a><a class="tag" taget="_blank" href="/search/%E6%92%92%E8%8A%B1%E7%89%B9%E6%95%88/1.htm">撒花特效</a><a class="tag" taget="_blank" href="/search/%E6%92%92%E8%8A%B1%E5%8A%A8%E7%94%BB/1.htm">撒花动画</a><a class="tag" taget="_blank" href="/search/%E6%88%90%E5%8A%9F%E7%89%B9%E6%95%88/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/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a> <div>基础效果:前端安装并引入canvas-confetti包如有问题请使用满血版DeepSeek/国内直连GPT/Claude解答1.安装npminstall--savecanvas-confetti2.在前端代码中引用importconfettifrom'canvas-confetti';2.在前端代码中使用把下面这个直接放到你的函数里面,调用即可,调用时机由自己控制,比如成功状态或者其他时机con</div> </li> <li><a href="/article/1891800509359124480.htm" title="基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件" target="_blank">基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件</a> <span class="text-muted">练练科技</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:ideaeclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win10、JDK1.8数据库:MySQL5.7</div> </li> <li><a href="/article/1891800255943471104.htm" title="如何使用EchartS" target="_blank">如何使用EchartS</a> <span class="text-muted">前段技术人</span> <a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</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>1.引入ECharts库你可以通过以下两种方式引入ECharts库:方法一:使用CDN在HTML文件的标签中添加以下代码:EChartsExample方法二:下载并本地引入你可以从ECharts官方网站下载ECharts的压缩包,解压后将echarts.min.js文件复制到你的项目目录中,然后在HTML文件中引入:EChartsExample2.创建DOM容器在HTML文件的标签中创建一个具有指</div> </li> <li><a href="/article/1891800126494666752.htm" title="java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署" target="_blank">java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署</a> <span class="text-muted">花样1999</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:ideaeclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win10、JDK1.8数据库:MySQ</div> </li> <li><a href="/article/1891800127509688320.htm" title="java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署" target="_blank">java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署</a> <span class="text-muted">沪港</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈:项目架构:B/S架构开发语言:Java语言开发软件:ideaeclipse前端技术:Layui、HTML、CSS、JS、JQuery等技术后端技术:JAVA运行环境:Win10、JDK1.8数据库:MySQL5.7/8.0源码</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>