慕课网HTML+CSS基础笔记一

一、Html和CSS的关系

学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

  1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
  2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
  3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
二、标签的语法
  1. 标签由英文尖括号<
    >
    括起来,如
    就是一个标签。
  2. html中的标签一般都是成对出现的,分开始标签结束标签。结束标签比开始标签多了一个/

    如:
    (1)

(2)

(3)

慕课网HTML+CSS基础笔记一_第1张图片

  1. 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:
    里嵌套

    ,那么

    必须放在
    的前面。如下图所示。
    慕课网HTML+CSS基础笔记一_第2张图片
  2. HTML标签不区分大小写,



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

三、认识html文件基本结构

这一节中我们来学习html文件的结构:一个HTML文件是有自己固定的结构的。
... ...
代码讲解:


  1. 称为根标签,所有的网页标签都在中。

  2. 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<br> 、<script><br> 、 <style><br> 、<link><br> 、 <meta><br> 等标签,头部标签在下一小节中会有详细介绍。</li> <li>在<body><br> 和</body><br> 标签之间的内容是网页的主要内容,如<h1><br> 、<p><br> 、<a><br> 、<img><br> 等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。</li> </ol> <h5>四、认识head标签</h5> <p>做得好,下面我们来了解一下<head></p> <p>标签的作用。文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。<br> 下面这些标签可用在 head 部分:<br> <head> <title>...
    <br> 标签<br> :在<title>和标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。
    例如:
    hello world
    <br> 标签的内容“hello world”会在浏览器中的标题栏上显示出来,如下图所示:<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 410px; max-height: 215px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ff0fc1cd3f6c481c91b9bddd4bcc37d3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/ff0fc1cd3f6c481c91b9bddd4bcc37d3.jpg" width="410" height="215" alt="慕课网HTML+CSS基础笔记一_第3张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h5>五、了解HTML的代码注释</h5> <p>什么是<strong>代码注释</strong>?<strong>代码注释的作用</strong>是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。<strong>代码注释</strong>不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。<br> <strong>语法:</strong><br> ****</p> <h5>六、语义化,让你的网页更好的被搜索引擎理解</h5> <p>在这一章节我们要开始把网页中常用到的标签一 一向大家介绍,学习这一章节的时候要记住学习html标签过程中,主要注意两个方面的学习:标签的用途、标签在浏览器中的默认样式。<br> <strong>标签的用途</strong>:我们学习网页制作时,常常会听到一个词,<strong>语义化</strong>。那么什么叫做语义化呢,说的通俗点就是:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的<strong>标题</strong>就可以用标题标签,网页上的各个栏目的<strong>栏目名称</strong>也可以使用标题标签。文章中内容的段落就得放在<strong>段落标签</strong>中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等。<br> 讲了这么多语义化,但是语义化可以给我们带来什么样的好处呢?</p> <ol> <li>更容易被搜索引擎收录。</li> <li>更容易让屏幕阅读器读出网页内容。</li> </ol> <h5>七、<body>标签,网页上显示的内容放在这里</h5> <pre><code> 还记得body标签吗,在上一章节我们简单介绍过:在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。 </code></pre> <p></p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 564px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/7f3a6aa8bb504a37b6766895f0ab5c8b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/7f3a6aa8bb504a37b6766895f0ab5c8b.jpg" width="650" height="334" alt="慕课网HTML+CSS基础笔记一_第4张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 在浏览器中的显示效果: <br> <div class="image-package"> <div class="image-container" style="max-width: 576px; max-height: 351px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/820ff69cb40a4a15b9fc4af7bc7030fe.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/820ff69cb40a4a15b9fc4af7bc7030fe.png" width="576" height="351" alt="慕课网HTML+CSS基础笔记一_第5张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h5>八、开始学习<p>标签,添加段落</h5> <p>如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。<br> 语法:<br> <p>段落文本</p></p> <p>注意一段文字一个<p><br> 标签,如在一篇新闻文章中有3段文字,就要把这3个段落分别放到<strong>3</strong>个<p><br> 标签中。如下图所示。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 483px; max-height: 211px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ba87346a772f4ad0bddb7f85a1915644.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ba87346a772f4ad0bddb7f85a1915644.png" width="483" height="211" alt="慕课网HTML+CSS基础笔记一_第6张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 在浏览器中显示的效果: <br> <div class="image-package"> <div class="image-container" style="max-width: 596px; max-height: 399px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2d21273742464ff08dae42959ccebbe3.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/2d21273742464ff08dae42959ccebbe3.png" width="596" height="399" alt="慕课网HTML+CSS基础笔记一_第7张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <p> <br> 标签的默认样式,可以在上图中看出来,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。 <p></p> <h5>九、了解<hx>标签,为你的网页添加标题</h5> <p>文章的段落用<p><br> 标签,那么文章的标题用什么标签呢?在本节我们将使用<hx><br> 标签来制作<strong>文章的标题</strong>。标题标签一共有6个,h1、h2、h3、h4、h5、h6<br> 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1><br> 是最高的等级。<strong>语法:</strong><hx>标题文本</hx><br> (x为1-6)文章的标题前面已经说过了,可以使用标题标签,另外网页上的各个<strong>栏目的标题</strong>也可使用它们。如下图为腾讯网站。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 572px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2ec1ce9006b848ac875f7cf11aa531c0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/2ec1ce9006b848ac875f7cf11aa531c0.jpg" width="650" height="292" alt="慕课网HTML+CSS基础笔记一_第8张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 注意:因为h1 <br> 标签在网页中比较重要,所以一般h1 <br> 标签被用在网站名称上。腾讯网站就是这样做的。如:<h1>腾讯网</h1> <p></p> <p><strong>h1-h6****标签的默认样式:</strong><br> 标签代码:<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 172px; max-height: 125px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/cd60cdf46e6144e4bcee3b839b0d833d.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/cd60cdf46e6144e4bcee3b839b0d833d.png" width="172" height="125" alt="慕课网HTML+CSS基础笔记一_第9张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 在浏览器中显示的样式: <br> <div class="image-package"> <div class="image-container" style="max-width: 596px; max-height: 399px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/e3688961e83f47e99182d0c444fde837.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/e3688961e83f47e99182d0c444fde837.jpg" width="596" height="399" alt="慕课网HTML+CSS基础笔记一_第10张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 从上面的图片可以看出标题标签的样式都会加粗,h1 <br> 标签字号最大,h2 <br> 标签字号相对h1要小,以此类推h6 <br> 标签的字号最小。 <p></p> <h5>十、加入强调语气,使用<strong>和<em>标签</h5> <pre><code> 有了段落又有了标题,现在如果想在一段话中特别强调某几个文字,这时候就可以用到<em>或<strong>标签。 但两者在强调的语气上有区别:<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用**斜体**表示,<strong> 用**粗体**表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。 </code></pre> <p><strong>语法:</strong><br> <em>需要强调的文本</em></p> <p><strong>需要强调的文本</strong></p> <p>如,在网上商城中,某产品的打折后的价格是需要强调的。如下图。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 172px; max-height: 271px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/77cb7975c11540269156f2bd12599c5a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/77cb7975c11540269156f2bd12599c5a.jpg" width="172" height="271" alt="慕课网HTML+CSS基础笔记一_第11张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 代码实现: <br> <div class="image-package"> <div class="image-container" style="max-width: 230px; max-height: 97px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/99f1c9f6c9054a7aac49bb043ba55769.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/99f1c9f6c9054a7aac49bb043ba55769.png" width="230" height="97"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>在浏览器中默认样式是有区别的:</strong> <br> 原代码,如下图。 <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 314px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/269861c0feb0478a8cb8e6cf1b367b3b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/269861c0feb0478a8cb8e6cf1b367b3b.jpg" width="650" height="209" alt="慕课网HTML+CSS基础笔记一_第12张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 浏览器中的样子,如下图。 <br> <div class="image-package"> <div class="image-container" style="max-width: 624px; max-height: 377px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ba7258de70014e90a91634b949ff9206.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ba7258de70014e90a91634b949ff9206.png" width="624" height="377" alt="慕课网HTML+CSS基础笔记一_第13张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <em>的内容在浏览中显示为斜体,<strong>显示为加粗。如果不喜欢这种样式,没有关系,以后可以使用css样式去改变它。 <p></p> <h5>十一、使用<span>标签为文字设置单独样式</h5> <p>这一小节讲解<span>标签,我们对<em><br> 、<strong><br> 、<span><br> 这三个标签进行一下总结:</p> <ol> <li><em><br> 和<strong><br> 标签是为了<strong>强调</strong>一段话中的关键字时使用,它们的语义是<strong>强调。</strong> </li> <li><span><br> 标签是没有语义的,它的作用就是为了设置单独的样式用的。<br> 如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue(蓝色),但注意不是为了<strong>强调</strong>“美国梦”,而只是想为它设置和其它文字不同的样式(并不想让屏幕阅读器对“美国梦”这三个字加重音读出),所以这样情况下就可以用到<span>标签了。<br> 如下面例子:<br> <p>1922年的春天,一个想要成名名叫<strong><em>尼克•卡拉威</em></strong>(托比•马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,<strong><strong>股票</strong></strong>飞涨的时代。为了追寻他的<strong><span>美国梦</span></strong>,他搬入纽约附近一海湾居住。</p><br> <strong>语法:</strong><br> <span>文本</span></li> </ol> <h5>十二、<q>标签,短文本引用</h5> <pre><code> 想在你的html中加一段引用吗?比如在你的网页的文章里想引用某个作家的一句诗,这样会使你的文章更加出彩,那么<q> </code></pre> <p>标签是你所需要的。<br> <strong>语法:</strong><br> <q>引用文本</q></p> <p>如下面例子:<br> <p>最初知道庄子,是从一首诗<strong><q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q></strong>开始的。虽然当时不知道是什么意思,只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》,《逍遥游》代表了庄子思想的最高境界,是对世俗社会的功名利禄及自己的舍弃。</p></p> <p><strong>讲解:</strong></p> <ol> <li>在上面的例子中,“<strong>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</strong>” 这是一句诗歌,出自晚唐诗人李商隐的《锦瑟》 。因为不是作者自己的文字,所以需要使用<q></q><br> 实现引用。</li> <li>注意要引用的文本不用加<strong>双引号</strong>,浏览器会对q标签自动添加双引号。<br> 下图是代码显示结果:<br> <div class="image-package"> <div class="image-container" style="max-width: 575px; max-height: 340px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/295cdec86c6e48b4a87013c0a234dc89.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/295cdec86c6e48b4a87013c0a234dc89.png" width="575" height="340" alt="慕课网HTML+CSS基础笔记一_第14张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div><br> 注意这里用<q>标签的真正关键点不是它的默认样式<strong>双引号</strong>(如果这样我们不如自己在键盘上输入双引号就行了),而是它的<strong>语义:引用别人的话</strong>。</li> </ol> <h5>十三、<blockquote>标签,长文本引用</h5> <pre><code> <blockquote>的作用也是引用别人的文本。但它是对**长文本**的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。 等等,上一节<q>标签不是也是对文本的引用吗?不要忘记<q> </code></pre> <p>标签是对<strong>简短文本</strong>的引用,比如说引用一句话就用到<q><br> 标签。<br> 如想在我的文章中引用李白《关山月》中的诗句,因为引用文本比较长,所以使用<strong><</strong>blockquote><br> 。<br> <strong>语法:</strong><br> <strong><</strong>blockquote>引用文本</blockquote></p> <p>如下面例子:<br> <strong><blockquote></strong>明月出天山,苍茫云海间。长风几万里,吹度玉门关。汉下白登道,胡窥青海湾。由来征战地,不见有人还。 戍客望边色,思归多苦颜。高楼当此夜,叹息未应闲。<strong></blockquote></strong></p> <p>浏览器对<strong><</strong>blockquote>标签的解析是<strong>缩进样式。如下图所示:</strong><br> <strong></strong></p> <div class="image-package"> <div class="image-container" style="max-width: 552px; max-height: 264px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/c3643821ca8c4dd3be59ab424ac5333b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/c3643821ca8c4dd3be59ab424ac5333b.jpg" width="552" height="264" alt="慕课网HTML+CSS基础笔记一_第15张图片" style="border:1px solid black;"></a> </div> </div> <strong> <div class="image-caption"></div></strong> </div> <p></p> <h5>十四、使用<br>标签分行显示文本</h5> <p>对于上一小节的例子,我们想让那首诗显示得更美观些,如显示下面效果:<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 626px; max-height: 408px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/5de1fdc260634e60b6651df05ea55cdd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/5de1fdc260634e60b6651df05ea55cdd.jpg" width="626" height="408" alt="慕课网HTML+CSS基础笔记一_第16张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 怎么可以让每一句诗词后面加入一个折行呢?那就可以用到<br /> <br> 标签了,在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。 <br> 上节的代码改为: <br> <div class="image-package"> <div class="image-container" style="max-width: 333px; max-height: 194px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/7801e629b29c4800bd0cc34145540581.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/7801e629b29c4800bd0cc34145540581.png" width="333" height="194" alt="慕课网HTML+CSS基础笔记一_第17张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>语法:</strong> <br> <strong>xhtml1.0写法:</strong> <br> <br /> <p></p> <p><strong>html4.01写法:</strong><br> <br></p> <p>大家注意,现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。<br> 与以前我们学过的标签不一样,<br /><br> 标签是一个空标签,没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有<br /><br> 、<hr /><br> 和<img /><br> 。<br> 讲到这里,你是不是有个疑问,想折行还不好说嘛,就像在 word 文件档或记事本中,在想要折行的前面输入回车不就行了吗?很遗憾,在 html 中是忽略<strong>回车</strong>和<strong>空格</strong>的,你输入的再多回车和空格也是显示不出来的。如下边的代码。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 337px; max-height: 176px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/b41efc94d52a42e8bc8d2cc6fc36e950.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/b41efc94d52a42e8bc8d2cc6fc36e950.png" width="337" height="176" alt="慕课网HTML+CSS基础笔记一_第18张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 上面的代码在浏览中显示是没有回车效果的。如下图所示: <br> <div class="image-package"> <div class="image-container" style="max-width: 581px; max-height: 242px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/73e7c300812f49f0a95faa287d22df74.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/73e7c300812f49f0a95faa287d22df74.jpg" width="581" height="242" alt="慕课网HTML+CSS基础笔记一_第19张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>总结:在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br /><br> 。</strong> <p></p> <h5>十五、为你的网页中添加一些空格</h5> <p>在上一节的例子,我们已经讲解过在html代码中输入<strong>空格</strong>、<strong>回车</strong>都是没有作用的。要想输入空格,必须写入<br> 。<br> <strong>语法:</strong></p> <p>在html代码中输入空格是不起作用的,如下代码。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 258px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/d951b1625e4848dcaa7efb5c15e0dc18.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/d951b1625e4848dcaa7efb5c15e0dc18.jpg" width="650" height="180" alt="慕课网HTML+CSS基础笔记一_第20张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 在浏览中显示,还是没有空格效果。 <br> <div class="image-package"> <div class="image-container" style="max-width: 575px; max-height: 340px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/1455f64f65c34d3a84164068f5a73c92.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/1455f64f65c34d3a84164068f5a73c92.jpg" width="575" height="340" alt="慕课网HTML+CSS基础笔记一_第21张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>输入空格的正确方法:</strong> <br> <div class="image-package"> <div class="image-container" style="max-width: 494px; max-height: 133px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/55ec542ab14c4fdea0cd5f1d37404437.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/55ec542ab14c4fdea0cd5f1d37404437.png" width="494" height="133" alt="慕课网HTML+CSS基础笔记一_第22张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 在浏览器中的显示出来的空格效果。如下图所示。 <br> <div class="image-package"> <div class="image-container" style="max-width: 459px; max-height: 266px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/dae0c197a2dc4c9c9ed3eeb9bda227c9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/dae0c197a2dc4c9c9ed3eeb9bda227c9.jpg" width="459" height="266" alt="慕课网HTML+CSS基础笔记一_第23张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h5>十六、认识 <hr>标签,添加水平横线</h5> <p>在信息展示时,有时会需要加一些用于分隔的横线,这样会使文章看起来整齐些。如下图所示:<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 662px; max-height: 372px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/224f2cd7e8dd4cbaa8d6873ca0f1ac74.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/224f2cd7e8dd4cbaa8d6873ca0f1ac74.jpg" width="650" height="365" alt="慕课网HTML+CSS基础笔记一_第24张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>语法:</strong> <br> html4.01版本** ** <hr> <p></p> <p>xhtml1.0版本 <hr /></p> <p><strong>注意:</strong></p> <ol> <li><hr /><br> 标签和<br /><br> 标签一样也是一个<strong>空标签</strong>,所以只有一个开始标签,没有结束标签。</li> <li><hr /><br> 标签的在浏览器中的默认样式线条比较粗,颜色为灰色,可能有些人觉得这种样式不美观,没有关系,这些外在样式在我们以后学习了css样式表之后,都可以对其修改。</li> <li>大家注意,现在一般使用 xhtml1.0 的版本(其它标签也是),这种版本比较规范。</li> </ol> <h5>十六、<address>标签,为网页加入地址信息</h5> <p>一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。<br> <strong>语法:</strong><br> <address>联系地址信息</address></p> <p>如:<br> <address>文档编写:lilian 北京市西城区德外大街10号</address></p> <p><address>本文的作者:<a href="mailto:lilian@imooc.com">lilian</a></address><br> 在浏览器上显示的样式为<strong>斜体</strong>,如果不喜欢斜体,当然可以,可以在后面的课程中使用 css 样式来修改它<address><br> 标签的默认样式。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 478px; max-height: 355px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/c18064b00c0f4ff59aa0217b4c3d5f82.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/c18064b00c0f4ff59aa0217b4c3d5f82.jpg" width="478" height="355" alt="慕课网HTML+CSS基础笔记一_第25张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h5>十七、想加入一行代码吗?使用<code>标签</h5> <p>在介绍语言技术的网站中,避免不了在网页中显示一些计算机专业的编程代码,当代码为一行代码时,你就可以使用<code>标签了,如下面例子:<br> <code>var i=i+300;</code></p> <p>注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。<br> <strong>语法:</strong><br> <code>代码语言</code></p> <p>注:如果是多行代码,可以使用<code><pre></code>标签。<br> 我们可能知道水平渐变的实现,类似这样:<br> <code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p> <h5>十八、使用<pre>标签为你的网页加入大段代码</h5> <p>在上节中介绍加入一行代码的标签为<code>,但是在大多数情况下是需要加入大段代码的,如下图:<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 471px; max-height: 369px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ee19e6ba8b004ed287df11d1b38c76d0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/ee19e6ba8b004ed287df11d1b38c76d0.jpg" width="471" height="369" alt="慕课网HTML+CSS基础笔记一_第26张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 怎么办?不会是每一代码都加入一个<code>标签吧,没有这么复杂,这时候就可以使用<pre>标签。 <br> <strong>语法:</strong> <br> <pre>语言代码段</pre> <p></p> <p><pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。<br> 如下代码:<br> <pre> var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); }</pre><br> 在浏览器中的显示结果为:<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 379px; max-height: 224px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/4c73822c002444aa85cfa94931e8cc42.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/4c73822c002444aa85cfa94931e8cc42.jpg" width="379" height="224" alt="慕课网HTML+CSS基础笔记一_第27张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 在上面的例子中可以看到代码中的空格,换行符都保留下来。如果用以前的方法,回车需要输入 <br> <br> 签,空格需要输入 <p></p> <p><strong>注意:</strong><pre><br> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre><br> 标签的一个常见应用就是用来展示计算机的源代码。</p> <h5>十九、使用ul,添加新闻信息列表</h5> <p>在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 332px; max-height: 216px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/acb08fff5f964423aa6d9553ede1076a.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/acb08fff5f964423aa6d9553ede1076a.png" width="332" height="216" alt="慕课网HTML+CSS基础笔记一_第28张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 新闻列表 <br> <div class="image-package"> <div class="image-container" style="max-width: 326px; max-height: 138px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/7ddc1590cc564d38b3d6aaf8d78d7a72.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/7ddc1590cc564d38b3d6aaf8d78d7a72.jpg" width="326" height="138" alt="慕课网HTML+CSS基础笔记一_第29张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 图片列表 <br> 这些列表就可以使用ul-li标签来完成。ul-li是 <strong>没有前后顺序</strong>的信息列表。 <br> <strong>语法:</strong> <br> <ul> <li> 信息</li> <li> 信息</li> ......</ul> <br> <strong>举例:</strong> <br> <ul> <li> 精彩少年</li> <li> 美丽突然出现</li> <li> 触动心灵的旋律</li></ul> <br> ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,如下图所示: <br> <div class="image-package"> <div class="image-container" style="max-width: 387px; max-height: 284px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/5a924bb92ec44f6fa6af3aa2abe72ee9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/5a924bb92ec44f6fa6af3aa2abe72ee9.jpg" width="387" height="284" alt="慕课网HTML+CSS基础笔记一_第30张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h5>二十、使用ol,添加图书销售排行榜</h5> <p>如果想在网页中展示<strong>有前后顺序</strong>的信息列表,怎么办呢?如,当当网上的书籍热卖排行榜,如下图所示。这类信息展示就可以使用<ol><br> 标签来制作<strong>有序列表</strong>来展示。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 227px; max-height: 264px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/184260a1d1fb4190a004dfea5d8660f5.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/184260a1d1fb4190a004dfea5d8660f5.png" width="227" height="264" alt="慕课网HTML+CSS基础笔记一_第31张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>语法:</strong> <br> <ol> <li> 信息</li> <li> 信息</li> ......</ol> <br> <strong>举例:</strong> <br> 下面是一个热点课程下载排行榜: <br> <ol> <li>前端开发面试心法 </li> <li> 零基础学习html</li> <li>JavaScript全攻略</li></ol> <br> <ol> <br> 在网页中显示的默认样式一般为:每项<li> <br> 前都自带一个序号,序号默认从1 <br> 开始,如下图所示: <br> <div class="image-package"> <div class="image-container" style="max-width: 383px; max-height: 208px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/e9a905ae944d40edbe81ea403e3a065c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/e9a905ae944d40edbe81ea403e3a065c.jpg" width="383" height="208" alt="慕课网HTML+CSS基础笔记一_第32张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h5>二十一、认识div在排版中的作用</h5> <p>在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div><br> 标签中,这个<div>标签的作用就相当于一个容器。<br> <strong>语法:</strong><br> <div>…</div></p> <p><strong>确定逻辑部分:</strong><br> 什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的<strong>栏目版块</strong>,就是一个典型的逻辑部分。如下图所示:图中用红色边框标出的部分就是一个逻辑部分,就可以使用<div><br> 标签作为容器。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 455px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/0a461daedca24c2d9264754a5e8e4b12.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/0a461daedca24c2d9264754a5e8e4b12.jpg" width="650" height="292" alt="慕课网HTML+CSS基础笔记一_第33张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div>、 <p></p> <h5>二十二、给div命名,使逻辑更加清晰</h5> <p>在上一小节中,我们把一些标签放进<div>里,划分出一个独立的逻辑部分。为了使逻辑更加清晰,我们可以为这一个独立的逻辑部分设置一个名称,用id<br> 属性来为<div><br> 提供唯一的名称,这个就像我们每个人都有一个身份证号,这个身份证号是唯一标识我们的身份的,也是必须唯一的。<br> 如下两图进行比较,如果设计师把两个图给你,哪个图你看上去能更快的理解呢?是不是右边的那幅图呢。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 480px; max-height: 357px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/beca15c67f4a493d80e2037ceeb71372.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/beca15c67f4a493d80e2037ceeb71372.jpg" width="480" height="357" alt="慕课网HTML+CSS基础笔记一_第34张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>语法:</strong> <br> <div id="版块名称">…</div> <p></p> <h5>二十三、table标签,认识网页上的表格</h5> <p>有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 506px; max-height: 133px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/f2ce1dd11b434d0da9f0eff4efe90e6a.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/f2ce1dd11b434d0da9f0eff4efe90e6a.png" width="506" height="133" alt="慕课网HTML+CSS基础笔记一_第35张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 想在网页上展示上述表格效果可以使用以下代码: <br> <div class="image-package"> <div class="image-container" style="max-width: 292px; max-height: 445px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/55b448eca4974b6e99c9b776b200343c.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/55b448eca4974b6e99c9b776b200343c.png" width="292" height="445" alt="慕课网HTML+CSS基础笔记一_第36张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 创建表格的四个元素: <br> table、tbody、tr、th、td <br> 1、<table>…</table>:整个表格以<table> <br> 标记开始、</table> <br> 标记结束。 <br> 2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。 <br> 3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。 <br> 4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td> <br> ,说明一行中就有几列。 <br> 5、<th>…</th>:表格的头部的一个单元格, <strong>表格表头。</strong> <br> 6、表格中列的个数,取决于一行中数据单元格的个数。 <br> 上述代码在浏览器中显示的默认的样式为: <br> <div class="image-package"> <div class="image-container" style="max-width: 373px; max-height: 239px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/1f933a80aef9460dbfc93fddc064da39.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/1f933a80aef9460dbfc93fddc064da39.jpg" width="373" height="239" alt="慕课网HTML+CSS基础笔记一_第37张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 总结: <br> 1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的 <br> 2、表头,也就是th标签中的文本默认为 <strong>粗体</strong>并且 <strong>居中</strong>显示 <p></p> <h5>二十三、用css样式,为表格加入边框</h5> <p>Table 表格在没有添加 css 样式之前,是没有边框的。这样不便于我们后期<strong>合并单元格</strong>知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框。<br> 在右侧代码编辑器中添加如下代码:<br> <style type="text/css">table tr td,th{border:1px solid #000;}</style><br> 上述代码是用 css 样式代码(<strong>后面章节会详细讲解</strong>),为th<br> ,td<br> 单元格添加粗细为一个像素的黑色边框。<br> 结果窗口显示出结果样式:<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 390px; max-height: 285px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/316d1fab13de4d04a0102aa7c76861d7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/316d1fab13de4d04a0102aa7c76861d7.jpg" width="390" height="285" alt="慕课网HTML+CSS基础笔记一_第38张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h5>二十四、caption标签,为表格添加标题和摘要</h5> <p>表格还是需要添加一些标签进行优化,可以添加<strong>标题</strong>和<strong>摘要</strong>。代码如下:<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 694px; max-height: 398px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/02bf450b5ff9449cb5a06a1aab4b4423.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/02bf450b5ff9449cb5a06a1aab4b4423.png" width="694" height="398" alt="慕课网HTML+CSS基础笔记一_第39张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>摘要</strong> <br> 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 <br> <strong>语法:</strong><table summary="表格简介文本"> <p></p> <p><strong>标题</strong><br> 用以描述表格内容,标题的显示位置:表格上方。<br> <strong>语法:</strong><br> <table> <strong><caption>****标题文本</caption></strong> <tr> <td>…</td> <td>…</td> … </tr>…</table></p> <h5>二十五、使用<a>标签,链接到另一个页面</h5> <p>使用<a><br> 标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。<br> <strong>语法:</strong><br> <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a><br> <strong>例如:</strong><br> <a href="http://www.imooc.com" title="点击进入慕课网">click here!</a><br> 上面例子作用是单击<strong>click here!</strong><br> 文字,网页链接到<strong>http://www.imooc.com</strong><br> 这个网页。<br> title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好),如右侧案例代码(8-12行)。<br> <strong>注意:</strong>还有一个有趣的现象不知道小伙伴们发现了没有,只要为文本加入a标签后,文字的颜色就会自动变为蓝色(被点击过的文本颜色为紫色),颜色很难看吧,不过没有关系后面我们学习了css样子就可以设置过来(a{color:#000}),后面会详细讲解。</p> <h5>二十六、在新建浏览器窗口中打开链接</h5> <p><a><br> 标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。<br> 如下代码:<br> <a href="目标网址" <strong>target="_blank"</strong>>click here!</a></p> <h5>二十七、使用mailto在网页中链接Email地址</h5> <p><a><br> 标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto<br> 做许多其它事情。下面一一进行讲解,请看详细图示:<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 550px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/a72cc5ca9f284f66b7893eaa887f8b6a.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/a72cc5ca9f284f66b7893eaa887f8b6a.png" width="1428" height="550" alt="慕课网HTML+CSS基础笔记一_第40张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>注意</strong>:如果mailto后面同时有多个参数的话,第一个参数必须以“? <br> ”开头,后面的参数每一个都以“& <br> ”分隔。 <br> 下面是一个完整的实例: <br> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 61px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/370ec327736747d892965e9696a9bf48.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/370ec327736747d892965e9696a9bf48.png" width="793" height="61"></a> </div> </div> <div class="image-caption"></div> </div> <br> 在浏览器中显示的结果: <br> 发送 <br> 点击链接会打开电子邮件应用,并自动填写收件人等设置好的信息,如下图: <br> <div class="image-package"> <div class="image-container" style="max-width: 685px; max-height: 470px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/1ae8a56f258e468585b9f95a23764f79.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/1ae8a56f258e468585b9f95a23764f79.jpg" width="650" height="446" alt="慕课网HTML+CSS基础笔记一_第41张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h5>二十八、认识<img>标签,为网页插入图片</h5> <p>在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用<img><br> 标签来插入图片。<br> <strong>语法:</strong><br> </p> <div class="image-package"> <div class="image-caption"></div> </div> <p></p> <p><strong>举例:</strong><br> <img src = "myimage.gif" alt = "My Image" title = "My Image" /></p> <p><strong>讲解:</strong><br> <strong>1****、src:</strong>标识图像的位置;<br> <strong>2****、alt:</strong>指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;<br> <strong>3****、title:</strong>提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);<br> <strong>4、</strong>图像可以是GIF,PNG,JPEG格式的图像文件。</p> <h5>二十九、使用表单标签,与用户交互</h5> <p>网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。<br> 语法:<br> <form method="传送方式" action="服务器文件"><br> <strong>讲解:</strong><br> 1.<strong><form> :</strong><form>标签是成对出现的,以<form>开始,以</form>结束。<br> 2.<strong>action</strong> <strong>:</strong>浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。<br> 3.<strong>method</strong> <strong>:</strong> 数据传送的方式(get/post)。<br> <form <strong>method="post" action="save.php"</strong>> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /></form><br> <strong>注意:</strong><br> <strong>1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息可提交不到服务器上哦!)。</strong><br> <strong>2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki,里面有详细介绍。</strong></p> <h5>三十、</h5> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1186581403249254400"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(慕课网HTML+CSS基础笔记一)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835514462770130944.htm" title="斤斤计较的婚姻到底有多难?" target="_blank">斤斤计较的婚姻到底有多难?</a> <span class="text-muted">白心之岂必有为</span> <div>很多人私聊我会问到在哪个人群当中斤斤计较的人最多?我都会回答他,一般婚姻出现问题的斤斤计较的人士会非常多,以我多年经验,在婚姻落的一塌糊涂的人当中,斤斤计较的人数占比在20~30%以上,也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中,有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型:第一种是物质上的,另一种是精神上的。在物质与精神上抠门已经严重的影响</div> </li> <li><a href="/article/1835514464028422144.htm" title="情绪觉察日记第37天" target="_blank">情绪觉察日记第37天</a> <span class="text-muted">露露_e800</span> <div>今天是家庭关系规划师的第二阶最后一天,慧萍老师帮我做了个案,帮我处理了埋在心底好多年的一份恐惧,并给了我深深的力量!这几天出来学习,爸妈过来婆家帮我带小孩,妈妈出于爱帮我收拾东西,并跟我先生和婆婆产生矛盾,妈妈觉得他们没有照顾好我…。今晚回家见到妈妈,我很欣赏她并赞扬她,妈妈说今晚要跟我睡我说好,当我们俩躺在床上准备睡觉的时候,我握着妈妈的手对她说:妈妈这几天辛苦你了,你看你多利害把我们的家收拾得</div> </li> <li><a href="/article/1835514335561084928.htm" title="芦花鞋一四" target="_blank">芦花鞋一四</a> <span class="text-muted">许叶晗</span> <div>又是在一个寒冷的夏日里,青铜和葵花决定今天一起去卖芦花鞋,奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧!”于是青铜和葵花喝完了奶奶给她们做的粥,就准备去镇上卖卢花鞋,这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖,用手势表达对葵花说:“这回有好多人在抢我们生意呢!我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫,卖芦花喽!卖芦花</div> </li> <li><a href="/article/1835514307744460800.htm" title="QQ群采集助手,精准引流必备神器" target="_blank">QQ群采集助手,精准引流必备神器</a> <span class="text-muted">2401_87347160</span> <a class="tag" taget="_blank" href="/search/%E5%85%B6%E4%BB%96/1.htm">其他</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具,它通过关键词搜索功能,帮助用户快速找到相关的微信群,并提供筛选是否需要验证的群组的功能。主要功能关键词搜索:用户可以输入关键词,工具将自动查找包含该关键词的微信群。筛选功能:工具提供筛选机制,用户可以选择是否只显示需要验证或不需要验证的群组。精准引流:通过上述功能,用户可以更精准地找到目标群组,进行有效的引流操作。3.设备需求该工具可以</div> </li> <li><a href="/article/1835513803861749760.htm" title="机器学习与深度学习间关系与区别" target="_blank">机器学习与深度学习间关系与区别</a> <span class="text-muted">ℒℴѵℯ心·动ꦿ໊ོ꫞</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一、机器学习概述定义机器学习(MachineLearning,ML)是一种通过数据驱动的方法,利用统计学和计算算法来训练模型,使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本,识别其中的模式和规律,从而对新的数据进行判断。其核心在于通过训练过程,让模型不断优化和提升其预测准确性。主要类型1.监督学习(SupervisedLearning)监督学习是指在训练数据集中包含输入</div> </li> <li><a href="/article/1835513701143244800.htm" title="铭刻于星(四十二)" target="_blank">铭刻于星(四十二)</a> <span class="text-muted">随风至</span> <div>69夜晚,绍敏同学做完功课后,看了眼房外,没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深,都有些旧了,想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处,待到全部拆开后,又反复抚平纸张,然后仔细地一字字默看。只是开头的三个字是第一次看到,让她心漏跳了几拍。“亲爱的绍敏:从四年级的时候,我就喜欢你了,但是我一直不敢说,怕影响你学习。六年级的时候听说有人跟你表白,你接受了,我很难过,但</div> </li> <li><a href="/article/1835513570171908096.htm" title="底层逆袭到底有多难,不甘平凡的你准备好了吗?让吴起给你说说" target="_blank">底层逆袭到底有多难,不甘平凡的你准备好了吗?让吴起给你说说</a> <span class="text-muted">造命者说</span> <div>底层逆袭到底有多难,不甘平凡的你准备好了吗?让吴起给你说说我叫吴起,生于公元前440年的战国初期,正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家,是兵家代表人物。评价我一生历仕鲁、魏、楚三国,通晓兵家、法家、儒家三家思想,在内政军事上都有极高的成就。周安王二十一年(公元前381年),因变法得罪守旧贵族,被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭,从年轻时候起就不甘平凡</div> </li> <li><a href="/article/1835513571501502464.htm" title="2020-01-25" target="_blank">2020-01-25</a> <span class="text-muted">晴岚85</span> <div>郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是:你知道想要达成的目标是什么,但却不知道如何才能达成;另一个问题是:你不知道你的目标是什么。前一个是行动的问题,后一个是结果的问题。通过制定具体的下一步行动,可以解决不知道如何开始行动的问题。而通过去想象结果,对结果做预估,可以解决找不着目标的问题。对于所有吸引我们注意力,想要完成的任务,你可以先想象一下,预期的结果究竟是什</div> </li> <li><a href="/article/1835513568917811200.htm" title="随笔 | 仙一般的灵气" target="_blank">随笔 | 仙一般的灵气</a> <span class="text-muted">海思沧海</span> <div>仙岛今天,我看了你全部,似乎已经进入你的世界我不知道,这是否是梦幻,还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求,这样才能够符合人生的梦想,生活才能够充满着阳光与快乐我不知道,我为什么会这样的感叹,是在感叹自己的人生,还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴,每天活在自己的梦中,活在一个不真实的世界是在逃避自己,还是在逃避周围的一切有时候我嘲笑自己,嘲笑自己如此的虚无,</div> </li> <li><a href="/article/1835513567663714304.htm" title="想家" target="_blank">想家</a> <span class="text-muted">爆米花机</span> <div>也许不同于大家对家乡的思念,我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福,我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女,我贪恋家的安逸。刚刚踏出大学校门,初出茅庐,无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气,是无法适应工作的节奏,是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志,选择再次踏上征程。图片发自App</div> </li> <li><a href="/article/1835513551624695808.htm" title="【iOS】MVC设计模式" target="_blank">【iOS】MVC设计模式</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>MVC前言如何设计一个程序的结构,这是一门专门的学问,叫做"架构模式"(architecturalpattern),属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构,也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC(控制器)负责协调Model和View,处理大部分逻辑它将数据从Mod</div> </li> <li><a href="/article/1835513551142350848.htm" title="OC语言多界面传值五大方式" target="_blank">OC语言多界面传值五大方式</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言在完成暑假仿写项目时,遇到了许多需要用到多界面传值的地方,这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值,简单地说就是通过访问后一个视图控制器的属性来为它赋值,通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt</div> </li> <li><a href="/article/1835513440525971456.htm" title="一百九十四章. 自相矛盾" target="_blank">一百九十四章. 自相矛盾</a> <span class="text-muted">巨木擎天</span> <div>唉!就这么一夜,林子感觉就像过了很多天似的,先是回了阳间家里,遇到了那么多不可思议的事情儿。特别是小伙伴们,第二次与自己见面时,僵硬的表情和恐怖的气氛,让自己如坐针毡,打从心眼里难受!还有东子,他现在还好吗?有没有被人欺负?护城河里的小鱼小虾们,还都在吗?水不会真的干枯了吧?那对相亲相爱漂亮的太平鸟儿,还好吧!春天了,到了做窝、下蛋、喂养小鸟宝宝的时候了,希望它们都能够平安啊!虽然没有看见家人,也</div> </li> <li><a href="/article/1835513424734416896.htm" title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>目录cell的复用手动(非注册)自动(注册)自定义cellcell的复用在iOS开发中,单元格复用是一种提高表格(UITableView)和集合视图(UICollectionView)滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时,如果没有可复用的单元格,则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕,它就不会被销毁。相反,它被添</div> </li> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件,它用于显示当前页面的路径,帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中,如果你已经安装了ElementUI,就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例:安装ElementUI(如果你还没有安装的话):你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835512809883004928.htm" title="10月|愿你的青春不负梦想-读书笔记-01" target="_blank">10月|愿你的青春不负梦想-读书笔记-01</a> <span class="text-muted">Tracy的小书斋</span> <div>本书的作者是俞敏洪,大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧,也是我事业上的偶像。本日摘录他书中第一章中的金句:『一个人如果什么目标都没有,就会浑浑噩噩,感觉生命中缺少能量。能给我们能量的,是对未来的期待。第一件事,我始终为了进步而努力。与其追寻全世界的骏马,不如种植丰美的草原,到时骏马自然会来。第二件事,我始终有阶段性的目标。什么东西能给我能量?答案是对未来的期待。』读到这里的时候,我便</div> </li> <li><a href="/article/1835512542735200256.htm" title="C语言宏函数" target="_blank">C语言宏函数</a> <span class="text-muted">南林yan</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>一、什么是宏函数?通过宏定义的函数是宏函数。如下,编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<<c<<endl;//800return0;}二、为什么要使用宏函数使用宏函数</div> </li> <li><a href="/article/1835512305320816640.htm" title="地推话术,如何应对地推过程中家长的拒绝" target="_blank">地推话术,如何应对地推过程中家长的拒绝</a> <span class="text-muted">校师学</span> <div>相信校长们在做地推的时候经常遇到这种情况:市场专员反馈家长不接单,咨询师反馈难以邀约这些家长上门,校区地推疲软,招生难。为什么?仅从地推层面分析,一方面因为家长受到的信息轰炸越来越多,对信息越来越“免疫”;而另一方面地推人员的专业能力和营销话术没有提高,无法应对家长的拒绝,对有意向的家长也不知如何跟进,眼睁睁看着家长走远;对于家长的疑问,更不知道如何有技巧地回答,机会白白流失。由于回答没技巧和专业</div> </li> <li><a href="/article/1835512178023690240.htm" title="谢谢你们,爱你们!" target="_blank">谢谢你们,爱你们!</a> <span class="text-muted">鹿游儿</span> <div>昨天家人去泡温泉,二个孩子也带着去,出发前一晚,匆匆下班,赶回家和孩子一起收拾。饭后,我拿出笔和本子(上次去澳门时做手帐的本子)写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考,带什么出发去旅游呢?她在对应的数字旁边画上了,泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后,就让她自己对着这个本子,将要带的,一一带上,没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来,妹妹累得</div> </li> <li><a href="/article/1835511911769272320.htm" title="C语言如何定义宏函数?" target="_blank">C语言如何定义宏函数?</a> <span class="text-muted">小九格物</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>在C语言中,宏函数是通过预处理器定义的,它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为,但它们不是真正的函数,因为它们在编译时不会进行类型检查,也不会分配存储空间。宏函数的定义通常使用#define指令,后面跟着宏的名称和参数列表,以及宏展开后的代码。宏函数的定义方式:1.基本宏函数:这是最简单的宏函数形式,它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参</div> </li> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn:Python WSGI服务器的基石" target="_blank">理解Gunicorn:Python WSGI服务器的基石</a> <span class="text-muted">范范0825</span> <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn:PythonWSGI服务器的基石介绍Gunicorn,全称GreenUnicorn,是一个为PythonWSGI(WebServerGatewayInterface)应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具,Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置,帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835511669476913152.htm" title="小丽成长记(四十三)" target="_blank">小丽成长记(四十三)</a> <span class="text-muted">玲玲54321</span> <div>小丽发现,即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现,一个接一个的问题,人生就没有停下的时候,小问题不断出现。不过她今天看的书,她接受了人生就是不确定的,厉害的人就是不断创造确定性,在Ta的领域比别人多的确定性就能让自己脱颖而出,显示价值从而获得的比别人多的利益。正是这样的原因,因为从前修炼自己太少,使得她现在在人生道路上打怪起来困难重重,她似乎永远摆脱不了那种无力感,有种习</div> </li> <li><a href="/article/1835511542284644352.htm" title="学点心理知识,呵护孩子健康" target="_blank">学点心理知识,呵护孩子健康</a> <span class="text-muted">静候花开_7090</span> <div>昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所,超越教育与技术的思考》的讲座。今天又重新学习了一遍,收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题,她说心理健康的一些基本命题,我们与我们通常的一些教育命题是不同的,她还举了几个例子,让我们明白我们原来以为的健康并非心理学上的健康。比如如果</div> </li> <li><a href="/article/1835511163450912768.htm" title="2021年12月19日,春蕾教育集团团建活动感受——黄晓丹" target="_blank">2021年12月19日,春蕾教育集团团建活动感受——黄晓丹</a> <span class="text-muted">黄错错加油</span> <div>感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼,也增长了不少知识。2.游戏过程中,我们贡献的是个人力量,展现的是团队的力量。它磨合的往往不止是工作的熟悉,更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上,每个人摆正自己的位置、各司其职充分发挥才能,并团结一致劲往一处使,才能实现最大的成功。新知:1.团队精神需要不断地创新。过去,人们把创新看作是冒风险,现在人们</div> </li> <li><a href="/article/1835511036317364224.htm" title="Cell Insight | 单细胞测序技术又一新发现,可用于HIV-1和Mtb共感染个体诊断" target="_blank">Cell Insight | 单细胞测序技术又一新发现,可用于HIV-1和Mtb共感染个体诊断</a> <span class="text-muted">尐尐呅</span> <div>结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌(Mycobacteriumtuberculosis,Mtb)感染引起,获得性免疫缺陷综合症(艾滋病)由人免疫缺陷病毒(Humanimmunodeficiencyvirustype1,HIV-1)感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队,共同研究得出单细胞测序</div> </li> <li><a href="/article/1835510909070569472.htm" title="瑶池防线" target="_blank">瑶池防线</a> <span class="text-muted">谜影梦蝶</span> <div>冥华虽然逃过了影梦的军队,但他是一个忠臣,他选择上报战况。败给影梦后成逃兵,高层亡尔还活着,七重天失守......随便一条,即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑,但他还选择上报实情,因为责任。同样此信送到仙宫后,知道此事的人,大多数人都认定冥华要完了,所以上到仙界高层,下到扫大街的,包括冥华自己,全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话,冥华必死无疑。然而</div> </li> <li><a href="/article/1835510656011431936.htm" title="爬山后遗症" target="_blank">爬山后遗症</a> <span class="text-muted">璃绛</span> <div>爬山,攀登,一步一步走向制高点,是一种挑战。成功抵达是一种无法言语的快乐,在山顶吹吹风,看看风景,这是从未有过的体验。然而,爬山一时爽,下山腿打颤,颠簸的路,一路向下走,腿部力量不够,走起来抖到不行,停不下来了!第二天必定腿疼,浑身酸痛,坐立难安!</div> </li> <li><a href="/article/1835510025561403392.htm" title="《投行人生》读书笔记" target="_blank">《投行人生》读书笔记</a> <span class="text-muted">小蘑菇的树洞</span> <div>《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅,比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力,更多的是自我意识,你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议,细节,截止日期和数据很重要截止日期,一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好</div> </li> <li><a href="/article/1835509898507546624.htm" title="《策划经理回忆录之二》" target="_blank">《策划经理回忆录之二》</a> <span class="text-muted">路基雅虎</span> <div>话说三年变六年,飘了,飘了……眨眼,2013年5月,老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸,这是一家很有追求,同时敢于尝试的,且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月,到2015年11月,两年的陪伴,迎来了一场大爆发。2000个筹,5万/筹,直接回笼1个亿!!!这……让我开始认真审视这座看似五线</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/20.htm" title="矩阵求逆(JAVA)初等行变换" target="_blank">矩阵求逆(JAVA)初等行变换</a> <span class="text-muted">qiuwanchi</span> <a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5%E6%B1%82%E9%80%86%EF%BC%88JAVA%EF%BC%89/1.htm">矩阵求逆(JAVA)</a> <div>package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *</div> </li> <li><a href="/article/147.htm" title="JDK timer" target="_blank">JDK timer</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/schedule/1.htm">schedule</a><a class="tag" taget="_blank" href="/search/code/1.htm">code</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a> <div>1.java.util.Timer.schedule(TimerTask task, long delay):多长时间(毫秒)后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time):设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod</div> </li> <li><a href="/article/274.htm" title="JVM调优总结 -Xms -Xmx -Xmn -Xss" target="_blank">JVM调优总结 -Xms -Xmx -Xmn -Xss</a> <span class="text-muted">coder_xpf</span> <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a> <div>堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制;系统的可用虚拟内存限制;系统的可用物理内存限制。32位系统下,一般限制在1.5G~2G;64为操作系统对内存无限制。我在Windows Server 2003 系统,3.5G物理内存,JDK5.0下测试,最大可设置为1478m。 典型设置: java -Xmx</div> </li> <li><a href="/article/401.htm" title="JDBC连接数据库" target="_blank">JDBC连接数据库</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完</div> </li> <li><a href="/article/528.htm" title="Unsupported major.minor version 51.0(jdk版本错误)" target="_blank">Unsupported major.minor version 51.0(jdk版本错误)</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL</div> </li> <li><a href="/article/655.htm" title="用多个线程处理1个List集合" target="_blank">用多个线程处理1个List集合</a> <span class="text-muted">362217990</span> <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88/1.htm">集合</a> <div>  昨天发了一个提问,启动5个线程将一个List中的内容,然后将5个线程的内容拼接起来,由于时间比较急迫,自己就写了一个Demo,希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c</div> </li> <li><a href="/article/782.htm" title="JSP简单访问数据库" target="_blank">JSP简单访问数据库</a> <span class="text-muted">香水浓</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a> <div>学习使用javaBean,代码很烂,仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat</div> </li> <li><a href="/article/909.htm" title="Flex4中使用组件添加柱状图、饼状图等图表" target="_blank">Flex4中使用组件添加柱状图、饼状图等图表</a> <span class="text-muted">AdyZhang</span> <a class="tag" taget="_blank" href="/search/Flex/1.htm">Flex</a> <div>1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n</div> </li> <li><a href="/article/1036.htm" title="Android 5.0 - ProgressBar 进度条无法展示到按钮的前面" target="_blank">Android 5.0 - ProgressBar 进度条无法展示到按钮的前面</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>在低于SDK < 21 的版本中,ProgressBar 可以展示到按钮前面,并且为之在按钮的中间,但是切换到android 5.0后进度条ProgressBar 展示顺序变化了,按钮再前面,ProgressBar 在后面了我的xml配置文件如下:   [html]  view plain copy   <RelativeLa</div> </li> <li><a href="/article/1163.htm" title="查询汇总的sql" target="_blank">查询汇总的sql</a> <span class="text-muted">baalwolf</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(</div> </li> <li><a href="/article/1290.htm" title="Linux du命令和df命令区别" target="_blank">Linux du命令和df命令区别</a> <span class="text-muted">BigBird2012</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>        1,两者区别             du,disk usage,是通过搜索文件来计算每个文件的大小然后累加,du能看到的文件只是一些当前存在的,没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        </div> </li> <li><a href="/article/1417.htm" title="AngularJS中的$apply,用还是不用?" target="_blank">AngularJS中的$apply,用还是不用?</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/%24apply/1.htm">$apply</a> <div>        在AngularJS开发中,何时应该调用$scope.$apply(),何时不应该调用。下面我们透彻地解释这个问题。         但是首先,让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命</div> </li> <li><a href="/article/1544.htm" title="[Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化" target="_blank">[Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类,它内部包含两个类,1. SendThread 2. EventThread, SendThread负责客户端和服务器端的数据通信,也包括事件信息的传输,EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &</div> </li> <li><a href="/article/1671.htm" title="【Java命令一】jmap" target="_blank">【Java命令一】jmap</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/Java%E5%91%BD%E4%BB%A4/1.htm">Java命令</a> <div>jmap命令的用法:   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a </div> </li> <li><a href="/article/1798.htm" title="Apache 服务器安全防护及实战" target="_blank">Apache 服务器安全防护及实战</a> <span class="text-muted">ronin47</span> <div>此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server),它是 Internet 上最常见也是使用最频繁的服务器之一,Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中,无须再关心一些技术性的细节,而且界面非常友好,因而 Web 在 Internet 上一推出就得到</div> </li> <li><a href="/article/1925.htm" title="unity 3d实例化位置出现布置?" target="_blank">unity 3d实例化位置出现布置?</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a><a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a> <div>问:unity 3d实例化位置出现布置? 答:实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(</div> </li> <li><a href="/article/2052.htm" title="《重构,改善现有代码的设计》第八章 Duplicate Observed Data" target="_blank">《重构,改善现有代码的设计》第八章 Duplicate Observed Data</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a> <div> import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE</div> </li> <li><a href="/article/2179.htm" title="struts2更改struts.xml配置目录" target="_blank">struts2更改struts.xml配置目录</a> <span class="text-muted">chiangfai</span> <a class="tag" taget="_blank" href="/search/struts.xml/1.htm">struts.xml</a> <div>struts2默认是读取classes目录下的配置文件,要更改配置文件目录,比如放在WEB-INF下,路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下:   <filter> <filter-name>struts2</filter-name> <filter-class&g</div> </li> <li><a href="/article/2306.htm" title="redis做缓存时的一点优化" target="_blank">redis做缓存时的一点优化</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/pipeline/1.htm">pipeline</a> <div>        最近集群上有个job,其中需要短时间内频繁访问缓存,大概7亿多次。我这边的缓存是使用redis来做的,问题就来了。       首先,redis中存的是普通kv,没有考虑使用hash等解结构,那么以为着这个job需要访问7亿多次redis,导致效率低,且出现很多redi</div> </li> <li><a href="/article/2433.htm" title="mysql导出数据不输出标题行" target="_blank">mysql导出数据不输出标题行</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA/1.htm">数据导出</a><a class="tag" taget="_blank" href="/search/%E5%8E%BB%E6%8E%89%E7%AC%AC%E4%B8%80%E8%A1%8C/1.htm">去掉第一行</a><a class="tag" taget="_blank" href="/search/%E5%8E%BB%E6%8E%89%E6%A0%87%E9%A2%98/1.htm">去掉标题</a> <div>当想使用数据库中的某些数据,想将其导入到文件中,而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据: mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为: studentid</div> </li> <li><a href="/article/2560.htm" title="phpexcel导出excel表简单入门示例" target="_blank">phpexcel导出excel表简单入门示例</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/Excel/1.htm">Excel</a><a class="tag" taget="_blank" href="/search/phpexcel/1.htm">phpexcel</a> <div>先下载PHPEXCEL类文件,放在class目录下面,然后新建一个index.php文件,内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('</div> </li> <li><a href="/article/2687.htm" title="爱情格言" target="_blank">爱情格言</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E6%A0%BC%E8%A8%80/1.htm">格言</a> <div> 1) I love you not because of who you are, but because of who I am when I am with you.    我爱你,不是因为你是一个怎样的人,而是因为我喜欢与你在一起时的感觉。   2) No man or woman is worth your tears, and the one who is, won‘t</div> </li> <li><a href="/article/2814.htm" title="转 Activity 详解——Activity文档翻译" target="_blank">转 Activity 详解——Activity文档翻译</a> <span class="text-muted">e200702084</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/sqlite/1.htm">sqlite</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8/1.htm">网络应用</a> <div>activity 展现在用户面前的经常是全屏窗口,你也可以将 activity 作为浮动窗口来使用(使用设置了 windowIsFloating 的主题),或者嵌入到其他的 activity (使用 ActivityGroup )中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是,用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro</div> </li> <li><a href="/article/2941.htm" title="win7安装MongoDB服务" target="_blank">win7安装MongoDB服务</a> <span class="text-muted">geeksun</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1.  下载MongoDB的windows版本:mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip,Linux版本也在这里下载,下载地址: http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d</div> </li> <li><a href="/article/3068.htm" title="Javascript魔法方法:__defineGetter__,__defineSetter__" target="_blank">Javascript魔法方法:__defineGetter__,__defineSetter__</a> <span class="text-muted">hongtoushizi</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>转载自: http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){ </div> </li> <li><a href="/article/3195.htm" title="错误的日期格式可能导致走nginx proxy cache时不能进行304响应" target="_blank">错误的日期格式可能导致走nginx proxy cache时不能进行304响应</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>昨天在整合某些系统的nginx配置时,出现了当使用nginx cache时无法返回304响应的情况,出问题的响应头: Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05</div> </li> <li><a href="/article/3322.htm" title="数据源架构模式之行数据入口" target="_blank">数据源架构模式之行数据入口</a> <span class="text-muted">home198979</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E6%95%B0%E6%8D%AE%E5%85%A5%E5%8F%A3/1.htm">行数据入口</a> <div>注:看不懂的请勿踩,此文章非针对java,java爱好者可直接略过。   一、概念 行数据入口(Row Data Gateway):充当数据源中单条记录入口的对象,每行一个实例。   二、简单实现行数据入口 为了方便理解,还是先简单实现: <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数</div> </li> <li><a href="/article/3449.htm" title="Linux各个目录的作用及内容" target="_blank">Linux各个目录的作用及内容</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>1)根目录“/”   根目录位于目录结构的最顶层,用斜线(/)表示,类似于 Windows 操作系统的“C:\“,包含Fedora操作系统中所有的目录和文件。   2)/bin   /bin   目录又称为二进制目录,包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件,还有某些可执行文件的符号连接。常用的命令有:cp、d</div> </li> <li><a href="/article/3576.htm" title="ubuntu12.04上编译openjdk7" target="_blank">ubuntu12.04上编译openjdk7</a> <span class="text-muted">ol_beta</span> <a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/OpenJDK/1.htm">OpenJDK</a> <div>获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中,如果没有则自己创建一个: [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe</div> </li> <li><a href="/article/3703.htm" title="将数据库字段转换成设计文档所需的字段" target="_blank">将数据库字段转换成设计文档所需的字段</a> <span class="text-muted">vipbooks</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a> <div>        哈哈,出差这么久终于回来了,回家的感觉真好!         PowerDesigner的物理数据库一出来,设计文档中要改的字段就多得不计其数,如果要把PowerDesigner中的字段一个个Copy到设计文档中,那将会是一件非常痛苦的事情。</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>