HTML 入门笔记－初识HTML

＊＊＊＊＊＊＊＊＊＊未经本人允许，严禁转载任何网站＊＊＊＊＊＊＊＊＊＊

本人在慕课网学习HTML+CSS基础课程，记录一些文字，方便自己回忆，也希望对大家有所帮助

基础框架





标题标签


    了不起的盖茨比
    《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼，投身到那个年代的灯红酒绿之中，却在名利场中看尽世态炎凉，以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。

了解HTML的代码注释

什么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。

语法：
``

认识标签

文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

...

</code>标签<br> 在<code><title></code> 和<code><title></code> 标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。<br> 例如：</li> </ol> <pre><code><head> <title>hello world
</code>标签的内容“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/3a041c5cf8514d4b815b57bbfc590c0a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/3a041c5cf8514d4b815b57bbfc590c0a.jpg" width="410" height="215" alt="HTML 入门笔记－初识HTML_第1张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h2><strong><code><body></code>标签，网页上显示的内容放在这里</strong></h2> <p>在网页上要展示出来的页面内容一定要放在body标签中。如下图是一个新闻文章的网页。</p> <br> <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/69bbfe7444d34f1188401e024ab702ee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/69bbfe7444d34f1188401e024ab702ee.jpg" width="650" height="334" alt="HTML 入门笔记－初识HTML_第2张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <hr> <h2><strong>开始学习<code><p></code>标签，添加段落</strong></h2> <p>如果想在网页上显示文章，这时就需要<code><p></code>标签了，把文章的段落放到<code><p></code>标签中。</p> <p>语法： <code><p>段落文本</p></code></p> <p>注意一段文字一个<code><p></code>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<code><p></code>标签中。如下图所示。<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/ceebced09cce455f878751cd0b38cb4a.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ceebced09cce455f878751cd0b38cb4a.png" width="483" height="211" alt="HTML 入门笔记－初识HTML_第3张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h2><strong>了解<code><hx(1-6)></code>标签，为你的网页添加标题</strong></h2> <p>文章的段落用<code><p></code>标签，那么文章的标题用什么标签呢？在本节我们将使用<code><hx></code>标签来制作文章的标题。<br> 标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<code><h1></code>是最高的等级。</p> <p>语法：<code><hx>标题文本</hx> x:1-6</code></p> <p>注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<code><h1>腾讯网</h1></code></p> <p>h1-h6标签的默认样式：<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/0930b9d8a50741da9819d346c9409cb9.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/0930b9d8a50741da9819d346c9409cb9.png" width="172" height="125" alt="HTML 入门笔记－初识HTML_第4张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 在浏览器中显示的样式： <br> <div class="image-package"> <div class="image-container" style="max-width: 596px; max-height: 399px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/b35cbb2c3a8e4df7bd12580585f95d81.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/b35cbb2c3a8e4df7bd12580585f95d81.jpg" width="596" height="399" alt="HTML 入门笔记－初识HTML_第5张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h2><strong>加入强调语气，使用<code><strong></code>和<code><em></code>标签</strong></h2> <p>有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<code><em></code>或<code><strong></code>标签<br> 但两者在强调的语气上有区别:</p> <ul> <li> <code><em></code> 表示强调，在浏览器中<code><em></code> 默认用斜体表示</li> <li> <code><strong></code>表示更强烈的强调，在浏览器中<code><strong></code>用粗体表示。</li> <li>两个标签相比，目前国内前端程序员更喜欢使用<code><strong></code>表示强调。</li> </ul> <p>在浏览器中默认样式是有区别的：<br> </p> <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/8b72aade046b48a18a7a0651986446fd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/8b72aade046b48a18a7a0651986446fd.jpg" width="650" height="209" alt="HTML 入门笔记－初识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: 624px; max-height: 377px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/f59df33461fa40d5a86152ce7bcba576.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/f59df33461fa40d5a86152ce7bcba576.png" width="624" height="377" alt="HTML 入门笔记－初识HTML_第7张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>语法：<br> <code><em>需要强调的文本</em></code> <br> <code><strong>需要强调的文本</strong></code></p> <p>栗子：<br> 在网上商城中，某产品的打折后的价格是需要强调的。如下图。<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/028ef0aa385146e3b83cb7c540dfa4c1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/028ef0aa385146e3b83cb7c540dfa4c1.jpg" width="172" height="271" alt="HTML 入门笔记－初识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: 230px; max-height: 97px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/9f8c430751c1468fb2c8e2f64d0886ea.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/9f8c430751c1468fb2c8e2f64d0886ea.png" width="230" height="97"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h2><strong>使用<code><span></code>标签为文字设置单独样式</strong></h2> <p>语法：<code><span>文本</span></code></p> <p>我们对<code><em></code>、<code><strong></code>、<code><span></code>这三个标签进行一下总结：</p> <ol> <li><p><code><em></code>和<code><strong></code>标签是为了强调一段话中的关键字时使用，它们的语义是强调。</p></li> <li><p><code><span></code>标签是没有语义的，它的作用就是为了设置单独的样式用的。</p></li> </ol> <p>如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到<code><span></code>标签了。<br> 如下面例子：</p> <pre><code><p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，<strong>股票</strong>飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p> </code></pre> <p>我们如果想设置“美国梦”三个字设置成blue（蓝色），只需要在<code><style></code>标签中加入：</p> <pre><code>span{ color:blue; } </code></pre> <p>css部分，以后会聊，你能大概明白span就是能干单独设置样式的活，就ok了</p> <hr> <h2><strong><code><q></code>标签，短文本引用</strong></h2> <p>想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<code><q></code>标签是你所需要的。</p> <p>语法：<code><q>引用文本</q></code></p> <p>栗子：</p> <pre><code><p>最初知道庄子，是从一首诗<q>庄生晓梦迷蝴蝶。望帝春心托杜鹃。 </q>开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。 </p> </code></pre> <p>讲解:</p> <ol> <li><p>在上面的例子中，“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌，出自晚唐诗人李商隐的《锦瑟》。因为不是作者自己的文字，所以需要使用<q></q>实现引用。</p></li> <li><p>注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。</p></li> </ol> <p>下图是代码显示结果：</p> <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/d9bb4437760f4f78856ba903a30a6ac9.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/d9bb4437760f4f78856ba903a30a6ac9.png" width="575" height="340" alt="HTML 入门笔记－初识HTML_第9张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p>注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话。</p> <hr> <h2><strong><code><blockquote></code>标签，长文本引用</strong></h2> <p><code><blockquote></code>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。<br> 等等，上一节<code><q></code>标签不是也是对文本的引用吗？不要忘记<code><q></code>标签是对简短文本的引用，比如说引用一句话就用到<code><q></code>标签。<br> 如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用<code><blockquote></code>。</p> <p>语法：<code><blockquote>引用文本</blockquote></code><br> 如下面例子：</p> <pre><code><blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote> </code></pre> <p>浏览器对<code><blockquote></code>标签的解析是缩进样式。如下图所示：<br> </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/f0b7e46c322c408abfc88878d67d30e5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/f0b7e46c322c408abfc88878d67d30e5.jpg" width="552" height="264" alt="HTML 入门笔记－初识HTML_第10张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h2><strong>使用<code><br></code>标签分行显示文本</strong></h2> <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/c42563cab4904d76be8e33b9152bf8ea.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/c42563cab4904d76be8e33b9152bf8ea.jpg" width="626" height="408" alt="HTML 入门笔记－初识HTML_第11张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 怎么可以让每一句诗词后面加入一个折行呢？那就可以用到 <code><br /></code>标签了，在需要加回车换行的地方加入 <code><br /></code>， <code><br /></code>标签作用相当于word文档中的回车。 <br> 代码改为： <p></p> <pre><code><h2>《咏桂》</h2> <p>暗淡轻黄体性柔，<br />情疏迹远只香留。<br />何须浅碧深红色，<br />自是花中第一流。 </code></pre> <p>诗文在浏览器中显示为：<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 185px; max-height: 163px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/fd18d782af194cdca182b07369dae3f9.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/fd18d782af194cdca182b07369dae3f9.png" width="185" height="163" alt="HTML 入门笔记－初识HTML_第12张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h2><strong>为你的网页中添加一些空格</strong></h2> <p>在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入<code>nbsp;</code>。<strong>不要忘了那个分号</strong></p> <p>在html代码中输入空格是不起作用的，如下代码。<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 258px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/126110d9a66b4d2a939864570dfa857a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/126110d9a66b4d2a939864570dfa857a.jpg" width="650" height="180" alt="HTML 入门笔记－初识HTML_第13张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>在浏览中显示，还是没有空格效果。<br> </p> <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/aa9296a2b3c74ed2bb71217b66883903.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/aa9296a2b3c74ed2bb71217b66883903.jpg" width="575" height="340" alt="HTML 入门笔记－初识HTML_第14张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>输入空格的正确方法：<br> </p> <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/1789032995c6402ca2b96927891082ce.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/1789032995c6402ca2b96927891082ce.png" width="494" height="133" alt="HTML 入门笔记－初识HTML_第15张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>在浏览器中的显示出来的空格效果。如下图所示。<br> </p> <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/a507a95bd43348c5b5ea6bf4fe37a397.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/a507a95bd43348c5b5ea6bf4fe37a397.jpg" width="459" height="266" alt="HTML 入门笔记－初识HTML_第16张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h2><strong>认识<code><hr></code>标签，添加水平横线</strong></h2> <p>在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示：</p> <br> <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/373c69fbee304f3d9e159277d5078294.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/373c69fbee304f3d9e159277d5078294.jpg" width="650" height="365" alt="HTML 入门笔记－初识HTML_第17张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p>语法：</p> <ul> <li>html4.01版本 <code><hr></code> </li> <li>xhtml1.0版本 <code><hr /></code> <br> 注意：</li> </ul> <ol> <li> <code><hr /></code>标签和<code><br /></code>标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。</li> <li> <code><hr /></code>标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。</li> <li>大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。</li> </ol> <hr> <h2><strong><code><address></code>标签，为网页加入地址信息</strong></h2> <p>一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<code><address></code>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。<br> 栗子：</p> <pre><code><address> 本文的作者：<a href="mailto:zhaoliangsyn@163.com">zhaolion</a> </address> </code></pre> <hr> <h2><strong>想加入一行代码吗？使用<code><code></code>标签</strong></h2> <p>在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code><code></code>标签了，如下面例子：</p> <p><code><code>var i = a + b;</code></code></p> <p>注意：在文章中一般如果要插入多行代码时不能使用<code><code></code>标签了。<strong>如果是多行代码，可以使用<code><pre></code>标签</strong>。</p> <hr> <h2><strong>使用<code><pre></code>标签为你的网页加入大段代码</strong></h2> <p>在上节中介绍加入一行代码的标签为<code><code></code>，但是在大多数情况下是需要加入大段代码的，如下图：<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 471px; max-height: 369px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/31e05443cef2478c9aef18be72264f85.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/31e05443cef2478c9aef18be72264f85.jpg" width="471" height="369" alt="HTML 入门笔记－初识HTML_第18张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>怎么办？不会是每一代码都加入一个<code><code></code>标签吧，没有这么复杂，这时候就可以使用<code><pre></code>标签。</p> <p>语法：<code><pre>语言代码段</pre></code></p> <p><code><pre></code>标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。<br> 如下代码：</p> <pre><code><pre> var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); } </pre> </code></pre> <p>在浏览器中的显示结果为：<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 379px; max-height: 224px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/4c42a3a03ece46d5b2fb83d4a57294c3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/4c42a3a03ece46d5b2fb83d4a57294c3.jpg" width="379" height="224" alt="HTML 入门笔记－初识HTML_第19张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>在上面的例子中可以看到代码中的空格，换行符都保留下来。如果用以前的方法，回车需要输入<code><br></code>签，空格需要输入<code></code></p> <p>注意：<code><pre></code> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<code><pre></code>标签的一个常见应用就是用来展示计算机的源代码。</p> <hr> <h2><strong>使用<code><ul></code>，添加新闻信息列表</strong></h2> <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/48c51aad73994549a22ad410f9a3a026.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/48c51aad73994549a22ad410f9a3a026.png" width="332" height="216" alt="HTML 入门笔记－初识HTML_第20张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>这些列表就可以使用ul-li标签来完成。ul-li是 <strong>没有前后顺序的信息列表</strong>。</p> <p>语法：</p> <pre><code><ul> <li>信息</li> <li>信息</li> ...... </ul> </code></pre> <p>举例：</p> <pre><code><ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul> </code></pre> <p>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/56815dfcff4b4bfb94fc2ac03bbed4b7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/56815dfcff4b4bfb94fc2ac03bbed4b7.jpg" width="387" height="284" alt="HTML 入门笔记－初识HTML_第21张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h2><strong>使用<code><ol></code>，添加顺序列表</strong></h2> <p>如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<code><ol></code>标签来制作有序列表来展示。<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/f14b15e3cc134243b1dcfdc19e571ccf.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/f14b15e3cc134243b1dcfdc19e571ccf.png" width="227" height="264" alt="HTML 入门笔记－初识HTML_第22张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 语法： <p></p> <pre><code><ol> <li>信息</li> <li>信息</li> ...... </ol> </code></pre> <p>举例：</p> <p>下面是一个热点课程下载排行榜：</p> <pre><code><ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol> </code></pre> <p><code><ol></code>在网页中显示的默认样式一般为：每项<code><li></code>前都自带一个序号，序号默认从1开始，如下图所示：<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/05a8fb6228184a43a67c3a705124418c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/05a8fb6228184a43a67c3a705124418c.jpg" width="383" height="208" alt="HTML 入门笔记－初识HTML_第23张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <hr> <h2><strong>初识<code>div</code></strong></h2> <h3><strong>认识div在排版中的作用</strong></h3> <p>在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。</p> <p>语法：<code><div>…</div></code></p> <p>确定逻辑部分：<br> 什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。<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/9d1f2e120ff94bc5a7464470cdbbbea9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/9d1f2e120ff94bc5a7464470cdbbbea9.jpg" width="650" height="292" alt="HTML 入门笔记－初识HTML_第24张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h3><strong>给div命名，使逻辑更加清晰</strong></h3> <p>在上一小节中，我们把一些标签放进<code><div></code>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<code><div></code>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。<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/cab12099ca924ae8b5417dbc7f095151.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/cab12099ca924ae8b5417dbc7f095151.jpg" width="480" height="357" alt="HTML 入门笔记－初识HTML_第25张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>语法：<code><div id="版块名称">…</div></code></p> <hr> <h2><strong>table标签，认识网页上的表格</strong></h2> <h3><strong>table标签＝我们平时看到到表格</strong></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/c126094d4f8f48e7a1a26ed5a8033955.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/c126094d4f8f48e7a1a26ed5a8033955.png" width="506" height="133" alt="HTML 入门笔记－初识HTML_第26张图片" 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/07875b2d67fc4812be6ce01c9dd18af6.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/07875b2d67fc4812be6ce01c9dd18af6.png" width="292" height="445" alt="HTML 入门笔记－初识HTML_第27张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>创建表格的四个元素： <code>table、tbody、tr、th、td</code></p> <ol> <li><p><code><table>…</table></code>：整个表格以<code><table></code>标记开始、<code></table></code>标记结束。</p></li> <li><p><code><tbody>…</tbody></code>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<code><tbody></code>标签后，这个表格就要等表格内容全部下载完才会显示。</p></li> <li><p><code><tr>…</tr></code>：表格的一行，所以有几对tr 表格就有几行。</p></li> <li><p><code><td>…</td></code>：表格的一个单元格，一行中包含几对<code><td>...</td></code>，说明一行中就有几列。</p></li> <li><p><code><th>…</th></code>：表格的头部的一个单元格，表格表头。</p></li> <li><p>表格中列的个数，取决于一行中数据单元格的个数。</p></li> </ol> <p>上述代码在浏览器中显示的默认的样式为：<br> </p> <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/ad1d549ecfef4cfb98c02939ebd38c39.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/ad1d549ecfef4cfb98c02939ebd38c39.jpg" width="373" height="239" alt="HTML 入门笔记－初识HTML_第28张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>总结：</p> <ol> <li><p>table表格在没有添加css样式之前，在浏览器中显示是没有表格线的</p></li> <li><p>表头，也就是th标签中的文本默认为粗体并且居中显示</p></li> </ol> <h3><strong>用css样式，为表格加入边框</strong></h3> <p>Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。<br> 代码中加入：</p> <pre><code><style type="text/css"> table tr td,th{border:1px solid #000;} </style> </code></pre> <p>上述代码是用 css 样式代码，为th，td单元格添加粗细为一个像素的黑色边框。</p> <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/1335f5ca6a6047618d4c95880926e8bb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/1335f5ca6a6047618d4c95880926e8bb.jpg" width="390" height="285" alt="HTML 入门笔记－初识HTML_第29张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h3><strong>caption标签，为表格添加标题和摘要</strong></h3> <p>表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下</p> <p></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/30daf0c02dc84bf389ffdf8a77f36ec8.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/30daf0c02dc84bf389ffdf8a77f36ec8.png" width="694" height="398" alt="HTML 入门笔记－初识HTML_第30张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> <strong>摘要</strong> 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。 <br> 语法： <code><table summary="表格简介文本"></code> <p></p> <p><strong>标题</strong> 用以描述表格内容，标题的显示位置：表格上方。<br> 语法：</p> <pre><code><table> <caption>标题文本</caption> <tr> <td>…</td> <td>…</td> … </tr> … </table> </code></pre> <hr> <h2><strong>初识<code><a></code>标签</strong></h2> <h3><strong>使用<code><a></code>标签，链接到另一个页面</strong></h3> <p>使用<code><a></code>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。</p> <p>语法：<br> <code><a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a></code></p> <p>例如：<br> <code><a href="http://www.zhaolion.com" title="点击进入我的博客">click here!</a></code></p> <p>上面例子作用是单击click here!文字，网页链接到<code>http://www.zhaolion.com</code>这个网页。</p> <p>title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好)<br> <strong>提醒</strong> <br> 还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来（a{color:#000}),后面会详细讲解。</p> <h3><strong>在新建浏览器窗口中打开链接</strong></h3> <p><code><a></code>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。只需要添加一个属性 <code>target="_blank"</code><br> 如下代码：<br> <code><a href="目标网址" target="_blank">click here!</a></code></p> <h3><strong>使用mailto在网页中链接Email地址</strong></h3> <p><code><a></code>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解，请看详细图示：<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 550px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/ee3874a2ee4849869db9cebebbd01f2d.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ee3874a2ee4849869db9cebebbd01f2d.png" width="1428" height="550" alt="HTML 入门笔记－初识HTML_第31张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p><strong>提醒</strong>:如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。<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/c5c076ad8a7640278c72c09cc415fc85.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/c5c076ad8a7640278c72c09cc415fc85.png" width="793" height="61"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>点击链接会打开电子邮件应用，并自动填写收件人等设置好的信息，如下图：</p> <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/70e7b76296f2420fa549ad18e188c303.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/70e7b76296f2420fa549ad18e188c303.jpg" width="650" height="446" alt="HTML 入门笔记－初识HTML_第32张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <hr> <h2><strong>认识<code><img></code>标签，为网页插入图片</strong></h2> <p>在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<code><img></code>标签来插入图片。<br> 语法： <code>[站外图片上传中……(48)]</code></p> <p>举例： <code><img src = "myimage.gif" alt = "My Image" title = "My Image" /></code></p> <p>讲解：</p> <ol> <li><p>src：标识图像的位置；</p></li> <li><p>alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；</p></li> <li><p>title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；</p></li> <li><p>图像可以是GIF，PNG，JPEG格式的图像文件。</p></li> </ol> <hr> <h2><strong>认识表单</strong></h2> <h3><strong>使用表单标签，与用户交互</strong></h3> <p>网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。</p> <p>语法： <code><form method="传送方式" action="服务器文件"></code></p> <p>讲解：</p> <ol> <li><p><code><form></code> ：<code><form></code>标签是成对出现的，以<code><form></code>开始，以<code></form></code>结束。</p></li> <li><p>action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。</p></li> <li><p>method ：数据传送的方式（get/post）。</p></li> </ol> <pre><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></pre> <p><strong>注意</strong></p> <ol> <li><p>所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<code><form></form></code>标签之间（否则用户输入的信息可提交不到服务器上哦！）。</p></li> <li><p>method:post/get的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以问谷哥</p></li> </ol> <h3><strong>文本输入框、密码输入框</strong></h3> <p>当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。</p> <p>语法：</p> <pre><code><form> <input type="text/password" name="名称" value="文本" /> </form> </code></pre> <ol> <li> <p>type：</p> <ul> <li>当type="text"时，输入框为文本输入框;</li> <li>当type="password"时, 输入框为密码输入框。</li> </ul> </li> <li><p>name：为文本框命名，以备后台程序ASP 、PHP使用。</p></li> <li><p>value：为文本输入框设置默认值。(一般起到提示作用)</p></li> </ol> <p>举例：</p> <pre><code><form> 姓名： <input type="text" name="myName"> <br/> 密码： <input type="password" name="pass"> </form> </code></pre> <p>在浏览器中显示的结果：</p> <br> <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/fa6be4454cbc469fa36f2f814d0a3780.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/fa6be4454cbc469fa36f2f814d0a3780.jpg" width="525" height="275" alt="HTML 入门笔记－初识HTML_第33张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h3><strong>文本域，支持多行文本输入</strong></h3> <p>当用户需要在表单中输入大段文字时，需要用到文本输入域。</p> <p>语法： <code><textarea rows="行数" cols="列数">文本</textarea></code></p> <ol> <li><p><code><textarea></code>标签是成对出现的，以<code><textarea></code>开始，以<code></textarea></code>结束。</p></li> <li><p>cols ：多行输入域的列数。</p></li> <li><p>rows ：多行输入域的行数。</p></li> <li><p>在<code><textarea></textarea></code>标签之间可以输入默认值。</p></li> </ol> <p>举例：</p> <pre><code><form method="post" action="save.php"> <label>联系我们</label> <textarea cols="50" rows="10" >在这里输入内容...</textarea> </form> </code></pre> <p>在浏览器中显示结果：</p> <br> <div class="image-package"> <div class="image-container" style="max-width: 576px; max-height: 367px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/61a182eb2d8245bc8af6d1e183814db2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/61a182eb2d8245bc8af6d1e183814db2.jpg" width="576" height="367" alt="HTML 入门笔记－初识HTML_第34张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <h3><strong>使用单选框、复选框，让用户选择</strong></h3> <p>在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:<br> 语法： <code><input type="radio/checkbox" value="值" name="名称" checked="checked"/></code></p> <ol> <li> <p>type:</p> <ul> <li><p>当 type="radio" 时，控件为单选框</p></li> <li><p>当 type="checkbox" 时，控件为复选框</p></li> </ul> </li> <li><p>value：提交数据到服务器的值（后台程序PHP使用）</p></li> <li><p>name：为控件命名，以备后台程序 ASP、PHP 使用</p></li> <li><p>checked：当设置 checked="checked" 时，该选项被默认选中</p></li> </ol> <p>如下面代码：<br> </p> <div class="image-package"> <div class="image-container" style="max-width: 700px; max-height: 267px;"> <div class="image-view"> <a href="http://img.e-com-net.com/image/info10/16001bd2bb32461abbe2fbd3e7182413.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/16001bd2bb32461abbe2fbd3e7182413.png" width="736" height="267" alt="HTML 入门笔记－初识HTML_第35张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>在浏览器中显示的结果：<br> </p> <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/224697abbf33472cafdfdf93f2240897.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/224697abbf33472cafdfdf93f2240897.jpg" width="490" height="257" alt="HTML 入门笔记－初识HTML_第36张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p><strong>注意</strong>:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。</p> <h3><strong>使用下拉列表框，节省空间</strong></h3> <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/0068100f9ac5436cb39048e87ce07806.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/0068100f9ac5436cb39048e87ce07806.png" width="527" height="185" alt="HTML 入门笔记－初识HTML_第37张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <br> 讲解： <p></p> <ol> <li> <p>value：</p> <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/b301bc3805b14f1ea2eaca82e493505d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/b301bc3805b14f1ea2eaca82e493505d.jpg" width="503" height="165" alt="HTML 入门笔记－初识HTML_第38张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> </li> <li>selected="selected"：设置selected="selected"属性，则该选项就被默认选中。</li> </ol> <h3><strong>使用下拉列表框进行多选</strong></h3> <p>下拉列表也可以进行多选操作，在<code><select></code>标签中设置<code>multiple="multiple"</code>属性，就可以实现多选功能，在 widows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 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/b9c2166ddc7446c69dbea6ba524a1155.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/b9c2166ddc7446c69dbea6ba524a1155.png" width="500" height="178" alt="HTML 入门笔记－初识HTML_第39张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>在浏览器中显示的结果：<br> </p> <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/03934ec61b3e495fb5fb797fff288653.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/03934ec61b3e495fb5fb797fff288653.jpg" width="490" height="257" alt="HTML 入门笔记－初识HTML_第40张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h3><strong>使用提交按钮，提交数据</strong></h3> <p>在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。<br> 语法： <code><input type="submit" value="提交"></code></p> <ol> <li>type：只有当type值设置为submit时，按钮才有提交作用</li> <li>value：按钮上显示的文字</li> </ol> <p>举例：<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/8f2811a7682642ab831ed16baecad6e3.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/8f2811a7682642ab831ed16baecad6e3.png" width="482" height="109" alt="HTML 入门笔记－初识HTML_第41张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <p>在浏览器中显示的结果：<br> </p> <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/0464cdad28bb4353ae3e7135a78ddf79.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/0464cdad28bb4353ae3e7135a78ddf79.jpg" width="448" height="218" alt="HTML 入门笔记－初识HTML_第42张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h3><strong>使用重置按钮，重置表单信息</strong></h3> <p>当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。<br> 语法： <code><input type="reset" value="重置"></code></p> <ol> <li>type：只有当type值设置为reset时，按钮才有重置作用</li> <li>value：按钮上显示的文字</li> </ol> <p>举例：</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/ab626ec547c94d5eaed45e5d2cdd56ef.png" target="_blank"><img src="http://img.e-com-net.com/image/info10/ab626ec547c94d5eaed45e5d2cdd56ef.png" width="457" height="101" alt="HTML 入门笔记－初识HTML_第43张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p>在浏览器中显示的结果：<br> 输入账号<br> </p> <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/450d51ee95b444c3abb4b4abe040965d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/450d51ee95b444c3abb4b4abe040965d.jpg" width="448" height="218" alt="HTML 入门笔记－初识HTML_第44张图片" 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/f1b2bde5b0b34c3b80132f619ad7f2db.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info10/f1b2bde5b0b34c3b80132f619ad7f2db.jpg" width="448" height="218" alt="HTML 入门笔记－初识HTML_第45张图片" style="border:1px solid black;"></a> </div> </div> <div class="image-caption"></div> </div> <p></p> <h3><strong>form表单中的label标签</strong></h3> <p>小伙伴们，你们在前面学习表单各种控件的时候，有没有发现一个标签--label，这一小节就来揭晓它的作用。<br> label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。<br> 语法： <code><label for="控件id名称"></code> <br> <strong>注意</strong> 标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。 <strong>这样你会在点慢跑标签，即使没有点checkbox 也能选中</strong> <br> 例子：</p> <pre><code><form> <a>你对什么运动感兴趣：</a> <br /> <label for="1">慢跑</label><input type="checkbox" name="manpao" id="1"><br /> <label for="2">登山</label><input type="checkbox" name="dengshan" id="2"><br /> <label for="3">篮球</label><input type="checkbox" name="lanqiu" id="3"><br /> </form> </code></pre> </article> </div> </div> </div>  <div id="SOHUCS" sid="1212870401798017024"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(HTML 入门笔记－初识HTML)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> <span class="text-muted">good2know</span> <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950225381961297920.htm" title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a> <span class="text-muted"></span> <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> <span class="text-muted">小馋喵知识杂货铺</span> <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类（标准HTML标签）Selenium提供了内置的Select类用于操作标准下拉框，这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950207097413103616.htm" title="微信公众号回调java_处理微信公众号消息回调" target="_blank">微信公众号回调java_处理微信公众号消息回调</a> <span class="text-muted">weixin_39607620</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E5%9B%9E%E8%B0%83java/1.htm">微信公众号回调java</a> <div>1、背景在上一节中，咱们知道如何接入微信公众号，可是以后公众号会与咱们进行交互，那么微信公众号如何通知到咱们本身的服务器呢？咱们知道咱们接入的时候提供的url是GET/mp/entry，那么公众号以后产生的事件将会以POST/mp/entry发送到咱们本身的服务器上。html2、代码实现，此处仍是使用weixin-java-mp这个框架实现一、引入weixin-java-mpcom.github.</div> </li> <li><a href="/article/1950201094361640960.htm" title="人工智能应用研究快讯 2021-11-30" target="_blank">人工智能应用研究快讯 2021-11-30</a> <span class="text-muted">峰谷皆平</span> <div>[HTML]ArtificialIntelligenceforSkinCancerDetection:ScopingReviewATakiddin,JSchneider,YYang,AAbd-Alrazaq...JournalofMedicalInternet...,2021ABSTACT:Background:Skincanceristhemostcommoncancertypeaffectin</div> </li> <li><a href="/article/1950195876991397888.htm" title="【Jupyter】个人开发常见命令" target="_blank">【Jupyter】个人开发常见命令</a> <span class="text-muted">TIM老师</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Pycharm/1.htm">Pycharm</a><a class="tag" taget="_blank" href="/search/%26amp%3B/1.htm">&</a><a class="tag" taget="_blank" href="/search/VSCode/1.htm">VSCode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/Jupyter/1.htm">Jupyter</a> <div>1.查看python版本importsysprint(sys.version)2.ipynb/py文件转换jupyternbconvert--topythonmy_file.ipynbipynb转换为mdjupyternbconvert--tomdmy_file.ipynbipynb转为htmljupyternbconvert--tohtmlmy_file.ipynbipython转换为pdfju</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字：设计个性化海报的秘密" target="_blank">用代码生成艺术字：设计个性化海报的秘密</a> <span class="text-muted"></span> <div>本文围绕“用代码生成艺术字：设计个性化海报的秘密”展开，先概述代码生成艺术字在海报设计中的独特价值，接着介绍常用的代码工具（如HTML、CSS、JavaScript等），详细阐述从构思到实现的完整流程，包括字体样式设计、动态效果添加等，还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势，为设计师提供打造个性化海报的实用指南，助力提升海报设计的独特性与吸引力，符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950191165710069760.htm" title="前端面试每日 3+1 —— 第39天" target="_blank">前端面试每日 3+1 —— 第39天</a> <span class="text-muted">浪子神剑</span> <div>今天的面试题(2019.05.25)——第39天[html]title与h1、b与strong、i与em的区别分别是什么？[css]写出你知道的CSS水平和垂直居中的方法[js]说说你对模块化的理解[软技能]公钥加密和私钥加密是什么？《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！欢迎在Iss</div> </li> <li><a href="/article/1950187223672483840.htm" title="GDP经济社会人文民生栅格数据下载网站汇总" target="_blank">GDP经济社会人文民生栅格数据下载网站汇总</a> <span class="text-muted">疯狂学习GIS</span> <div> 本文为“GIS数据获取整理”专栏（https://blog.csdn.net/zhebushibiaoshifu/category_10857546.html）中第八篇独立博客，因此本文全部标题均由“8”开头。本文对目前主要的GDP、社会与经济数据获取网站加以整理与介绍，若需其它GIS领域数据（如遥感影像数据、气象数据、土地土壤数据、农业数据等），大家可以点击上方专栏查看，也可以看这一篇汇总文</div> </li> <li><a href="/article/1950183016382918656.htm" title="大学生入门：初识方法及其易踩坑的点" target="_blank">大学生入门：初识方法及其易踩坑的点</a> <span class="text-muted"></span> <div>在java学习过程中，我们不难发现有很多重复使用的功能代码块，每次使用如果都要重新写一遍，岂不是很麻烦，就算是“cv”大法，感觉也不是很方便，那么，有什么办法可以解决这个问题呢？方法！java中，一段可重用的，用于执行特定功能的代码块叫做方法，它可以接收参数、返回结果，并且可以被多次使用。一、方法的基本结构[修饰符]返回值类型方法名([参数列表])[throws异常类型]{//方法体}[throw</div> </li> <li><a href="/article/1950180497007112192.htm" title="【MySQL】MySQL数据库如何改名" target="_blank">【MySQL】MySQL数据库如何改名</a> <span class="text-muted">武昌库里写JAVA</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>MySQL建库授权语句https://www.jianshu.com/p/2237a9649ceeMySQL数据库改名的三种方法https://www.cnblogs.com/gomysql/p/3584881.htmlMySQL安全修改数据库名几种方法https://blog.csdn.net/haiross/article/details/51282417MySQL重命名数据库https://</div> </li> <li><a href="/article/1950166998088478720.htm" title="初识" target="_blank">初识</a> <span class="text-muted">白影小姐姐</span> <div>两人各点了一份热狗跟超大杯的可乐后，便急急忙忙地跑到距城堡几百米远的地方。此时已经有一些人聚集在这边了。两人席地而坐，大口喝着可乐吃着热狗，还不忘热络地聊着天。吃完东西后，田挽把挎包往背后地上一放，躺下来头枕着挎包悠闲地仰望着天边的夕阳。今日的夕阳甚是好看。令她想起那天傍晚，在美国的西部一个偏远却热闹的小镇上，天空也是这么的美，她藏在心中多年的那个人却无情地与她道了别。他们甚至都没有面对面，隔着冰</div> </li> <li><a href="/article/1950147409032048640.htm" title="《青年领袖演说集训营》林智敏感言：耐得住寂寞，才能守得住繁华！" target="_blank">《青年领袖演说集训营》林智敏感言：耐得住寂寞，才能守得住繁华！</a> <span class="text-muted">林智敏</span> <div>大家好呀！我叫林智敏，双木林，智慧的智，敏感的敏。认识我智敏，人人变聪颖！认识我智敏，学习更上瘾！初识奋马在临近期末考试的时候，许久没有联系的高中同学—李静给我发了几条信息，问我对演讲有没有兴趣。她聊到她自己最近报了一个课程，让她收获很多，于是想推荐给我学习。我听到后兴奋不已也感动不已。两年没见的朋友，突然在某一天联系你，她愿意将自己收获到的东西分享给我，与我一同进步与成长。那一刻，我在心里默想，</div> </li> <li><a href="/article/1950141538352820224.htm" title="2025.07 Java入门笔记01" target="_blank">2025.07 Java入门笔记01</a> <span class="text-muted">殷浩焕</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、熟悉IDEA和Java语法（一）LiuCourseJavaOOP1.一直在用C++开发，python也用了些，Java是真的不熟，用什么IDE还是问的同事；2.一开始安装了jdk-23，拿VSCode当编辑器，在cmd窗口编译运行，也能玩；但是想正儿八经搞项目开发，还是需要IDE；3.安装了IDEA社区版：（1）IDE通常自带对应编程语言的安装包，例如IDEA自带jbr-21（和jdk是不同的</div> </li> <li><a href="/article/1950130722157162496.htm" title="移动端适配rem方案" target="_blank">移动端适配rem方案</a> <span class="text-muted">简单的码农</span> <div>1.rem+动态html的font-size1.rem单位是相对于html元素的font-size来设置的，那么如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的font-size尺寸。2.比如如下案例：设置一个盒子的宽度是2rem；设置不同的屏幕上html的font-size不同；image这样在开发中，我们只需要考虑两个问题：问题一：针对不同的屏幕，设置html不同的font-s</div> </li> <li><a href="/article/1950130692448907264.htm" title="Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录" target="_blank">Vue CSR 到 Nuxt 3 SSR 迁移：技术实现与问题解决实录</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/vue.js/1.htm">vue.js</a> <div>1.迁移动机与技术选型1.1CSR架构的局限性基于Vue3和Vite构建的客户端渲染(CSR)单页应用(SPA)提供了良好的开发体验和用户交互流畅性。但是其核心局限在于：搜索引擎优化(SEO)：初始HTML响应仅包含一个根div元素，实际内容由JavaScript在浏览器端动态生成。虽然主流搜索引擎（如Google）能够执行部分JavaScript，但其抓取效率和稳定性不如直接获取完整HTML。非</div> </li> <li><a href="/article/1950127794931429376.htm" title="redis反弹shell时kali无法接收回弹的解决方法" target="_blank">redis反弹shell时kali无法接收回弹的解决方法</a> <span class="text-muted">显哥无敌</span> <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>无法接受回谈大概率是bash命令写的不对，那个crontab中间的星号个数是有意义的，不是随便加的，下面贴一下crontab的基本用法https://www.cnblogs.com/zhoading/p/11572630.html{minute}{hour}{day-of-month}{month}{day-of-week}{full-path-to-shell-script}如果是要cronta</div> </li> <li><a href="/article/1950121289456873472.htm" title="native.js设置可缩放的webview并隐藏缩放控件" target="_blank">native.js设置可缩放的webview并隐藏缩放控件</a> <span class="text-muted">Nanayai</span> <div>需求明确:webview页面可以手指缩放,并且不要那个原生控件;实现思路:1.使用h5+封装好的方法:设置scalable属性,并在html中设置meta标签:user-scalable=yes或不设置,minimum-scale和maximum-scale需要注意不要都设为1:mui.openWindow({url:"someThing",id:"someThing",styles:{scala</div> </li> <li><a href="/article/1950117078799282176.htm" title="Redis反弹Shell" target="_blank">Redis反弹Shell</a> <span class="text-muted">波吉爱睡觉</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%23%E6%9C%AA%E6%8E%88%E6%9D%83%E8%AE%BF%E9%97%AE%E6%BC%8F%E6%B4%9E/1.htm">#未授权访问漏洞</a><a class="tag" taget="_blank" href="/search/%23SSRF/1.htm">#SSRF</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a> <div>这里我来总结几种Redis反弹Shell的方法一、利用Redis写WebShell前提条件开了web服务器，并且知道路径，还需要有文件读写增删改查的权限条件比较苛刻，但是满足条件上传就会简单一点，我们直接将文件写入www目录下，完了使用工具连接即可。语句：redis:6379>configsetdir/var/www/html/redis:6379>configsetdbfilenameshell</div> </li> <li><a href="/article/1950108839089074176.htm" title="Windows下Oracle安装图解" target="_blank">Windows下Oracle安装图解</a> <span class="text-muted">叫我老村长</span> <div>Windows下Oracle安装图解----oracle-win-64-11g详细安装步骤一、Oracle下载官方下地址http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.htmlwin32位操作系统下载地址：http://download.oracle.com/otn/nt/oracle11g</div> </li> <li><a href="/article/1950106242563239936.htm" title="我的ThinkPHP5框架开发22讲：从入门到实践的探索之旅" target="_blank">我的ThinkPHP5框架开发22讲：从入门到实践的探索之旅</a> <span class="text-muted">a1237567892</span> <a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>我的ThinkPHP5框架开发22讲：从入门到实践的探索之旅在编程的世界里，框架就像是一座座灯塔，照亮着开发者前行的道路。而当我第一次接触到ThinkPHP5这个PHP框架时，它就像是我探索路上的那颗最亮的星。今天，我想和大家分享我的ThinkPHP5框架开发22讲，这是我从一个初学者到逐渐熟练的实践过程。第1讲：初识ThinkPHP5记得那是一个阳光明媚的周末，我在网上浏览PHP框架的资料时，偶</div> </li> <li><a href="/article/1950104727928762368.htm" title="震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！" target="_blank">震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！</a> <span class="text-muted">coding随想</span> <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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入</div> </li> <li><a href="/article/1950100184717389824.htm" title="11. HTML 中 DOCTYPE 的作用" target="_blank">11. HTML 中 DOCTYPE 的作用</a> <span class="text-muted">yqcoder</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95-CSS/1.htm">前端面试-CSS</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT</div> </li> <li><a href="/article/1950100058422702080.htm" title="从0到1学PHP（一）：PHP 基础入门：开启后端开发之旅" target="_blank">从0到1学PHP（一）：PHP 基础入门：开启后端开发之旅</a> <span class="text-muted"></span> <div>目录一、PHP简介与发展历程1.1PHP定义与特点1.2在后端开发中的地位1.3发展阶段及重要版本更新二、PHP开发环境搭建2.1Windows系统下搭建步骤2.2Mac系统下搭建方法及常用工具2.3适合初学者的集成开发环境三、第一个PHP程序3.1编写"HelloWorld"程序3.2程序基本结构和执行过程3.3PHP代码的嵌入方式（在HTML中）一、PHP简介与发展历程1.1PHP定义与特点P</div> </li> <li><a href="/article/1950084776111173632.htm" title="2023-10-16" target="_blank">2023-10-16</a> <span class="text-muted">来看看你们</span> <div>初识他是在2002年的世界男篮世界赛中国队对阵德国队姚明的光芒被对方另一个大个子掩盖篮板行运一条龙暴扣三分…当时痴迷于篮球的我被他完全的迷住了我深深的记住了他的名字诺维斯基随后找寻一切他的资料看他所有的比赛模仿他打球的风格那是一个存在着科比艾佛森麦迪奥尼尔包括后来詹姆斯韦德等怪物的联盟他的球风并不耀眼弹跳普通速度一般因为总被对手横扫被嘲讽为软蛋他温和的性格不能在这个弱肉强食的原始森林里为自己留一点</div> </li> <li><a href="/article/1950076871731376128.htm" title="C# 单问号 ? 与双问号 ??" target="_blank">C# 单问号 ? 与双问号 ??</a> <span class="text-muted">三分明月墨</span> <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a> <div>https://www.runoob.com/csharp/csharp-nullable.html</div> </li> <li><a href="/article/1950052911954325504.htm" title="万字解析：从 C 语言到初阶数据结构" target="_blank">万字解析：从 C 语言到初阶数据结构</a> <span class="text-muted">Aurora-silas</span> <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/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> <div>目录万字解析：从C语言到初阶数据结构前言第一章：C语言初识与环境搭建C语言的历史与影响开发工具介绍第一个程序HelloWorld第二章：变量、数据类型与运算符基本数据类型常量与变量命名规范运算符与表达式趣味小练习：BMI计算器第三章：输入输出与格式化printf输出格式详解scanf输入用法与常见问题小项目：自我介绍程序第四章：流程控制if/else条件判断switch语句循环结构小练习：乘法口诀</div> </li> <li><a href="/article/1950005884310581248.htm" title="JSP编程从入门到精通：现代Web开发与AI集成实战指南" target="_blank">JSP编程从入门到精通：现代Web开发与AI集成实战指南</a> <span class="text-muted">AI编程员</span> <a class="tag" taget="_blank" href="/search/001AI%E4%BC%A0%E7%BB%9F%EF%BC%86%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">001AI传统＆编程语言</a><a class="tag" taget="_blank" href="/search/002AI%E7%BC%96%E7%A8%8B%E5%B7%A5%E5%85%B7%E6%B1%87%E6%80%BB/1.htm">002AI编程工具汇总</a><a class="tag" taget="_blank" href="/search/003AI%E7%BC%96%E7%A8%8B%E4%BD%9C%E5%93%81%E6%B1%87%E6%80%BB/1.htm">003AI编程作品汇总</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/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/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a> <div>JSP编程从入门到精通：现代Web开发与AI集成实战指南一、JSP基础与环境搭建1.1JSP核心概念与工作原理JSP（JavaServerPages）是一种动态网页开发技术，通过在HTML中嵌入Java代码实现服务器端逻辑。其本质是Servlet的扩展，当客户端首次请求JSP页面时，服务器会将其编译为Servlet类（如index_jsp.java），再执行该类的_jspService()方法生成</div> </li> <li><a href="/article/1949991125741793280.htm" title="《博客园精华集》web标准分册第2论筛选结果文章列表" target="_blank">《博客园精华集》web标准分册第2论筛选结果文章列表</a> <span class="text-muted"></span> <div>《博客园精华集》web标准部分筛选结果（共55篇）一个喜欢网页设计的程序员作者：Awen根本不存在DIV+CSS布局这回事作者：CatChen欲练CSS，必先宫IE作者：CatChen你有强迫症吗？作者：CatChenSPAN元素和DIV元素的区别作者：ChrisLiudiv的认识作者：ChrisLiu实时检验您的页面是否符合XHTML标准——使用ValidatorModule作者：Dflying</div> </li> <li><a href="/article/1949966916076498944.htm" title="vue 使用 iFrame 嵌套带有登录的网站登录成功无法跳转" target="_blank">vue 使用 iFrame 嵌套带有登录的网站登录成功无法跳转</a> <span class="text-muted">WHY<=小氣鬼=></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>这个问题有点好玩，当时做的时候没想起来，哎不说讲一下问题1.项目在使用iFrame标签嵌套其他，网址或者自己的网址的时候如果没有登录只是浏览是没有问题的2.如个你使用Frame标签嵌套的网址是带有登录的需要注意两个网站是不是在统一域名下面如果在就可以正常登录，如果不在的话会出现登录成功但是无法跳转的问题3.在Vue项目中使用iFrame嵌套本地.html文件，本地.html文件向父页面抛出的方法或</div> </li> <li><a href="/article/26.htm" title="设计模式介绍" target="_blank">设计模式介绍</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>设计模式来源于土木工程师克里斯托弗亚历山大（http://en.wikipedia.org/wiki/Christopher_Alexander）的早期作品。他经常发表一些作品，内容是总结他在解决设计问题方面的经验，以及这些知识与城市和建筑模式之间有何关联。有一天，亚历山大突然发现，重复使用这些模式可以让某些设计构造取得我们期望的最佳效果。亚历山大与萨拉-石川佳纯和穆雷西乐弗斯坦合作</div> </li> <li><a href="/article/153.htm" title="android高级组件使用(一)" target="_blank">android高级组件使用(一)</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/RatingBar/1.htm">RatingBar</a><a class="tag" taget="_blank" href="/search/Spinner/1.htm">Spinner</a> <div>1、自动完成文本框（AutoCompleteTextView） AutoCompleteTextView从EditText派生出来，实际上也是一个文本编辑框，但它比普通编辑框多一个功能：当用户输入一个字符后，自动完成文本框会显示一个下拉菜单，供用户从中选择，当用户选择某个菜单项之后，AutoCompleteTextView按用户选择自动填写该文本框。使用AutoCompleteTex</div> </li> <li><a href="/article/280.htm" title="[网络与通讯]路由器市场大有潜力可挖掘" target="_blank">[网络与通讯]路由器市场大有潜力可挖掘</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div> 如果国内的电子厂商和计算机设备厂商觉得手机市场已经有点饱和了,那么可以考虑一下交换机和路由器市场的进入问题..... 这方面的技术和知识,目前处在一个开放型的状态,有利于各类小型电子企业进入 &nbs</div> </li> <li><a href="/article/407.htm" title="自写简单Redis内存统计shell" target="_blank">自写简单Redis内存统计shell</a> <span class="text-muted">商人shang</span> <a class="tag" taget="_blank" href="/search/Linux+shell/1.htm">Linux shell</a><a class="tag" taget="_blank" href="/search/%E7%BB%9F%E8%AE%A1Redis%E5%86%85%E5%AD%98/1.htm">统计Redis内存</a> <div>#!/bin/bash address="192.168.150.128:6666,192.168.150.128:6666" hosts=(${address//,/ }) sfile="staticts.log" for hostitem in ${hosts[@]} do ipport=(${hostitem</div> </li> <li><a href="/article/534.htm" title="单例模式(饿汉 vs懒汉)" target="_blank">单例模式(饿汉 vs懒汉)</a> <span class="text-muted">oloz</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a> <div>package 单例模式; /* * 应用场景:保证在整个应用之中某个对象的实例只有一个 * 单例模式种的《懒汉模式》 * */ public class Singleton { //01 将构造方法私有化，外界就无法用new Singleton()的方式获得实例 private Singleton(){}; //02 申明类得唯一实例 priva</div> </li> <li><a href="/article/661.htm" title="springMvc json支持" target="_blank">springMvc json支持</a> <span class="text-muted">杨白白</span> <a class="tag" taget="_blank" href="/search/json+springmvc/1.htm">json springmvc</a> <div>1.Spring mvc处理json需要使用jackson的类库，因此需要先引入jackson包 2在spring mvc中解析输入为json格式的数据:使用@RequestBody来设置输入 @RequestMapping("helloJson") public @ResponseBody JsonTest helloJson() { </div> </li> <li><a href="/article/788.htm" title="android播放，掃描添加本地音頻文件" target="_blank">android播放，掃描添加本地音頻文件</a> <span class="text-muted">小桔子</span> <div> 最近幾乎沒有什麽事情，繼續鼓搗我的小東西。想在項目中加入一個簡易的音樂播放器功能，就像華為p6桌面上那麼大小的音樂播放器。用過天天動聽或者QQ音樂播放器的人都知道，可已通過本地掃描添加歌曲。不知道他們是怎麼實現的，我覺得應該掃描設備上的所有文件，過濾出音頻文件，每個文件實例化為一個實體，記錄文件名、路徑、歌手、類型、大小等信息。具體算法思想，</div> </li> <li><a href="/article/915.htm" title="oracle常用命令" target="_blank">oracle常用命令</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/dba/1.htm">dba</a><a class="tag" taget="_blank" href="/search/%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/1.htm">常用命令</a> <div>1 创建临时表空间 create temporary tablespace user_temp tempfile 'D:\oracle\oradata\Oracle9i\user_temp.dbf' size 50m autoextend on next 50m maxsize 20480m extent management local</div> </li> <li><a href="/article/1042.htm" title="25个Eclipse插件" target="_blank">25个Eclipse插件</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/eclipse%E6%8F%92%E4%BB%B6/1.htm">eclipse插件</a> <div>提高代码质量的插件1. FindBugsFindBugs可以帮你找到Java代码中的bug，它使用Lesser GNU Public License的自由软件许可。2. CheckstyleCheckstyle插件可以集成到Eclipse IDE中去，能确保Java代码遵循标准代码样式。3. ECLemmaECLemma是一款拥有Eclipse Public License许可的免费工具，它提供了</div> </li> <li><a href="/article/1169.htm" title="Spring MVC拦截器+注解方式实现防止表单重复提交" target="_blank">Spring MVC拦截器+注解方式实现防止表单重复提交</a> <span class="text-muted">baalwolf</span> <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>原理：在新建页面中Session保存token随机码，当保存时验证，通过后删除，当再次点击保存时由于服务器端的Session中已经不存在了，所有无法验证通过。 1.新建注解： ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </div> </li> <li><a href="/article/1296.htm" title="《Javascript高级程序设计(第3版)》闭包理解" target="_blank">《Javascript高级程序设计(第3版)》闭包理解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>“闭包是指有权访问另一个函数作用域中的变量的函数。”--《Javascript高级程序设计(第3版)》看以下代码： <script type="text/javascript"> function outer() { var i = 10; return f</div> </li> <li><a href="/article/1423.htm" title="AngularJS Module类的方法" target="_blank">AngularJS Module类的方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/Module/1.htm">Module</a> <div> AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。一.Main方法在哪里如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所</div> </li> <li><a href="/article/1550.htm" title="[Maven学习笔记七]Maven插件和目标" target="_blank">[Maven学习笔记七]Maven插件和目标</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/maven%E6%8F%92%E4%BB%B6/1.htm">maven插件</a> <div>插件(plugin)和目标(goal) Maven，就其本质而言，是一个插件执行框架，Maven的每个目标的执行逻辑都是由插件来完成的，一个插件可以有1个或者几个目标，比如maven-compiler-plugin插件包含compile和testCompile，即maven-compiler-plugin提供了源代码编译和测试源代码编译的两个目标使用插件和目标使得我们可以干预</div> </li> <li><a href="/article/1677.htm" title="【Hadoop八】Yarn的资源调度策略" target="_blank">【Hadoop八】Yarn的资源调度策略</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div>1. Hadoop的三种调度策略 Hadoop提供了3中作业调用的策略， FIFO Scheduler Fair Scheduler Capacity Scheduler 以上三种调度算法，在Hadoop MR1中就引入了，在Yarn中对它们进行了改进和完善.Fair和Capacity Scheduler用于多用户共享的资源调度 2. 多用户资源共享的调度 </div> </li> <li><a href="/article/1804.htm" title="Nginx使用Linux内存加速静态文件访问" target="_blank">Nginx使用Linux内存加速静态文件访问</a> <span class="text-muted">ronin47</span> <div>Nginx是一个非常出色的静态资源web服务器。如果你嫌它还不够快，可以把放在磁盘中的文件，映射到内存中，减少高并发下的磁盘IO。先做几个假设。nginx.conf中所配置站点的路径是/home/wwwroot/res，站点所对应文件原始存储路径：/opt/web/res shell脚本非常简单，思路就是拷贝资源文件到内存中，然后在把网站的静态文件链接指向到内存中即可。具体如下： </div> </li> <li><a href="/article/1931.htm" title="关于Unity3D中的Shader的知识" target="_blank">关于Unity3D中的Shader的知识</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/unity/1.htm">unity</a><a class="tag" taget="_blank" href="/search/unity%E8%B5%84%E6%96%99/1.htm">unity资料</a><a class="tag" taget="_blank" href="/search/unity%E6%95%99%E7%A8%8B/1.htm">unity教程</a><a class="tag" taget="_blank" href="/search/unity%E8%A7%86%E9%A2%91/1.htm">unity视频</a><a class="tag" taget="_blank" href="/search/unity%E8%87%AA%E5%AD%A6/1.htm">unity自学</a> <div>首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，然后我们来看下Unity3D自带的60多个S</div> </li> <li><a href="/article/2058.htm" title="CopyOnWriteArrayList vs ArrayList" target="_blank">CopyOnWriteArrayList vs ArrayList</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>package com.ljn.base; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; /** * 总述： * 1.ArrayListi不是线程安全的，CopyO</div> </li> <li><a href="/article/2185.htm" title="内存中栈和堆的区别" target="_blank">内存中栈和堆的区别</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a> <div> 1、内存分配方面：堆：一般由程序员分配释放，若程序员不释放，程序结束时可能由OS回收。注意它与数据结构中的堆是两回事，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中</div> </li> <li><a href="/article/2312.htm" title="回答一位网友对Scala的提问" target="_blank">回答一位网友对Scala的提问</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/map/1.htm">map</a> <div>本来准备在私信里直接回复了，但是发现不太方便，就简要回答在这里。问题写道对于scala的简洁十分佩服，但又觉得比较晦涩，例如一例，Map("a" -> List(11,111)).flatMap(_._2)，可否说下最后那个函数做了什么，真正在开发的时候也会如此简洁？谢谢先回答一点，在实际使用中，Scala毫无疑问就是这么简单。</div> </li> <li><a href="/article/2439.htm" title="mysql 取每组前几条记录" target="_blank">mysql 取每组前几条记录</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%BB%84/1.htm">分组</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%A4%A7%E5%80%BC/1.htm">最大值</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%B0%8F%E5%80%BC/1.htm">最小值</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E7%BB%84%E4%B8%89%E6%9D%A1%E8%AE%B0%E5%BD%95/1.htm">每组三条记录</a> <div>一、对分组的记录取前N条记录：例如：取每组的前3条最大的记录 1.用子查询： SELECT * FROM tableName a WHERE 3> (SELECT COUNT(*) FROM tableName b WHERE b.id=a.id AND b.cnt>a. cnt) ORDER BY a.id,a.account DE</div> </li> <li><a href="/article/2566.htm" title="HTTP深入浅出 http请求" target="_blank">HTTP深入浅出 http请求</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/http/1.htm">http</a> <div> HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务，HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后We</div> </li> <li><a href="/article/2693.htm" title="判断MySQL记录是否存在方法比较" target="_blank">判断MySQL记录是否存在方法比较</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>把数据写入到数据库的时，常常会碰到先要检测要插入的记录是否存在，然后决定是否要写入。　　我这里总结了判断记录是否存在的常用方法：　　sql语句： select count ( * ) from tablename; 　　然后读取count(*)的值判断记录是否存在。对于这种方法性能上有些浪费，我们只是想判断记录记录是否存在，没有必要全部都查出来。</div> </li> <li><a href="/article/2820.htm" title="对HTML XML的一点认识" target="_blank">对HTML XML的一点认识</a> <span class="text-muted">e200702084</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>感谢http://www.w3school.com.cn提供的资料 HTML 文档中的每个成分都是一个节点。节点根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的：整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点 Node 层次 </div> </li> <li><a href="/article/2947.htm" title="jquery分页插件" target="_blank">jquery分页插件</a> <span class="text-muted">genaiwei</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</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%88%86%E9%A1%B5/1.htm">分页</a><a class="tag" taget="_blank" href="/search/%E6%8F%92%E4%BB%B6/1.htm">插件</a> <div>//jquery页码控件// 创建一个闭包 (function($) { // 插件的定义 $.fn.pageTool = function(options) { var totalPa</div> </li> <li><a href="/article/3201.htm" title="Mybatis与Ibatis对照入门于学习" target="_blank">Mybatis与Ibatis对照入门于学习</a> <span class="text-muted">Josh_Persistence</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%88%AB/1.htm">区别</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E7%B3%BB/1.htm">联系</a> <div>一、为什么使用IBatis/Mybatis 对于从事 Java EE 的开发人员来说，iBatis 是一个再熟悉不过的持久层框架了，在 Hibernate、JPA 这样的一站式对象 / 关系映射（O/R Mapping）解决方案盛行之前，iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天，iBatis 凭借着易学易用、</div> </li> <li><a href="/article/3328.htm" title="C中怎样合理决定使用那种整数类型？" target="_blank">C中怎样合理决定使用那种整数类型？</a> <span class="text-muted">秋风扫落叶</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/1.htm">数据类型</a> <div>如果需要大数值(大于32767或小于32767), 使用long 型。否则, 如果空间很重要 (如有大数组或很多结构), 使用 short 型。除此之外, 就使用 int 型。如果严格定义的溢出特征很重要而负值无关紧要, 或者你希望在操作二进制位和字节时避免符号扩展的问题, 请使用对应的无符号类型。但是, 要注意在表达式中混用有符号和无符号值的情况。 &nbs</div> </li> <li><a href="/article/3455.htm" title="maven问题" target="_blank">maven问题</a> <span class="text-muted">zhb8015</span> <a class="tag" taget="_blank" href="/search/maven%E9%97%AE%E9%A2%98/1.htm">maven问题</a> <div> 问题1： Eclipse 中新建maven项目无法添加src/main/java 问题 eclipse创建maevn web项目，在选择maven_archetype_web原型后，默认只有src/main/resources这个Source Floder。按照maven目录结构，添加src/main/ja</div> </li> <li><a href="/article/3582.htm" title="(二)androidpn-server tomcat版源码解析之--push消息处理" target="_blank">(二)androidpn-server tomcat版源码解析之--push消息处理</a> <span class="text-muted">spjich</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/androdipn/1.htm">androdipn</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E9%80%81/1.htm">推送</a> <div>在 (一)androidpn-server tomcat版源码解析之--项目启动这篇中，已经描述了整个推送服务器的启动过程，并且把握到了消息的入口即XmppIoHandler这个类，今天我将继续往下分析下面的核心代码，主要分为3大块，链接创建，消息的发送，链接关闭。先贴一段XmppIoHandler的部分代码 /** * Invoked from an I/O proc</div> </li> <li><a href="/article/3709.htm" title="用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题" target="_blank">用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题</a> <span class="text-muted">中华好儿孙</span> <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/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6/1.htm">上传文件</a><a class="tag" taget="_blank" href="/search/FormData/1.htm">FormData</a> <div> var formData = new FormData($("#inputFileForm")[0]); $.ajax({ type:'post', url:webRoot+"/electronicContractUrl/webapp/uploadfile", data:formData, async: false, ca</div> </li> <li><a href="/article/3836.htm" title="mybatis常用jdbcType数据类型" target="_blank">mybatis常用jdbcType数据类型</a> <span class="text-muted">ysj5125094</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/mapper/1.htm">mapper</a><a class="tag" taget="_blank" href="/search/jdbcType/1.htm">jdbcType</a> <div> MyBatis 通过包含的jdbcType 类型 BIT FLOAT CHAR </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.  </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>

HTML 入门笔记 － 初识HTML

基础框架

了不起的盖茨比

了解HTML的代码注释

认识标签

HTML 入门笔记－初识HTML