zlnnjit

HTML/CSS基础笔记一

1. HTML/CSS介绍

HTML和CSS的关系

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
下面给大家布置一个任务，在完成任务的时候，每输入一行代码，代码窗口就会立即显示出效果。

2.认识标签

html标签

让我们通过一个网页的学习，来对html标签有一个初步理解。平常大家说的上网就是浏览各种各式各样的网页，这些网页都是由html标签组成的。下面就是一个简单的网页。效果图如下：

我们来分析一下，这个网页由哪些html标签组成：

“勇气”是网页内容文章的标题，

就是标题标签，它在网页上的代码写成勇气。

“三年级时…我也没勇气参加。” 是网页中文章的段落，

是段落标签。它在网页上的代码写成 三年级时...我也没勇气参加。

网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成

网页的完整代码如下图：

总结一下，可以这么说，网页中每一个内容在浏览器中的显示，都要存放到各种标签中。

代码示例：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>认识html标签title>
    head>


    <body>
        <h1>勇气h1>
        <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。p>
        <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。p>
        <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
    body>


html>

标签的语法

标签由英文尖括号<和>括起来，如就是一个标签。
html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。

如：

（1）

（2）

（3）

3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：

里嵌套

，那么

必须放在

的前面。如下图所示。

4. HTML标签不区分大小写，

和

是一样的，但建议小写，因为大部分程序员都以小写为准。

代码示例：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>标签的语法title>
    head>
    <body>
        <h1>在本教程中，你将学习如何使用 HTML 来创建站点h1>
        <p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。 p>
    body>
html>

html文件基本结构

这一节中我们来学习html文件的结构：一个HTML文件是有自己固定的结构的。


    ...
    ...

代码讲解：

称为根标签，所有的网页标签都在中。
标签用于定义文档的头部，它是所有头部元素的容器。头部元素有</code>、<code><script></code>、 <code><style></code>、<code><link></code>、 <code><meta></code>等标签，头部标签在下一小节中会有详细介绍。</li> <li>在<code><body></code>和<code></body</code>>标签之间的内容是网页的主要内容，如<code><h1></code>、<code></code>、<code><a></code>、<code><img></code>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。 代码示例：</li> </ol> <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>认识html文件基本结构</title> </head> <body> <h1>在本小节中，你将学会认识html文件基本结构</h1> </body> </html></code></pre> <blockquote> head标签 </blockquote> 下面我们来了解一下标签的作用。文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分： <pre class="prettyprint"><code class=" hljs r"><head> <title>...
</code>标签：在<code><title></code>和<code>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。

