Handsome_Sheep
Handsome_Sheep

html基础

目录：
1.HTML介绍 1.1Html和CSS的关系 1.2认识html标签 1.3标签的语法 1.4认识html文件基本结构 1.5认识head标签 1.6了解HTML的代码注释 2.认识标签 2.1语义化，让你的网页更好的被搜索引擎理解 2.2标签，网页上显示的内容放在这里 2.3开始学习标签，添加段落 2.4 hx标签 2.5加入强调语气，使用和标签 2.6使用标签为文字设置单独样式 2.7标签，短文本引用 2.8< blockquote>标签，长文本引用 2.9使用< br>标签分行显示文本 2.10为你的网页中添加一些空格 2.11认识标签，添加水平横线 2.12标签，为网页加入地址信息 2.13想加入一行代码吗？使用标签 2.14使用ul，添加新闻信息列表 2.15使用ol，添加图书销售排行榜 2.16认识div在排版中的作用 2.17table标签，认识网页上的表格 2.18使用标签，链接到另一个页面 2.19使用mailto在网页中链接Email地址 2.20认识标签，为网页插入图片 2.21使用表单标签，与用户交互 2.23文本域，支持多行文本输入 2.24使用单选框、复选框，让用户选择 2.25使用下拉列表框，节省空间 2.26使用提交按钮，提交数据 2.27使用重置按钮，重置表单信息 2.28form表单中的label标签

1.HTML介绍

1.1Html和CSS的关系

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

  1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
  1. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
  2. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

1.2认识html标签

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

html基础_第1张图片

我们来分析一下，这个网页由哪些html标签组成：
“勇气”是网页内容文章的标题，


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

勇气

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


是 段落标签。它在网页上的代码写成

三年级时...我也没勇气参加。

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

网页的完整代码如下图：


html基础_第2张图片

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

1.3标签的语法

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


    （2）

    （3）
    html基础_第3张图片
  2. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：
    里嵌套

    ，那么

    必须放在
    的前面。如下图所示。
    html基础_第4张图片
  3. HTML标签不区分大小写，

    和

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

1.4认识html文件基本结构

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

... ...

