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/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> dmengmeng <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> 和自己一起成长 <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> 清风怎不知意 <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> 陈在天box <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> Cavalier_01 <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> html+css+js网页设计 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> zoyation <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> Derek重名了 <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> 周bro <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835376505543290880.htm" title="css设置当字数超过限制后以省略号（...）显示" target="_blank">css设置当字数超过限制后以省略号（...）显示</a> 周bro <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> 马小蜗 <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> 红匣子实力推荐 <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835362025719558144.htm" title="css2中的透明" target="_blank">css2中的透明</a> 琪33 <div>.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> 听你讲故事啊 <div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> 张某布响丸辣 <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> ZhangTao_zata <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/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835349024102772736.htm" title="非关系型数据库" target="_blank">非关系型数据库</a> 天秤-white <a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a> <div>一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%</div> </li> <li><a href="/article/1835342718067372032.htm" title="Python精选200Tips：121-125" target="_blank">Python精选200Tips：121-125</a> AnFany <a class="tag" taget="_blank" href="/search/Python200%2BTips/1.htm">Python200+Tips</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>Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> 剑亦未配妥 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%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><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</div> </li> <li><a href="/article/1835333268375957504.htm" title="爬虫技术抓取网站数据" target="_blank">爬虫技术抓取网站数据</a> Bearjumpingcandy <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文</div> </li> <li><a href="/article/1835316434805288960.htm" title="七.正则化" target="_blank">七.正则化</a> 愿风去了 <div>吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> uthRaman <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</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>