Bella Ying

Html和CSS入门(笔记)—HTML

HTML入门（笔记）

第一章 Html介绍
1-1 代码初体验-Hello World网页
1-2 Html和CSS的关系
1-3 认识 Html标签
1-4 标签的语法
1-5 认识html文件基本结构
1-6 认识head标签
1-7 了解HTML的代码注释
第二章认识标签（第一部分）
2-1 语义化，让你的网页更好的被搜索引擎理解
2-2 标签，网页上显示的内容放在这里
2-3 开始学习
标签，添加段落
2-4 了解标签，为你的网页添加标题
2-5 加入强调语气，使用和标签
2-6 使用标签为文字设置单独样式
2-7 标签，短文本引用
2-8
标签，长文本引用
2-9 使用标签分行显示文本
2-10 为你的网页中添加一些空格
2-11 认识标签，添加水平横线
2-12
标签，为网页加入地址信息
2-13 想加入一行代码吗？使用标签 2-14 使用标签为你的网页加入大段代码

第三章认识标签（第二部分） 3-1 使用ul，添加新闻信息列表 3-2 使用ol，添加图书销售排行榜 3-3 认识div在排版中的作用 3-4 给div命名，使逻辑更加清晰 3-5 用css样式，为表格加入边框 3-6 caption标签，为表格添加标题和摘要第四章认识标签（第三部分） 4-1 使用标签，链接到另一个页面 4-2 在新建浏览器窗口中打开链接 4-3 使用mailto在网页中链接Email地址 4-4 认识标签，为网页插入图片第五章与浏览者交互表单标签 5-1 使用表单标签，与用户交互 5-2 文本输入框、密码输入框 5-3 文本域，支持多行文本输入 5-4 使用单选框、复选框，让用户选择 5-5 使用下拉列表框，节省空间 5-6 使用下拉列表框进行多选 5-7 使用提交按钮，提交数据 5-8 使用重置按钮，重置表单信息 5-9 form表单中的label标签