代码讲解：


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

  2. 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。</li> <li>在<body>和</body><br> 标签之间的内容是网页的主要内容，如<code><h1>、<p>、<a>、<img></code><br> 等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</li> </ol> <hr> <h3>1.5认识head标签</h3> <blockquote> <p>做得好，下面我们来了解一下<code><head></code>标签的作用。文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。<br> 下面这些标签可用在 head 部分：<br> <code><head> <title>...
    </code>标签：在<code><title></code>和<code>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
    例如：
    hello world</code><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/6a242df139504e3db2359c53115515e7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/6a242df139504e3db2359c53115515e7.jpg" width="410" height="215" alt="html基础_第5张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> </blockquote> <hr> <h3>1.6了解HTML的代码注释</h3> <p>什么是<strong>代码注释</strong>？<strong>代码注释的作用</strong>是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。<strong>代码注释</strong>不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。<br> <strong>语法：</strong><br> ****</p> <hr> <h2>2.认识标签</h2> <h3>2.1语义化，让你的网页更好的被搜索引擎理解</h3> <blockquote> <p>在这一章节我们要开始把网页中常用到的标签一 一向大家介绍，学习这一章节的时候要记住学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。<br> <strong>标签的用途</strong>：我们学习网页制作时，常常会听到一个词，<strong>语义化</strong>。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的<strong>标题</strong>就可以用标题标签，网页上的各个栏目的<strong>栏目名称</strong>也可以使用标题标签。文章中内容的段落就得放在<strong>段落标签</strong>中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。<br> 讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？</p> </blockquote> <ol> <li>更容易被搜索引擎收录。</li> <li>更容易让屏幕阅读器读出网页内容。<br> 在后面的章节会带领大家学习了解html中每个标签的语义（用途）。</li> </ol> <h3>2.2<body>标签，网页上显示的内容放在这里</h3> <p>还记得body标签吗，在上一章节我们简单介绍过：在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。<br> </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/afbcc3c15c284adcb46c9806dfb72c64.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/afbcc3c15c284adcb46c9806dfb72c64.jpg" width="650" height="334" alt="html基础_第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: 576px; max-height: 351px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/9452aeabc5e14d39a226b0b545e4de1a.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/9452aeabc5e14d39a226b0b545e4de1a.png" width="576" height="351" alt="html基础_第7张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h3>2.3开始学习<p>标签，添加段落</h3> <blockquote> <p>如果想在网页上显示文章，这时就需要<code><p></code>标签了，把文章的段落放到<code><p></code>标签中。<br> 语法：<br> <code><p>段落文本</p></code><br> 注意一段文字一个<code><p></code>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到<strong>3</strong>个<code><p></code><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/dec72feea45e4509a8fd4186d3ff1f5e.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/dec72feea45e4509a8fd4186d3ff1f5e.png" width="483" height="211" alt="html基础_第8张图片" 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/b57bcd86d30541acb33fed41f1afae24.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/b57bcd86d30541acb33fed41f1afae24.png" width="596" height="399" alt="html基础_第9张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <code><p></code> <br> 标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。 <p></p> </blockquote> <hr> <h3>2.4 hx标签</h3> <p>文章的段落用<code><p></code>标签，那么文章的标题用什么标签呢？在本节我们将使用<code><hx></code><br> 标签来制作<strong>文章的标题</strong>。标题标签一共有6个，h1、h2、h3、h4、h5、h6<br> 分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<code><h1></code>是最高的等级。语法：<code><hx></code>标题文本<code></hx></code><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/1944cbbfdd3f44aa979fa844646278f9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/1944cbbfdd3f44aa979fa844646278f9.jpg" width="650" height="292" alt="html基础_第10张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 注意：因为h1标签在网页中比较重要，所以一般h1 <br> 标签被用在网站名称上。腾讯网站就是这样做的。如： <code><h1></code>腾讯网 <code></h1></code> <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/cd6db3ddb6404efdae3ddc2d5ae6cdce.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/cd6db3ddb6404efdae3ddc2d5ae6cdce.png" width="172" height="125" alt="html基础_第11张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>在浏览器中显示的样式：</p> <p></p> <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/9434547e779244ba82f3c9748579a194.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/9434547e779244ba82f3c9748579a194.jpg" width="596" height="399" alt="html基础_第12张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h3>2.5加入强调语气，使用<code><strong></code>和<code><em></code>标签</h3> <blockquote> <p>有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<code><em></code>或<<code>strong></code>标签。<br> 但两者在强调的语气上有区别:<code><em></code> 表示强调<code><strong></code> 表示更强烈的强调。并且在浏览器中<code><em></code> 默认用<em>斜体</em> 表示，<code><strong></code>用<strong>粗体</strong>表示。两个标签相比，目前国内前端程序员更喜欢使用<code><strong></code>表示强调。<br> <strong>语法：</strong><br> <code><em>需要强调的文本</em></code></p> </blockquote> <p><code><strong>需要强调的文本</strong></code></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/7a40d919fd654698ac2666108d4f7e07.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/7a40d919fd654698ac2666108d4f7e07.jpg" width="172" height="271" alt="html基础_第13张图片" 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/d8ca6f99df2b420698e6a0ad8b71d07c.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/d8ca6f99df2b420698e6a0ad8b71d07c.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/e6a8f4273aa3468e9a5839d9f320b454.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/e6a8f4273aa3468e9a5839d9f320b454.jpg" width="650" height="209" alt="html基础_第14张图片" 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/409795bd224847d79302676019049fbc.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/409795bd224847d79302676019049fbc.png" width="624" height="377" alt="html基础_第15张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <code><em></code>的内容在浏览中显示为斜体， <code><strong></code>显示为加粗。如果不喜欢这种样式，没有关系，以后可以使用css样式去改变它。 <p></p> <hr> <h3>2.6使用<span>标签为文字设置单独样式</h3> <blockquote> <p>这一小节讲解<span>标签，我们对<code><em></code>、<code><strong></code>、<code><span></code><br> 这三个标签进行一下总结：<br> 1.<code><em></code>和<code><strong></code><br> 标签是为了<strong>强调</strong>一段话中的关键字时使用，它们的语义是<strong>强调。</strong></p> </blockquote> <p>2.<code><span></code><br> 标签是没有语义的，它的作用就是为了设置单独的样式用的。<br> 如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了<strong>强调</strong>“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到<span>标签了。<br> 如下面例子：<br> <code><p></code>1922年的春天，一个想要成名名叫<strong><code><em></code>尼克•卡拉威<code></em></code></strong>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，<strong><code>strong>股票</strong></code></strong>飞涨的时代。为了追寻他的<strong><code><span>美国梦</span></code></strong>，他搬入纽约附近一海湾居住。<code></p></code><br> <strong>语法：</strong><br> <code><span>文本</span></code></p> <hr> <h3>2.7<q>标签，短文本引用</h3> <blockquote> <p>想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<code><q></code>标签是你所需要的。<br> <strong>语法：</strong><br> <code><q>引用文本</q></code><br> 如下面例子：<br> <code><p></code>最初知道庄子，是从一首诗<strong><code><q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q></code></strong>开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。<code></p></code></p> </blockquote> <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/8f4bd3f330da4e2db843921f53b6b42c.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/8f4bd3f330da4e2db843921f53b6b42c.png" width="575" height="340" alt="html基础_第16张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div><br> 注意这里用<q>标签的真正关键点不是它的默认样式<strong>双引号</strong>（如果这样我们不如自己在键盘上输入双引号就行了），而是它的<strong>语义：引用别人的话</strong>。</li> </ol> <hr> <h3>2.8<code>< blockquote></code>标签，长文本引用</h3> <blockquote> <p><code><blockquote></code>的作用也是引用别人的文本。但它是对<strong>长文本</strong>的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。等等，上一节<q>标签不是也是对文本的引用吗？不要忘记<q><br> 标签是对<strong>简短文本</strong>的引用，比如说引用一句话就用到<q><br> 标签。<br> 如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用<strong><</strong>blockquote><br> 。</p> </blockquote> <p><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/cbc91e05c70d4a358b74d124268e6244.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/cbc91e05c70d4a358b74d124268e6244.jpg" width="552" height="264" alt="html基础_第17张图片" style="border:1px solid black;"></a> </div> </div> <strong> <div class="image-caption"></div></strong> </div> <p></p> <hr> <h3>2.9使用<code><br></code>标签分行显示文本</h3> <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/dd7c23cd3ddd4827bd42acb1392d76bf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/dd7c23cd3ddd4827bd42acb1392d76bf.jpg" width="626" height="408" alt="html基础_第18张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<br /> <br> 标签了，在需要加回车换行的地方加入 <code><br /></code>， <code><br /></code>标签作用相当于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/673807e8b5454d0fb00765121d241639.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/673807e8b5454d0fb00765121d241639.png" width="333" height="194" alt="html基础_第19张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>语法：</strong> <br> <strong>xhtml1.0写法：</strong> <br> <code><br /></code> <p></p> <p><strong>html4.01写法：</strong><br> <code><br></code></p> <p>大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。<br> 与以前我们学过的标签不一样，<br /><br> 标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<code><br /></code><br> 、<code><hr /></code>和<code><img /></code>。<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/bf56d20021e24f909893521fbb9841c4.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/bf56d20021e24f909893521fbb9841c4.png" width="337" height="176" alt="html基础_第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: 581px; max-height: 242px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/6ca62cf7a5fd470ab9d188240bcf0c1d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/6ca62cf7a5fd470ab9d188240bcf0c1d.jpg" width="581" height="242" alt="html基础_第21张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<code><br /></code>。</strong> <p></p> <hr> <h3>2.10为你的网页中添加一些空格</h3> <p>在上一节的例子，我们已经讲解过在html代码中输入<strong>空格</strong>、<strong>回车</strong>都是没有作用的。要想输入空格，必须写入 <code></code>。<br> <strong>语法：</strong><br> <code></code><br> 在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/d5a9b07930d64c8fa6e822a756684430.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/d5a9b07930d64c8fa6e822a756684430.jpg" width="650" height="180" alt="html基础_第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: 575px; max-height: 340px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/beee9c5d81ba4b0592abd2699ee810ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/beee9c5d81ba4b0592abd2699ee810ed.jpg" width="575" height="340" alt="html基础_第23张图片" 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/06090b7067874d819a8979e54b21a4ea.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/06090b7067874d819a8979e54b21a4ea.png" width="494" height="133" alt="html基础_第24张图片" 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/1b76c67472b9424686f8974ec4a53bc7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/1b76c67472b9424686f8974ec4a53bc7.jpg" width="459" height="266" alt="html基础_第25张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h3>2.11认识 <hr>标签，添加水平横线</h3> <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/d931dcb77a124f58b3f586b5d56e9df7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/d931dcb77a124f58b3f586b5d56e9df7.jpg" width="650" height="365" alt="html基础_第26张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>语法：</strong> <br> html4.01版本** ** <code><hr></code> <p></p> <p>xhtml1.0版本<code><hr /></code></p> <p><strong>注意：</strong></p> <blockquote> <p>1<code><hr /></code><br> 标签和<code><br /></code>标签一样也是一个<strong>空标签</strong>，所以只有一个开始标签，没有结束标签。<br> 2.<code><hr /></code><br> 标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。<br> 3.大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。</p> </blockquote> <hr> <h3>2.12<address>标签，为网页加入地址信息</h3> <blockquote> <p>一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。<br> <strong>语法：</strong><br> <address>联系地址信息</address></p> </blockquote> <p>如：<br> <address>文档编写：lilian 北京市西城区德外大街10号</address></p> <p><address>本文的作者：<code><a href="mailto:lilian@imooc.com">lilian</a></code></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/2acf7957939e4cfca9e58886bd797c91.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/2acf7957939e4cfca9e58886bd797c91.jpg" width="478" height="355" alt="html基础_第27张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h3>2.13想加入一行代码吗？使用<code><code></code>标签</h3> <p>在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code><code></code>标签了，如下面例子：<br> <code><code>var i=i+300;</code></code></p> <p>注意：在文章中一般如果要插入多行代码时不能使用<code><code></code>标签了。<br> <strong>语法：</strong><br> <code><code>代码语言</code></code></p> <p>注：如果是多行代码，可以使用<code><pre></code>标签。</p> <hr> <h3>2.14使用ul，添加新闻信息列表</h3> <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/b7497481c57f490f8f0317649b361043.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/b7497481c57f490f8f0317649b361043.png" width="332" height="216" alt="html基础_第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/f4e17c55ace246c0ab3fd1499fc7f3f8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/f4e17c55ace246c0ab3fd1499fc7f3f8.jpg" width="326" height="138" alt="html基础_第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> <code><ul> <li>信息</li> <li>信息</li> ...... </ul></code> <br> 举例： <p></p> <p><code><ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul></code><br> ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示：<br> </p> <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/97bbf39e838d418ea896410a46675efc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/97bbf39e838d418ea896410a46675efc.jpg" width="387" height="284" alt="html基础_第30张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h3>2.15使用ol，添加图书销售排行榜</h3> <blockquote> <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/e89583303bdd481497a422d2b100d668.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/e89583303bdd481497a422d2b100d668.png" width="227" height="264" alt="html基础_第31张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 语法： <br> `<ol> <br> <li>信息</li> <p></p> </blockquote> <p><li>信息</li><br> ......<br> </ol><code>举例： 下面是一个热点课程下载排行榜：</code><ol><br> <li>前端开发面试心法 </li><br> <li>零基础学习html</li><br> <li>JavaScript全攻略</li><br> </ol>`<br> 在网页中显示的默认样式一般为：每项<li><br> 前都自带一个序号，序号默认从1<br> 开始，如下图所示：<br> </p> <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/e21042e99ff84a079edbd93944c17d32.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/e21042e99ff84a079edbd93944c17d32.jpg" width="383" height="208" alt="html基础_第32张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h3>2.16认识div在排版中的作用</h3> <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/3a227584e7f94fef921559ee0def5894.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/3a227584e7f94fef921559ee0def5894.jpg" width="650" height="292" alt="html基础_第33张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p><strong>给div命名，使逻辑更加清晰</strong></p> <blockquote> <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/6766dacf9f044c6d84e0c1bcea125b05.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/6766dacf9f044c6d84e0c1bcea125b05.jpg" width="480" height="357" alt="html基础_第34张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>语法：</strong> <br> <div id="版块名称">…</div> <p></p> </blockquote> <hr> <h3>2.17table标签，认识网页上的表格</h3> <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/cfdb2c82f0fd4a6da851d4f7ceabf0aa.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/cfdb2c82f0fd4a6da851d4f7ceabf0aa.png" width="506" height="133" alt="html基础_第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/ab8a502acc234ea3939a993b6318d376.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ab8a502acc234ea3939a993b6318d376.png" width="292" height="445" alt="html基础_第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/2099ec77fe204d429a42dd366c611ff0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/2099ec77fe204d429a42dd366c611ff0.jpg" width="373" height="239" alt="html基础_第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> <p><strong>css样式，为表格加入边框</strong></p> <blockquote> <p>Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期<strong>合并单元格</strong>知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。<br> 在右侧代码编辑器中添加如下代码：<br> <code><style type="text/css"> table tr td,th{border:1px solid #000;}</style></code><br> 上述代码是用 css 样式代码（<strong>后面章节会详细讲解</strong>），为th<br> ，td<br> 单元格添加粗细为一个像素的黑色边框。</p> </blockquote> <p>结果窗口显示出结果样式：<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/b3993c2ce45a4347937d244ed957c89d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/b3993c2ce45a4347937d244ed957c89d.jpg" width="390" height="285" alt="html基础_第38张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p><strong>caption标签，为表格添加标题和摘要</strong></p> <blockquote> <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/d7bbc708b6d34dd89009c58b0e4bcf7d.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/d7bbc708b6d34dd89009c58b0e4bcf7d.png" width="694" height="398" alt="html基础_第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> </blockquote> <p><strong>标题</strong><br> 用以描述表格内容，标题的显示位置：表格上方。<br> <strong>语法：</strong><br> <table> ** <code><caption></code>*标题文本<code>/caption></code><tr> <td>…</td> <td>…</td> … </tr>…</table></p> <hr> <h3>2.18使用<code><a></code>标签，链接到另一个页面</h3> <blockquote> <p>使用<code><a></code>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。<br> <strong>语法：</strong><br> <code><a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a></code><br> <strong>例如：</strong><br> <code><a href="http://www.imooc.com" title="点击进入慕课网">click here!</a></code><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> </blockquote> <blockquote> <p><code><a></code>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。<br> 如下代码：<br> <code><a href="目标网址" **target="_blank"**>click here!</a></code></p> </blockquote> <hr> <h3>2.19使用mailto在网页中链接Email地址</h3> <p><code><a></code>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto<br> 做许多其它事情。下面一一进行讲解，请看详细图示：</p> <p>下面说一下详细的使用方法：<br> <strong>1. 为邮件加入默认标题</strong>subject<br> <code><a href="mailto:example@phplamp.com?subject=邮件的默认标题">example@phplamp.com</a></code><br> <strong>2. 为邮件加入默认的抄送地址</strong>cc<br> <code><a href="mailto:example@phplamp.com?cc=example2@phplamp.com">example@phplamp.com</a></code><br> <strong>3. 为邮件加入默认暗送（密件抄送）地址</strong>bcc<br> <code><a href="mailto:example@phplamp.com?bcc=example2@phplamp.com">example@phplamp.com</a></code><br> <strong>4. 为邮件加入默认的内容</strong>body<br> <code><a href="mailto:example@phplamp.com?body=欢迎您来到phplamp博客站-http://www.phplamp.org">example@phplamp.com</a></code><br> <strong>5. 多个邮件地址</strong><br> <code><a href="mailto:example@phplamp.com,example2@phplamp.com">example@phplamp.com</a></code><br> <strong>6. 来个综合型的：加入默认抄送地址，标题，内容</strong><br> <code><a href="mailto:example@phplamp.com?cc=example2@phplamp.com&subject=phplamp博客站&body=欢迎您来到phplamp博客站-http://www.phplamp.org">example@phplamp.com</a></code><br> <strong>注意</strong>：如果mailto后面同时有多个参数的话，第一个参数必须以“?<br> ”开头，后面的参数每一个都以“&<br> ”分隔。<br> 下面是一个完整的实例:<br> </p> <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/5912d4b0f74541c98817ed613d2cf811.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/5912d4b0f74541c98817ed613d2cf811.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/78e425c254e043b1bc17723dfc5d0464.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/78e425c254e043b1bc17723dfc5d0464.jpg" width="650" height="446" alt="html基础_第40张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h3>2.20认识<code><img></code>标签，为网页插入图片</h3> <p>在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<code><img></code><br> 标签来插入图片。<br> <strong>语法：</strong><br> <code><img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"></code></p> <p><strong>举例：</strong><br> <code><img src = "myimage.gif" alt = "My Image" title = "My Image" /></code></p> <p><strong>讲解：</strong><br> 1、src：标识图像的位置；</br>2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；<br> 3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；</br><br> 4.图像可以是GIF，PNG，JPEG格式的图像文件。</p> <hr> <h3>2.21使用表单标签，与用户交互</h3> <blockquote> <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> <code><form**method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" /> <label for="pass">密码:</label> <input type="password" name="pass" /></form></code><br> <strong>注意:</strong><br> <strong>1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上哦！）。</strong><br> <strong>2、method:post/get的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的wiki，里面有详细介绍。</strong></p> </blockquote> <hr> <h3>2.22文本输入框、密码输入框</h3> <blockquote> <p>当用户要在表单中键入字母、数字等内容时，就会用到<strong>文本输入框</strong>。文本框也可以转化为<strong>密码输入框</strong>。<br> <strong>语法</strong>：<br> <form> <input type="text/password" name="名称" value="文本" /></form><br> <em><em>1、</em>type：</em>* 当type="<strong>text</strong>"时，输入框为<strong>文本****输入框****;</strong> 当type="<strong>password</strong>"时,<br> 输入框为<strong>密码输入框。</strong><br> <strong>2、name：</strong>为文本框命名，以备后台程序ASP 、PHP使用。<br> <strong>3、value：</strong>为文本输入框设置默认值。(一般起到提示作用)</p> </blockquote> <p><strong>举例</strong> <strong>：</strong><br> <code><form> 姓名： <input type="text" name="myName"> <br/> 密码： <input type="password" name="pass"></form></code><br> 在浏览器中显示的结果：<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 525px; max-height: 275px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ec90c77ac6c542f69ad392694dc46a67.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/ec90c77ac6c542f69ad392694dc46a67.jpg" width="525" height="275" alt="html基础_第41张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h3>2.23文本域，支持多行文本输入</h3> <blockquote> <p>当用户需要在表单中输入大段文字时，需要用到文本输入域。<br> 语法：<br> <textarea rows="行数" cols="列数">文本</textarea><br> 1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。<br> 2、cols ：多行输入域的列数。<br> 3、rows ：多行输入域的行数。<br> 4、在<textarea></textarea>标签之间可以输入默认值。</p> </blockquote> <blockquote> <p>举例：<br> <code><form method="post" action="save.php"> <label>联系我们</label> <textarea cols="50" rows="10" >在这里输入内容...</textarea> </form></code><br> 注意：代码中的<label>标签在本章5-9中讲解。<br> 在浏览器中显示结果：<br> 注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。（这两个css样式在以后的章节会讲解）</p> </blockquote> <hr> <h3>2.24使用单选框、复选框，让用户选择</h3> <blockquote> <p>在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:</p> </blockquote> <p>语法：<br> <code><input type="radio/checkbox" value="值" name="名称" checked="checked"/></code></p> <blockquote> <p>1、type:<br> 当 type="radio" 时，控件为单选框<br> 当 type="checkbox" 时，控件为复选框<br> 2、value：提交数据到服务器的值（后台程序PHP使用）<br> 3、name：为控件命名，以备后台程序 ASP、PHP 使用<br> 4、checked：当设置 checked="checked" 时，该选项被默认选中</p> </blockquote> <p>如下面代码：</p> <blockquote> <p>注意：代码中的<label>标签在本章 5-9 中有讲解。<br> 在浏览器中显示的结果：</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 490px; max-height: 257px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/0217bdfc7aa1455dbe944d2648e105d6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/0217bdfc7aa1455dbe944d2648e105d6.jpg" width="490" height="257" alt="html基础_第42张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> </blockquote> <p>注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。</p> <hr> <h3>2.25使用下拉列表框，节省空间</h3> <blockquote> <p>下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码：<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 527px; max-height: 185px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/2f6801393d71400fa0848636f470a12a.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/2f6801393d71400fa0848636f470a12a.png" width="527" height="185" alt="html基础_第43张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>讲解：</strong> <br> <strong>1、value：</strong> <br> <div class="image-package"> <div class="image-container" style="max-width: 503px; max-height: 165px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/455cd7515c3f40828a94f15a56974c06.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/455cd7515c3f40828a94f15a56974c06.jpg" width="503" height="165" alt="html基础_第44张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 2、 <strong>selected="selected"</strong>： <br> 设置 <strong>selected="selected"</strong>属性，则该选项就被默认选中。 <br> 在浏览器中显示的结果： <br> <div class="image-package"> <div class="image-container" style="max-width: 452px; max-height: 288px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/938a0c1f0c224639b6aeca59cb60210c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/938a0c1f0c224639b6aeca59cb60210c.jpg" width="452" height="288" alt="html基础_第45张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> </blockquote> <p><strong>使用下拉列表框进行多选</strong><br> 下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"<br> 属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下<strong>Ctrl</strong><br> 键同时进行<strong>单击</strong><br> （在 Mac下使用 Command +单击），可以选择多个选项。如下代码：<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 500px; max-height: 178px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/e817fda5ff664d48b7dae87f78310ac2.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/e817fda5ff664d48b7dae87f78310ac2.png" width="500" height="178" alt="html基础_第46张图片" 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: 490px; max-height: 257px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/31e8e9e3ad7346859334d61074624baf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/31e8e9e3ad7346859334d61074624baf.jpg" width="490" height="257" alt="html基础_第47张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h3>2.26使用提交按钮，提交数据</h3> <p>在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到<strong>提交按钮</strong>。<br> <strong>语法</strong>：<br> <code><input type="submit" value="提交"></code><br> type<strong>：只有当type值设置为submit时，按钮才有提交作用</strong><br> value<strong>：</strong>按钮上显示的文字<br> <strong>举例</strong>：**<br> **</p> <div class="image-package"> <div class="image-container" style="max-width: 482px; max-height: 109px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/10b3f310f5f94cddafa9cd68e1a2f48b.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/10b3f310f5f94cddafa9cd68e1a2f48b.png" width="482" height="109" alt="html基础_第48张图片" 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: 448px; max-height: 218px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/a6984269d40b47de87a0028ea4b6fcc3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/a6984269d40b47de87a0028ea4b6fcc3.jpg" width="448" height="218" alt="html基础_第49张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h3>2.27使用重置按钮，重置表单信息</h3> <blockquote> <p>当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮<br> 使输入框恢复到初始状态。只需要把type设置为"reset"就可以。<br> <strong>语法</strong>：<br> <code><input type="reset" value="重置"></code><br> type<strong>：只有当type值设置为reset时，按钮才有重置作用</strong><br> value<strong>：</strong>按钮上显示的文字</p> </blockquote> <p><strong>举例</strong> <strong>：</strong><br> </p> <div class="image-package"> <div class="image-container" style="max-width: 457px; max-height: 101px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/adcc6de096254430b2e3e22198741afc.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/adcc6de096254430b2e3e22198741afc.png" width="457" height="101" alt="html基础_第50张图片" 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: 448px; max-height: 218px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/84260e04582e4a56a4ece48eb7cdd90b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/84260e04582e4a56a4ece48eb7cdd90b.jpg" width="448" height="218" alt="html基础_第51张图片" 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: 448px; max-height: 218px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/464a1437f9394ed899d0e7e11c7ad10a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/464a1437f9394ed899d0e7e11c7ad10a.jpg" width="448" height="218" alt="html基础_第52张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 单击重置按钮 <p></p> <hr> <h3>2.28form表单中的label标签</h3> <blockquote> <p>小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。<br> label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。<br> 语法：<br> <label for="控件id名称"><br> 注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。<br> 例子：</p> </blockquote> <pre><code><form> <label for="male">男</label> <input type="radio" name="gender" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="gender" id="female" /> <label for="email">输入你的邮箱地址</label> < input type="email" id="email" placeholder="Enter email"> </form> </code></pre> <p>[TOC]</p> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1183125215484420096"></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基础)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1937223353605615616.htm" title="HTML打造石头剪刀布游戏实战" target="_blank">HTML打造石头剪刀布游戏实战</a> <span class="text-muted">二院大蛙</span> <div>本文还有配套的精品资源，点击获取简介：通过构建“石头剪刀布”游戏，学习HTML网页开发基础及编程知识。该项目详细解析了如何利用HTML、CSS和JavaScript创建一个互动的游戏界面，涵盖从页面结构到样式设计，再到游戏逻辑实现的整个过程。开发者将通过实践掌握创建基本网页结构、事件监听、DOM操作和游戏逻辑编写等技能。1.HTML基础与网页结构设计在这一章节中，我们将初步了解Web开发的基石——</div> </li> <li><a href="/article/1933760330228363264.htm" title="HTML5 教程第2节：HTML 基础语法" target="_blank">HTML5 教程第2节：HTML 基础语法</a> <span class="text-muted">全栈前端老曹</span> <a class="tag" taget="_blank" href="/search/HTML5%E6%95%99%E7%A8%8B/1.htm">HTML5教程</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>HTML5教程第2节：HTML基础语法一、学习目标掌握HTML的基本语法结构与书写规范。理解HTML元素的分类：块级元素、行内元素、自闭合元素。学会使用HTML属性和注释。理解字符编码设置方法。了解W3C验证工具的使用。二、HTML元素结构1.什么是HTML元素？HTML文档由多个标签（tag）组成，这些标签构成了网页的结构。示例：这是一个段落。是开始标签（openingtag）是结束标签（clo</div> </li> <li><a href="/article/1929588625889095680.htm" title="HTML & JavaScript 开发总结" target="_blank">HTML & JavaScript 开发总结</a> <span class="text-muted">Auscy</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>‌1.HTML基础‌HTML（HyperTextMarkupLanguage）是网页的骨架，定义页面结构和内容。‌核心结构‌htmlCopyCode页面标题‌常用标签‌‌文本标签‌：~,,,,。‌列表‌：,,。‌链接与图片‌：,。‌表单元素‌：,,,,。‌语义化标签‌（HTML5）：,,,</div> </li> <li><a href="/article/1929568322790158336.htm" title="【零基础入门HTML】第一课：认识网页的“骨架” - HTML基础标签详解" target="_blank">【零基础入门HTML】第一课：认识网页的“骨架” - HTML基础标签详解</a> <span class="text-muted">上单带刀不带妹</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一切网页都是从HTML开始的。它就像建房子的骨架和砖块，决定了网页的结构和内容。今天，我就把我学到的最基础、最重要的HTML标签整理分享出来，希望能帮到同样刚开始的你。我们不讲太深奥的理论，就用最通俗易懂的方式，一起认识这些网页世界的“小积木”！一、HTML是什么？为什么需要它？想象一下你要搭建一个乐高模型：你需要图纸：告诉你哪里放窗户，哪里放门，哪里是墙。你需要积木：各种形状、颜色的砖块来构建结</div> </li> <li><a href="/article/1928576090809364480.htm" title="第7课： bs4 库 的 BeautifulSoup 基础学习" target="_blank">第7课： bs4 库 的 BeautifulSoup 基础学习</a> <span class="text-muted">宋哈哈呀</span> <a class="tag" taget="_blank" href="/search/python3/1.htm">python3</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8%E6%95%99%E5%AD%A6%E4%B8%93%E6%A0%8F/1.htm">爬虫零基础快速入门教学专栏</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/bs4/1.htm">bs4</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>这里写目录标题本节课内容所需要安装的库：BeautifulSoup简介：lxml简介：requests，BeautifulSoup和lxml相互三者关系：如何利用bs4的BeautifulSoup抓取和筛选需要的数据：bs4的BeautifulSoup详细解释：HTML基础：什么是html:网页的组成:list学习：for循环基础学习：for的使用方法：变量名：为什么find_all要用for才能</div> </li> <li><a href="/article/1926747581661114368.htm" title="【前端】【HTML】基础知识" target="_blank">【前端】【HTML】基础知识</a> <span class="text-muted">码字小萌新♡</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>HTML基础知识一.什么是HTML？二.基本语法三.标签关系(一)包含关系(二)并列关系四.HTML基本结构标签(一)以下三个代码vscode自动生成基本不需要我们重写1.``文档类型声明标签2.``lang语言种类3.``字符集(二)HTML网页大至骨架如下五.特殊字符六.HTML常用标签(一)标题标签(二)段落标签(三)文本格式化标签(四)盒子标签(五)图像标签1.图片标签的属性2.图片路径(</div> </li> <li><a href="/article/1925172181818470400.htm" title="【总结】HTML基础" target="_blank">【总结】HTML基础</a> <span class="text-muted">挨踢女孩yyh</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>html实体在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格在HTML中有些时候，我们不能直接书写一些特殊符号，比如，多个连续的空格，比如字母两侧的大于和小于号。实体的语法为&实体的名字：更全的查看www.w3school.com中html实体 ><©meta标签meta主要用于设置网页中的一些元数据，元数据不是给用户看的。charset指定网页的字符集n</div> </li> <li><a href="/article/1923149928650043392.htm" title="【前端】【HTML】【总复习】一万六千字详解HTML 知识体系" target="_blank">【前端】【HTML】【总复习】一万六千字详解HTML 知识体系</a> <span class="text-muted">患得患失949</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E8%80%83%E9%A2%98%E4%B8%93%E6%A0%8F%EF%BC%88%E5%89%8D%E5%90%8E%E7%AB%AF%EF%BC%89/1.htm">面试考题专栏（前后端）</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%A4%8D%E4%B9%A0/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/%E5%88%9D%E5%AD%A6%E8%80%85/1.htm">初学者</a> <div>HTML知识体系一、HTML基础入门1.HTML简介与作用HTML（HyperTextMarkupLanguage，超文本标记语言）是构建网页的基础语言。它的核心作用是：定义网页内容的结构（标题、段落、图片、表格等）提供语义化标签，帮助搜索引擎与辅助设备理解页面内容配合CSS实现页面样式、配合JS实现交互功能简而言之：HTML是网页的骨架。2.HTML文件结构一个完整的HTML页面通常包含以下基本</div> </li> <li><a href="/article/1922707669072801792.htm" title="HTML基础" target="_blank">HTML基础</a> <span class="text-muted">有人说风轻的像雨</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.HTML基础结构文档类型声明：HTML标签：、、字符编码：标题：示例：我的网页2.常用标签文本标签：标题：到段落：强调：（加粗）、（斜体）换行：水平线：链接：链接文本图片：列表：无序列表：+有序列表：+表格：、（行）、（表头）、（单元格）表单：、（文本、密码、按钮等）、、常用属性：type、name、placeholder、value示例：标题这是一个段落。访问示例网站项目1项目2提交3.语义</div> </li> <li><a href="/article/1921987869077991424.htm" title="html基础学习" target="_blank">html基础学习</a> <span class="text-muted">_Mate</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>html(hypertextmarkuplanguage)超文本标记语言文字图像音频视频动画文本格式化菜鸟教程文本格式化这个文本是加粗的这个文本是加粗的这个文本是缩小的这个文本是放大的这个文本是斜体这个文本是斜体这个文本包含下标这个文本包含上标 标题-六号字体五号字体四号字体三号字体二号字体一号字体段落链接-target属性使用target属性，你可以定义被链接的文档在何处显示。href</div> </li> <li><a href="/article/1920881191909650432.htm" title="构建费用跟踪器：从基础到样式设计" target="_blank">构建费用跟踪器：从基础到样式设计</a> <span class="text-muted">李多田</span> <a class="tag" taget="_blank" href="/search/%E8%B4%B9%E7%94%A8%E8%B7%9F%E8%B8%AA%E5%99%A8/1.htm">费用跟踪器</a><a class="tag" taget="_blank" href="/search/HTML%E7%BB%93%E6%9E%84/1.htm">HTML结构</a><a class="tag" taget="_blank" href="/search/CSS%E6%A0%B7%E5%BC%8F%E8%AE%BE%E8%AE%A1/1.htm">CSS样式设计</a><a class="tag" taget="_blank" href="/search/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/1.htm">响应式设计</a><a class="tag" taget="_blank" href="/search/JavaScript%E4%BA%A4%E4%BA%92/1.htm">JavaScript交互</a> <div>背景简介本文基于费用跟踪器项目，探讨了如何通过HTML、CSS和JavaScript构建和设计一个功能强大且用户友好的应用程序。费用跟踪器是一个实用的工具，它帮助用户记录和监控他们的收入和支出情况。HTML基础结构HTML是构建任何网页应用的骨架，我们的费用跟踪器也不例外。基础结构包括收入和支出的总结，交易历史的展示，以及添加新交易的表单。HTML代码简洁明了，使用div和form标签来构建交易记</div> </li> <li><a href="/article/1920672050469466112.htm" title="HTML实现个人简历信息展示页面" target="_blank">HTML实现个人简历信息展示页面</a> <span class="text-muted">Hi_Html</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>HTML基础结构首先，我们需要设置HTML的基础结构。以下是一个简单的HTML文档结构，其中包括头部信息和一个主体部分。简历body{font-family:Arial,sans-serif;margin:20px;display:flex;justify-content:center;flex-direction:column;align-items:center;}table{width:60</div> </li> <li><a href="/article/1917075097567424512.htm" title="企业网站html源代码 企业网站管理源码模板" target="_blank">企业网站html源代码 企业网站管理源码模板</a> <span class="text-muted">非凡网站</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在数字化转型加速的今天，企业官网已成为品牌展示与业务拓展的核心阵地。本文将从技术实现角度，解析企业网站HTML基础架构与管理系统的源码设计逻辑，为开发者提供可复用的模板化解决方案。企业网站源码5000多套：Yunbuluo.Net一、企业网站HTML基础架构模板1.1语义化页面结构html企业官网-行业解决方案专家首页产品中心解决方案关于我们核心产品体系{%forproductinproducts</div> </li> <li><a href="/article/1917007281912868864.htm" title="HTML基础" target="_blank">HTML基础</a> <span class="text-muted">Yu_Lijing</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录1.前言2.开发环境3.标签4.编写一个html页面5.vscode如何快速生成代码6.html标签&标题&段落7.格式化标签8.img标签9.a标签href和target属性10.表格标签11.列表标签——无序列表12.列表标签——有序列表13.列表标签——自定义列表14.表单域15.input文本框16.input密码框17.input单选框18.input复选框&普通按钮19.input</div> </li> <li><a href="/article/1916004383280132096.htm" title="动态响应式左侧导航栏的创建与实现" target="_blank">动态响应式左侧导航栏的创建与实现</a> <span class="text-muted">心言星愿</span> <div>本文还有配套的精品资源，点击获取简介：本文介绍如何使用HTML、JavaScript（通过jQuery库）创建一个既动态又响应式的左侧导航栏。文章首先指导构建基础的HTML导航栏结构，然后展示如何通过引入jQuery来添加动态效果，如平滑滚动和选中状态的切换。此外，还包含了使用CSS进行样式设计，以及通过媒体查询实现响应式布局的技巧，以便导航栏能在不同屏幕尺寸上保持良好的可用性。1.HTML基础导</div> </li> <li><a href="/article/1915604597087465472.htm" title="Html基础" target="_blank">Html基础</a> <span class="text-muted">assibe</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML基础标签html是由不同的标签构成的文件的基本结构上面是代码的基本结构不需要慎重的思考！使用F12进入Elements,可以看到元素相关的内容！具体的代码实现的相关内容。整体的Html直接构成一个DOM树的结构。常见的标签注释的代码标题标签段落标签换行不需要结束标签加粗倾斜下划线图片标签路径分为直接路径，间接路径，网络路径这里是属于img标签之中的其他属性的东西。alt提示文本，如果图片显</div> </li> <li><a href="/article/1913042457482817536.htm" title="CSS 导航栏" target="_blank">CSS 导航栏</a> <span class="text-muted">智慧浩海</span> <a class="tag" taget="_blank" href="/search/CSS/1.htm">CSS</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>垂直主页新闻联系关于水平主页新闻联系关于主页新闻联系关于导航栏熟练使用导航栏，对于任何网站都非常重要。使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。导航栏=链接列表作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用和元素非常有意义：实例主页新闻联系关于尝试一下»现在，让我们从列表中删除边距和填充：实例u</div> </li> <li><a href="/article/1912749125204504576.htm" title="【HTML基础-4】CSS样式详解" target="_blank">【HTML基础-4】CSS样式详解</a> <span class="text-muted">像风一样9</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%85%A5%E9%97%A804%EF%BC%9Aweb%E5%AE%89%E5%85%A8%E4%B9%8B%E8%AF%AD%E8%A8%80%E5%9F%BA%E7%A1%80/1.htm">入门04：web安全之语言基础</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/CSS%E6%A0%B7%E5%BC%8F/1.htm">CSS样式</a> <div>目录1CSS样式概述2CSS与HTML的三种组合方式2.1内联样式2.2内部样式表2.3外部引用3总结参考文章1CSS样式概述定义：CSS是CascadingStyleSheets的简称，中文名称为层叠样式表、级联样式表或样式表。作用：实现内容与样式相分离，提高代码的可重用性和可维护性。CSS样式：①元素内容的颜色color；元素内容的背景色background-color；③字体大小font-s</div> </li> <li><a href="/article/1911937437458821120.htm" title="Python爬虫：正则表达式的应用以及数据保存到excel表" target="_blank">Python爬虫：正则表达式的应用以及数据保存到excel表</a> <span class="text-muted">MYH永恒</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>上一节学习了如何解析网页，说白了就是怎么将一个html文件中的信息提取出来，当然这需要有一定的html基础，这样对于一些标签的使用更加的容易和方便一些。解析来要学习的内容就是上节提到的比较常用而且比较重要的一个东西：正则表达式。然后讲一下如何将数据存储到excel表格当中。目录一、正则表达式代码测试二、保存数据代码测试总结一、正则表达式正则表达式简单来说就是：判断一个字符串是否符合一定的标准，当然</div> </li> <li><a href="/article/1911336880134221824.htm" title="Day-01 前端 Web - HTML&CSS" target="_blank">Day-01 前端 Web - HTML&CSS</a> <span class="text-muted">枫super</span> <a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录一、HTML基础1.HTML简介2.HTML基本结构3.常用HTML标签二、CSS基础1.CSS简介2.CSS引入方式3.常用CSS选择器4.常用CSS属性一、HTML基础1.HTML简介HTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页的标准标记语言。它通过各种标签来描述网页的结构和内容，浏览器会根据这些标签来渲染网页。2.HTML基本结构一个基本的H</div> </li> <li><a href="/article/1911333603342610432.htm" title="《Vue 实战：小型项目练手与感悟》" target="_blank">《Vue 实战：小型项目练手与感悟》</a> <span class="text-muted">计算机毕设定制辅导-无忧学长</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Vue/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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、Vue基础与准备在开始Vue项目之前，对JavaScript、CSS、HTML基础知识的掌握至关重要。一、JavaScript基础知识要求数组常用方法filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。map()：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。forEach()：用于调用数组的每个元素，并将元素传递给回调函数。find()：</div> </li> <li><a href="/article/1907561975169216512.htm" title="Python 爬虫实战：从网页中精准提取所需信息" target="_blank">Python 爬虫实战：从网页中精准提取所需信息</a> <span class="text-muted">西攻城狮北</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B/1.htm">实战案例</a> <div>一、引言二、网页数据提取基础（一）HTML基础（二）解析HTML三、使用BeautifulSoup提取信息（一）安装BeautifulSoup（二）获取网页内容（三）解析HTML（四）提取页面标题（五）提取段落内容（六）提取特定元素（七）提取所有链接四、使用lxml进行高级解析（一）安装lxml（二）解析HTML（三）使用XPath提取信息（四）提取特定元素的属性五、综合示例：提取求职网站的岗位信</div> </li> <li><a href="/article/1906689650639040512.htm" title="爬虫学习[3]" target="_blank">爬虫学习[3]</a> <span class="text-muted">Transistor_Red</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>爬虫学习[3]高性能HTML性能内容解析HTML基础XPath的介绍1．XPath语句格式2．标签1的选取3．哪些属性可以省略4．XPath的特殊情况BeautifulSoup4阶段案例——大麦网演出爬虫高性能HTML性能内容解析通过前面的学习，直接从网页得到所需要的信息没有太大的问题，但是网页是一种结构化的数据。直接使用正则表达式进行查找就好像是地摊式搜寻，这种方法是普适的，但是与之相对的是效率</div> </li> <li><a href="/article/1902140567438028800.htm" title="HTML基础部分" target="_blank">HTML基础部分</a> <span class="text-muted">倒霉男孩</span> <a class="tag" taget="_blank" href="/search/html%2Bcss%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">html+css学习笔记</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML基础部分所有HTML文档必须以开始。所有HTML文档本身以开始，以结尾。HTML文档中看见部分以开始，以结尾。标题：由到定义，定义最重要的标题，定义最不重要的标题。段落：使用定义，链接：使用定义，图片：使用标签定义scr（图片源路径）alt（附加信息）宽度width和高度height也可以添加。元素定义了文档，该元素又含两个其他HTML元素和定义了一个标题定义了一个段落标题段落结束标签是非</div> </li> <li><a href="/article/1902004233067098112.htm" title="HTML基础语法：写好网页的第一步" target="_blank">HTML基础语法：写好网页的第一步</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>HTML基础语法：写好网页的第一步在Web开发的世界里，HTML是构建网页的基石。今天，让我们一起来了解HTML的基础语法，掌握编写规范网页的要点。一、HTML的基本构成1.HTML元素的解析HTML元素通常由三部分组成：开始标签（如）内容（实际的文本内容）结束标签（如）例如：这是一个段落2.元素的嵌套HTML元素可以相互嵌套，但必须注意正确的嵌套顺序：我的猫咪非常可爱二、元素的类型1.块级元素在</div> </li> <li><a href="/article/1899942636526039040.htm" title="HTML基础大揭秘：从标记语言到网页结构，必知必会的核心知识！" target="_blank">HTML基础大揭秘：从标记语言到网页结构，必知必会的核心知识！</a> <span class="text-muted">分歧Sec</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML基础目录HTML基础知识解析1.HTML是什么（标记语言）HTML的特点：2.HTML基本结构有哪些（head,body）2.1``部分2.2``部分3.什么是文档类型声明3.1DOCTYPE的作用3.2常见的DOCTYPE声明4.什么是HTML根元素（开始和结束标签是怎样的）4.1``标签的作用4.2``标签的语法5.如何进一步解释``头部部分5.1``元素示例代码：5.2``元素常用`</div> </li> <li><a href="/article/1899473581058879488.htm" title="HTML基础标签" target="_blank">HTML基础标签</a> <span class="text-muted">雪兔♛</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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>基础标签＜！--id属性，唯一的确定一个标签，id名字具有唯一性-->回到这里飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺百度一下，你就知道登录点击回到顶部</div> </li> <li><a href="/article/1897161808549048320.htm" title="【HTML学习笔记基础篇】" target="_blank">【HTML学习笔记基础篇】</a> <span class="text-muted">努力的小好</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>HTML学习笔记基础篇一、HTML概述1.1什么是HTML1.2HTML文档的基本结构二、HTML基础标签2.1标题标签2.2段落标签2.3换行标签2.4链接标签2.6列表标签2.7表格标签三、HTML进阶知识3.1行级元素与块级元素3.3语义化标签四、开发工具与技巧4.1开发工具4.2常用技巧五、总结六、示例一、HTML概述1.1什么是HTMLHTML，全称超文本标记语言（HyperTextMa</div> </li> <li><a href="/article/1896950068984999936.htm" title="JavaWeb——HTML" target="_blank">JavaWeb——HTML</a> <span class="text-muted">Clrove.11</span> <a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、什么是HTMLHTML(HyperTextMarkupLanguage)：超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息还可以定义图片，音频，视频等。标记语言：由标签构成的语言HTML语言都是预定义好的。例如：使用展示超链接，使用展示图片，展示视频。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。二、HTML基础语法HTML基本结构标题填写内容HTML标签不区</div> </li> <li><a href="/article/1896322223573102592.htm" title="HTML基础知识及实践入门讲义" target="_blank">HTML基础知识及实践入门讲义</a> <span class="text-muted">华笠医生</span> <div>本文还有配套的精品资源，点击获取简介：HTML是构建网页的基础语言，本讲义旨在为初学者提供HTML的基础知识与实践指南。内容包含HTML基本结构、元素和属性、表格和列表的使用、样式的内联与外部控制、布局和响应式设计原理、表单元素的介绍，以及使用AdobeDreamweaver进行页面创建、编辑和响应式设计的方法。实践部分包含创建静态网页的实例，帮助学习者巩固所学知识。1.HTML基础语法与结构HT</div> </li> <li><a href="/article/9.htm" title="apache ftpserver-CentOS config" target="_blank">apache ftpserver-CentOS config</a> <span class="text-muted">gengzg</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div><server xmlns="http://mina.apache.org/ftpserver/spring/v1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://mina.apache.o</div> </li> <li><a href="/article/136.htm" title="优化MySQL数据库性能的八种方法" target="_blank">优化MySQL数据库性能的八种方法</a> <span class="text-muted">AILIKES</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> <div>1、选取最适用的字段属性 　　MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建表的时候，为了获得更好的 性能，我们可以将表中字段的宽度设得尽可能小。例如，在定义邮政编码这个字段时，如果将其设置为CHAR(255),显然给数据库增加了不必要的空间，甚至使用VARCHAR这种类型也是多余的，因为CHAR(6)就可以很</div> </li> <li><a href="/article/263.htm" title="JeeSite 企业信息化快速开发平台" target="_blank">JeeSite 企业信息化快速开发平台</a> <span class="text-muted">Kai_Ge</span> <a class="tag" taget="_blank" href="/search/JeeSite/1.htm">JeeSite</a> <div>JeeSite 企业信息化快速开发平台 平台简介 JeeSite是基于多个优秀的开源项目，高度整合封装而成的高效，高性能，强安全性的开源Java EE快速开发平台。 JeeSite本身是以Spring Framework为核心容器，Spring MVC为模型视图控制器，MyBatis为数据访问层， Apache Shiro为权限授权层，Ehcahe对常用数据进行缓存，Activit为工作流</div> </li> <li><a href="/article/390.htm" title="通过Spring Mail Api发送邮件" target="_blank">通过Spring Mail Api发送邮件</a> <span class="text-muted">120153216</span> <a class="tag" taget="_blank" href="/search/%E9%82%AE%E4%BB%B6/1.htm">邮件</a><a class="tag" taget="_blank" href="/search/main/1.htm">main</a> <div>原文地址：http://www.open-open.com/lib/view/open1346857871615.html 使用Java Mail API来发送邮件也很容易实现，但是最近公司一个同事封装的邮件API实在让我无法接受，于是便打算改用Spring Mail API来发送邮件，顺便记录下这篇文章。 【Spring Mail API】 Spring Mail API都在org.spri</div> </li> <li><a href="/article/517.htm" title="Pysvn 程序员使用指南" target="_blank">Pysvn 程序员使用指南</a> <span class="text-muted">2002wmj</span> <a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a> <div>源文件:http://ju.outofmemory.cn/entry/35762 这是一篇关于pysvn模块的指南. 完整和详细的API请参考 http://pysvn.tigris.org/docs/pysvn_prog_ref.html. pysvn是操作Subversion版本控制的Python接口模块. 这个API接口可以管理一个工作副本, 查询档案库, 和同步两个. 该</div> </li> <li><a href="/article/644.htm" title="在SQLSERVER中查找被阻塞和正在被阻塞的SQL" target="_blank">在SQLSERVER中查找被阻塞和正在被阻塞的SQL</a> <span class="text-muted">357029540</span> <a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div>SELECT  R.session_id AS BlockedSessionID ,          S.session_id AS BlockingSessionID ,          Q1.text AS Block</div> </li> <li><a href="/article/771.htm" title="Intent 常用的用法备忘" target="_blank">Intent 常用的用法备忘</a> <span class="text-muted">7454103</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/Blog/1.htm">Blog</a><a class="tag" taget="_blank" href="/search/F%23/1.htm">F#</a> <div>Intent     应该算是Android中特有的东西。你可以在Intent中指定程序 要执行的动作（比如：view,edit,dial），以及程序执行到该动作时所需要的资料 。都指定好后，只要调用startActivity()，Android系统 会自动寻找最符合你指定要求的应用 程序，并执行该程序。 下面列出几种Intent 的用法 显示网页: </div> </li> <li><a href="/article/898.htm" title="Spring定时器时间配置" target="_blank">Spring定时器时间配置</a> <span class="text-muted">adminjun</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E9%85%8D%E7%BD%AE/1.htm">时间配置</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E5%99%A8/1.htm">定时器</a> <div>红圈中的值由6个数字组成，中间用空格分隔。第一个数字表示定时任务执行时间的秒，第二个数字表示分钟，第三个数字表示小时，后面三个数字表示日，月，年，< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" /> 测试的时候，由于是每天定时执行，所以后面三个数</div> </li> <li><a href="/article/1025.htm" title="POJ 2421 Constructing Roads 最小生成树" target="_blank">POJ 2421 Constructing Roads 最小生成树</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%B0%8F%E7%94%9F%E6%88%90%E6%A0%91/1.htm">最小生成树</a> <div>来源：http://poj.org/problem?id=2421 题意：还是给你n个点，然后求最小生成树。特殊之处在于有一些点之间已经连上了边。 思路：对于已经有边的点，特殊标记一下，加边的时候把这些边的权值赋值为0即可。这样就可以既保证这些边一定存在，又保证了所求的结果正确。 代码： #include <iostream> #include <cstdio></div> </li> <li><a href="/article/1152.htm" title="重构笔记——提取方法（Extract Method）" target="_blank">重构笔记——提取方法（Extract Method）</a> <span class="text-muted">ayaoxinchao</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><a class="tag" taget="_blank" href="/search/%E6%8F%90%E7%82%BC%E5%87%BD%E6%95%B0/1.htm">提炼函数</a><a class="tag" taget="_blank" href="/search/%E5%B1%80%E9%83%A8%E5%8F%98%E9%87%8F/1.htm">局部变量</a><a class="tag" taget="_blank" href="/search/%E6%8F%90%E5%8F%96%E6%96%B9%E6%B3%95/1.htm">提取方法</a> <div>提取方法（Extract Method）是最常用的重构手法之一。当看到一个方法过长或者方法很难让人理解其意图的时候，这时候就可以用提取方法这种重构手法。   下面是我学习这个重构手法的笔记：   提取方法看起来好像仅仅是将被提取方法中的一段代码，放到目标方法中。其实，当方法足够复杂的时候，提取方法也会变得复杂。当然，如果提取方法这种重构手法无法进行时，就可能需要选择其他</div> </li> <li><a href="/article/1279.htm" title="为UILabel添加点击事件" target="_blank">为UILabel添加点击事件</a> <span class="text-muted">bewithme</span> <a class="tag" taget="_blank" href="/search/UILabel/1.htm">UILabel</a> <div>    默认情况下UILabel是不支持点击事件的，网上查了查居然没有一个是完整的答案，现在我提供一个完整的代码。   UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, listV.frame.size.width - 60, listV.frame.size.height)]</div> </li> <li><a href="/article/1406.htm" title="NoSQL数据库之Redis数据库管理(PHP-REDIS实例)" target="_blank">NoSQL数据库之Redis数据库管理(PHP-REDIS实例)</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a> <div>一.redis.php <?php //实例化 $redis = new Redis(); //连接服务器 $redis->connect("localhost"); //授权 $redis->auth("lamplijie"); //相关操</div> </li> <li><a href="/article/1533.htm" title="SecureCRT使用备注" target="_blank">SecureCRT使用备注</a> <span class="text-muted">bingyingao</span> <a class="tag" taget="_blank" href="/search/secureCRT/1.htm">secureCRT</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E9%A1%B5/1.htm">每页</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E6%95%B0/1.htm">行数</a> <div>SecureCRT日志和卷屏行数设置 一、使用securecrt时，设置自动日志记录功能。 1、在C:\Program Files\SecureCRT\下新建一个文件夹(也就是你的CRT可执行文件的路径），命名为Logs； 2、点击Options -> Global Options -> Default Session -> Edite Default Sett</div> </li> <li><a href="/article/1660.htm" title="【Scala九】Scala核心三：泛型" target="_blank">【Scala九】Scala核心三：泛型</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>泛型类 package spark.examples.scala.generics class GenericClass[K, V](val k: K, val v: V) { def print() { println(k + "," + v) } } object GenericClass { def main(args: Arr</div> </li> <li><a href="/article/1787.htm" title="素数与音乐" target="_blank">素数与音乐</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/%E7%B4%A0%E6%95%B0/1.htm">素数</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%A6/1.htm">数学</a><a class="tag" taget="_blank" href="/search/haskell/1.htm">haskell</a> <div>    由于一直在看haskell，不可避免的接触到了很多数学知识，其中数论最多，如素数，斐波那契数列等，很多在学生时代无法理解的数学现在似乎也能领悟到那么一点。     闲暇之余，从图书馆找了<<The music of primes>>和<<世界数学通史>>读了几遍。其中素数的音乐这本书与软件界熟知的&l</div> </li> <li><a href="/article/1914.htm" title="Java-Collections Framework学习与总结-IdentityHashMap" target="_blank">Java-Collections Framework学习与总结-IdentityHashMap</a> <span class="text-muted">BrokenDreams</span> <a class="tag" taget="_blank" href="/search/Collections/1.htm">Collections</a> <div>        这篇总结一下java.util.IdentityHashMap。从类名上可以猜到，这个类本质应该还是一个散列表，只是前面有Identity修饰，是一种特殊的HashMap。         简单的说，IdentityHashMap和HashM</div> </li> <li><a href="/article/2041.htm" title="读《研磨设计模式》-代码笔记-享元模式-Flyweight" target="_blank">读《研磨设计模式》-代码笔记-享元模式-Flyweight</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/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; import java.util.List; import java</div> </li> <li><a href="/article/2168.htm" title="PS人像润饰&调色教程集锦" target="_blank">PS人像润饰&调色教程集锦</a> <span class="text-muted">cherishLC</span> <a class="tag" taget="_blank" href="/search/PS/1.htm">PS</a> <div>  1、仿制图章沿轮廓润饰——柔化图像，凸显轮廓 http://www.howzhi.com/course/retouching/   新建一个透明图层，使用仿制图章不断Alt+鼠标左键选点，设置透明度为21%，大小为修饰区域的1/3左右（比如胳膊宽度的1/3），再沿纹理方向（比如胳膊方向）进行修饰。   所有修饰完成后，对该润饰图层添加噪声，噪声大小应该和</div> </li> <li><a href="/article/2295.htm" title="更新多个字段的UPDATE语句" target="_blank">更新多个字段的UPDATE语句</a> <span class="text-muted">crabdave</span> <a class="tag" taget="_blank" href="/search/update/1.htm">update</a> <div>更新多个字段的UPDATE语句                    update tableA a set (a.v1, a.v2, a.v3, a.v4) = --使用括号确定更新的字段范围 </div> </li> <li><a href="/article/2422.htm" title="hive实例讲解实现in和not in子句" target="_blank">hive实例讲解实现in和not in子句</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/not+in/1.htm">not in</a><a class="tag" taget="_blank" href="/search/in/1.htm">in</a> <div>本文转自：http://www.cnblogs.com/ggjucheng/archive/2013/01/03/2842855.html 当前hive不支持 in或not in 中包含查询子句的语法，所以只能通过left join实现。 假设有一个登陆表login(当天登陆记录,只有一个uid),和一个用户注册表regusers(当天注册用户，字段只有一个uid)，这两个表都包含</div> </li> <li><a href="/article/2549.htm" title="一道24点的10+种非人类解法（2,3,10,10）" target="_blank">一道24点的10+种非人类解法（2,3,10,10）</a> <span class="text-muted">dsjt</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>这是人类算24点的方法？！！！ 事件缘由：今天晚上突然看到一条24点状态，当时惊为天人，这NM叫人啊？以下是那条状态 朱明西 : 24点，算2 3 10 10，我LX炮狗等面对四张牌痛不欲生，结果跑跑同学扫了一眼说，算出来了，2的10次方减10的3次方。。我草这是人类的算24点啊。。 然后么。。。我就在深夜很得瑟的问室友求室友算 刚出完题，文哥的暴走之旅开始了 5秒后</div> </li> <li><a href="/article/2676.htm" title="关于YII的菜单插件 CMenu和面包末breadcrumbs路径管理插件的一些使用问题" target="_blank">关于YII的菜单插件 CMenu和面包末breadcrumbs路径管理插件的一些使用问题</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a><a class="tag" taget="_blank" href="/search/framework/1.htm">framework</a> <div>在使用 YIi的路径管理工具时，发现了一个问题。                    <?php         </div> </li> <li><a href="/article/2803.htm" title="对象与关系之间的矛盾：“阻抗失配”效应[转]" target="_blank">对象与关系之间的矛盾：“阻抗失配”效应[转]</a> <span class="text-muted">come_for_dream</span> <a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%B1%A1/1.htm">对象</a> <div>概述   “阻抗失配”这一词组通常用来描述面向对象应用向传统的关系数据库（RDBMS）存放数据时所遇到的数据表述不一致问题。C++程序员已经被这个问题困扰了好多年，而现在的Java程序员和其它面向对象开发人员也对这个问题深感头痛。   “阻抗失配”产生的原因是因为对象模型与关系模型之间缺乏固有的亲合力。“阻抗失配”所带来的问题包括：类的层次关系必须绑定为关系模式（将对象</div> </li> <li><a href="/article/2930.htm" title="学习编程那点事" target="_blank">学习编程那点事</a> <span class="text-muted">gcq511120594</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a> <div>一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！ 接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去</div> </li> <li><a href="/article/3057.htm" title="Reverse Linked List II" target="_blank">Reverse Linked List II</a> <span class="text-muted">hcx2013</span> <a class="tag" taget="_blank" href="/search/list/1.htm">list</a> <div>Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1->2->3->4->5->NULL, m = 2 and n = 4, return </div> </li> <li><a href="/article/3184.htm" title="Spring4.1新特性——页面自动化测试框架Spring MVC Test HtmlUnit简介" target="_blank">Spring4.1新特性——页面自动化测试框架Spring MVC Test HtmlUnit简介</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring+4.1/1.htm">spring 4.1</a> <div>目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T</div> </li> <li><a href="/article/3311.htm" title="Hadoop集群工具distcp" target="_blank">Hadoop集群工具distcp</a> <span class="text-muted">liyonghui160com</span> <div>    1. 环境描述 两个集群：rock 和 stone rock无kerberos权限认证，stone有要求认证。 1. 从rock复制到stone，采用hdfs Hadoop distcp -i hdfs://rock-nn:8020/user/cxz/input hdfs://stone-nn:8020/user/cxz/运行在rock端，即源端问题：报版本</div> </li> <li><a href="/article/3438.htm" title="一个备份MySQL数据库的简单Shell脚本" target="_blank">一个备份MySQL数据库的简单Shell脚本</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>　　主脚本（用于备份mysql数据库）： 　　该Shell脚本可以自动备份 数据库。只要复制粘贴本脚本到文本编辑器中，输入数据库用户名、密码以及数据库名即可。我备份数据库使用的是mysqlump 命令。后面会对每行脚本命令进行说明。 　　 1. 分别建立目录“backup”和“oldbackup” 　　#mkdir /backup 　　#mkdir /oldbackup 　</div> </li> <li><a href="/article/3565.htm" title="300个涵盖IT各方面的免费资源（中）——设计与编码篇" target="_blank">300个涵盖IT各方面的免费资源（中）——设计与编码篇</a> <span class="text-muted">shoothao</span> <a class="tag" taget="_blank" href="/search/IT%E8%B5%84%E6%BA%90/1.htm">IT资源</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E6%A0%87%E5%BA%93/1.htm">图标库</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%89%87%E5%BA%93/1.htm">图片库</a><a class="tag" taget="_blank" href="/search/%E8%89%B2%E5%BD%A9%E6%9D%BF/1.htm">色彩板</a><a class="tag" taget="_blank" href="/search/%E5%AD%97%E4%BD%93/1.htm">字体</a> <div> A. 免费的设计资源 Freebbble:来自于Dribbble的免费的高质量作品。 Dribbble:Dribbble上“免费”的搜索结果——这是巨大的宝藏。 Graphic Burger:每个像素点都做得很细的绝佳的设计资源。 Pixel Buddha:免费和优质资源的专业社区。 Premium Pixels:为那些有创意的人提供免费的素材。 </div> </li> <li><a href="/article/3692.htm" title="thrift总结 - 跨语言服务开发" target="_blank">thrift总结 - 跨语言服务开发</a> <span class="text-muted">uule</span> <a class="tag" taget="_blank" href="/search/thrift/1.htm">thrift</a> <div>官网 官网JAVA例子 thrift入门介绍 IBM-Apache Thrift - 可伸缩的跨语言服务开发框架 Thrift入门及Java实例演示 thrift的使用介绍   RPC    POM： <dependency> <groupId>org.apache.thrift</groupId> </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>