例如：
```
<head>
 <title>hello worldtitle>
head>
```
</code>标签的内容“hello world”会在浏览器中的标题栏上显示出来，如下图所示： <a href="http://img.e-com-net.com/image/info8/e8af02f6d8904da3a363a5f3d95db5df.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e8af02f6d8904da3a363a5f3d95db5df.jpg" alt="HTML/CSS基础笔记一_第5张图片" title="" width="410" height="215" style="border:1px solid black;"></a> 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>认识head标签</title> </head> <body> <h1>欢迎来到慕课网</h1> </body> </html></code></pre> <blockquote> HTML的代码注释 </blockquote> 什么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。 语法： <pre class="prettyprint"><code class=" hljs xml"></code></pre> 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML的代码注释</title> </head> <body>  <div> <p>一站式报名咨询、助学答疑服务，无论是报名、选课、学习、做作业、考试、写论文，毕业，这里都有专业老师为你答疑解惑！<a href="#">向报名顾问咨询</a></p> </div>  </body> </html></code></pre> <blockquote> <code><body></code>标签 </blockquote> 在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。 <a href="http://img.e-com-net.com/image/info8/263979d0291f4fa19be2a6b06b172c23.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/263979d0291f4fa19be2a6b06b172c23.jpg" alt="HTML/CSS基础笔记一_第6张图片" title="" width="650" height="334" style="border:1px solid black;"></a> 在浏览器中的显示效果： <a href="http://img.e-com-net.com/image/info8/c38b76764d934e57aad0bf834317de47.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c38b76764d934e57aad0bf834317de47.png" alt="HTML/CSS基础笔记一_第7张图片" title="" width="576" height="351" style="border:1px solid black;"></a> 具体实现代码： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <h1>了不起的盖茨比</h1> <p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html></code></pre> <blockquote> <code></code>标签 </blockquote> 如果想在网页上显示文章，这时就需要<code></code>标签了，把文章的段落放到<code></code>标签中。 语法： <pre class="prettyprint"><code class=" hljs xml"><p>段落文本</p></code></pre> 注意一段文字一个<code></code>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<code></code>标签中。如下图所示。 <a href="http://img.e-com-net.com/image/info8/037e7667a0554c67a133daa51a83f453.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/037e7667a0554c67a133daa51a83f453.png" alt="HTML/CSS基础笔记一_第8张图片" title="" width="483" height="211" style="border:1px solid black;"></a> 在浏览器中显示的效果： <a href="http://img.e-com-net.com/image/info8/2098b161f047444b92a0962d6b19735d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/2098b161f047444b92a0962d6b19735d.png" alt="HTML/CSS基础笔记一_第9张图片" title="" width="596" height="399" style="border:1px solid black;"></a> <code></code>标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p标签</title> </head> <body> <p>我的第一个段落。</p> <p>我的第二个段落。</p> </body> </html></code></pre> <blockquote> <code><hx></code>标签 </blockquote> 文章的段落用<code></code>标签，那么文章的标题用什么标签呢？在本节我们将使用<code><hx></code>标签来制作文章的标题。 标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<code><h1></code>是最高的等级。 语法： <code><hx>标题文本</hx></code> (x为1-6) 文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。如下图为腾讯网站。 <a href="http://img.e-com-net.com/image/info8/94b0132f89d2462abba1cd414702d810.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/94b0132f89d2462abba1cd414702d810.jpg" alt="HTML/CSS基础笔记一_第10张图片" title="" width="650" height="292" style="border:1px solid black;"></a> 注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<code><h1>腾讯网</h1></code> h1-h6标签的默认样式： 标签代码： <a href="http://img.e-com-net.com/image/info8/693fdcf0559048adabcfeeef6b5e8610.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/693fdcf0559048adabcfeeef6b5e8610.png" alt="HTML/CSS基础笔记一_第11张图片" title="" width="172" height="125" style="border:1px solid black;"></a> 在浏览器中显示的样式： <a href="http://img.e-com-net.com/image/info8/be0c06535b784e80950baf5c82b8ecee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/be0c06535b784e80950baf5c82b8ecee.jpg" alt="HTML/CSS基础笔记一_第12张图片" title="" width="596" height="399" style="border:1px solid black;"></a> 从上面的图片可以看出标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>h1-h6标题标签</title> </head> <body> <h1>了不起的盖茨比</h1> <p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼，投身到那个年代的灯红酒绿之中，却在名利场中看尽世态炎凉，以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。 </p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html></code></pre> <blockquote> <code></code>和<code></code>标签 </blockquote> 有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<<code>em></code>或<code></code>标签。 但两者在强调的语气上有区别:<code></code> 表示强调，<code></code> 表示更强烈的强调。并且在浏览器中<code></code> 默认用斜体表示，<code></code> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<code></code>表示强调。 语法： <pre class="prettyprint"><code class=" hljs xml"><em>需要强调的文本</em> </code></pre> <pre class="prettyprint"><code class=" hljs xml"><strong>需要强调的文本</strong> </code></pre> 如，在网上商城中，某产品的打折后的价格是需要强调的。如下图。 <a href="http://img.e-com-net.com/image/info8/d509ed66e0684a3abdd4455be2da55f3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d509ed66e0684a3abdd4455be2da55f3.jpg" alt="HTML/CSS基础笔记一_第13张图片" title="" width="172" height="271" style="border:1px solid black;"></a> 代码实现： <a href="http://img.e-com-net.com/image/info8/7459a235178c40f4b5d5b52e0d36c34a.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/7459a235178c40f4b5d5b52e0d36c34a.png" alt="这里写图片描述" title="" width="230" height="97"></a> 在浏览器中默认样式是有区别的： 原代码，如下图。 <a href="http://img.e-com-net.com/image/info8/a8d8f5b71c3b4487a9fa5764013abaa5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a8d8f5b71c3b4487a9fa5764013abaa5.jpg" alt="HTML/CSS基础笔记一_第14张图片" title="" width="650" height="209" style="border:1px solid black;"></a> 浏览器中的样子，如下图。 <a href="http://img.e-com-net.com/image/info8/45d15082d1b945d3a2d1c27c867474ce.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/45d15082d1b945d3a2d1c27c867474ce.png" alt="HTML/CSS基础笔记一_第15张图片" title="" width="624" height="377" style="border:1px solid black;"></a> <code></code>的内容在浏览中显示为斜体，<code></code>显示为加粗。如果不喜欢这种样式，没有关系，以后可以使用css样式去改变它。 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <p>1922年的春天，一个想要成名名叫<strong>尼克•卡拉威</strong>（托比•马奎尔Tobey Maguire饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html></code></pre> <blockquote> <code></code>标签 </blockquote> 这一小节讲解<code></code>标签，我们对<code></code>、<code></code>、<code></code>这三个标签进行一下总结： <ol> <li><code></code>和<code></code>标签是为了强调一段话中的关键字时使用，它们的语义是强调。</li> <li><code></code>标签是没有语义的，它的作用就是为了设置单独的样式用的。</li> </ol> 如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到<code></code>标签了。 如下面例子： <pre class="prettyprint"><code class=" hljs xml"><p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，<strong>股票</strong>飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p></code></pre> 语法： <pre class="prettyprint"><code class=" hljs xml"><span>文本</span></code></pre> 代码示例： 把“美国梦”设置为蓝色 <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> <style> span{ color:blue; } </style> </head> <body> <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html></code></pre> <blockquote> <code><q></code>标签 </blockquote> <code><q></code>标签，短文本引用。想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<code><q></code>标签是你所需要的。 语法： <pre class="prettyprint"><code class=" hljs xml"><q>引用文本</q></code></pre> 如下面例子： <pre class="prettyprint"><code class=" hljs xml"><p>最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。</p> </code></pre> 讲解： <ol> <li>在上面的例子中，“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌，出自晚唐诗人李商隐的《锦瑟》。因为不是作者自己的文字，所以需要使用<code><q></q></code>实现引用。</li> <li>注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。</li> </ol> 下图是代码显示结果： <a href="http://img.e-com-net.com/image/info8/bc63311f41754eb6ad2bc1280b10b857.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/bc63311f41754eb6ad2bc1280b10b857.png" alt="HTML/CSS基础笔记一_第16张图片" title="" width="575" height="340" style="border:1px solid black;"></a> 注意这里用<code><q></code>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>q标签</title> </head> <body> <p>周瑜，不可否认，他是历史上一个了不起的英雄人物！确实也配的上那句<q>聪明秀出为之英，胆略过人为之雄。</q></p> </body> </html></code></pre> <blockquote> <code><blockquote></code>标签 </blockquote> <code><blockquote></code>标签，长文本引用。<code><blockquote></code>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。 <code><q></code>标签是对简短文本的引用，比如说引用一句话就用到<code><q></code>标签。 如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用<code><blockquote></code>。 语法: <pre class="prettyprint"><code class=" hljs xml"><blockquote>引用文本</blockquote></code></pre> 如下面例子： <pre class="prettyprint"><code class=" hljs xml"><blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote></code></pre> 浏览器对<code><blockquote></code>标签的解析是缩进样式。如下图所示： <a href="http://img.e-com-net.com/image/info8/84a876eae1674a3599f849bd4bb30090.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/84a876eae1674a3599f849bd4bb30090.jpg" alt="HTML/CSS基础笔记一_第17张图片" title="" width="552" height="264" style="border:1px solid black;"></a> 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>blockquote标签的使用</title> </head> <body> <h2>心似桂花开</h2> <p>大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？</p> <blockquote>“暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。”</blockquote> <p>这是李清照《咏桂》中的词句，在李清照看来，桂花暗淡青黄，性情温柔，淡泊自适，远比那些大红大紫争奇斗艳花值得称道。</p> </body> </html></code></pre> <blockquote> <code> </code>标签 </blockquote> 使用<code> </code>标签分行显示文本 对于上一小节的例子，我们想让那首诗显示得更美观些，如显示下面效果： <a href="http://img.e-com-net.com/image/info8/9b605bcb0cf84b068cdd3ce6175cf5c6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9b605bcb0cf84b068cdd3ce6175cf5c6.jpg" alt="HTML/CSS基础笔记一_第18张图片" title="" width="626" height="408" style="border:1px solid black;"></a> 怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<code> </code>标签了，在需要加回车换行的地方加入<code> </code>，<code> </code>标签作用相当于word文档中的回车。 上节的代码改为： <a href="http://img.e-com-net.com/image/info8/8fe36d81a7ba42c99780b0b6d21d6501.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/8fe36d81a7ba42c99780b0b6d21d6501.png" alt="HTML/CSS基础笔记一_第19张图片" title="" width="333" height="194" style="border:1px solid black;"></a> 语法： xhtml1.0写法： <pre class="prettyprint"><code class=" hljs xml"><br /></code></pre> html4.01写法： <pre class="prettyprint"><code class=" hljs xml"><br></code></pre> 大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。 与以前我们学过的标签不一样，<code> </code>标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<code> </code>、<code><hr /></code>和<code><img /></code>。 讲到这里，你是不是有个疑问，想折行还不好说嘛，就像在 word 文件档或记事本中，在想要折行的前面输入回车不就行了吗？很遗憾，在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。如下边的代码。 <a href="http://img.e-com-net.com/image/info8/7dfd5cc321a14a13a26f936c1b3360a0.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/7dfd5cc321a14a13a26f936c1b3360a0.png" alt="HTML/CSS基础笔记一_第20张图片" title="" width="337" height="176" style="border:1px solid black;"></a> 上面的代码在浏览中显示是没有回车效果的。如下图所示： <a href="http://img.e-com-net.com/image/info8/243da89bb76c4cfbbe45ebed3b34bc30.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/243da89bb76c4cfbbe45ebed3b34bc30.jpg" alt="HTML/CSS基础笔记一_第21张图片" title="" width="581" height="242" style="border:1px solid black;"></a> 总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<code> </code>。 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>br标签的使用</title> </head> <body> <h2>《咏桂》</h2> <p>暗淡轻黄体性柔，<br/>情疏迹远只香留。<br/>何须浅碧深红色，<br/>自是花中第一流。</p> </body> </html></code></pre> <blockquote> <code> </code>标签 </blockquote> 在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入。 语法： <pre class="prettyprint"><code class=" hljs "> </code></pre> 在html代码中输入空格是不起作用的，如下代码。 <a href="http://img.e-com-net.com/image/info8/23e49154760e4642b717bb5a643752e4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/23e49154760e4642b717bb5a643752e4.jpg" alt="HTML/CSS基础笔记一_第22张图片" title="" width="650" height="180" style="border:1px solid black;"></a> 在浏览中显示，还是没有空格效果。 <a href="http://img.e-com-net.com/image/info8/2e1d3299c2fc46d4833cceac227a0afa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2e1d3299c2fc46d4833cceac227a0afa.jpg" alt="HTML/CSS基础笔记一_第23张图片" title="" width="575" height="340" style="border:1px solid black;"></a> 输入空格的正确方法： <a href="http://img.e-com-net.com/image/info8/afa6820f8674493781b69da375b73f82.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/afa6820f8674493781b69da375b73f82.png" alt="HTML/CSS基础笔记一_第24张图片" title="" width="494" height="133" style="border:1px solid black;"></a> 在浏览器中的显示出来的空格效果。如下图所示。 <a href="http://img.e-com-net.com/image/info8/2e23b8df537948b5b56dd2f029a290ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2e23b8df537948b5b56dd2f029a290ed.jpg" alt="HTML/CSS基础笔记一_第25张图片" title="" width="459" height="266" style="border:1px solid black;"></a> 代码示例： “来源：作文网”文本的后面输入两个空格。 <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>空格讲解</title> </head> <body> <h1>感悟梦想</h1> 来源：作文网作者：为梦想而飞 </body> </html></code></pre> <blockquote> <code><hr></code>标签 </blockquote> 认识<code><hr></code>标签，添加水平横线 在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示： <a href="http://img.e-com-net.com/image/info8/a6f1c895a93e400ab86821df9d05967c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a6f1c895a93e400ab86821df9d05967c.jpg" alt="HTML/CSS基础笔记一_第26张图片" title="" width="650" height="365" style="border:1px solid black;"></a> 语法： html4.01版本 <code><hr></code> xhtml1.0版本 <code><hr /></code> 注意： <ol> <li><code><hr /></code>标签和<code> </code>标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。</li> <li><code><hr /></code>标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。</li> <li>大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。 代码示例： 用<code><hr></code>标签分隔两段文字，使文章看起来更整洁。</li> </ol> <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>hr标签使用</title> </head> <body> <p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p> <hr/> <p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p> </body> </html></code></pre> <blockquote> <code><address></code>标签 </blockquote> <code><address></code>标签，为网页加入地址信息 一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<code><address></code>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。 语法： <pre class="prettyprint"><code class=" hljs xml"><address>联系地址信息</address></code></pre> 如： <pre class="prettyprint"><code class=" hljs xml"><address>文档编写：lilian 北京市西城区德外大街10号</address></code></pre> <pre class="prettyprint"><code class=" hljs xml"><address> 本文的作者：<a href="mailto:lilian@imooc.com">lilian</a> </address></code></pre> 在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用 css 样式来修改它 <address>标签的默认样式。 <a href="http://img.e-com-net.com/image/info8/a8def8b4c10f466e913895f52fef26e9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a8def8b4c10f466e913895f52fef26e9.jpg" alt="HTML/CSS基础笔记一_第27张图片" title="" width="478" height="355" style="border:1px solid black;"></a> 代码示例： 对“北京市西城区德外大街10号”文本加上<code><address></code>标签。</address> <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>address标签介绍</title> </head> <body> <h2>慕课网</h2> <p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!公司地址：<address>北京市西城区德外大街10号</address></p> </body> </html></code></pre> <blockquote> <code><code></code>标签 </blockquote> 在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code><code></code>标签了，如下面例子： <pre class="prettyprint"><code class=" hljs xml"><code>var i=i+300;</code></code></pre> 注意：在文章中一般如果要插入多行代码时不能使用<code><code></code>标签了。 语法： <pre class="prettyprint"><code class=" hljs xml"><code>代码语言</code></code></pre> 注：如果是多行代码，可以使用<code><pre></code>标签。 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>code标签介绍</title> </head> <body> <p>我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p> </body> </html></code></pre> <blockquote> <code><pre></code>标签 </blockquote> 在上节中介绍加入一行代码的标签为<code><code></code>，但是在大多数情况下是需要加入大段代码的，如下图： <a href="http://img.e-com-net.com/image/info8/c21aa2de362d439a9139090a779e1cfa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c21aa2de362d439a9139090a779e1cfa.jpg" alt="HTML/CSS基础笔记一_第28张图片" title="" width="471" height="369" style="border:1px solid black;"></a> 怎么办？不会是每一代码都加入一个<code><code></code>标签吧，没有这么复杂，这时候就可以使用<code><pre></code>标签。 语法： <pre class="prettyprint"><code class=" hljs xml"><pre>语言代码段</pre></code></pre> <code><pre></code> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。 如下代码： <pre class="prettyprint"><code class=" hljs cs"><pre> var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); } </pre></code></pre> 在浏览器中的显示结果为： <a href="http://img.e-com-net.com/image/info8/c53590ca9c7f42fd807df0b9447eabb2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c53590ca9c7f42fd807df0b9447eabb2.jpg" alt="HTML/CSS基础笔记一_第29张图片" title="" width="379" height="224" style="border:1px solid black;"></a> 在上面的例子中可以看到代码中的空格，换行符都保留下来。如果用以前的方法，回车需要输入<code> </code>标签，空格需要输入<code> </code> 注意：<code><pre></code> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<code><pre></code>标签的一个常见应用就是用来展示计算机的源代码。 代码示例： <pre class="prettyprint"><code class=" hljs handlebars"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>pre标签的使用</title> </head> <body><pre> var message="欢迎"; for(var i=1;i<=10;i++)<br> {<br> alert(message); <br> }<br> </pre> </body> </html></code></pre> <blockquote> <code><ul></code>标签 </blockquote> 使用<code><ul></code>，添加新闻信息列表. 在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。 <a href="http://img.e-com-net.com/image/info8/9fe5dc9406b74d1ea13c8332f85ee984.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/9fe5dc9406b74d1ea13c8332f85ee984.png" alt="HTML/CSS基础笔记一_第30张图片" title="" width="332" height="216" style="border:1px solid black;"></a> 新闻列表 <a href="http://img.e-com-net.com/image/info8/7eeed76fcb814a518f17ab57b4a70f5f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7eeed76fcb814a518f17ab57b4a70f5f.jpg" alt="HTML/CSS基础笔记一_第31张图片" title="" width="326" height="138" style="border:1px solid black;"></a> 图片列表 这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。 语法： <pre class="prettyprint"><code class=" hljs xml"><ul> <li>信息</li> <li>信息</li> ...... </ul></code></pre> 举例： <pre class="prettyprint"><code class=" hljs xml"><ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul></code></pre> ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示： <a href="http://img.e-com-net.com/image/info8/4f880a6a0adc4489aad447f692468e61.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4f880a6a0adc4489aad447f692468e61.jpg" alt="HTML/CSS基础笔记一_第32张图片" title="" width="387" height="284" style="border:1px solid black;"></a> 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p标签</title> </head> <body> <ul> <li>我的第一个列表信息</li> </ul> </body> </html></code></pre> <blockquote> <code><ol></code>标签 </blockquote> 使用ol，添加图书销售排行榜 如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<code><ol></code>标签来制作有序列表来展示。 <a href="http://img.e-com-net.com/image/info8/b7ba2d26c8724164bffea62feb6ae341.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/b7ba2d26c8724164bffea62feb6ae341.png" alt="HTML/CSS基础笔记一_第33张图片" title="" width="227" height="264" style="border:1px solid black;"></a> 语法： <pre class="prettyprint"><code class=" hljs xml"><ol> <li>信息</li> <li>信息</li> ...... </ol></code></pre> 举例： 下面是一个热点课程下载排行榜： <pre class="prettyprint"><code class=" hljs xml"><ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol></code></pre> <code><ol></code>在网页中显示的默认样式一般为：每项<code><li></code>前都自带一个序号，序号默认从1开始，如下图所示： <a href="http://img.e-com-net.com/image/info8/d1c59c82c9574bd5bcfdfc000af54d50.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d1c59c82c9574bd5bcfdfc000af54d50.jpg" alt="HTML/CSS基础笔记一_第34张图片" title="" width="383" height="208" style="border:1px solid black;"></a> <blockquote> <code><div></code>标签 </blockquote> 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<code><div></code>标签中，这个<code><div></code>标签的作用就相当于一个容器。 语法： <pre class="prettyprint"><code class=" hljs xml"><div>…</div></code></pre> 确定逻辑部分： 什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用 <div> 标签作为容器。 <a href="http://img.e-com-net.com/image/info8/52aa3657938743f49d9a652fbe70484f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/52aa3657938743f49d9a652fbe70484f.jpg" alt="HTML/CSS基础笔记一_第35张图片" title="" width="650" height="292" style="border:1px solid black;"></a> 代码示例： </div> <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>div标签</title> </head> <body><div> <h2>热门课程排行榜</h2> <ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>javascript全攻略</li> </ol></div> <div> <h2>最新课程排行</h2> <ol> <li>版本管理工具介绍—Git篇 </li> <li>Canvas绘图详解</li> <li>QQ5.0侧滑菜单</li> </ol></div> </body> </html></code></pre> <blockquote> div命名，使逻辑更加清晰 </blockquote> 在上一小节中，我们把一些标签放进<code><div></code>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<code><div></code>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。 如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。 <a href="http://img.e-com-net.com/image/info8/93277db243644d168a99f16d83d47135.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/93277db243644d168a99f16d83d47135.jpg" alt="HTML/CSS基础笔记一_第36张图片" title="" width="480" height="357" style="border:1px solid black;"></a> 语法： <pre class="prettyprint"><code class=" hljs applescript"><div id="版块名称">…</div></code></pre> 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>div标签</title> </head> <body> <div id = "hotList"> <h2>热门课程排行榜</h2> <ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>javascript全攻略</li> </ol> </div> <div id="earningInstructed"> <h2>web前端开发导学课程</h2> <ul> <li>网页专业名词大扫盲 </li> <li>网站职位定位指南</li> <li>为您解密Yahoo网站制作流程</li> </ul> </div> </body> </html></code></pre> <blockquote> table标签 </blockquote> 有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表： <a href="http://img.e-com-net.com/image/info8/e037c34ca7da4465ba8e45fbca96a8c5.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/e037c34ca7da4465ba8e45fbca96a8c5.png" alt="HTML/CSS基础笔记一_第37张图片" title="" width="506" height="133" style="border:1px solid black;"></a> 想在网页上展示上述表格效果可以使用以下代码： <a href="http://img.e-com-net.com/image/info8/b40ad692871a438a83cb9edf009d2aa9.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/b40ad692871a438a83cb9edf009d2aa9.png" alt="HTML/CSS基础笔记一_第38张图片" title="" width="292" height="445" style="border:1px solid black;"></a> 创建表格的四个元素： table、tbody、tr、th、td 1、<code><table>…</table></code>：整个表格以<code><table></code>标记开始、<code></table></code>标记结束。 2、<code><tbody>…</tbody></code>：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如下面的代码。 3、<code><tr>…</tr></code>：表格的一行，所以有几对tr 表格就有几行。 4、<code><td>…</td></code>：表格的一个单元格，一行中包含几对<code><td>...</td></code>，说明一行中就有几列。 5、<code><th>…</th></code>：表格的头部的一个单元格，表格表头。 6、表格中列的个数，取决于一行中数据单元格的个数。 上述代码在浏览器中显示的默认的样式为： <a href="http://img.e-com-net.com/image/info8/e8206dbe5e3747e7b60b95ef8b67b462.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e8206dbe5e3747e7b60b95ef8b67b462.jpg" alt="HTML/CSS基础笔记一_第39张图片" title="" width="373" height="239" style="border:1px solid black;"></a> 总结： 1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的 2、表头，也就是th标签中的文本默认为粗体并且居中显示 <blockquote> 用css样式，为表格加入边框 </blockquote> Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。 添加如下代码： <pre class="prettyprint"><code class=" hljs xml"><style type="text/css"> table tr td,th{border:1px solid #000;} </style></code></pre> 上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。 结果窗口显示出结果样式： <a href="http://img.e-com-net.com/image/info8/cf6c5009dc38468cacbdbe3bc32acaad.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cf6c5009dc38468cacbdbe3bc32acaad.jpg" alt="HTML/CSS基础笔记一_第40张图片" title="" width="390" height="285" style="border:1px solid black;"></a> 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>为表格添加边框</title> <style > table tr td,th{border:1px solid #000;} </style> </head> <body> <table summary=""> <tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> <tr> <td>二班</td> <td>35</td> <td>85</td> </tr> <tr> <td>三班</td> <td>32</td> <td>80</td> </tr> </table> </body> </html></code></pre> <blockquote> caption标签 </blockquote> caption标签，为表格添加标题和摘要 表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下： <a href="http://img.e-com-net.com/image/info8/785584d506d14683be07e32ba1745be5.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/785584d506d14683be07e32ba1745be5.png" alt="HTML/CSS基础笔记一_第41张图片" title="" width="694" height="398" style="border:1px solid black;"></a> 摘要 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 语法：<code><table summary="表格简介文本"></code> 标题 用以描述表格内容，标题的显示位置：表格上方。 语法： <pre class="prettyprint"><code class=" hljs xml"><table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table></code></pre> <blockquote> 使用<code><a></code>标签，链接到另一个页面 </blockquote> 使用<code><a></code>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。 语法： <pre class="prettyprint"><code class=" hljs xml"><a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a></code></pre> 例如： <pre class="prettyprint"><code class=" hljs xml"><a href="http://www.baidu.com" title="点击进入我的博客">click here!</a></code></pre> 上面例子作用是单击click here!文字，网页链接到http://www.baidu.com这个网页。 title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如下面的代码。 注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),后面会详细讲解。 代码示例： 托比·马奎尔Tobey Maguire这几个字做链接，链接到的目标网址为“http://www.m1905.com/mdb/star/3316/” <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <ul> <li><a href="#" title="前端开发面试心法">前端开发面试心法</a> </li> <li><a href="#" title="零基础学习html">零基础学习html</a></li> <li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li> </ul> <p>1922年的春天，一个想要成名名叫尼克•卡拉威（<a herf="http://www.m1905.com/mdb/star/3316/">托比•马奎尔Tobey Maguire </a>饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html></code></pre> <blockquote> 使用<code><a></code>标签，在新建浏览器窗口中打开链接 </blockquote> <code><a></code>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。 如下代码： <pre class="prettyprint"><code class=" hljs xml"><a href="目标网址" target="_blank">click here!</a></code></pre> 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <p>1922年的春天，一个想要成名名叫尼克•卡拉威（<a href="http://www.m1905.com/mdb/star/3316/" target="_blank">托比•马奎尔Tobey Maguire </a>饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html></code></pre> <blockquote> <code><a></code>使用mailto在网页中链接Email地址 <code><a></code>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示： <a href="http://img.e-com-net.com/image/info8/e2b4acb66711434f9018aa3cb6497bd8.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/e2b4acb66711434f9018aa3cb6497bd8.png" alt="HTML/CSS基础笔记一_第42张图片" title="" width="1428" height="550" style="border:1px solid black;"></a> </blockquote> 注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。 下面是一个完整的实例: <a href="http://img.e-com-net.com/image/info8/ea8d7e9c43594a1cae74f26e4126cb8f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/ea8d7e9c43594a1cae74f26e4126cb8f.png" alt="这里写图片描述" title="" width="793" height="61"></a> 在浏览器中显示的结果： <code>发送</code> 点击链接会打开电子邮件应用，并自动填写收件人等设置好的信息，如下图： <a href="http://img.e-com-net.com/image/info8/f6e929b8d3324e83897df5fa0b244751.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f6e929b8d3324e83897df5fa0b244751.jpg" alt="HTML/CSS基础笔记一_第43张图片" title="" width="650" height="446" style="border:1px solid black;"></a> 代码示例： 在“对此影评有何感想，发送邮件给我”加入链接，使其单击后可以自动发送邮件，具体要求： 1、发送人邮箱地址：yy@imooc.com。 2、邮件主题：观了不起的盖茨比有感。 3、邮件内容：你好，对此评论有些想法。 <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>mailto</title> </head> <body> <p>1922年的春天，一个想要成名名叫卡拉威（马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> <a herf="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法">对此影评有何感想，发送邮件给我</a> </body> </html></code></pre> <blockquote> <code><img></code>标签，为网页插入图片 </blockquote> 在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<code><img></code>标签来插入图片。 语法： <pre class="prettyprint"><code class=" hljs bash"><img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"></code></pre> 举例： <pre class="prettyprint"><code class=" hljs bash"><img src = "myimage.gif" alt = "My Image" title = "My Image" /></code></pre> 讲解： 1、src：标识图像的位置； 2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本； 3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)； 4、图像可以是GIF，PNG，JPEG格式的图像文件。 代码示例： <pre class="prettyprint"><code class=" hljs xml"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <p>1922年的春天，一个想要成名名叫尼克•卡拉威（<a href="http://www.m1905.com/mdb/star/3316/">托比•马奎尔Tobey Maguire </a>饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> <img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="电影介绍"> </body> </html</code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1298538506318061568"></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">  <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>  <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>  <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/CSS)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1892410530585440256.htm" title="EDA事件驱动架构领域事件 Event Sourcing" target="_blank">EDA事件驱动架构领域事件 Event Sourcing</a> talentluke <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1/1.htm">架构设计</a> <div>摘自http://www.jdon.com/eda.htmlEDA(Event-drivenarchitecture)是以事件为核心，与SOA以服务为核心有本质区别，是状态模式的延伸到架构上，事件是触发状态变化的根源，事件是介于业务和技术两者之间的概念，用户界面是事件主要发生来源，事件也可以来源其他系统或模块，通过事件可以实现系统或组件之间松耦合。EDA可以实现SOA服务之间的调用，事件也可以用于</div> </li> <li><a href="/article/1892407376435277824.htm" title="前端开发入门指南：HTML、CSS和JavaScript基础知识" target="_blank">前端开发入门指南：HTML、CSS和JavaScript基础知识</a> 方向感超强的 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</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、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与</div> </li> <li><a href="/article/1892403467411058688.htm" title="网页中加载 SVG 的七大方式" target="_blank">网页中加载 SVG 的七大方式</a> 前端熊猫 <a class="tag" taget="_blank" href="/search/Svg/1.htm">Svg</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/svg/1.htm">svg</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>一、直接使用标签加载外部SVG文件优点：简单易用：与加载其他图片格式（如PNG、JPEG）相同。浏览器支持良好：现代浏览器普遍支持。可缓存：SVG文件可以被浏览器缓存，减少重复请求。缺点：无法直接操作SVG内部元素：如果需要对SVG内部的元素进行交互或样式修改，这种方法不适用。适用场景：静态图像展示：仅需要展示SVG图像，不需要与之交互。二、将SVG作为CSS背景图片.icon{width:100</div> </li> <li><a href="/article/1892401826364452864.htm" title="jQuery UI CSS 框架 API" target="_blank">jQuery UI CSS 框架 API</a> lly202406 <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>jQueryUICSS框架API概述jQueryUI是一个基于jQuery的用户界面和交互库，它提供了一套丰富的交互组件和视觉效果，旨在帮助开发者快速构建具有吸引力和互动性的网页应用。jQueryUICSS框架API是jQueryUI的一部分，它允许开发者通过简单的CSS类来控制UI组件的样式和外观。本文将详细介绍jQueryUICSS框架API的使用方法、常用类和功能，帮助开发者更好地利用这一工</div> </li> <li><a href="/article/1892398803407925248.htm" title="部署前端项目2" target="_blank">部署前端项目2</a> augenstern416 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V</div> </li> <li><a href="/article/1892398676270182400.htm" title="CSS属性" target="_blank">CSS属性</a> augenstern416 <a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.CSS定位方式initial：设置该属性为浏览器默认值inherit：规定应该从父元素继承position属性的值。static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。relative：生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20”会向元素的LEFT位置添加20像素。absolute：生成绝对定位</div> </li> <li><a href="/article/1892395273758502912.htm" title="【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！" target="_blank">【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！</a> 网安詹姆斯 <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/CTF/1.htm">CTF</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8%E5%A4%A7%E8%B5%9B/1.htm">网络安全大赛</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>【2025年】全国CTF夺旗赛-从零基础入门到竞赛，看这一篇就稳了！基于入门网络安全/黑客打造的：黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js（2-3天）2、apache+php（4-5天）3、mysql（2-3天）4、python(2-3天)5、burpsuite（1-2天）4.2、中期1、S</div> </li> <li><a href="/article/1892390738520502272.htm" title="前端基础入门：HTML、CSS 和 JavaScript" target="_blank">前端基础入门：HTML、CSS 和 JavaScript</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/1.htm">前端</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/js/1.htm">js</a> <div>在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元</div> </li> <li><a href="/article/1892389477767245824.htm" title="网页制作03-html,css,javascript初认识のhtml的图像设置" target="_blank">网页制作03-html,css,javascript初认识のhtml的图像设置</a> Ama_tor <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E4%B8%93%E6%A0%8F/1.htm">网页制作专栏</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持</div> </li> <li><a href="/article/1892375095628853248.htm" title="MXTU MAX 苹果cmsv10模板仿毒舌自适应主题/短视X体验版完全开源" target="_blank">MXTU MAX 苹果cmsv10模板仿毒舌自适应主题/短视X体验版完全开源</a> 希希分享 <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E5%B8%8C%E7%BD%9158soho_cn/1.htm">软希网58soho_cn</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E8%B5%84%E6%BA%90/1.htm">源码资源</a><a class="tag" taget="_blank" href="/search/%E4%BB%BF%E6%AF%92%E8%88%8C%E8%87%AA%E9%80%82%E5%BA%94%E4%B8%BB%E9%A2%98%2F/1.htm">仿毒舌自适应主题/</a> <div>基于MxonePro二开的主题，全开源未加密。MXTUMAX仿毒舌苹果CMS影视自适应主题主题说明：1、将mxtheme目录放置根目录|将mxpro目录放置template文件夹中2、苹果cms后台-系统-网站参数配置-网站模板-选择mxpro模板目录填写html3、网站模板选择好之后一定要先访问前台，然后再进入后台设置4、主题后台地址：MXTUMAX图图主题,/admin.php/admin/m</div> </li> <li><a href="/article/1892366015967326208.htm" title="使用Python获取在线股票交易网站的实时交易数据" target="_blank">使用Python获取在线股票交易网站的实时交易数据</a> 嵌入式开发项目 <a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E7%88%AC%E8%99%AB%E7%B2%BE%E9%80%9A%E4%B8%93%E6%A0%8F/1.htm">2025年爬虫精通专栏</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>目录步骤1：选择股票交易网站步骤2：使用requests库发送HTTP请求步骤3：解析HTML内容步骤4：提取实时交易数据步骤5：存储和使用数据在金融市场中，实时交易数据对于投资者来说具有重要的价值。实时的股票价格、交易量和其他市场指标可以帮助投资者做出更准确的决策，同时也是进行金融分析和建模的重要数据源。在本篇博客中，我们将学习如何使用Python获取在线股票交易网站的实时交易数据。在开始之前，</div> </li> <li><a href="/article/1892361849689665536.htm" title="【FastAPI 】FastAPI 模板：提供静态文件" target="_blank">【FastAPI 】FastAPI 模板：提供静态文件</a> iFakeCoder <a class="tag" taget="_blank" href="/search/Flask/1.htm">Flask</a><a class="tag" taget="_blank" href="/search/fastapi/1.htm">fastapi</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>FastAPI是一个现代、快速（高性能）的Web框架，用于基于标准Python类型提示使用Python3.7+构建API。虽然它的主要用例是构建API，但FastAPI还可以轻松提供静态文件和HTML模板，从而让您可以构建全栈Web应用程序。在此博客中，我们将探讨如何使用FastAPI提供静态文件。我们将介绍基础知识并提供演示以帮助您入门。为什么要提供静态文件？静态文件是不经常更改的资产，并按原样</div> </li> <li><a href="/article/1892358824027811840.htm" title="vue制作导航栏html,Vue实现导航栏菜单" target="_blank">vue制作导航栏html,Vue实现导航栏菜单</a> DataQueen <a class="tag" taget="_blank" href="/search/vue%E5%88%B6%E4%BD%9C%E5%AF%BC%E8%88%AA%E6%A0%8Fhtml/1.htm">vue制作导航栏html</a> <div>本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称您好，用户！v-bind:class="{checked:index==nowIndex}"v-on:click="setTab('menu',index,menus)">{{menu.text}}菜单一的内容菜单二的内</div> </li> <li><a href="/article/1892312438930468864.htm" title="CSS 修改 SVG图标的颜色" target="_blank">CSS 修改 SVG图标的颜色</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/svg/1.htm">svg</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E6%A0%87%E9%A2%9C%E8%89%B2%E6%94%B9%E5%8F%98/1.htm">图标颜色改变</a> <div>方法1、利用filter中的drop-shadow给icon加样式(利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)filter:drop-shadow(red80px0);transform:translateX(-80px);给父元素加样式（父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域）overflow:hidden;filter的drop-shadow标准用法drop-sh</div> </li> <li><a href="/article/1892310800052318208.htm" title="i css svg,如何设置 CSS 背景图中的 SVG 的颜色" target="_blank">i css svg,如何设置 CSS 背景图中的 SVG 的颜色</a> 魔法少女皮皮瞎 <a class="tag" taget="_blank" href="/search/i/1.htm">i</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a> <div>ColoringSVGsinCSSBackgroundImages如何设置CSS背景图中的SVG的颜色IloveusingSVGinCSSbackgroundimagesbutitsucksthatyoucan'talterthefillcoloreasilywithinyourCSS.Hereareafewwaysaroundthat.在CSS背景中我喜欢用SVG，但是，这会导致你无法用CSS很</div> </li> <li><a href="/article/1892308146966294528.htm" title="css给网页添加黑白滤镜" target="_blank">css给网页添加黑白滤镜</a> nqxcwl <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E7%BB%99%E7%BD%91%E9%A1%B5%E6%B7%BB%E5%8A%A0%E9%BB%91%E7%99%BD%E6%BB%A4%E9%95%9C/1.htm">给网页添加黑白滤镜</a> <div>/*给网页添加黑白滤镜*/html{/*兼容FF*/filter:url("data:image/svgxml;utf8,#grayscale");/*兼容IE内核*/filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);/*兼容其它，谷歌之类的*/-webkit-filter:grayscale(1);}</div> </li> <li><a href="/article/1892303334145060864.htm" title="Java Pjsip (Pjsua2 api ) 2.10 windows sip语音呼叫教程" target="_blank">Java Pjsip (Pjsua2 api ) 2.10 windows sip语音呼叫教程</a> java_lilin <a class="tag" taget="_blank" href="/search/pjsip/1.htm">pjsip</a><a class="tag" taget="_blank" href="/search/pjsip/1.htm">pjsip</a><a class="tag" taget="_blank" href="/search/sip/1.htm">sip</a><a class="tag" taget="_blank" href="/search/pjsua2/1.htm">pjsua2</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sip/1.htm">sip</a> <div>1.安装swigwin-4.0.1下载地址http://www.swig.org/download.html注意是swigwinWindowsusersshoulddownloadswigwin-4.0.1whichincludesaprebuiltexecutable.配置目录到winpath2.下载pjproject-2.10.zip(如果有python错误请安装py2.7及环境path配置)</div> </li> <li><a href="/article/1892296529092341760.htm" title="前端面试题（HTML篇）" target="_blank">前端面试题（HTML篇）</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> <div>1.网络中使用最多的图片格式有哪些？JPEG，GIF，PNG最流行的是JPEG格式，可以把文件压缩到最小在PS以JPEG格式存储时，提供11级压缩等级2.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?声明文档类型声明位于位于HTML文档中的第一行，处于标签之前DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式(严格模式)浏览器按照W3C的标准解析执行代码标准模式(严</div> </li> <li><a href="/article/1892282403041374208.htm" title="【layui】layui表格过滤" target="_blank">【layui】layui表格过滤</a> weixin_43250628 <a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</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>1.除了引用必要的layui的js和css，还需引入tableFilter.js。2.然后就是代码展示部分；layui.config({base:'../../layui/plugins2/',//扩展路径version:'v1.0.0'}).extend({tableFilter:'tableFilter'//模块别名});functionsetGridData(data){layui.use(</div> </li> <li><a href="/article/1892277235986001920.htm" title="个人简历html网页模板，科技感炫酷html简历模板" target="_blank">个人简历html网页模板，科技感炫酷html简历模板</a> 孤客网络科技工作室 <a class="tag" taget="_blank" href="/search/html%2Bcss%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">html+css网页开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>炫酷动效登录页引言在网页设计中，按钮是用户交互的重要元素之一。这样一款黑色个人简历html网页模板，科技感炫酷html简历模板，设计效果类似科技看板图，可帮您展示技能、任职经历、作品等，喜欢这种风格的小伙伴不要犹豫哦。该素材呈现了数据符号排版显示出人形的动画效果，新颖有创意，希望大家能够喜欢。效果预览在开始之前，我们先来看一下最终的效果：实现步骤1.index.html（部分代码）首先，我们需要创</div> </li> <li><a href="/article/1892267654920597504.htm" title="Electron学习" target="_blank">Electron学习</a> 星空0107 <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>Electron的简介Electron基于chromium和Node.js，让我们可以使用Javascript,HTML,CSS构建跨平台的桌面应用程序，同时Electron兼容Mac,Window,和Linux,可以构建出三个平台的应用程序Electron的安装运行cmd,输入npminit，然后一直按enter换行即可输入cnpmielectron-S（如果电脑没有安装cnpm会报错，需要安装</div> </li> <li><a href="/article/1892267275638075392.htm" title="electron学习笔记" target="_blank">electron学习笔记</a> weixin_46452138 <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基</div> </li> <li><a href="/article/1892263746714267648.htm" title="HTML之JavaScript对象" target="_blank">HTML之JavaScript对象</a> 录大大i <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之JavaScript对象Document/*参考文档地址：https://www.runoob.com/js/js-obj-intro.htmljsonjava数据类型变量数据类型变量运算符运算符流程控制流程控制函数方法对象面向对象常见对象*Java常用类(类库)1.数组1.数组创建方式2.数组API*/vararr=newArray();//类似于object集合vararr1=new</div> </li> <li><a href="/article/1892256681367236608.htm" title="虚拟DOM和真实DOM的区别" target="_blank">虚拟DOM和真实DOM的区别</a> 水煮庄周鱼鱼 <a class="tag" taget="_blank" href="/search/%E6%A6%82%E5%BF%B5/1.htm">概念</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>虚拟DOM（VirtualDOM）、DOM（RealDOM）是前端开发中常用的两种概念。什么是真实DOM？真实DOM是浏览器中实际存在的DOM结构，它由浏览器解析HTML生成，并且直接与浏览器交互。当页面中的数据发生变化时，真实DOM会重新计算布局和渲染，这个过程比较耗费性能。什么是虚拟DOM?虚拟DOM是一种在内存中以JavaScript对象的形式表示的轻量级的DOM结构。它是对真实DOM的一种</div> </li> <li><a href="/article/1892243459931172864.htm" title="本地运行 DeepSeek-R1 的成本究竟多高？" target="_blank">本地运行 DeepSeek-R1 的成本究竟多高？</a> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a> <div>ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读本地运行DeepSeek-R1的成本究竟多高？DeepSeek让人们对大规模生成式模型的追求更进一步，甚至有人想在本地跑下规模高达671B参数的版本。但要在家里开这种“巨无霸”，可不是闹着玩的：光是推理就对硬件提出了非常高的要求。这篇文章将大致拆解一下，如果真想在个人电脑上运行DeepSeek-R1，可能需</div> </li> <li><a href="/article/1892243458681270272.htm" title="构建 Next.js 应用时的安全保障与风险防范措施" target="_blank">构建 Next.js 应用时的安全保障与风险防范措施</a> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a> <div>ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在Web应用开发过程中，确保应用的安全性至关重要，这不仅能保护用户数据，还能防止应用本身遭受各种安全攻击。Next.js作为一款备受欢迎的React框架，内置了许多安全功能和推荐做法，但开发者仍需清楚地了解潜在的安全隐患，并采取合适的防范策略。一、Next.js安全问题概述尽管Next.js为构建安全应用提</div> </li> <li><a href="/article/1892214288949506048.htm" title="写轮眼按钮特效：打造炫酷网页按钮" target="_blank">写轮眼按钮特效：打造炫酷网页按钮</a> 孤客网络科技工作室 <a class="tag" taget="_blank" href="/search/html%2Bcss%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">html+css网页开发</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>写轮眼按钮特效：打造炫酷网页按钮引言在网页设计中，按钮是用户交互的重要元素之一。一个炫酷的按钮特效不仅能提升用户体验，还能为网页增添独特的视觉吸引力。今天，我们将通过CSS和JavaScript来实现一个“写轮眼”按钮特效，灵感来源于《火影忍者》中的经典元素——写轮眼。效果预览在开始之前，我们先来看一下最终的效果：实现步骤1.index.html（部分代码）首先，我们需要创建一个简单的HTML结构</div> </li> <li><a href="/article/1892211766507663360.htm" title="AngularJS中文手册前半部分学习" target="_blank">AngularJS中文手册前半部分学习</a> CV战士plus <a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/angular.js/1.htm">angular.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>AngularJS简介AngularJS的中文参考手册AngularJS的使用AngularJS是一个JS框架，通过指令(ng-directives)扩展了HTML，且通过表达式绑定数据到HTML，用于开发单一页面应用程序（SPAs：SinglePageApplications）可以通过script标签添加到网页中(建议把脚本放在元素的底部。这会提高网页加载速度，因为HTML加载不受制于脚本加载。</div> </li> <li><a href="/article/1892208743769239552.htm" title="后台管理系统的开发" target="_blank">后台管理系统的开发</a> ILL11IIL <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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>代码HTML部分：后台管理系统首页OPENLAB管理系统管理员：杰斯首页系统设置用户管理店铺管理订单管理积分管理安全退出收起菜单OPENLAB管理系统管理员：杰斯用户信息管理妖娆的分隔线账号：邮箱：搜索妖娆的分隔线ID账号密码头像邮箱状态操作001光头强******gtq@openlab.com启用编辑禁用删除002熊大******xd@openlab.com启用编辑禁用删除003熊二******</div> </li> <li><a href="/article/1892201180927422464.htm" title="今日-Vue框架" target="_blank">今日-Vue框架</a> 幼儿园口算大王 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>什么是VUE框架？Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。Vue的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。Vue也被称为</div> </li> <li><a href="/article/17.htm" title="分享100个最新免费的高匿HTTP代理IP" target="_blank">分享100个最新免费的高匿HTTP代理IP</a> mcj8089 <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86IP/1.htm">代理IP</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">代理服务器</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D%E4%BB%A3%E7%90%86/1.htm">匿名代理</a><a class="tag" taget="_blank" href="/search/%E5%85%8D%E8%B4%B9%E4%BB%A3%E7%90%86IP/1.htm">免费代理IP</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E6%96%B0%E4%BB%A3%E7%90%86IP/1.htm">最新代理IP</a> <div> 推荐两个代理IP网站： 1. 全网代理IP：http://proxy.goubanjia.com/ 2. 敲代码免费IP：http://ip.qiaodm.com/ 120.198.243.130:80,中国/广东省 58.251.78.71:8088,中国/广东省 183.207.228.22:83,中国/</div> </li> <li><a href="/article/144.htm" title="mysql高级特性之数据分区" target="_blank">mysql高级特性之数据分区</a> annan211 <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%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%8C%BA/1.htm">分区</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> mysql高级特性 1 以存储引擎的角度分析，分区表和物理表没有区别。是按照一定的规则将数据分别存储的逻辑设计。器底层是由多个物理字表组成。 2 分区的原理分区表由多个相关的底层表实现，这些底层表也是由句柄对象表示，所以我们可以直接访问各个分区。存储引擎管理分区的各个底层表和管理普通表一样(所有底层表都必须使用相同的存储引擎)，分区表的索引只是</div> </li> <li><a href="/article/271.htm" title="JS采用正则表达式简单获取URL地址栏参数" target="_blank">JS采用正则表达式简单获取URL地址栏参数</a> chiangfai <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E5%9C%B0%E5%9D%80%E6%A0%8F%E5%8F%82%E6%95%B0%E8%8E%B7%E5%8F%96/1.htm">地址栏参数获取</a> <div>GetUrlParam:function GetUrlParam(param){ var reg = new RegExp("(^|&)"+ param +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null</div> </li> <li><a href="/article/398.htm" title="怎样将数据表拷贝到powerdesigner (本地数据库表)" target="_blank">怎样将数据表拷贝到powerdesigner (本地数据库表)</a> Array_06 <a class="tag" taget="_blank" href="/search/powerDesigner/1.htm">powerDesigner</a> <div>================================================== 1、打开PowerDesigner12，在菜单中按照如下方式进行操作 file->Reverse Engineer->DataBase 点击后，弹出 New Physical Data Model 的对话框 2、在General选项卡中 Model name:模板名字，自</div> </li> <li><a href="/article/525.htm" title="logbackのhelloworld" target="_blank">logbackのhelloworld</a> 飞翔的马甲 <a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97/1.htm">日志</a><a class="tag" taget="_blank" href="/search/logback/1.htm">logback</a> <div>一、概述 1.日志是啥？当我是个逗比的时候我是这么理解的：log.debug()代替了system.out.print(); 当我项目工作时，以为是一堆得.log文件。这两天项目发布新版本，比较轻松，决定好好地研究下日志以及logback。传送门1：日志的作用与方法： http://www.infoq.com/cn/articles/why-and-how-log 上面的作</div> </li> <li><a href="/article/652.htm" title="新浪微博爬虫模拟登陆" target="_blank">新浪微博爬虫模拟登陆</a> 随意而生 <a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A/1.htm">新浪微博</a> <div>转载自：http://hi.baidu.com/erliang20088/item/251db4b040b8ce58ba0e1235 近来由于毕设需要，重新修改了新浪微博爬虫废了不少劲，希望下边的总结能够帮助后来的同学们。现行版的模拟登陆与以前相比，最大的改动在于cookie获取时候的模拟url的请求</div> </li> <li><a href="/article/779.htm" title="synchronized" target="_blank">synchronized</a> 香水浓 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a> <div> Java语言的关键字，可用来给对象和方法或者代码块加锁，当它锁定一个方法或者一个代码块的时候，同一时刻最多只有一个线程执行这段代码。当两个并发线程访问同一个对象object中的这个加锁同步代码块时，一个时间内只能有一个线程得到执行。另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块。然而，当一个线程访问object的一个加锁代码块时，另一个线程仍然</div> </li> <li><a href="/article/906.htm" title="maven 简单实用教程" target="_blank">maven 简单实用教程</a> AdyZhang <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>1. Maven介绍 1.1. 简介 java编写的用于构建系统的自动化工具。目前版本是2.0.9，注意maven2和maven1有很大区别，阅读第三方文档时需要区分版本。 1.2. Maven资源见官方网站；The 5 minute test，官方简易入门文档；Getting Started Tutorial，官方入门文档；Build Coo</div> </li> <li><a href="/article/1033.htm" title="Android 通过 intent传值获得null" target="_blank">Android 通过 intent传值获得null</a> aijuans <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>我在通过intent 获得传递兑现过的时候报错，空指针,我是getMap方法进行传值，代码如下 1 2 3 4 5 6 7 8 9 public void getMap(View view){ Intent i =</div> </li> <li><a href="/article/1160.htm" title="apache 做代理报如下错误：The proxy server received an invalid response from an upstream" target="_blank">apache 做代理报如下错误：The proxy server received an invalid response from an upstream</a> baalwolf <a class="tag" taget="_blank" href="/search/response/1.htm">response</a> <div>网站配置是apache＋tomcat,tomcat没有报错，apache报错是： The proxy server received an invalid response from an upstream server. The proxy server could not handle the request GET /. Reason: Error reading fr</div> </li> <li><a href="/article/1287.htm" title="Tomcat6 内存和线程配置" target="_blank">Tomcat6 内存和线程配置</a> BigBird2012 <a class="tag" taget="_blank" href="/search/tomcat6/1.htm">tomcat6</a> <div>1、修改启动时内存参数、并指定JVM时区（在windows server 2008 下时间少了8个小时）在Tomcat上运行j2ee项目代码时，经常会出现内存溢出的情况，解决办法是在系统参数中增加系统参数： window下，在catalina.bat最前面 set JAVA_OPTS=-XX:PermSize=64M -XX:MaxPermSize=128m -Xms5</div> </li> <li><a href="/article/1414.htm" title="Karam与TDD" target="_blank">Karam与TDD</a> bijian1013 <a class="tag" taget="_blank" href="/search/Karam/1.htm">Karam</a><a class="tag" taget="_blank" href="/search/TDD/1.htm">TDD</a> <div>一.TDD 测试驱动开发（Test-Driven Development,TDD）是一种敏捷（AGILE）开发方法论，它把开发流程倒转了过来，在进行代码实现之前，首先保证编写测试用例，从而用测试来驱动开发（而不是把测试作为一项验证工具来使用）。 TDD的原则很简单： a.只有当某个</div> </li> <li><a href="/article/1541.htm" title="[Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States" target="_blank">[Zookeeper学习笔记之七]Zookeeper源代码分析之Zookeeper.States</a> bit1129 <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div> public enum States { CONNECTING, //Zookeeper服务器不可用，客户端处于尝试链接状态 ASSOCIATING, //？？？ CONNECTED, //链接建立，可以与Zookeeper服务器正常通信 CONNECTEDREADONLY, //处于只读状态的链接状态，只读模式可以在</div> </li> <li><a href="/article/1668.htm" title="【Scala十四】Scala核心八：闭包" target="_blank">【Scala十四】Scala核心八：闭包</a> bit1129 <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>Free variable A free variable of an expression is a variable that’s used inside the expression but not defined inside the expression. For instance, in the function literal expression (x: Int) => (x</div> </li> <li><a href="/article/1795.htm" title="android发送json并解析返回json" target="_blank">android发送json并解析返回json</a> ronin47 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>package com.http.test; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpGet; import </div> </li> <li><a href="/article/1922.htm" title="一份IT实习生的总结" target="_blank">一份IT实习生的总结</a> brotherlamp <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/php%E8%B5%84%E6%96%99/1.htm">php资料</a><a class="tag" taget="_blank" href="/search/php%E6%95%99%E7%A8%8B/1.htm">php教程</a><a class="tag" taget="_blank" href="/search/php%E5%9F%B9%E8%AE%AD/1.htm">php培训</a><a class="tag" taget="_blank" href="/search/php%E8%A7%86%E9%A2%91/1.htm">php视频</a> <div>今天突然发现在不知不觉中自己已经实习了 3 个月了，现在可能不算是真正意义上的实习吧，因为现在自己才大三，在这边撸代码的同时还要考虑到学校的功课跟期末考试。让我震惊的是，我完全想不到在这 3 个月里我到底学到了什么，这是一件多么悲催的事情啊。同时我对我应该 get 到什么新技能也很迷茫。所以今晚还是总结下把，让自己在接下来的实习生活有更加明确的方向。最后感谢工作室给我们几个人这个机会让我们提前出来</div> </li> <li><a href="/article/2049.htm" title="据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。将重物放到天平左侧，问在两边如何添加砝码" target="_blank">据说是2012年10月人人网校招的一道笔试题-给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。将重物放到天平左侧，问在两边如何添加砝码</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class ScalesBalance { /** * 题目： * 给出一个重物重量为X,另外提供的小砝码重量分别为1，3，9。。。3^N。（假设N无限大，但一种重量的砝码只有一个） * 将重物放到天平左侧，问在两边如何添加砝码使两边平衡 * * 分析： * 三进制 * 我们约定括号表示里面的数是三进制，例如 47=(1202</div> </li> <li><a href="/article/2176.htm" title="dom4j最常用最简单的方法" target="_blank">dom4j最常用最简单的方法</a> chiangfai <a class="tag" taget="_blank" href="/search/dom4j/1.htm">dom4j</a> <div>要使用dom4j读写XML文档,需要先下载dom4j包,dom4j官方网站在 http://www.dom4j.org/目前最新dom4j包下载地址:http://nchc.dl.sourceforge.net/sourceforge/dom4j/dom4j-1.6.1.zip 解开后有两个包,仅操作XML文档的话把dom4j-1.6.1.jar加入工程就可以了,如果需要使用XPath的话还需要</div> </li> <li><a href="/article/2303.htm" title="简单HBase笔记" target="_blank">简单HBase笔记</a> chenchao051 <a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div> 一、Client-side write buffer 客户端缓存请求描述：可以缓存客户端的请求，以此来减少RPC的次数，但是缓存只是被存在一个ArrayList中，所以多线程访问时不安全的。可以使用getWriteBuffer()方法来取得客户端缓存中的数据。默认关闭。二、Scan的Caching 描述： next( )方法请求一行就要使用一次RPC,即使</div> </li> <li><a href="/article/2430.htm" title="mysqldump导出时出现when doing LOCK TABLES" target="_blank">mysqldump导出时出现when doing LOCK TABLES</a> daizj <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mysqdump/1.htm">mysqdump</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E6%95%B0%E6%8D%AE/1.htm">导数据</a> <div>　　执行　mysqldump -uxxx -pxxx -hxxx -Pxxxx database tablename > tablename.sql　导出表时，会报 mysqldump: Got error: 1044: Access denied for user 'xxx'@'xxx' to database 'xxx' when doing LOCK TABLES 解决</div> </li> <li><a href="/article/2557.htm" title="CSS渲染原理" target="_blank">CSS渲染原理</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div> 从事Web前端开发的人都与CSS打交道很多，有的人也许不知道css是怎么去工作的，写出来的css浏览器是怎么样去解析的呢？当这个成为我们提高css水平的一个瓶颈时，是否应该多了解一下呢？一、浏览器的发展与CSS </div> </li> <li><a href="/article/2684.htm" title="《阿甘正传》台词" target="_blank">《阿甘正传》台词</a> dcj3sjt126com <div>Part Ⅰ: 《阿甘正传》Forrest Gump经典中英文对白 Forrest: Hello! My names Forrest. Forrest Gump. You wanna Chocolate? I could eat about a million and a half othese. My momma always said life was like a box ochocol</div> </li> <li><a href="/article/2811.htm" title="Java处理JSON" target="_blank">Java处理JSON</a> dyy_gusi <a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>Json在数据传输中很好用，原因是JSON 比 XML 更小、更快，更易解析。在Java程序中，如何使用处理JSON，现在有很多工具可以处理，比较流行常用的是google的gson和alibaba的fastjson，具体使用如下： 1、读取json然后处理 class ReadJSON { public static void main(String[] args) </div> </li> <li><a href="/article/2938.htm" title="win7下nginx和php的配置" target="_blank">win7下nginx和php的配置</a> geeksun <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>1. 安装包准备 nginx : 从nginx.org下载nginx-1.8.0.zip php：从php.net下载php-5.6.10-Win32-VC11-x64.zip， php是免安装文件。 RunHiddenConsole: 用于隐藏命令行窗口 2. 配置 # java用8080端口做应用服务器，nginx反向代理到这个端口即可 p</div> </li> <li><a href="/article/3065.htm" title="基于2.8版本redis配置文件中文解释" target="_blank">基于2.8版本redis配置文件中文解释</a> hongtoushizi <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>转载自： http://wangwei007.blog.51cto.com/68019/1548167 在Redis中直接启动redis-server服务时, 采用的是默认的配置文件。采用redis-server xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务。下面是Redis2.8.9的配置文</div> </li> <li><a href="/article/3192.htm" title="第五章常用Lua开发库3-模板渲染" target="_blank">第五章常用Lua开发库3-模板渲染</a> jinnianshilongnian <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a> <div>动态web网页开发是Web开发中一个常见的场景，比如像京东商品详情页，其页面逻辑是非常复杂的，需要使用模板技术来实现。而Lua中也有许多模板引擎，如目前我在使用的lua-resty-template，可以渲染很复杂的页面，借助LuaJIT其性能也是可以接受的。如果学习过JavaEE中的servlet和JSP的话，应该知道JSP模板最终会被翻译成Servlet来执行；而lua-r</div> </li> <li><a href="/article/3319.htm" title="JZSearch大数据搜索引擎" target="_blank">JZSearch大数据搜索引擎</a> 颠覆者 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>系统简介：大数据的特点有四个层面：第一，数据体量巨大。从TB级别，跃升到PB级别；第二，数据类型繁多。网络日志、视频、图片、地理位置信息等等。第三，价值密度低。以视频为例，连续不间断监控过程中，可能有用的数据仅仅有一两秒。第四，处理速度快。最后这一点也是和传统的数据挖掘技术有着本质的不同。业界将其归纳为4个“V”——Volume，Variety，Value，Velocity。大数据搜索引</div> </li> <li><a href="/article/3446.htm" title="10招让你成为杰出的Java程序员" target="_blank">10招让你成为杰出的Java程序员</a> pda158 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a> <div>如果你是一个热衷于技术的 Java 程序员，那么下面的 10 个要点可以让你在众多 Java 开发人员中脱颖而出。　　 1. 拥有扎实的基础和深刻理解 OO 原则　　对于 Java 程序员，深刻理解 Object Oriented Programming（面向对象编程）这一概念是必须的。没有 OOPS 的坚实基础，就领会不了像 Java 这些面向对象编程语言</div> </li> <li><a href="/article/3573.htm" title="tomcat之oracle连接池配置" target="_blank">tomcat之oracle连接池配置</a> 小网客 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>tomcat版本7.0 配置oracle连接池方式：修改tomcat的server.xml配置文件： <GlobalNamingResources> <Resource name="utermdatasource" auth="Container" type="javax.sql.DataSou</div> </li> <li><a href="/article/3700.htm" title="Oracle 分页算法汇总" target="_blank">Oracle 分页算法汇总</a> vipbooks <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div> 这是我找到的一些关于Oracle分页的算法，大家那里还有没有其他好的算法没？我们大家一起分享一下！ -- Oracle 分页算法一 select * from ( select page.*,rownum rn from (select * from help) page -- 20 = (currentPag</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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.  </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>