第一章 Html介绍 1-1 代码初体验-Hello World网页 1-2 Html和CSS的关系学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。任务: 为Hello World添加样式 1.在编辑器的第8行，输入 // 文字大小 font-size:12px; （注意结果窗口的文字大小的变化）。 2.在编辑器的第9行，输入 // 文字颜色 color:#930; （注意结果窗口的文字颜色的变化）。 3.在编辑器的第10行，输入 // 文字居中变化 text-align:center; （注意结果窗口的文字居中的变化）。代码演示结果演示 1-3 认识 Html标签让我们通过一个网页的学习，来对html标签有一个初步理解。平常大家说的上网就是浏览各种各式各样的网页，这些网页都是由html标签组成的。下面就是一个简单的网页。效果图如下：我们来分析一下，这个网页由哪些html标签组成： “勇气”是网页内容文章的标题，就是标题标签，它在网页上的代码写成 <h1>勇气h1> “三年级时…我也没勇气参加。” 是网页中文章的段落，是段落标签。它在网页上的代码写成 三年级时...我也没勇气参加。p> 网页上那张小女生的图片，由img标签来完成的，它在网页上的代码写成 <img src="1.jpg"> 网页的完整代码如下图： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>认识html标签title> head> <body> <h1>勇气h1> 三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。p> 到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。p> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > body> html> 1-4 标签的语法标签由英文尖括号<和>括起来，如就是一个标签。 html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。如： //标签示例（1） p> （2） <div>div> （3）span> 3. 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：里嵌套，那么必须放在的前面。如下图所示 4. HTML标签不区分大小写，和是一样的，但建议小写，因为大部分程序员都以小写为准。 1-5 认识html文件基本结构这一节中我们来学习html文件的结构：一个HTML文件是有自己固定的结构的。 //固定结构 <html> <head>...head> <body>...body> html> 代码讲解：称为根标签，所有的网页标签都在中。标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。 </li> <li> 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。 </li> </ol> <h3>1-6 认识head标签</h3> 做得好，下面我们来了解一下<head>标签的作用。文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 <pre><code class="prism language-html">//下面这些标签可用在 head 部分： <head> <title>...</title> <meta> <link> <style>...</style> <script>...</script> </head> </code></pre> <title>标签：在<title>和标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。例如： <head> <title>hello worldtitle> head> 标签的内容“hello world”会在浏览器中的标题栏上显示出来，如下图所示： <a href="http://img.e-com-net.com/image/info8/acd110a250154793b418428cecb8f25d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/acd110a250154793b418428cecb8f25d.jpg" alt="Html和CSS入门(笔记)—HTML_第5张图片" width="410" height="215" style="border:1px solid black;"></a> <head>标签中的其它标签内容的讲解，会在以后的章节中为大家一一讲解。 <h3>1-7 了解HTML的代码注释</h3> 什么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。 语法： <pre><code class="prism language-html"> </code></pre> 如：编辑器的代码的第 8、12 行都是，但是你会发现注释代码是不会在结果窗口中显示出来的。 <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML的代码注释</title> </head> <body>  <div> <p>一站式报名咨询、助学答疑服务，无论是报名、选课、学习、做作业、考试、写论文，毕业，这里都有专业老师为你答疑解惑！<a href="#">向报名顾问咨询</a></p> </div>  </body> </html> </code></pre> <h2>第二章认识标签（第一部分）</h2> <h3>2-1 语义化，让你的网页更好的被搜索引擎理解</h3> 在这一章节我们要开始把网页中常用到的标签一一向大家介绍，学习这一章节的时候要记住学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式。 标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。 讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？ <ol> <li> 更容易被搜索引擎收录。 </li> <li> 更容易让屏幕阅读器读出网页内容。 </li> </ol> 在后面的章节会带领大家学习了解html中每个标签的语义（用途）。 <h3>2-2 <body>标签，网页上显示的内容放在这里</h3> 还记得body标签吗，在上一章节我们简单介绍过：在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页 <a href="http://img.e-com-net.com/image/info8/aade70829ab64484b9d35a755e1ad128.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/aade70829ab64484b9d35a755e1ad128.jpg" alt="Html和CSS入门(笔记)—HTML_第6张图片" width="650" height="334" style="border:1px solid black;"></a> 在浏览器中的显示效果： <a href="http://img.e-com-net.com/image/info8/bc65eced3a3e427d92f43a94016bb2c8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bc65eced3a3e427d92f43a94016bb2c8.jpg" alt="Html和CSS入门(笔记)—HTML_第7张图片" width="576" height="351" style="border:1px solid black;"></a> 代码展示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <h1>了不起的盖茨比</h1> <p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html> </code></pre> <h3>2-3 开始学习标签，添加段落</h3> 如果想在网页上显示文章，这时就需要标签了，把文章的段落放到标签中。 语法： <pre><code class="prism language-html"><p>段落文本</p> </code></pre> 注意一段文字一个标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个标签中。如下图所示。 <a href="http://img.e-com-net.com/image/info8/86fcdd7e860744dbb3002f09b416c88e.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/86fcdd7e860744dbb3002f09b416c88e.png" alt="Html和CSS入门(笔记)—HTML_第8张图片" width="483" height="211" style="border:1px solid black;"></a> 在浏览器中显示的效果： <a href="http://img.e-com-net.com/image/info8/fbbef003129c4a459cdd8d4988f2e574.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fbbef003129c4a459cdd8d4988f2e574.jpg" alt="Html和CSS入门(笔记)—HTML_第9张图片" width="596" height="399" style="border:1px solid black;"></a> 标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p标签</title> </head> <body> <p>我的第一个段落</p> <p>我的第二个段落</p> </body> </html> </code></pre> <h3>2-4 了解标签，为你的网页添加标题</h3> 文章的段落用标签，那么文章的标题用什么标签呢？在本节我们将使用<hx>标签来制作文章的标题。 标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。 语法： <pre><code class="prism language-html"><hx>标题文本</hx> (x为1-6) </code></pre> 文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。如下图为腾讯网站。 <a href="http://img.e-com-net.com/image/info8/447c411757274cc898e2540c3f368ed4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/447c411757274cc898e2540c3f368ed4.jpg" alt="Html和CSS入门(笔记)—HTML_第10张图片" width="650" height="292" style="border:1px solid black;"></a>注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<h1>腾讯网</h1> h1-h6标签的默认样式： 标签代码： <a href="http://img.e-com-net.com/image/info8/90aaef19be6548808333b8649bcef7f3.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/90aaef19be6548808333b8649bcef7f3.png" alt="Html和CSS入门(笔记)—HTML_第11张图片" width="172" height="125" style="border:1px solid black;"></a> 在浏览器中显示的样式： <a href="http://img.e-com-net.com/image/info8/7bdc25506fca4665803af1d8788b16e2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7bdc25506fca4665803af1d8788b16e2.jpg" alt="Html和CSS入门(笔记)—HTML_第12张图片" width="596" height="399" style="border:1px solid black;"></a> 从上面的图片可以看出标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>h1-h6标题标签</title> </head> <body> <h1>了不起的盖茨比</h1> <p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼，投身到那个年代的灯红酒绿之中，却在名利场中看尽世态炎凉，以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。 </p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html> </code></pre> <h3>2-5 加入强调语气，使用和标签</h3> 有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到或标签。 但两者在强调的语气上有区别: 表示强调， 表示更强烈的强调。并且在浏览器中 默认用斜体表示， 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用表示强调。 如，在网上商城中，某产品的打折后的价格是需要强调的。如下图。 <a href="http://img.e-com-net.com/image/info8/e31c9672590b41bd8f57cbfa82d4364f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e31c9672590b41bd8f57cbfa82d4364f.jpg" alt="Html和CSS入门(笔记)—HTML_第13张图片" width="172" height="271" style="border:1px solid black;"></a> 代码实现： <a href="http://img.e-com-net.com/image/info8/c1a3f09feccf496db365f954fec29fd4.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/c1a3f09feccf496db365f954fec29fd4.png" alt="在这里插入图片描述" width="230" height="97"></a> 在浏览器中默认样式是有区别的： 原代码，如下图。 <a href="http://img.e-com-net.com/image/info8/847bb5f799a844269bbb597f34609a6e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/847bb5f799a844269bbb597f34609a6e.jpg" alt="Html和CSS入门(笔记)—HTML_第14张图片" width="650" height="209" style="border:1px solid black;"></a> 浏览器中的样子，如下图。 <a href="http://img.e-com-net.com/image/info8/d4021934f6ea43b0a1834ee2bc165123.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d4021934f6ea43b0a1834ee2bc165123.jpg" alt="Html和CSS入门(笔记)—HTML_第15张图片" width="624" height="377" style="border:1px solid black;"></a> 的内容在浏览中显示为斜体，显示为加粗。如果不喜欢这种样式，没有关系，以后可以使用css样式去改变它 <h3>2-6 使用标签为文字设置单独样式</h3> 这一小节讲解标签，我们对、、这三个标签进行一下总结： <ol> <li> 和标签是为了强调一段话中的关键字时使用，它们的语义是强调。 </li> <li> 标签是没有语义的，它的作用就是为了设置单独的样式用的。 </li> </ol> 如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到标签了。 如下面例子： 1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。 语法： <pre><code class="prism language-html"><span>文本</span> </code></pre> 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> <style> span{ color:blue; } </style> </head> <body> <p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（<strong>托比•马奎尔Tobey Maguire</strong> 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html> </code></pre> 结果展示： <a href="http://img.e-com-net.com/image/info8/082b5e98d36243e59e14c3a2ba04a981.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/082b5e98d36243e59e14c3a2ba04a981.jpg" alt="Html和CSS入门(笔记)—HTML_第16张图片" width="535" height="282" style="border:1px solid black;"></a> <h3>2-7 <q>标签，短文本引用</h3> 想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。 语法： <pre><code class="prism language-html"><q>引用文本</q> </code></pre> 如下面例子： <pre><code class="prism language-html"><p>最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。</q>开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。</p> </code></pre> 讲解： <ol> <li>在上面的例子中，“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌，出自晚唐诗人李商隐的《锦瑟》。因为不是作者自己的文字，所以需要使用<q></q>实现引用。</li> <li>注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。 下图是代码显示结果： <a href="http://img.e-com-net.com/image/info8/129fbc12165a4ad3ac713d906331c68f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/129fbc12165a4ad3ac713d906331c68f.jpg" alt="Html和CSS入门(笔记)—HTML_第17张图片" width="575" height="340" style="border:1px solid black;"></a> 注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。 代码演示：</li> </ol> <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>q标签</title> </head> <body> <p>周瑜，不可否认，他是历史上一个了不起的英雄人物！确实也配的上那句<q>聪明秀出为之英，胆略过人为之雄。</q></p> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/5ae80d5acc704757949f3ed287acb2d6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5ae80d5acc704757949f3ed287acb2d6.jpg" alt="在这里插入图片描述" width="650" height="43"></a> <h3>2-8 <blockquote>标签，长文本引用</h3> <blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。 等等，上一节<q>标签不是也是对文本的引用吗？不要忘记<q>标签是对简短文本的引用，比如说引用一句话就用到<q>标签。 如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用<blockquote>。 语法: <pre><code class="prism language-html"><blockquote>引用文本</blockquote> </code></pre> 如下面例子： <pre><code class="prism language-html"><blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote> </code></pre> 浏览器对<blockquote>标签的解析是缩进样式。如下图所示： <a href="http://img.e-com-net.com/image/info8/5e04765210c4469caee7ea7028a188a0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5e04765210c4469caee7ea7028a188a0.jpg" alt="Html和CSS入门(笔记)—HTML_第18张图片" width="552" height="264" style="border:1px solid black;"></a> 代码演示 <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>blockquote标签的使用</title> </head> <body> <h2>心似桂花开</h2> <p>大家都在忙于自认为最重要的事情，却没能享受到人生的乐趣，反而要吞下苦果？</p> <blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote> <p>这是李清照《咏桂》中的词句，在李清照看来，桂花暗淡青黄，性情温柔，淡泊自适，远比那些大红大紫争奇斗艳花值得称道。</p> </body> </html> </code></pre> 结果演示 <a href="http://img.e-com-net.com/image/info8/0fcc53c62d9948489a9b01ff2df27464.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0fcc53c62d9948489a9b01ff2df27464.jpg" alt="Html和CSS入门(笔记)—HTML_第19张图片" width="532" height="336" style="border:1px solid black;"></a> <h3>2-9 使用 标签分行显示文本</h3> 对于上一小节的例子，我们想让那首诗显示得更美观些，如显示下面效果： <a href="http://img.e-com-net.com/image/info8/e40ca6c8ebeb46839b1c27026be2dc95.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e40ca6c8ebeb46839b1c27026be2dc95.jpg" alt="Html和CSS入门(笔记)—HTML_第20张图片" width="626" height="408" style="border:1px solid black;"></a> 怎么可以让每一句诗词后面加入一个折行呢？那就可以用到 标签了，在需要加回车换行的地方加入 ， 标签作用相当于word文档中的回车。 上节的代码改为: <a href="http://img.e-com-net.com/image/info8/fb6b6d6aab18423b9783cd6792d65cbf.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/fb6b6d6aab18423b9783cd6792d65cbf.png" alt="Html和CSS入门(笔记)—HTML_第21张图片" width="333" height="194" style="border:1px solid black;"></a> 语法： xhtml1.0写法： <pre><code class="prism language-html"><br /> </code></pre> html4.01写法： <pre><code class="prism language-html"><br> </code></pre> 大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。 与以前我们学过的标签不一样， 标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有 、<hr />和<img />。 讲到这里，你是不是有个疑问，想折行还不好说嘛，就像在 word 文件档或记事本中，在想要折行的前面输入回车不就行了吗？很遗憾，在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。如下边的代码。 <a href="http://img.e-com-net.com/image/info8/25d540061fab4fb99b4de197455cafba.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/25d540061fab4fb99b4de197455cafba.png" alt="Html和CSS入门(笔记)—HTML_第22张图片" width="337" height="176" style="border:1px solid black;"></a> 上面的代码在浏览中显示是没有回车效果的。如下图所示： <a href="http://img.e-com-net.com/image/info8/3a756ed0d19c45c287ced82e5144afe7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3a756ed0d19c45c287ced82e5144afe7.jpg" alt="Html和CSS入门(笔记)—HTML_第23张图片" width="581" height="242" style="border:1px solid black;"></a> 总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入 。 代码演示： <pre><code class="prism language-html">//换行 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>br标签的使用</title> </head> <body> <h2>《咏桂》</h2> <p> 暗淡轻黄体性柔，<br /> 情疏迹远只香留。<br /> 何须浅碧深红色，<br /> 自是花中第一流。<br /> </p> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/a50367ac1f334cc9925d4674f478bc07.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a50367ac1f334cc9925d4674f478bc07.jpg" alt="Html和CSS入门(笔记)—HTML_第24张图片" width="543" height="247" style="border:1px solid black;"></a> <h3>2-10 为你的网页中添加一些空格</h3> 在上一节的例子，我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入。 语法： <pre><code class="prism language-html"> </code></pre> 在html代码中输入空格是不起作用的，如下代码。 <a href="http://img.e-com-net.com/image/info8/e9bbfd8755854b1ba50b4f7ae08c786f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e9bbfd8755854b1ba50b4f7ae08c786f.jpg" alt="Html和CSS入门(笔记)—HTML_第25张图片" width="650" height="180" style="border:1px solid black;"></a>在浏览中显示，还是没有空格效果。 <a href="http://img.e-com-net.com/image/info8/5d10eb9e4c9c49ddbc426761428c667d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5d10eb9e4c9c49ddbc426761428c667d.jpg" alt="Html和CSS入门(笔记)—HTML_第26张图片" width="575" height="340" style="border:1px solid black;"></a> 输入空格的正确方法： <a href="http://img.e-com-net.com/image/info8/745b797388e7453c80444760f3e940ae.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/745b797388e7453c80444760f3e940ae.png" alt="Html和CSS入门(笔记)—HTML_第27张图片" width="494" height="133" style="border:1px solid black;"></a> 在浏览器中的显示出来的空格效果。如下图所示。 <a href="http://img.e-com-net.com/image/info8/eb0d1f5a9bab40148bbf005eb7566dcd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eb0d1f5a9bab40148bbf005eb7566dcd.jpg" alt="Html和CSS入门(笔记)—HTML_第28张图片" width="459" height="266" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>空格讲解</title> </head> <body> <h1>感悟梦想</h1> 来源：作文网 作者：为梦想而飞 </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/fe69df650e3b4e73a73086514f6bfb71.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fe69df650e3b4e73a73086514f6bfb71.jpg" alt="Html和CSS入门(笔记)—HTML_第29张图片" width="538" height="155" style="border:1px solid black;"></a> <h3>2-11 认识<hr>标签，添加水平横线</h3> 在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示： <a href="http://img.e-com-net.com/image/info8/5ff226a409ff4f2bac28735715954ce4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5ff226a409ff4f2bac28735715954ce4.jpg" alt="Html和CSS入门(笔记)—HTML_第30张图片" width="650" height="365" style="border:1px solid black;"></a> 语法： <pre><code class="prism language-html">//html4.01版本 <hr> //xhtml1.0版本 <hr /> </code></pre> 注意： <ol> <li> <hr />标签和 标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。 </li> <li> <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。 </li> <li> 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。 代码演示： </li> </ol> <pre><code class="prism language-html">//添加水平横线 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>hr标签使用</title> </head> <body> <p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p> <hr /> <p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/bcd54d95f936442a9f8e10599bd56a52.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bcd54d95f936442a9f8e10599bd56a52.jpg" alt="Html和CSS入门(笔记)—HTML_第31张图片" width="531" height="261" style="border:1px solid black;"></a> <h3>2-12 <address>标签，为网页加入地址信息</h3> 一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。 语法： <pre><code class="prism language-html"><address>联系地址信息</address> </code></pre> 如： <pre><code class="prism language-html"><address>文档编写：lilian 北京市西城区德外大街10号</address> <address> 本文的作者：<a href="mailto:lilian@imooc.com">lilian</a> </address> </code></pre> 在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用 css 样式来修改它<address>标签的默认样式。 <a href="http://img.e-com-net.com/image/info8/19920c3924ec48b89c02c0e2782cf0aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/19920c3924ec48b89c02c0e2782cf0aa.jpg" alt="Html和CSS入门(笔记)—HTML_第32张图片" width="478" height="355" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html">//<address>联系地址信息</address> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>address标签介绍</title> </head> <body> <h2>慕课网</h2> <p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!公司地址: <address>北京市西城区德外大街10号</address></p> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/28fab7c1ba604f5b8c974613394a5cde.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/28fab7c1ba604f5b8c974613394a5cde.jpg" alt="Html和CSS入门(笔记)—HTML_第33张图片" width="531" height="273" style="border:1px solid black;"></a> <h3>2-13 想加入一行代码吗？使用<code>标签</h3> 在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子： <pre><code class="prism language-html"><code>var i=i+300;</code> </code></pre> 注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。 语法： <pre><code class="prism language-html"><code>代码语言</code> </code></pre> 注：如果是多行代码，可以使用<pre>标签。 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>code标签介绍</title> </head> <body> <p>我们可能知道水平渐变的实现，类似这样：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/1627b88fbe31450d993ba45154359af9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1627b88fbe31450d993ba45154359af9.jpg" alt="Html和CSS入门(笔记)—HTML_第34张图片" width="516" height="137" style="border:1px solid black;"></a> <h3>2-14 使用<pre>标签为你的网页加入大段代码</h3> 在上节中介绍加入一行代码的标签为<code>，但是在大多数情况下是需要加入大段代码的，如下图： <a href="http://img.e-com-net.com/image/info8/113878f112ed42daa4a4957aef92336c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/113878f112ed42daa4a4957aef92336c.jpg" alt="Html和CSS入门(笔记)—HTML_第35张图片" width="471" height="369" style="border:1px solid black;"></a> 怎么办？不会是每一代码都加入一个<code>标签吧，没有这么复杂，这时候就可以使用<pre>标签。 语法： <pre><code class="prism language-html"><pre>语言代码段</pre> </code></pre> <pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。 如下代码： <pre><code class="prism language-html"><pre> var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); } </pre> </code></pre> 在浏览器中的显示结果为： <a href="http://img.e-com-net.com/image/info8/597cab62225f49f3a5f6ad28bfba71c9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/597cab62225f49f3a5f6ad28bfba71c9.jpg" alt="Html和CSS入门(笔记)—HTML_第36张图片" width="379" height="224" style="border:1px solid black;"></a> 在上面的例子中可以看到代码中的空格，换行符都保留下来。如果用以前的方法，回车需要输入 签，空格需要输入 注意：<pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。 代码演示 <pre><code class="prism language-html"><!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>pre标签的使用</title> </head> <body> <pre> var message="欢迎"; for(var i=1;i<=10;i++)<br> {<br> alert(message); <br> }<br> </pre> </body> </html> </code></pre> 结果演示 <a href="http://img.e-com-net.com/image/info8/2c38a987018f464ea00a7514a2585b50.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2c38a987018f464ea00a7514a2585b50.jpg" alt="Html和CSS入门(笔记)—HTML_第37张图片" width="537" height="244" style="border:1px solid black;"></a> <h2>第三章认识标签（第二部分）</h2> <h3>3-1 使用ul，添加新闻信息列表</h3> 在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。 <a href="http://img.e-com-net.com/image/info8/105eefe95a26467880557020a17f0b17.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/105eefe95a26467880557020a17f0b17.png" alt="Html和CSS入门(笔记)—HTML_第38张图片" width="332" height="216" style="border:1px solid black;"></a> 新闻列表 <a href="http://img.e-com-net.com/image/info8/c67f62689f6e4ad3bba33774e5eede0c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c67f62689f6e4ad3bba33774e5eede0c.jpg" alt="Html和CSS入门(笔记)—HTML_第39张图片" width="326" height="138" style="border:1px solid black;"></a> 图片列表 这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。 语法： <pre><code class="prism language-html"><ul> <li>信息</li> <li>信息</li> ...... </ul> </code></pre> 举例： <pre><code class="prism language-html"><ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul> </code></pre> ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，如下图所示： <a href="http://img.e-com-net.com/image/info8/090215c5bf6c4b10b9f477308d68004b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/090215c5bf6c4b10b9f477308d68004b.jpg" alt="Html和CSS入门(笔记)—HTML_第40张图片" width="387" height="284" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html">//添加信息列表 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p标签</title> </head> <body> <ul> <Li>我的第一个列表信息</Li> <Li>我的第二个列表信息</Li> <Li>我的第三个列表信息</Li> </ul> </body> </html> </code></pre> 结果演示： <img src="http://img.e-com-net.com/image/info8/84d6ef2df808424e8a2126b567d61914.jpg" alt="在这里插入图片描述" width="0" height="0"> <h3>3-2 使用ol，添加图书销售排行榜</h3> 如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。 <a href="http://img.e-com-net.com/image/info8/d42794dcaca14acaa8e4156baab3aadd.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/d42794dcaca14acaa8e4156baab3aadd.png" alt="Html和CSS入门(笔记)—HTML_第41张图片" width="227" height="264" style="border:1px solid black;"></a> 语法： <pre><code class="prism language-html"><ol> <li>信息</li> <li>信息</li> ...... </ol> </code></pre> 举例： 下面是一个热点课程下载排行榜： <pre><code class="prism language-html"><ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol> </code></pre> <ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始，如下图所示 <a href="http://img.e-com-net.com/image/info8/ca3a30bf36ce4f6789670e3e36ce1f1a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ca3a30bf36ce4f6789670e3e36ce1f1a.jpg" alt="Html和CSS入门(笔记)—HTML_第42张图片" width="383" height="208" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html">//有前后顺序的信息列表，从1开始 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p标签</title> </head> <body> <ol> <li>我的第一个列表信息</li> <li>我的第二个列表信息</li> </ol> </body> </html> </code></pre> 结果演示： <img src="http://img.e-com-net.com/image/info8/37118d37a2e24e22a8bfc0a095e3d0c1.jpg" alt="在这里插入图片描述" width="0" height="0"> <h3>3-3 认识div在排版中的作用</h3> 在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。 语法： <pre><code class="prism language-html"> <div>…</div> </code></pre> 确定逻辑部分： 什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。 <a href="http://img.e-com-net.com/image/info8/40d270ee6e8f43cb8e0b53043396ed1f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/40d270ee6e8f43cb8e0b53043396ed1f.jpg" alt="Html和CSS入门(笔记)—HTML_第43张图片" width="650" height="292" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html">//划分逻辑部分 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>div标签</title> </head> <body> //第一个逻辑部分 <div> <h2>热门课程排行榜</h2> <ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>javascript全攻略</li> </ol> </div> //第二个逻辑部分 <div> <h2>最新课程排行</h2> <ol> <li>版本管理工具介绍—Git篇 </li> <li>Canvas绘图详解</li> <li>QQ5.0侧滑菜单</li> </ol> </div> </body> </html> </code></pre> <h3>3-4 给div命名，使逻辑更加清晰</h3> 在上一小节中，我们把一些标签放进<div>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。 如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。 <a href="http://img.e-com-net.com/image/info8/246ff697e54e490d865089273b93d620.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/246ff697e54e490d865089273b93d620.jpg" alt="Html和CSS入门(笔记)—HTML_第44张图片" width="480" height="357" style="border:1px solid black;"></a> 语法： <pre><code class="prism language-html"><div id="版块名称">…</div> </code></pre> 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>div标签</title> </head> <body> <div id="hotList"> <h2>热门课程排行榜</h2> <ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>javascript全攻略</li> </ol> </div> <div id="learningInstructed"> <h2>web前端开发导学课程</h2> <ul> <li>网页专业名词大扫盲 </li> <li>网站职位定位指南</li> <li>为您解密Yahoo网站制作流程</li> </ul> </div> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/1a16e7b22a164a338524436a58bb5a83.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1a16e7b22a164a338524436a58bb5a83.jpg" alt="Html和CSS入门(笔记)—HTML_第45张图片" width="536" height="398" style="border:1px solid black;"></a> <h3>3-5 table标签，认识网页上的表格</h3> 有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表： <a href="http://img.e-com-net.com/image/info8/91798e2ed897447490d3195ae4e39b0b.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/91798e2ed897447490d3195ae4e39b0b.png" alt="Html和CSS入门(笔记)—HTML_第46张图片" width="506" height="133" style="border:1px solid black;"></a> 想在网页上展示上述表格效果可以使用以下代码： <a href="http://img.e-com-net.com/image/info8/31cf8b7ea7874139ac8c38a2d8400ea0.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/31cf8b7ea7874139ac8c38a2d8400ea0.png" alt="Html和CSS入门(笔记)—HTML_第47张图片" width="292" height="445" style="border:1px solid black;"></a> 创建表格的四个元素： table、tbody、tr、th、td 1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。 2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。） 3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。 4、<td>…</td>：表格的一个单元格，一行中包含几对<td>…</td>，说明一行中就有几列。 5、<th>…</th>：表格的头部的一个单元格，表格表头。 6、表格中列的个数，取决于一行中数据单元格的个数。 上述代码在浏览器中显示的默认的样式为： <a href="http://img.e-com-net.com/image/info8/b880a7059d7d436d90b2fd6ae05c01d5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b880a7059d7d436d90b2fd6ae05c01d5.jpg" alt="Html和CSS入门(笔记)—HTML_第48张图片" width="373" height="239" style="border:1px solid black;"></a> 总结： 1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的 2、表头，也就是th标签中的文本默认为粗体并且居中显示 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>认识table表标签</title> </head> <body> <table> <tbody> <tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> <tr> <td>二班</td> <td>35</td> <td>85</td> </tr> <tr> <td>三班</td> <td>32</td> <td>80</td> </tr> </tbody> </table> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/cbfcab9e7b7c4a1b8085e2dbceb473e4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cbfcab9e7b7c4a1b8085e2dbceb473e4.jpg" alt="Html和CSS入门(笔记)—HTML_第49张图片" width="536" height="221" style="border:1px solid black;"></a> <h3>3-6 用css样式，为表格加入边框</h3> Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。 在右侧代码编辑器中添加如下代码： <pre><code class="prism language-html"><style type="text/css"> table tr td,th{border:1px solid #000;} </style> </code></pre> 上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。 结果窗口显示出结果样式： <a href="http://img.e-com-net.com/image/info8/076da89056c34a6abcd44a1d41946d1f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/076da89056c34a6abcd44a1d41946d1f.jpg" alt="Html和CSS入门(笔记)—HTML_第50张图片" width="390" height="285" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>为表格添加边框</title> <style type="text/css"> table tr td,th{border:1px solid #000;} </style> </head> <body> <table summary=""> <tr> <th>班级</th> <th>学生数</th> <th>平均成绩</th> </tr> <tr> <td>一班</td> <td>30</td> <td>89</td> </tr> <tr> <td>二班</td> <td>35</td> <td>85</td> </tr> <tr> <td>三班</td> <td>32</td> <td>80</td> </tr> </table> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/e585e83218d741ef8faf71abbf9d2518.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e585e83218d741ef8faf71abbf9d2518.jpg" alt="Html和CSS入门(笔记)—HTML_第51张图片" width="531" height="222" style="border:1px solid black;"></a> <h3>3-7 caption标签，为表格添加标题和摘要</h3> 表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下： <a href="http://img.e-com-net.com/image/info8/617e19d85c934897a77cb8e912814fa5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/617e19d85c934897a77cb8e912814fa5.jpg" alt="Html和CSS入门(笔记)—HTML_第52张图片" width="650" height="373" style="border:1px solid black;"></a> 摘要： 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 语法： <pre><code class="prism language-html"><table summary="表格简介文本"> </code></pre> 标题： 用以描述表格内容，标题的显示位置：表格上方。 语法： <pre><code class="prism language-html"><table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table> </code></pre> 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>认识table表标签</title> <style type="text/css"> table tr td,th{ border:1px solid #000; } </style> </head> <body> <table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量"> <caption>2012到2013库存记录</caption> <tr> <th>产品名称 </th> <th>品牌 </th> <th>库存量（个） </th> <th>入库时间 </th> </tr> <tr> <td>耳机 </td> <td>联想 </td> <td>500</td> <td>2013-1-2</td> </tr> <tr> <td>U盘 </td> <td>金士顿 </td> <td>120</td> <td>2013-8-10</td> </tr> <tr> <td>U盘 </td> <td>爱国者 </td> <td>133</td> <td>2013-3-25</td> </tr> </table> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/161532db0d3c41f59a9ec4fddcf257c9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/161532db0d3c41f59a9ec4fddcf257c9.jpg" alt="Html和CSS入门(笔记)—HTML_第53张图片" width="537" height="208" style="border:1px solid black;"></a> <h2>第四章认识标签（第三部分）</h2> <h3>使用<a>标签，链接到另一个页面</h3> 使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。 语法： <pre><code class="prism language-html"><a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> </code></pre> 例如： <pre><code class="prism language-html"><a href="http://www.imooc.com" title="点击进入慕课网">click here!</a> </code></pre> 上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。 title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如下面代码（8-12行）。 注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),后面会详细讲解。 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <ul> <li><a href="#" title="前端开发面试心法">前端开发面试心法</a> </li> <li><a href="#" title="零基础学习html">零基础学习html</a></li> <li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li> </ul> <p>1922年的春天，一个想要成名名叫尼克•卡拉威（<a href="http://www.m1905.com/mdb/star/3316/" title=" 托比•马奎尔Tobey Maguire">托比•马奎尔Tobey Maguire</a> 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/113aec783e0d4287b7a1a3a2e9192020.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/113aec783e0d4287b7a1a3a2e9192020.jpg" alt="Html和CSS入门(笔记)—HTML_第54张图片" width="536" height="436" style="border:1px solid black;"></a> <h3>4-2 在新建浏览器窗口中打开链接</h3> <a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。 如下代码： <pre><code class="prism language-html"><a href="目标网址" target="_blank">click here!</a> </code></pre> 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <p>1922年的春天，一个想要成名名叫尼克•卡拉威（<a href="http://www.m1905.com/mdb/star/3316/" target="_blank">托比•马奎尔Tobey Maguire </a>饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/daf3c62114484ac1aabef0e6f5a125dc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/daf3c62114484ac1aabef0e6f5a125dc.jpg" alt="Html和CSS入门(笔记)—HTML_第55张图片" width="540" height="333" style="border:1px solid black;"></a> <h3>4-3 使用mailto在网页中链接Email地址</h3> <a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示: <a href="http://img.e-com-net.com/image/info8/1a192103ff264673bc6e822ddcc33393.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1a192103ff264673bc6e822ddcc33393.jpg" alt="Html和CSS入门(笔记)—HTML_第56张图片" width="650" height="250" style="border:1px solid black;"></a> 注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。 下面是一个完整的实例: <a href="http://img.e-com-net.com/image/info8/fc027b9943a64d699a2183dca1f1d3c5.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/fc027b9943a64d699a2183dca1f1d3c5.png" alt="在这里插入图片描述" width="793" height="61"></a> 在浏览器中显示的结果： <pre><code>发送 </code></pre> 点击链接会打开电子邮件应用，并自动填写收件人等设置好的信息，如下图： <a href="http://img.e-com-net.com/image/info8/7cb61394300d4c8799a236827688e471.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7cb61394300d4c8799a236827688e471.jpg" alt="Html和CSS入门(笔记)—HTML_第57张图片" width="650" height="446" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html">//注意格式 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>mailto</title> </head> <body> <p>1922年的春天，一个想要成名名叫卡拉威（马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> <a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感& body=你好，对此评论有些想法">对此影评有何感想，发送邮件给我 </a> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/cc4e7e0ebe5a4874b148c3c01a0c0dbf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cc4e7e0ebe5a4874b148c3c01a0c0dbf.jpg" alt="Html和CSS入门(笔记)—HTML_第58张图片" width="540" height="338" style="border:1px solid black;"></a> <h3>4-4 认识<img>标签，为网页插入图片</h3> 在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。 语法： <pre><code class="prism language-html"><img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> </code></pre> 举例： <pre><code class="prism language-html"><img src = "myimage.gif" alt = "My Image" title = "My Image" /> </code></pre> 讲解： 1、**src：**标识图像的位置； 2、**alt：**指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本； 3、**title：**提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)； 4、图像可以是GIF，PNG，JPEG格式的图像文件。 代码演示 <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>了不起的盖茨比</title> </head> <body> <p>1922年的春天，一个想要成名名叫尼克•卡拉威（<a href="http://www.m1905.com/mdb/star/3316/">托比•马奎尔Tobey Maguire </a>饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p> <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p> <img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="电影介绍"> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/5f08a3f602f14269b62653e2afa4dc6b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5f08a3f602f14269b62653e2afa4dc6b.jpg" alt="Html和CSS入门(笔记)—HTML_第59张图片" width="524" height="546" style="border:1px solid black;"></a> <h2>第五章与浏览者交互表单标签</h2> <h3>5-1 使用表单标签，与用户交互</h3> 网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。 语法： <pre><code class="prism language-html"><form method="传送方式" action="服务器文件"> </code></pre> 讲解： 1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。 2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。 3.method ：数据传送的方式（get/post）。 <pre><code class="prism language-html"><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></pre> 注意: 1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。 2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki，里面有详细介绍。 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>表单标签</title> </head> <body> <form method="post" action="save.php"> <label for="username">用户名:</label> <input type="text" name="username" id="username" value="" /> <label for="pass">密码:</label> <input type="password" name="pass" id="pass" value="" /> <input type="submit" value="确定" name="submit" /> <input type="reset" value="重置" name="reset" /> </form> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/312fbe88ec634ff2bb47e06839b1a15d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/312fbe88ec634ff2bb47e06839b1a15d.jpg" alt="在这里插入图片描述" width="531" height="97"></a> <h3>5-2 文本输入框、密码输入框</h3> 当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。 语法： <pre><code class="prism language-html"><form> <input type="text/password" name="名称" value="文本" /> </form> </code></pre> 1、type： 当type="text"时，输入框为文本输入框; 当type="password"时, 输入框为密码输入框。 **2、name：**为文本框命名，以备后台程序ASP 、PHP使用。 **3、value：**为文本输入框设置默认值。(一般起到提示作用) 举例： <pre><code class="prism language-html"><form> 姓名： <input type="text" name="myName"> <br/> 密码： <input type="password" name="pass"> </form> </code></pre> 在浏览器中显示的结果： <a href="http://img.e-com-net.com/image/info8/be7cdd8497634f089f272409fe58a0ee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/be7cdd8497634f089f272409fe58a0ee.jpg" alt="Html和CSS入门(笔记)—HTML_第60张图片" width="525" height="275" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>文本输入框、密码输入框</title> </head> <body> <form method="post" action="save.php"> 账户: <input type="text" name="myName" /> <br> 密码: <input type="password" name="pass" /> </form> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/a6e576307f614f1ca7c0678ab2bfc704.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a6e576307f614f1ca7c0678ab2bfc704.jpg" alt="在这里插入图片描述" width="537" height="95"></a> <h3>5-3 文本域，支持多行文本输入</h3> 当用户需要在表单中输入大段文字时，需要用到文本输入域。 语法： <pre><code class="prism language-html"><textarea rows="行数" cols="列数">文本</textarea> </code></pre> 1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。 2、cols ：多行输入域的列数。 3、rows ：多行输入域的行数。 4、在<textarea></textarea>标签之间可以输入默认值。 举例： <pre><code class="prism language-html"><form method="post" action="save.php"> <label>联系我们</label> <textarea cols="50" rows="10" >在这里输入内容...</textarea> </form> </code></pre> 注意：代码中的标签在本章5-9中讲解。 在浏览器中显示结果： <a href="http://img.e-com-net.com/image/info8/dc74c09d695047afad5134887347fd34.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dc74c09d695047afad5134887347fd34.jpg" alt="Html和CSS入门(笔记)—HTML_第61张图片" width="576" height="367" style="border:1px solid black;"></a> 注意这两个属性可用css样式的width和height来代替：col用width、row用height来代替。（这两个css样式在以后的章节会讲解） 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>文本域</title> </head> <body> <form action="save.php" method="post" > <label>个人简介：</label> <textarea cols="50" rows="10">在这里输入内容...</textarea> <input type="submit" value="确定" name="submit" /> <input type="reset" value="重置" name="reset" /> </form> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/e9dc8f4c69cf4c25ad2015a136aca431.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e9dc8f4c69cf4c25ad2015a136aca431.jpg" alt="Html和CSS入门(笔记)—HTML_第62张图片" width="539" height="330" style="border:1px solid black;"></a> <h3>5-4 使用单选框、复选框，让用户选择</h3> 在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子: 语法： <pre><code class="prism language-html"><input type="radio/checkbox" value="值" name="名称" checked="checked"/> </code></pre> 1、type: 当 type=“radio” 时，控件为单选框 当 type=“checkbox” 时，控件为复选框 2、value： 提交数据到服务器的值（后台程序PHP使用） 3、name： 为控件命名，以备后台程序 ASP、PHP 使用 4、checked： 当设置 checked=“checked” 时，该选项被默认选中 如下面代码： <a href="http://img.e-com-net.com/image/info8/781a3f373426425f89dd27598713c5f7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/781a3f373426425f89dd27598713c5f7.jpg" alt="Html和CSS入门(笔记)—HTML_第63张图片" width="650" height="236" style="border:1px solid black;"></a> 在浏览器中显示的结果： <a href="http://img.e-com-net.com/image/info8/e8bb2937fcb14a63a21cd3acdaae3470.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e8bb2937fcb14a63a21cd3acdaae3470.jpg" alt="Html和CSS入门(笔记)—HTML_第64张图片" width="490" height="257" style="border:1px solid black;"></a> 注意: 同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>单选框、复选框</title> </head> <body> <form action="save.php" method="post" > <label>性别:</label> <label>男</label> <input type="radio" value="1" name="gender" /> <label>女</label> <input type="radio" value="2" name="gender" /> </form> </body> </html> </code></pre> 演示结果： <a href="http://img.e-com-net.com/image/info8/7d9988d965254273bac35cdf9e7dd1b1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7d9988d965254273bac35cdf9e7dd1b1.jpg" alt="在这里插入图片描述" width="540" height="76"></a> <h3>5-5 使用下拉列表框，节省空间</h3> 下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。如下代码： <a href="http://img.e-com-net.com/image/info8/cc01147c1732479eba6cb2aef8febbbc.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/cc01147c1732479eba6cb2aef8febbbc.png" alt="Html和CSS入门(笔记)—HTML_第65张图片" width="527" height="185" style="border:1px solid black;"></a> 讲解： 1、value： <a href="http://img.e-com-net.com/image/info8/dc5327f32bfe441cb04286bc50054636.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dc5327f32bfe441cb04286bc50054636.jpg" alt="Html和CSS入门(笔记)—HTML_第66张图片" width="503" height="165" style="border:1px solid black;"></a> 2、selected=“selected”： 设置**selected=“selected”**属性，则该选项就被默认选中。 在浏览器中显示的结果： <a href="http://img.e-com-net.com/image/info8/ff3f389acd7f437ba4ce4055ba05e0dd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ff3f389acd7f437ba4ce4055ba05e0dd.jpg" alt="Html和CSS入门(笔记)—HTML_第67张图片" width="452" height="288" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html">//把“爱好”下拉列表的“旅游”选项设置为默认选项 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>下拉列表框</title> </head> <body> <form action="save.php" method="post" > <label>爱好:</label> <select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> </form> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/603da9f11a854699b94a9b6f6f3fe476.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/603da9f11a854699b94a9b6f6f3fe476.jpg" alt="在这里插入图片描述" width="505" height="46"></a> <h3>5-6 使用下拉列表框进行多选</h3> 下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。如下代码： <a href="http://img.e-com-net.com/image/info8/83ca430c97334a2091357bddbbc228a1.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/83ca430c97334a2091357bddbbc228a1.png" alt="Html和CSS入门(笔记)—HTML_第68张图片" width="500" height="178" style="border:1px solid black;"></a> 在浏览器中显示的结果： <a href="http://img.e-com-net.com/image/info8/e25d4729fbd04c8a8095200eb90324d6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e25d4729fbd04c8a8095200eb90324d6.jpg" alt="Html和CSS入门(笔记)—HTML_第69张图片" width="490" height="257" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html">//让“爱好”下拉列表框具有多选功能 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>使用下拉列表框进行多选</title> </head> <body> <form action="save.php" method="post" > <label>爱好:</label> <select multiple="multiple"> <option value="看书">看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> </form> </body> </html> </code></pre> 结果演示：<a href="http://img.e-com-net.com/image/info8/fb661d42b4014f67b01900d4abf8166c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fb661d42b4014f67b01900d4abf8166c.jpg" alt="Html和CSS入门(笔记)—HTML_第70张图片" width="537" height="158" style="border:1px solid black;"></a> <h3>5-7 使用提交按钮，提交数据</h3> 在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。 语法： <pre><code class="prism language-html"><input type="submit" value="提交"> </code></pre> type：只有当type值设置为submit时，按钮才有提交作用 value：按钮上显示的文字 举例：<a href="http://img.e-com-net.com/image/info8/0e9681eaa8fc4227a9c9cc8a958a81e1.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/0e9681eaa8fc4227a9c9cc8a958a81e1.png" alt="Html和CSS入门(笔记)—HTML_第71张图片" width="482" height="109" style="border:1px solid black;"></a> 在浏览器中显示的结果： <a href="http://img.e-com-net.com/image/info8/4a01191dd2674d759fb566a031bf3252.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4a01191dd2674d759fb566a031bf3252.jpg" alt="Html和CSS入门(笔记)—HTML_第72张图片" width="448" height="218" style="border:1px solid black;"></a> 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>提交按钮</title> </head> <body> <form method="post" action="save.php"> <label for="myName">姓名：</label> <input type="text" value=" " name="myName " /> <input type="submit" value="提交" name="submitBtn" /> </form> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/f875353a266d4b20bac5805b4902ff2b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f875353a266d4b20bac5805b4902ff2b.jpg" alt="在这里插入图片描述" width="537" height="79"></a> <h3>5-8 使用重置按钮，重置表单信息</h3> 当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。 语法： <pre><code class="prism language-html"><input type="reset" value="重置"> </code></pre> type：只有当type值设置为reset时，按钮才有重置作用 value：按钮上显示的文字 举例： <a href="http://img.e-com-net.com/image/info8/35953ff87dc84eb0a210ae2ed6dcd3af.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/35953ff87dc84eb0a210ae2ed6dcd3af.png" alt="Html和CSS入门(笔记)—HTML_第73张图片" width="457" height="101" style="border:1px solid black;"></a> 在浏览器中显示的结果： <a href="http://img.e-com-net.com/image/info8/931de2ac0f6d4be8a690783cfb414d68.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/931de2ac0f6d4be8a690783cfb414d68.jpg" alt="Html和CSS入门(笔记)—HTML_第74张图片" width="448" height="218" style="border:1px solid black;"></a> 输入账号 <a href="http://img.e-com-net.com/image/info8/7aad5c92d522489bad81b6248668c562.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7aad5c92d522489bad81b6248668c562.jpg" alt="Html和CSS入门(笔记)—HTML_第75张图片" width="448" height="218" style="border:1px solid black;"></a> 单击重置按钮 代码演示： <pre><code class="prism language-html"><!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>重置按钮</title> </head> <body> <form action="save.php" method="post" > <label>爱好:</label> <select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> <input type="submit" value="确定" /> <input type="reset" value="重置" /> </form> </body> </html> </code></pre> 结果演示： <a href="http://img.e-com-net.com/image/info8/77057134326f45b0b90551321ad6d396.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/77057134326f45b0b90551321ad6d396.jpg" alt="在这里插入图片描述" width="535" height="86"></a> <h3>5-9 form表单中的label标签</h3> 小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签–label，这一小节就来揭晓它的作用。 label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。 语法： <pre><code class="prism language-html"><label for="控件id名称"> </code></pre> 注意： 标签的 for 属性中的值 应当与相关控件的 id 属性值 一定要相同。 例子： <pre><code class="prism language-html"><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> 代码演示： <pre><code class="prism language-html">//要求：慢跑、登山和篮球复选框要与各自的复选项用for属性关联。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>form中的lable标签</title> </head> <body> <form> 你对什么运动感兴趣：<br /> <label for="jog">慢跑</label> <input type="checkbox" name="sport" id="jog" /> <br /> <label for="climb">登山</label> <input type="checkbox" name="sport" id="climb" /> <br /> <label for="basketball">篮球</label> <input type="checkbox" name="sport" id="basketball" > </form> </body> </html> </code></pre> 结果演示：<a href="http://img.e-com-net.com/image/info8/964b192c151f40e28b3a68414f7488fa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/964b192c151f40e28b3a68414f7488fa.jpg" alt="Html和CSS入门(笔记)—HTML_第76张图片" width="542" height="155" style="border:1px solid black;"></a> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1279902025982689280"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端开发)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> jun778895 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> 2401_85123349 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835293121953492992.htm" title="了解 UNPKG：前端开发者的包管理利器" target="_blank">了解 UNPKG：前端开发者的包管理利器</a> 小于负无穷 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n</div> </li> <li><a href="/article/1835243206963458048.htm" title="系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机" target="_blank">系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机</a> rabbit_it <a class="tag" taget="_blank" href="/search/qiankun%E5%AD%A6%E4%B9%A0/1.htm">qiankun学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/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/%E9%98%BF%E9%87%8C%E4%BA%91/1.htm">阿里云</a> <div>一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性</div> </li> <li><a href="/article/1835221149026447360.htm" title="Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数" target="_blank">Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数</a> qcidyu <a class="tag" taget="_blank" href="/search/%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B7%A5%E5%85%B7%E9%9B%86%E5%90%88/1.htm">好用的工具集合</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E6%95%88%E7%8E%87/1.htm">代码效率</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E5%B7%A7/1.htm">前端技巧</a><a class="tag" taget="_blank" href="/search/Vue%E5%BC%80%E5%8F%91/1.htm">Vue开发</a><a class="tag" taget="_blank" href="/search/%E7%BB%84%E5%90%88%E5%BC%8F%E5%87%BD%E6%95%B0/1.htm">组合式函数</a><a class="tag" taget="_blank" href="/search/%E6%A8%A1%E5%9D%97%E7%AE%A1%E7%90%86/1.htm">模块管理</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5/1.htm">自动导入</a><a class="tag" taget="_blank" href="/search/Nuxt/1.htm">Nuxt</a><a class="tag" taget="_blank" href="/search/Kit/1.htm">Kit</a> <div>title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N</div> </li> <li><a href="/article/1835194426499100672.htm" title="外卖霸王餐返利外卖会员卡小程序开发" target="_blank">外卖霸王餐返利外卖会员卡小程序开发</a> 闹小艾 <a class="tag" taget="_blank" href="/search/good506070/1.htm">good506070</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账</div> </li> <li><a href="/article/1835188875916570624.htm" title="终于搞懂TS中的泛型啦! | typescript 入门指南 04" target="_blank">终于搞懂TS中的泛型啦! | typescript 入门指南 04</a> 程序员王天 <a class="tag" taget="_blank" href="/search/TypeScript%E5%AE%9E%E8%B7%B5%E6%8C%87%E5%8D%97/1.htm">TypeScript实践指南</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a> <div>大家好，我是王天~今天分享的是《ts入门指南》系列中第四篇，主要讲解ts中的泛型应用泛型在ts中是比较重要的概念，我花挺长时间才搞明白，整理输出这篇文章，希望能帮助到大家~《ts入门指南》系列，点击下方蓝色字体即可访问TsvsJs谁适合前端开发？|TypeScript入门指南01详解tsconfig.json配置文件|TypeScript入门指南02必学！TypeScript语法类型基础|Type</div> </li> <li><a href="/article/1835118610398408704.htm" title="解决前端导出excel文件，打开为乱码" target="_blank">解决前端导出excel文件，打开为乱码</a> 荔枝，你让我拿什么荔枝！ <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>前端开发中，导入和导出文件是比较常见的业务场景，常见的情况是：后端返回一个二进制的流文件，前端将其转化为excel文件即可。但是往往会出现转化后的excel文件内容位乱码的情况，本文中提供了两个解决方案：方案一：用户自定义上传方法添加附件添加附件代码解读：上述代码采用了element-ui的el-upload文件上传的组件。改组件有两种文件上传的方式：1.组件自带的上传方法，只需要给其设置acti</div> </li> <li><a href="/article/1835019650895802368.htm" title="python基于django/flask的NBA球员大数据分析与可视化python+java+node.js" target="_blank">python基于django/flask的NBA球员大数据分析与可视化python+java+node.js</a> QQ_511008285 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以本文针对NBA球员的大数据进行</div> </li> <li><a href="/article/1835019524521422848.htm" title="Java基于spring boot的国产电影数据分析与可视化python+java+node.js" target="_blank">Java基于spring boot的国产电影数据分析与可视化python+java+node.js</a> QQ_511008285 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a> <div>前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以该系统使用进行大数据处理和</div> </li> <li><a href="/article/1834989261632401408.htm" title="Web开发详解" target="_blank">Web开发详解</a> 你可以自己看 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>要做Web开发，就好像你在厨房里要做一顿丰盛的晚餐，从准备食材到最后上桌，整个过程得协调得当。Web开发的流程有前端、后端、数据库、API，以及其他的工具和技术来共同组成。别担心，听起来复杂，但我会给你讲得生动有趣，让你感受到Web开发的美妙。1.前端开发（Web开发的颜值担当）前端就是用户能直接看到和互动的部分，给人的第一印象尤为重要，简直就是网站的“面子工程”。1.1HTML-构建页面骨架HT</div> </li> <li><a href="/article/1834974005057122304.htm" title="智能合约系统DAPP开发" target="_blank">智能合约系统DAPP开发</a> I592O929783 <a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>智能合约系统DAPP（去中心化应用）的开发是一个复杂且综合性的过程，它结合了区块链技术、智能合约编程、前端开发以及安全性等多方面的知识和技能。以下是对智能合约系统DAPP开发过程的详细概述：一、需求分析明确应用场景：首先，需要明确DAPP的应用场景，如金融、游戏、社交等。功能需求：确定DAPP需要实现的具体功能，包括数据处理、用户交互等。用户群体：了解目标用户群体的需求和习惯，以便更好地设计DAP</div> </li> <li><a href="/article/1834818562884202496.htm" title="前端开发深入了解webpack" target="_blank">前端开发深入了解webpack</a> 史努比的大头 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>什么是webpackWebpack是一个现代JavaScript应用程序的模块打包工具。它主要用于将各种资源（如JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。Webpack的核心功能包括：模块化：支持将代码拆分为模块，便于管理和重用。打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。加载器（Loaders）：处理不同类型的文件（如转换ES6到E</div> </li> <li><a href="/article/1834780499281801216.htm" title="解锁网页交互利器：深入浅出 AJAX，用 JavaScript 与后端服务器对话，局部请求刷新数据" target="_blank">解锁网页交互利器：深入浅出 AJAX，用 JavaScript 与后端服务器对话，局部请求刷新数据</a> 微特尔普拉斯 <a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>在当今互联网时代，网页早已不再是静态的信息展示平台，而是充满动态交互的应用体验场。而实现这种流畅交互体验的关键技术之一，便是AJAX（AsynchronousJavaScriptandXML）。它允许网页在后台悄无声息地与服务器交换数据，无需刷新整个页面，便可实现内容的动态更新，为用户带来行云流水般的操作体验。在AJAX出现之前，网页开发采用的是前后端不分离的模式。前端开发者编写好HTML和CSS</div> </li> <li><a href="/article/1834780498128367616.htm" title="写一个图片裁剪的js，JavaScript图片裁剪插件PlusCropper" target="_blank">写一个图片裁剪的js，JavaScript图片裁剪插件PlusCropper</a> 微特尔普拉斯 <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/node/1.htm">node</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在前端开发中，图片裁剪是一个常见的需求。本文将深入解析一个功能完善的JavaScript图片裁剪插件——PlusCropper，带你一步步了解其实现原理和使用方法。一、插件概述PlusCropper是一个轻量级的JavaScript插件，它允许用户在网页上交互式地裁剪图片。它提供了以下功能：可拖拽和缩放的裁剪框:用户可以通过鼠标或触摸操作来调整裁剪区域的大小和位置。图片旋转:支持图片的顺时针和逆时</div> </li> <li><a href="/article/1834770162801274880.htm" title="Vue项目中实现AES加密解密" target="_blank">Vue项目中实现AES加密解密</a> 小金子J <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/JavaScript%E5%88%86%E4%BA%AB/1.htm">JavaScript分享</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>在前端开发中，保护用户数据的安全性至关重要。AES（高级加密标准）作为一种广泛使用的对称加密算法，因其高效性和安全性而受到青睐。本文将介绍如何在Vue项目中实现AES加密解密，包括ECB和CBC两种模式。环境搭建在Vue项目中使用AES加密解密功能之前，需要先安装crypto-js库。通过执行以下命令，可以轻松地将crypto-js添加到项目中：npminstallcrypto-js--save-</div> </li> <li><a href="/article/1834645992071327744.htm" title="web前端达到什么水平，才能找到工作？" target="_blank">web前端达到什么水平，才能找到工作？</a> cj瑾瑜 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义</div> </li> <li><a href="/article/1834624305535741952.htm" title="JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册" target="_blank">JavaScript 中 xml 的解析（dom4j 解析器），web前端开发规范手册</a> 2401_84094868 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>创建元素：Elementschool=DocumentHelper.createElement(“school”);创建文本：school.addText(“光明小学”);指定位置添加：list.add(1,school);回写xml：和在末尾添加一样7、获取属性值attributeValue()：获取属性值publicstaticvoidmain(String[]args)throwsDocum</div> </li> <li><a href="/article/1834623799534907392.htm" title="前端技术简介" target="_blank">前端技术简介</a> 2401_83916204 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>“前端开发”是从“网页制作”演变而来的。从2005年开始，互联网进入web2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在web2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。举个例子，你登陆新浪微博，要输入账号密码，这个时候就需要服务器对你的账号和密码进行验证通过才行。web2.0时代的网页不仅包含</div> </li> <li><a href="/article/1834553486256205824.htm" title="Rust：重塑编程世界的利器，对前端开发的深远影响" target="_blank">Rust：重塑编程世界的利器，对前端开发的深远影响</a> 大鱼前端 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>引言：在编程语言的海洋中，有一颗璀璨的明星正在冉冉升起——那就是Rust。它不仅在后端领域展现出强大的实力，更在前端领域带来了颠覆性的变革。本文将带你深入了解Rust的魅力，探讨其独特的优势，以及Rust如何影响前端开发，并通过案例分析展示Rust在前端应用的实力。一、Rust：编程语言的新星Rust，这门由Mozilla主导开发的系统编程语言，自诞生之初就以其独特的设计理念和出色的性能赢得了众多</div> </li> <li><a href="/article/1834504454880194560.htm" title="ref 和 reactive 区别" target="_blank">ref 和 reactive 区别</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前言ref和reactive是Vue3中响应式编程的核心。在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新，反之亦然。这种机制大大简化了前端开发，使我们能够专注于数据和用户界面的交互，而不必手动处理DOM更新。refref是Vue3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的</div> </li> <li><a href="/article/1834428954291826688.htm" title="HTML/CSS/JavaScript 全景指南：构建现代Web应用的基石" target="_blank">HTML/CSS/JavaScript 全景指南：构建现代Web应用的基石</a> 一杯梅子酱 <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>引言：在Web开发中，HTML、CSS和JavaScript是三个不可或缺的技术，它们共同构成了前端开发的核心。本文旨在全面解析这三个技术的关键知识点，探讨它们之间的联系，并通过实际案例加深理解，最后分享一些宝贵的经验总结。一、HTML：内容的骨架1.基本结构标签的使用：,,文本内容：,至链接与图像：,列表：,,表格：,,,表单：,,,,2.语义化标签,,,,,3.案例创建一个简单的网页：Html</div> </li> <li><a href="/article/1834329357515059200.htm" title="Java学习之路：实践项目与进阶学习--创建一个图书管理系统" target="_blank">Java学习之路：实践项目与进阶学习--创建一个图书管理系统</a> Dreams°123 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/intellij/1.htm">intellij</a><a class="tag" taget="_blank" href="/search/idea/1.htm">idea</a><a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a> <div>前言：上一篇学习了入门级知识，留了一份作业，其实创建一个图书管理系统是一个很好的实践项目，可以帮助你掌握数据库操作、前端开发和基本的CRUD（创建、读取、更新、删除）操作，数据库存储书籍信息，以及一个基本的用户界面。项目结构后端:使用Java和SpringBoot实现RESTfulAPI。数据库:使用H2数据库进行书籍信息存储。（也可使用mysql数据库设计，详情可参考：《MySQL数据库课程设计</div> </li> <li><a href="/article/1834221196695138304.htm" title="对于大前端开发来说，转鸿蒙开发究竟是福还是祸？_鸿蒙开发面试" target="_blank">对于大前端开发来说，转鸿蒙开发究竟是福还是祸？_鸿蒙开发面试</a> 2401_84447417 <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a> <div>会不会是下一个风口？自从鸿蒙原生应用全面启动以来，各大互联网领域的鸿蒙原生应用都在加速开发，带动了人才需求持续释放，吸引了不少人才涌入。据智联招聘数据统计，2024春招市场中软件/互联网大厂是招聘鸿蒙人才的主力，鸿蒙开发岗平均月薪超1.8万。鸿蒙系统生态已覆盖智能手机、平板电脑、耳机、智能手表及智能汽车系统等多元设备，涉及不同场景的软件、应用、硬件开发，相关企业对鸿蒙人才需求旺盛。从企业规模看，大</div> </li> <li><a href="/article/1834173176586792960.htm" title="代码随想录算法训练营第十天 | Javascript | 力扣Leetcode | 144、145、94. 二叉树前序，后续，中序" target="_blank">代码随想录算法训练营第十天 | Javascript | 力扣Leetcode | 144、145、94. 二叉树前序，后续，中序</a> 栗子皮皮布丁 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>前言踏平坎坷成大道，斗罢艰险又出发！自律的尽头是自控，自控的尽头是硬控。愿道友们披荆斩棘，终能得偿所愿。简介本人是小几年经验的前端开发，算法基础只有力扣几十道题，非常薄弱。今天是个人的代码随想录算法硬控自己第10天，搞搞二叉树，冲！题目链接：144.二叉树前序，145.二叉树后序，94.二叉树中序比较简单，代码差别不大，直接贴上。</div> </li> <li><a href="/article/1834077371821551616.htm" title="vue项目外挂配置文件（js 和 json）" target="_blank">vue项目外挂配置文件（js 和 json）</a> 不cong明的亚子 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>文章目录前言特别注意:一、外挂JS配置文件1.创建config.js2.导入config.js到index.html3.使用config.js中的变量二、外挂json配置文件1.准备工作2.配置vue.config.js3.读入数据总结前言前端开发过程中，会有很多关键性的、易改动的常量，例如：后台url、第三方登录的url等其他第三方链接地址，它们都是很容易更改的常量。要是我们把这些变量写死在代码</div> </li> <li><a href="/article/1834050028310720512.htm" title="前端开发需要了解的算法知识" target="_blank">前端开发需要了解的算法知识</a> 史努比的大头 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>手写深拷贝functiondeepClone(obj){//处理基础数据类型和函数if(obj===null||typeofobj!=='object'){returnobj;}//处理数组if(Array.isArray(obj)){returnobj.map(item=>deepClone(item));}//处理对象constclonedObj={};for(constkeyinobj){i</div> </li> <li><a href="/article/56.htm" title="多线程编程之存钱与取钱" target="_blank">多线程编程之存钱与取钱</a> 周凡杨 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><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/%E5%AD%98%E9%92%B1/1.htm">存钱</a><a class="tag" taget="_blank" href="/search/%E5%8F%96%E9%92%B1/1.htm">取钱</a> <div> 生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是</div> </li> <li><a href="/article/183.htm" title="java中数组与List相互转换的方法" target="_blank">java中数组与List相互转换的方法</a> 征客丶 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a> <div>1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分</div> </li> <li><a href="/article/310.htm" title="Shell 流程控制" target="_blank">Shell 流程控制</a> daizj <a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6/1.htm">流程控制</a><a class="tag" taget="_blank" href="/search/if+else/1.htm">if else</a><a class="tag" taget="_blank" href="/search/while/1.htm">while</a><a class="tag" taget="_blank" href="/search/case/1.htm">case</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>Shell 流程控制和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语</div> </li> <li><a href="/article/437.htm" title="Linux服务器新手操作之二" target="_blank">Linux服务器新手操作之二</a> 周凡杨 <a class="tag" taget="_blank" href="/search/Linux+%E7%AE%80%E5%8D%95+%E6%93%8D%E4%BD%9C/1.htm">Linux 简单操作</a> <div>1.利用关键字搜寻Man Pages man -k keyword 其中-k 是选项，keyword是要搜寻的关键字如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令 [haself@HA5-DZ26 ~]$ man -k </div> </li> <li><a href="/article/564.htm" title="socket聊天室之服务器搭建" target="_blank">socket聊天室之服务器搭建</a> 朱辉辉33 <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a> <div>因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock</div> </li> <li><a href="/article/691.htm" title="利用finereport建设保险公司决策分析系统的思路和方法" target="_blank">利用finereport建设保险公司决策分析系统的思路和方法</a> 老A不折腾 <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D%E4%BF%9D%E9%99%A9/1.htm">金融保险</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E6%9E%90%E7%B3%BB%E7%BB%9F/1.htm">分析系统</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E7%B3%BB%E7%BB%9F/1.htm">报表系统</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%8F%91/1.htm">项目开发</a> <div>决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。项目背景介绍通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过</div> </li> <li><a href="/article/818.htm" title="始终要页面在ifream的最顶层" target="_blank">始终要页面在ifream的最顶层</a> 林鹤霄 <div>index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram</div> </li> <li><a href="/article/945.htm" title="MySQL binlog恢复数据" target="_blank">MySQL binlog恢复数据</a> aigo <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1，先确保my.ini已经配置了binlog： # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win</div> </li> <li><a href="/article/1072.htm" title="OCX打成CBA包并实现自动安装与自动升级" target="_blank">OCX打成CBA包并实现自动安装与自动升级</a> alxw4616 <a class="tag" taget="_blank" href="/search/ocx/1.htm">ocx</a><a class="tag" taget="_blank" href="/search/cab/1.htm">cab</a> <div>近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装? a) 如何签名? b) 如何打包? c) 如何安装到指定目录? 2.</div> </li> <li><a href="/article/1199.htm" title="Hashmap队列和PriorityQueue队列的应用" target="_blank">Hashmap队列和PriorityQueue队列的应用</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/Hashmap%E9%98%9F%E5%88%97/1.htm">Hashmap队列</a><a class="tag" taget="_blank" href="/search/PriorityQueue%E9%98%9F%E5%88%97/1.htm">PriorityQueue队列</a> <div> HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次, HashMap是K,v键 ,值 put()添加元素 //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H</div> </li> <li><a href="/article/1326.htm" title="JDK1.5 returnvalue实例" target="_blank">JDK1.5 returnvalue实例</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/returnvalue/1.htm">returnvalue</a> <div>Callable接口：返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。 ExecutorService接口方</div> </li> <li><a href="/article/1453.htm" title="angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效" target="_blank">angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效</a> bijian1013 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a> <div> 在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！ </div> </li> <li><a href="/article/1580.htm" title="【Java范型二】Java范型详解之extend限定范型参数的类型" target="_blank">【Java范型二】Java范型详解之extend限定范型参数的类型</a> bit1129 <a class="tag" taget="_blank" href="/search/extend/1.htm">extend</a> <div>在第一篇中，定义范型类时，使用如下的方式： public class Generics<M, S, N> { //M,S,N是范型参数 } 这种方式定义的范型类有两个基本的问题： 1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri</div> </li> <li><a href="/article/1707.htm" title="【HBase十三】HBase知识点总结" target="_blank">【HBase十三】HBase知识点总结</a> bit1129 <a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>1. 数据从MemStore flush到磁盘的触发条件有哪些？ a.显式调用flush，比如flush 'mytable' b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成</div> </li> <li><a href="/article/1834.htm" title="服务器被DDOS攻击防御的SHELL脚本" target="_blank">服务器被DDOS攻击防御的SHELL脚本</a> ronin47 <div>mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a</div> </li> <li><a href="/article/1961.htm" title="java程序员生存手册-craps 游戏-一个简单的游戏" target="_blank">java程序员生存手册-craps 游戏-一个简单的游戏</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点</div> </li> <li><a href="/article/2088.htm" title="TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决" target="_blank">TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决</a> 开窍的石头 <a class="tag" taget="_blank" href="/search/JAVA_HOME/1.htm">JAVA_HOME</a> <div>当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下： The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou</div> </li> <li><a href="/article/2215.htm" title="[操作系统内核]操作系统与互联网" target="_blank">[操作系统内核]操作系统与互联网</a> comsci <a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a> <div> 我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发</div> </li> <li><a href="/article/2342.htm" title="富文本框ckeditor_4.4.7 文本框的简单使用支持IE11" target="_blank">富文本框ckeditor_4.4.7 文本框的简单使用支持IE11</a> cuityang <a class="tag" taget="_blank" href="/search/%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A1%86/1.htm">富文本框</a> <div><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit</div> </li> <li><a href="/article/2469.htm" title="Property null not found" target="_blank">Property null not found</a> darrenzhu <a class="tag" taget="_blank" href="/search/datagrid/1.htm">datagrid</a><a class="tag" taget="_blank" href="/search/Flex/1.htm">Flex</a><a class="tag" taget="_blank" href="/search/Advanced/1.htm">Advanced</a><a class="tag" taget="_blank" href="/search/propery+null/1.htm">propery null</a> <div>When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov</div> </li> <li><a href="/article/2596.htm" title="MySQl数据库字符串替换函数使用" target="_blank">MySQl数据库字符串替换函数使用</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2/1.htm">替换</a> <div>需求：需要将数据表中一个字段的值里面的所有的 . 替换成 _ 原来的数据是 site.title site.keywords .... 替换后要为 site_title site_keywords 使用的SQL语句如下： updat</div> </li> <li><a href="/article/2723.htm" title="mac上终端起动MySQL的方法" target="_blank">mac上终端起动MySQL的方法</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a> <div>首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1</div> </li> <li><a href="/article/2850.htm" title="Gson使用一（Gson）" target="_blank">Gson使用一（Gson）</a> eksliang <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述从结构上看Json，所有的数据（data）最终都可以分解成三种类型：第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。第二种类型是序列（sequence），又叫做数组（array）</div> </li> <li><a href="/article/2977.htm" title="android点滴4" target="_blank">android点滴4</a> gundumw100 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch</div> </li> <li><a href="/article/3104.htm" title="JavaWeb之JSP基本语法" target="_blank">JavaWeb之JSP基本语法</a> ihuning <a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a> <div> 目录 JSP模版元素 JSP表达式 JSP脚本片断 EL表达式 JSP注释特殊字符序列的转义处理如何查找JSP页面中的错误 JSP模版元素 JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP</div> </li> <li><a href="/article/3231.htm" title="App Extension编程指南（iOS8/OS X v10.10）中文版" target="_blank">App Extension编程指南（iOS8/OS X v10.10）中文版</a> 啸笑天 <a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a> <div> 当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分</div> </li> <li><a href="/article/3358.htm" title="SQLServer实现无限级树结构" target="_blank">SQLServer实现无限级树结构</a> macroli <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div> 表结构如下：数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去 create procedure test as begin decla</div> </li> <li><a href="/article/3485.htm" title="Css居中div，Css居中img，Css居中文本，Css垂直居中div" target="_blank">Css居中div，Css居中img，Css居中文本，Css垂直居中div</a> qiaolevip <a class="tag" taget="_blank" href="/search/%E4%BC%97%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">众观千象</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>/**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; } </div> </li> <li><a href="/article/3612.htm" title="Oracle 常用操作(实用)" target="_blank">Oracle 常用操作(实用)</a> 吃猫的鱼 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div> SQL>select text from all_source where owner=user and name=upper('&plsql_name'); SQL>select * from user_ind_columns where index_name=upper('&index_name'); 将表记录恢复到指定时间段以前</div> </li> <li><a href="/article/3739.htm" title="iOS中使用RSA对数据进行加密解密" target="_blank">iOS中使用RSA对数据进行加密解密</a> witcheryne <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/rsa/1.htm">rsa</a><a class="tag" taget="_blank" href="/search/iPhone/1.htm">iPhone</a><a class="tag" taget="_blank" href="/search/objective+c/1.htm">objective c</a> <div> RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>