[HTML] HTML基础知识

1.HTML简介

HTML指的是超文本标记语言(HyperText Markup Language)，是一种用于创建网页的标准标记语言

HTML页面基本结构




    
    
    
    My bolg


    This is my first title.
    This is my first paragraph.

1.声明为HTML5文档

2.元素是HTML页面的根元素

3.元素包含了文档的元(meta)数据，如定义网页编码格式为utf-8

4.元素描述了文档的标题 </p> <p>5.<body>元素包含可见的页面内容，只有<body>区域才会在浏览器中显示</p> <p>6.<h1>元素定义一个大标题</p> <p>7.<p>元素定义一个段落</p> </blockquote> <p>运行结果如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/131f5d620f4e44089d25ce55ddc78647.png" target="_blank"><img alt="[HTML] HTML基础知识_第1张图片" height="181" src="http://img.e-com-net.com/image/info8/131f5d620f4e44089d25ce55ddc78647.png" width="486" style="border:1px solid black;"></a></p> <p>HTML文档的后缀名<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">.html</span></span></p> <p>HTML文档包含了<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">HTML标签</span></span>及<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">文本内容</span></span></p> <blockquote> <p><span style="color:#fe2c24;">HTML标签</span></p> <p>①HTML标签是由<em>尖括号</em>包围的关键词，比如 <html></p> <p>②HTML标签通常是<em>成对出现</em>的，比如 <p> 和 </p></p> <p>③标签对中的第一个标签是<em>开始标签</em>，第二个标签是<em>结束标签</em></p> <p><em><strong><开始标签>内容</结束标签></strong></em></p> <p>④开始标签也被称为<strong>起始标签(opening tag)</strong>，结束标签也被称为<strong>闭合标签(closing tag)</strong></p> <p>⑤HTML标签需使用小写标签</p> </blockquote> <h1>2.HTML元素</h1> <p>一个 HTML元素包含了开始标签与结束标签，举个例子</p> <pre><code class="language-html"><p>This is a paragraph</p></code></pre> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;">提示Tips：</span></span>HTML元素以<strong>开始标签</strong>为起始，以<strong>结束标签</strong>为终止，<strong>元素的内容</strong>是开始标签与结束标签之间的内容</p> <p>HTML元素可以进行嵌套，可理解为HTML元素可以包含其他HTML元素，HTML文档由相互嵌套的HTML元素构成，例如以下实例包含了三个HTML元素</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> </body> </html></code></pre> <p><span style="color:#4da8ee;"><strong>HTML空元素</strong></span></p> <p>没有内容的HTML元素被称为<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">空元素</span></span></p> <p>空元素是在开始标签中关闭的，比如 <br>、<hr></p> <h1>3.HTML属性</h1> <p>HTML元素可以设置<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">属性</span></span>，属性是HTML元素提供的附加信息</p> <p>属性一般描述于开始标签，总是以<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">名称/值对</span></span>的形式出现，例如: <strong>attr="value"</strong></p> <p>attr表示属性名，value表示属性值，属性值使用双引号" "括起来</p> <p>例如: HTML链接由<span style="color:#fe2c24;"><span style="background-color:#fef2f0;"><a>标签</span></span>定义，链接的地址在<strong>href属性</strong>中指定 </p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <a href="https://blog.csdn.net/Hudas">This is my blog.</a> </body> </html></code></pre> <p><span style="color:#4da8ee;"><strong>HTML常用的通用属性</strong></span></p> <table border="1" style="width:500px;"> <tbody> <tr> <td style="text-align:center;">属性</td> <td style="text-align:center;">描述</td> </tr> <tr> <td>id</td> <td>赋予某个html标签唯一的名称(标识符)</td> </tr> <tr> <td>class</td> <td>为html标签定义一个或多个类名(classname)</td> </tr> <tr> <td>title</td> <td>用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title属性的值</td> </tr> <tr> <td>style</td> <td>规定html标签的行内样式(inline style)</td> </tr> </tbody> </table> <pre><code class="language-html"><!DOCTYPE html> <html> <style> #username{ color: red; } .content1{ color: cornflowerblue; } .content2{ text-decoration: underline; } </style> <body>  <p id="username">My name is Andy.</p>  <p class="content1 content2">I graduated from Dalian Maritime University.</p> <p class="content1">I'm learning HTML.</p> <p class="content1">Welcome to my Blog!!!</p>  <a href="https://blog.csdn.net/Hudas" title="Andy的博客">This is my blog.</a>  <p style="color:orange;">Let's learn HTML together!!!</p> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/8fc8e270107c47f39de0bd0c0be8e7da.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第2张图片" height="383" src="http://img.e-com-net.com/image/info8/8fc8e270107c47f39de0bd0c0be8e7da.jpg" width="470" style="border:1px solid black;"></a></p> <h1>4.HTML标题</h1> <p>标题(Heading)是通过 <h1>...<h6> 标签进行定义的 </p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <h1>这是第一个标题</h1> <h2>这是第二个标题</h2> <h3>这是第三个标题</h3> <h4>这是第四个标题</h4> <h5>这是第五个标题</h5> <h6>这是第六个标题</h6> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/3428433592314336beb1afb60c829faf.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第3张图片" height="507" src="http://img.e-com-net.com/image/info8/3428433592314336beb1afb60c829faf.jpg" width="437" style="border:1px solid black;"></a></p> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;">提示Tips: </span></span>HTML标题标签只能用来定义标题，不可以使用标题标签来对文本进行加粗设计 </p> <h1>5.HTML段落</h1> <p>HTML中可以使用<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">段落标签<p></span></span>来将文档中的内容分割为若干个段落</p> <p>段落标签由开始标签<p>和结束标签</p>组成，开始和结束标签之间的内容会被视为一个段落</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <p>这是段落1</p> <p>这是段落2</p> <p>这是段落3</p> <p>这是段落4 </p> </body> </html></code></pre> <p>运行结果如下图所示 </p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/622004a7b89e4772af85ab616d2a210f.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第4张图片" height="263" src="http://img.e-com-net.com/image/info8/622004a7b89e4772af85ab616d2a210f.jpg" width="435" style="border:1px solid black;"></a></p> <blockquote> <p><span style="color:#fe2c24;">提示Tips</span></p> <p>默认情况下，段落标签会对文本中的空白符进行合并，将多个连续的空白符显示为一个空格的效果，具体表现如下：</p> <p>①如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个</p> <p>②如果段落中出现多个连续的换行，浏览器会将这些换行转换成一个空格</p> </blockquote> <h1>6.HTML换行 </h1> <p>如果想要在段落中进行换行，需要使用专门的<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">换行标签<br /></span></span></p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <p>这个<br>段落<br>演示了换行的效果</p> </body> </html></code></pre> <p>运行结果如下图所示 </p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/37293937a46d4390af70aa477e8ee729.png" target="_blank"><img alt="[HTML] HTML基础知识_第5张图片" height="177" src="http://img.e-com-net.com/image/info8/37293937a46d4390af70aa477e8ee729.png" width="435" style="border:1px solid black;"></a></p> <h1>7.HTML水平线</h1> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;"><hr>标签</span></span>在HTML页面中创建水平线，可用于分隔内容</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <p>这是段落1</p> <hr> <p>这是段落2</p> <hr> <p>这是段落3</p> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/3766feba7ea649079c6d127d8aa4f952.png" target="_blank"><img alt="[HTML] HTML基础知识_第6张图片" height="266" src="http://img.e-com-net.com/image/info8/3766feba7ea649079c6d127d8aa4f952.png" width="471" style="border:1px solid black;"></a></p> <h1>8.HTML文本格式化 </h1> <p>HTML常用的文本格式化标签</p> <table border="1" style="width:500px;"> <tbody> <tr> <td style="text-align:center;">标签</td> <td style="text-align:center;">描述</td> </tr> <tr> <td>b</td> <td>加粗标签中的字体</td> </tr> <tr> <td>i</td> <td>定义标签中的字体为斜体</td> </tr> <tr> <td>sub</td> <td>定义下标文本</td> </tr> <tr> <td>sup</td> <td>定义上标文本</td> </tr> <tr> <td>del</td> <td>在文本内容上添加删除线</td> </tr> <tr> <td>ins</td> <td>定义文档的其余部分之外的插入文本</td> </tr> <tr> <td>em</td> <td>强调标签中的内容，并使标签中的字体倾斜</td> </tr> <tr> <td>strong</td> <td>强调标签中的内容，并将字体加粗</td> </tr> <tr> <td>small</td> <td>定义标签中的字体为小号字体</td> </tr> <tr> <td>big</td> <td>定义标签中的字体为大号字体</td> </tr> <tr> <td>pre</td> <td>定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体</td> </tr> </tbody> </table> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <b>加粗文本1</b><br /> <i>斜体文本2</i><br /> <span>上下标文本3: H<sub>2</sub>SO<sub>4</sub> = 2H<sup>+</sup>SO<sub>4</sub><sup>2-</sup></span> <br /> <del>删除文本4</del><br /> <ins>插入文本5</ins><br /> <em>强调内容文本6</em><br /> <strong>加重语气文本7</strong><br /> <small>定义小号字文本8</small><br /> <big>定义大号字文本9</big><br /> <pre>预格式文本 10</pre> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/802a92e0e096466a8f48d2aa7b5b722d.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第7张图片" height="392" src="http://img.e-com-net.com/image/info8/802a92e0e096466a8f48d2aa7b5b722d.jpg" width="435" style="border:1px solid black;"></a></p> <h1>9.HTML注释</h1> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;">HTML注释</span></span>主要用来对文档中的代码进行解释说明，注释也是代码的一部分，但浏览器会自动忽略注释的内容，所以用户在网页中是看不到注释的内容</p> <p>通过注释我们可以帮助自身或者他人更好的阅读代码，提高代码的可读性</p> <p>我们也可以注释程序中的代码，例如当不希望某段代码执行时，就可以先将它们注释掉，这样浏览器就不会执行这段代码</p> <p>在HTML中可以使用<span style="color:#fe2c24;"><code><span style="background-color:#fef2f0;"></span></code></span>在代码中添加注释，<code></code>之间的所有内容都会被视为注释</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body>  <p>这是一个未注释的字段</p> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/e7e88608cc564c6bb9d180de0cfae8dc.png" target="_blank"><img alt="[HTML] HTML基础知识_第8张图片" height="122" src="http://img.e-com-net.com/image/info8/e7e88608cc564c6bb9d180de0cfae8dc.png" width="436" style="border:1px solid black;"></a></p> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;">提示Tips: </span></span>注释可以出现在HTML文档的任意位置，包括文档开头、文档末尾、文档中间、标签外部、标签内容中等</p> <h1>10.HTML超链接</h1> <p>点击超链接可以从一张页面跳转到另一张页面</p> <p>HTML使用标签 <a>来设置超文本链接，常用的语法格式如下所示</p> <pre><code class="language-html"><a href="url" target="opentype">链接文本</a></code></pre> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;">href 属性</span></span>用来指明要跳转到的 url地址，<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">target 属性</span></span>用来指明新页面的打开方式，<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">链接文本</span></span>需要写在 <a> 和 </a> 之间</p> <p><span style="color:#4da8ee;"><strong>示范1</strong></span></p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <a href="https://blog.csdn.net/Hudas/">访问我的博客</a> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/bccb6d081ae64e1b98c782b5501748c1.png" target="_blank"><img alt="[HTML] HTML基础知识_第9张图片" height="125" src="http://img.e-com-net.com/image/info8/bccb6d081ae64e1b98c782b5501748c1.png" width="437" style="border:1px solid black;"></a></p> <p>点击文本链接即可跳转到我的博客主页</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/d4c48268739044e981a935de93539dbf.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第10张图片" height="199" src="http://img.e-com-net.com/image/info8/d4c48268739044e981a935de93539dbf.jpg" width="650" style="border:1px solid black;"></a></p> <p><strong><span style="color:#4da8ee;">示范2</span></strong></p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <a href="https://blog.csdn.net/Hudas/" target="_blank">访问我的博客</a> </body> </html></code></pre> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;">提示Tips:</span></span> 使用 target 属性，可以定义被链接的文档在何处显示，绝大部分情况下，target 属性要么不写，保持默认值 _self，在现有窗口中打开新页面;要么将它的值设置为 _blank，在新窗口中打开页面</p> <h1>11.HTML表格</h1> <p>在HTML 中，使用 <table> 标签来定义表格，利用表格来展示数据</p> <p><span style="color:#4da8ee;"><strong>示例1</strong></span></p> <pre><code class="language-html"><!DOCTYPE html> <html> <style> .content{ color: aliceblue; } </style> <body>  <table width="600" style="border-collapse: collapse;" border="1"> <caption>人员基本信息表</caption>   <tr align="left" bgcolor='#555555'> <th class="content">First Name</th> <th class="content">Last Name</th> <th class="content">City</th> </tr> <tr> <td>John</td> <td>Smith</td> <td>深圳</td> </tr> <tr> <td>Andy</td> <td>Hu</td> <td>广州</td> </tr> <tr> <td>Even</td> <td>Jackson</td> <td>上海</td> </tr> <tr> <td>Adam</td> <td>Bob</td> <td>北京</td> </tr> </table> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/496863b72d1345c6827382c25fa6a242.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第11张图片" height="223" src="http://img.e-com-net.com/image/info8/496863b72d1345c6827382c25fa6a242.jpg" width="650" style="border:1px solid black;"></a></p> <p><table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间，如果不定义边框属性border，表格将不显示边框</p> <p><caption>标签定义表格标题，当表格需要标题时，使用<span style="color:#fe2c24;"><span style="background-color:#fef2f0;"><caption>表格标题</caption></span></span></p> <p><tr>表示表格的行(table row)，表格中有多少个 <tr> 标签就表示有多少行数据</p> <p><th>表示表格的表头(table heading)</p> <p><td>表示表格的单元格(table datacell)，单元格可以包含文本、图片、列表、段落、表单、水平线、表格等</p> <p><span style="color:#4da8ee;"><strong>示例2：跨行跨列合并单元格</strong></span></p> <p>跨行合并：rowspan="合并单元格的个数"</p> <p>跨列合并：clospan="合并单元格的个数"</p> <p>具体格式如下</p> <pre><code class="language-html"><td rowspan="n">单元格内容</td> <td colspan="n">单元格内容</td></code></pre> <div class="img-center"> <a href="http://img.e-com-net.com/image/info8/9cdd3cf92b28407e95342c7d3bbeb432.png" target="_blank"><img alt="[HTML] HTML基础知识_第12张图片" height="332" src="http://img.e-com-net.com/image/info8/9cdd3cf92b28407e95342c7d3bbeb432.png" width="512" style="border:1px solid black;"></a> 初始表格 </div> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <table border="1" cellspacing="0" width="500" height="249">  <tr> <td></td> <td colspan="2"></td>  </tr>  <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr>  <td></td> <td></td> </tr> </table> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/48ad4a70f08d4f44a8e57adf7b39ce00.png" target="_blank"><img alt="[HTML] HTML基础知识_第13张图片" height="331" src="http://img.e-com-net.com/image/info8/48ad4a70f08d4f44a8e57adf7b39ce00.png" width="511" style="border:1px solid black;"></a></p> <h1>12.HTML列表</h1> <p>HTML支持有序、无序和自定义列表</p> <table border="1" style="width:500px;"> <tbody> <tr> <td>标签</td> <td>描述</td> </tr> <tr> <td><ol></td> <td>定义有序列表</td> </tr> <tr> <td><ul></td> <td>定义无序列表</td> </tr> <tr> <td><li></td> <td>定义列表项</td> </tr> <tr> <td><dl></td> <td>定义列表</td> </tr> <tr> <td><dt></td> <td>自定义列表项目</td> </tr> <tr> <td><dd></td> <td>定义自定列表项的描述</td> </tr> </tbody> </table> <p><span style="color:#4da8ee;"><strong>示例1：无序列表</strong></span></p> <p>无序列表，使用 <ul> + <li> 标签</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <ul> <li>Andy</li> <li>Jack</li> <li>Rita</li> </ul> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/7ec5f14820954bc58dbad5c8b9c5e244.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第14张图片" height="148" src="http://img.e-com-net.com/image/info8/7ec5f14820954bc58dbad5c8b9c5e244.jpg" width="482" style="border:1px solid black;"></a></p> <p><span style="color:#4da8ee;"><strong>示例2：有序列表</strong></span></p> <p>有序列表，使用 <ol> + <li> 标签</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <ol> <li>Andy</li> <li>Jack</li> <li>Rita</li> </ol> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/4b5eb12ca0964ea2a8bdb477e5049cfe.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第15张图片" height="146" src="http://img.e-com-net.com/image/info8/4b5eb12ca0964ea2a8bdb477e5049cfe.jpg" width="482" style="border:1px solid black;"></a></p> <p><span style="color:#4da8ee;"><strong>示例3：自定义序列</strong></span></p> <p>自定义列表，使用 <dl> + <dt> + <dd> 标签</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <h3>自定义列表：</h3> <dl> <dt>Apple</dt> <dd>- Sweet and sour</dd> <dd>- Produced in Liaoning Province</dd> <dt>Banana</dt> <dd>- Soft and delicious</dd> <dd>- Produced in Guangdong Province</dd> </dl> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/87d0d06bb99c427cbc4b5118dbef9db1.png" target="_blank"><img alt="[HTML] HTML基础知识_第16张图片" height="245" src="http://img.e-com-net.com/image/info8/87d0d06bb99c427cbc4b5118dbef9db1.png" width="481" style="border:1px solid black;"></a></p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <dl> <dl style="margin-bottom:0px;"> <dt><b>HTML</b></dt> <dd style="margin:auto auto 10px 0px;">HTML是一种专门用来开发网页的标记语言</dd> <dt><b>CSS</b></dt> <dd style="margin:auto auto 10px 0px;">CSS层叠样式表可以控制HTML文档的显示样式,用来美化网页</dd> <dt><b>Javascript</b></dt> <dd style="margin:auto auto 10px 0px;">Javascript简称JS,是一种用来开发网站的脚本编程语言</dd> </dl> </dl> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/c89ac35832944f6f87b381b2ea4562f1.png" target="_blank"><img alt="[HTML] HTML基础知识_第17张图片" height="231" src="http://img.e-com-net.com/image/info8/c89ac35832944f6f87b381b2ea4562f1.png" width="483" style="border:1px solid black;"></a></p> <h1>13.HTML图像</h1> <p>HTML使用<span style="color:#fe2c24;"><span style="background-color:#fef2f0;"><img> 标签</span></span>插入图片，语法如下所示</p> <pre><code class="language-html"><img src="url" alt="some_text"></code></pre> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;">src属性</span></span>用来指明图片的地址或者路径，<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">alt属性</span></span>用来定义图片的文字描述信息，当图片无法加载时，就会显示alt属性中的信息</p> <p><span style="color:#4da8ee;"><strong>示例</strong></span></p> <p>文件存储路径如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/99bd89ce4f75452c8dcd10178bd42cd9.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第18张图片" height="153" src="http://img.e-com-net.com/image/info8/99bd89ce4f75452c8dcd10178bd42cd9.jpg" width="650" style="border:1px solid black;"></a></p> <pre><code class="language-html"><!DOCTYPE html> <html> <body> <img src="C:\Users\X2001565\Desktop\图片\风景图片.jpeg" alt="Scenery"> </body> </html></code></pre> <p>运行结果如下所示</p> <p><a href="http://img.e-com-net.com/image/info8/ae38c28c070449f882b155f5f47b13b9.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第19张图片" height="437" src="http://img.e-com-net.com/image/info8/ae38c28c070449f882b155f5f47b13b9.jpg" width="646" style="border:1px solid black;"></a></p> <p>在 <img> 标签中可以使用 width 和 height 属性来设置图片的宽度和高度，使用title属性设置图片提示文本，当鼠标悬停到图片时才会显示文字</p> <p>我们也可以通过在<span style="color:#fe2c24;"><span style="background-color:#fef2f0;"><a>标签</span></span>中嵌套<span style="color:#fe2c24;"><span style="background-color:#fef2f0;"> <img> 标签</span></span>，通过点击图像即可跳转到指定的超文本链接</p> <h1>14.HTML表单 </h1> <p>为了实现浏览器和服务器的互动，可以使用HTML表单搜集不同类型的用户输入、将输入的内容从客户端的浏览器传送到服务器端，经过服务器上的后端程序进行处理后，再将用户所需要的信息传递回客户端的浏览器上，从而获得用户信息，实现交互效果</p> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;">HTML表单用于收集用户的输入信息</span></span></p> <p>表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容，比如: 文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox)等</p> <p>在 HTML 中创建表单需要用到<from>标签，具体语法如下所示：</p> <pre><code class="language-html"><form name="form_name" action="url" method="GET|POST" enctype="value" target="target_win"> 表单中的其它标签 </form></code></pre> <table border="1" style="width:500px;"> <tbody> <tr> <td style="text-align:center;width:160px;"><strong><form>标签属性</strong></td> <td style="text-align:center;width:338px;"><strong>说明</strong></td> </tr> <tr> <td style="width:160px;">name</td> <td style="width:338px;">表单的名称</td> </tr> <tr> <td style="width:160px;">method</td> <td style="width:338px;">设置表单的提交方式(GET或者POST方式)，method属性默认方式为GET方式</td> </tr> <tr> <td style="width:160px;">action</td> <td style="width:338px;">指向处理该表单页面的URL(相对位置或绝对位置)</td> </tr> <tr> <td style="width:160px;">enctype</td> <td style="width:338px;">设置表单内容的编码格式</td> </tr> <tr> <td style="width:160px;">target</td> <td style="width:338px;">设置返回信息的显示方式，target的属性值包括"_blank"、"_parent"、"_self"、"top"</td> </tr> </tbody> </table> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;">action 属性</span></span>用来指明将表单提交到哪个页面，<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">method 属性</span></span>表示使用哪个方式提交数据，包括GET 和POST两种方式，GET方式是将表单内容附加在URL地址后面发送;POST方式是将表单中的信息作为一个数据块发送到服务器上的处理程序中，在浏览器的地址栏不显示提交的信息</p> <p><span style="color:#4da8ee;"><strong>示例</strong></span></p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML表单演示
用户名：
密码：
性别：
爱好：音乐电影阅读运动
学历：小学初中高中大专本科研究生
填写对你印象最深的一件事
补充个人简历文件：

运行结果如下所示

填写好用户数据，点击“提交”按钮，即可使用POST方式将数据提交到当前目录下的userinfo.php 页面，在服务器端通过 PHP 代码可以接收提交的数据

标签用于为表单中的各个控件定义标题

标签用于定义输入框或按钮，通过type属性展示不同形式的输入域类型

type属性值
说明

text 文本框，用于输入单行文本

password 密码框，用于输入密码

radio 单选框，用于多选一

checkbox 多选框

file 文件选择，用于上传文件

submit 提交按钮，用于提交

reset 重置按钮，用于清除与重置表单内容

标签用于定义文本域，可以在其中输入更多的文本</p> <h1>15.HTML块级/行内元素 </h1> <p>HTML元素分为块级元素和行内元素，两者的区别如下</p> <blockquote> <p>①块级元素在浏览器显示时，通常会另起新行，行内元素在显示时通常不会以新行开始</p> <p>②块级元素中可以包含其它的内联元素和块级元素，内联元素中包含文本或者其他内联元素</p> <p>③块级元素设置高度height、宽度width、外边距margin及内边距padding都是可控有效的，行内元素设置height高度和width宽度无效，可以设置padding内边距，也可以设置margin外边距，但只对左右外边距有效，上下外边距无效</p> </blockquote> <p>常见的HTML块级元素有<p>、<h1> ~ <h6>、<div>、<hr>、<ul>、<ol>等</p> <p>常见的HTML行内元素有<span>、<b>、<i>、<li>、<sup>、<sub>、<a>等</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div>div标签(块级标签)</div> <p>p标签(块级标签)</p> <span>span标签(行内标签)</span> <a href="#">a标签(行内标签)</a> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/009cc0a1dedb4068aa5dc397e0e4666c.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第21张图片" height="207" src="http://img.e-com-net.com/image/info8/009cc0a1dedb4068aa5dc397e0e4666c.jpg" width="450" style="border:1px solid black;"></a></p> <p><span style="color:#4da8ee;"><strong><div>标签和<span>标签介绍</strong></span></p> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;"><div>标签</span></span>是块级元素，用于组合其他 HTML元素的容器，没有特定的含义，当与CSS一同使用，可用于对所包含的内容块设置样式属性</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div style="padding:0px 20px;border:1px solid #ccc; background-color:#eee;"> <h4>Web前端开发技术栈</h4> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>Vue</li> </ul> </div> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/c59aac1f4b9f460eab20c42dc74a5e5f.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第22张图片" height="280" src="http://img.e-com-net.com/image/info8/c59aac1f4b9f460eab20c42dc74a5e5f.jpg" width="494" style="border:1px solid black;"></a></p> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;"><span>标签</span></span>是行内元素，用作文本的容器，也没有特定的含义，当与CSS一同使用时，可用于为文本设置样式属性</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> #profile span{ display: inline-block; padding: 2px 4px; border: 1px solid #ddd; background-color: #f6f6f6; border-radius: 3px; } </style> </head> <body> <span style="font-size:18px; color:#666;">About My Blog</span> <p>Welcome to my Blog.Currently I have published almost <b>240</b> articles.</p> <p id="profile">Including <span>Python</span>,<span>Pandas</span>,<span>HTML</span>,<span>JavaScript</span></p> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/fbe079d2abdc4a50954a8b99174dd366.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第23张图片" height="211" src="http://img.e-com-net.com/image/info8/fbe079d2abdc4a50954a8b99174dd366.jpg" width="570" style="border:1px solid black;"></a></p> <h1>16.HTML嵌入CSS样式 </h1> <p>CSS(Cascading Style Sheets))是用于渲染HTML元素标签的样式</p> <p>CSS可以通过以下方式添加到HTML中</p> <p><span style="color:#4da8ee;"><strong>1.内联样式表导入CSS</strong></span></p> <p>在HTML元素中使用style属性，在style属性中添加CSS样式，适用于当特殊的样式需要应用到个别元素时，就可以使用内联样式表</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <a href="https://baidu.com">有下划线的链接</a> <br> <a href="https://baidu.com" style="text-decoration:none;">无下划线的链接</a> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/a5fe2c9275654448820e56a66ac6b3e6.png" target="_blank"><img alt="[HTML] HTML基础知识_第24张图片" height="144" src="http://img.e-com-net.com/image/info8/a5fe2c9275654448820e56a66ac6b3e6.png" width="438" style="border:1px solid black;"></a></p> <p>从上述代码可以看出内联样式导入CSS没有实现样式和结构相分离 </p> <p><span style="color:#4da8ee;"><strong>2.内部样式表导入CSS</strong></span></p> <p>内部样式表即在HTML文档头部 <head>区域使用<style>元素来使用CSS</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head> <body> <h1>This is a title.</h1> <p>This is a paragraph.</p> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/fa22f3ebb867478ebe12bf74cf2fddf2.png" target="_blank"><img alt="[HTML] HTML基础知识_第25张图片" height="199" src="http://img.e-com-net.com/image/info8/fa22f3ebb867478ebe12bf74cf2fddf2.png" width="434" style="border:1px solid black;"></a></p> <p><span style="color:#4da8ee;"><strong>3.外部样式表导入CSS</strong></span></p> <p>将所有的样式放在一个或多个以<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">.css</span></span>为扩展名的外部样式表文件中，通过<span style="color:#fe2c24;"><span style="background-color:#fef2f0;"><link>标签</span></span>将外部样式表文件链接到HTML文档中</p> <pre><code class="language-html"><head> <link href="CSS文件的路径" rel="stylesheet" /> </head></code></pre> <p>当样式需要被应用到很多页面的时候，外部样式表将是最理想的选择，使用外部样式表，就可以通过更改一个文件来改变整个站点的外观</p> <pre><code class="language-css">/* styles.css */ h1{ color: blue; } p{ color: red; }</code></pre> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>This is a title.</h1> <p>This is a paragraph.</p> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/3144e142969f42c482705943a1ba051a.png" target="_blank"><img alt="[HTML] HTML基础知识_第26张图片" height="200" src="http://img.e-com-net.com/image/info8/3144e142969f42c482705943a1ba051a.png" width="437" style="border:1px solid black;"></a></p> <p>从上述代码可以看出通过外部样式表导入CSS完全实现了结构和样式相分离 </p> <h1>17.HTML头部标签</h1> <p>HTML中的<span style="color:#fe2c24;"><span style="background-color:#fef2f0;"><head>标签</span></span>是所有头部标签的容器，这些头部标签用来定义有关HTML文档的元数据(描述数据的数据)以及所需资源的引用，例如CSS样式文件和JavaScript 脚本文件，对文档能够在浏览器中正确显示起到了非常重要的作用</p> <p>在<head> 标签中可以使用的头部标签有 <span style="color:#fe2c24;"><span style="background-color:#fef2f0;"><title>、<link>、<style>、<meta>、<script>、<base></span></span> 等</p> <p>① <title>标签用来定义HTML文档的标题，一个HTML文档只允许存在一个<title>标签，并且<title>标签必须放置在<head>标签中，<title>标签内部仅允许包含纯文本内容，不能包含其他HTML标签</p> <pre><code class="language-html"><html> <head> <meta charset="UTF-8"> <title>title设置标题</title> </head> <body> <div>一段文本</div> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/936b66fe9ca243018fa198f0cc0d57a0.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第27张图片" height="115" src="http://img.e-com-net.com/image/info8/936b66fe9ca243018fa198f0cc0d57a0.jpg" width="445" style="border:1px solid black;"></a></p> <p>② <link>标签经常用于引用外部CSS样式表，<link>标签中包含两个主要的属性，分别是rel和href，其中rel属性用来指示引用文件的类型，href属性用来设置外部文件的路径，<head>标签中可以包含任意数量的<link>标签</p> <p>首先准备一个外部的 css 文件，然后在html 文件中引入 css 文件</p> <pre><code class="language-css">/* index.css */ div { color: blue; }</code></pre> <pre><code class="language-html"> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./index.css"> </head> <body> <div>一段文本</div> </body> </html></code></pre> <p>运行结果如下所示 </p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/e204d2d338574f2b93e2d9799794d387.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第28张图片" height="115" src="http://img.e-com-net.com/image/info8/e204d2d338574f2b93e2d9799794d387.jpg" width="438" style="border:1px solid black;"></a></p> <p>③ <style>标签可以在HTML文档中嵌入CSS样式(用于定义内部CSS 样式)，需要注意在<style>标签中定义的样式仅对当前 HTML文档有效，对于文档中的唯一样式可以使用<style>标签，但对于在多个文档中通用的样式，使用外部样式表更为合适</p> <pre><code class="language-html"><html> <head> <meta charset="UTF-8"> <title>document</title> <style> #box { background-color: red; } </style> </head> <body> <div id="box">一段文本</div> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/ec0dc9639f87400892e524918d25b2ef.png" target="_blank"><img alt="[HTML] HTML基础知识_第29张图片" height="114" src="http://img.e-com-net.com/image/info8/ec0dc9639f87400892e524918d25b2ef.png" width="457" style="border:1px solid black;"></a></p> <p>④ <script>标签用于定义JavaScript脚本，既可以包含脚本语句，也可以通过src属性指向外部脚本文件</p> <p><span style="color:#4da8ee;"><strong>示例1</strong></span></p> <pre><code class="language-html"><html> <head> <meta charset="UTF-8"> <title>document</title> <script> document.write("Hello World!!!") </script> </head> <body> <div>一段文本</div> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/56345eb824534a05bb5fe0acea72d3cb.jpg" target="_blank"><img alt="[HTML] HTML基础知识_第30张图片" height="136" src="http://img.e-com-net.com/image/info8/56345eb824534a05bb5fe0acea72d3cb.jpg" width="434" style="border:1px solid black;"></a></p> <p><span style="color:#4da8ee;"><strong>示例2</strong></span></p> <p>定义一个外部的 js 文件，通过 html 调用外部的 js 文件</p> <pre><code class="language-javascript">// index.js window.onload = function() { document.getElementById("box").style.backgroundColor = "yellow" }</code></pre> <pre><code class="language-html"><html> <head> <meta charset="UTF-8"> <title>document</title> <script src="./index.js"></script> </head> <body> <div id="box">一段文本</div> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/4ac4220ea7434847997b3847011ec23a.png" target="_blank"><img alt="[HTML] HTML基础知识_第31张图片" height="119" src="http://img.e-com-net.com/image/info8/4ac4220ea7434847997b3847011ec23a.png" width="445" style="border:1px solid black;"></a></p> <p>⑤ <base>标签用于指定页面中所有链接的基准路径，该标签作为HTML文档中所有的链接标签的默认链接</p> <p><span style="color:#fe2c24;"><span style="background-color:#fef2f0;">href属性</span></span>指定所有链接的基准路径，<span style="color:#fe2c24;"><span style="background-color:#fef2f0;">target属性</span></span>指定超链接默认在哪个窗口打开链接</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>base标签</title>  <base href="http://www.baidu.com" target="_self"> </head> <body> <h3>默认行为: 在本页面打开百度</h3>  <a href="">使用默认行为</a>  <a href="" target="_blank">只改变打开方式</a>  <a href="https://blog.csdn.net/Hudas/">只改变地址</a>  <a href="https://blog.csdn.net/Hudas/" target="_blank">同时改变地址和打开方式</a> </body> </html></code></pre> <p>⑥ <meta>标签用于提供有关HTML文档的元数据(描述数据的数据)，<meta>标签定义的数据并不会显示在页面上，但却会被浏览器解析</p> <p><strong>1.定义字符集</strong></p> <pre><code class="language-html"><meta charset="UTF-8"></code></pre> <p><strong>2.定义页面描述</strong></p> <p>定义页面的描述信息有利于搜索引擎的搜索</p> <pre><code class="language-html"><meta name="description" content="HTML是超文本标记语言(HyperText Markup Language)，是一种用于创建网页的标准标记语言"></code></pre> <p><strong>3.定义页面作者</strong></p> <pre><code class="language-html"><meta name="author" content="Andy"></code></pre> <p><strong>4.定义关键字 </strong></p> <pre><code class="language-html"><meta name="keywords" content="HTML,CSS,JavaScript"></code></pre> <p>上述只列举了4个<meta>标签描述元数据的代码，如果需要了解其他描述代码，读者可自行去查阅</p> <h1>18.HTML字符实体</h1> <table border="1" style="width:500px;"> <tbody> <tr> <td style="text-align:center;"><strong>显示结果</strong></td> <td style="text-align:center;"><strong>描述</strong></td> <td style="text-align:center;"><strong>实体名称</strong></td> </tr> <tr> <td></td> <td>空格</td> <td> </td> </tr> <tr> <td><</td> <td>小于号</td> <td><</td> </tr> <tr> <td>></td> <td>大于号</td> <td>></td> </tr> <tr> <td>&</td> <td>和号</td> <td>&</td> </tr> <tr> <td>"</td> <td>引号</td> <td>"</td> </tr> <tr> <td>'</td> <td>撇号 </td> <td>' (IE不支持)</td> </tr> <tr> <td>￠</td> <td>分</td> <td>¢</td> </tr> <tr> <td>£</td> <td>镑</td> <td>£</td> </tr> <tr> <td>¥</td> <td>元</td> <td>¥</td> </tr> <tr> <td>€</td> <td>欧元</td> <td>€</td> </tr> <tr> <td>§</td> <td>小节</td> <td>§</td> </tr> <tr> <td>©</td> <td>版权</td> <td>©</td> </tr> <tr> <td>®</td> <td>注册商标</td> <td>®</td> </tr> <tr> <td>™</td> <td>商标</td> <td>™</td> </tr> <tr> <td>×</td> <td>乘号</td> <td>×</td> </tr> <tr> <td>÷</td> <td>除号</td> <td>÷</td> </tr> </tbody> </table> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1621441038059077632"></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/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <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> <span class="text-muted">二挡起步</span> <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/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> <span class="text-muted">夜空_2cd3</span> <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> <span class="text-muted">和自己一起成长</span> <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> <span class="text-muted">清风怎不知意</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> <span class="text-muted">陈在天box</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> <span class="text-muted">Cavalier_01</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> <span class="text-muted">html+css+js网页设计</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> <span class="text-muted">zoyation</span> <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> <span class="text-muted">Derek重名了</span> <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> <span class="text-muted">周bro</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> <span class="text-muted">红匣子实力推荐</span> <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> <span class="text-muted">张某布响丸辣</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835349024102772736.htm" title="非关系型数据库" target="_blank">非关系型数据库</a> <span class="text-muted">天秤-white</span> <a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a> <div>一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%</div> </li> <li><a href="/article/1835342718067372032.htm" title="Python精选200Tips：121-125" target="_blank">Python精选200Tips：121-125</a> <span class="text-muted">AnFany</span> <a class="tag" taget="_blank" href="/search/Python200%2BTips/1.htm">Python200+Tips</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例</div> </li> <li><a href="/article/1835333268375957504.htm" title="爬虫技术抓取网站数据" target="_blank">爬虫技术抓取网站数据</a> <span class="text-muted">Bearjumpingcandy</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文</div> </li> <li><a href="/article/1835316434805288960.htm" title="七.正则化" target="_blank">七.正则化</a> <span class="text-muted">愿风去了</span> <div>吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> <span class="text-muted">uthRaman</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835285939723792384.htm" title="利用frp实现内网穿透（需要云主机）" target="_blank">利用frp实现内网穿透（需要云主机）</a> <span class="text-muted">heiyumiao</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%B7%A5%E5%85%B7/1.htm">网络工具</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>详细实现教程：https://www.iplaysoft.com/frp.htmlhttps://blog.csdn.net/u013144287/article/details/78589643/项目官网地址：https://github.com/fatedier/frp/releases按照系统下载相应的程序包什么是frp内网穿透工具有很多，其中Frp(FastReverseProxy)是比较</div> </li> <li><a href="/article/1835270061674295296.htm" title="word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf" target="_blank">word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf</a> <span class="text-muted">想吃草莓干</span> <a class="tag" taget="_blank" href="/search/word%E8%BD%AChtml%E5%88%B6%E4%BD%9C%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C/1.htm">word转html制作操作手册</a> <div>Word文档转换为HTML帮助文档操作手册一、使用到的软件DOC2CHMDreamweaverCS3Helpandmanual4二、操作步骤1.先建立一个工作目录。如hhwork。2.将需要转换的文件复制到此工作目录下。如果是中文文件名，最好将其改为英文文件名。例：现在要将《小神探点检定修信息管理系统使用手册0.3.6.doc》转换为Html格式的帮助文档，首先将此文档复制到hhwork目录下并将</div> </li> <li><a href="/article/1835262372638453760.htm" title="WORD批量转换器MultiDoc Converter" target="_blank">WORD批量转换器MultiDoc Converter</a> <span class="text-muted">uolian</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>WORD批量转换器MultiDocConverterhttps://www.52pojie.cn/thread-1318745-1-1.html可批量将doc、docx等文件格式转成doc、docx、pdf、rtf、txt、html、epub等格式。安装包下载地址：https://wws.lanzouj.com/irvVbiz0pkd最终下载文件打包地址（未作成单文件，不确定是否可以直接使用）：h</div> </li> <li><a href="/article/1835258583235784704.htm" title="HTML中"bgcolor"与"background-color"的区别" target="_blank">HTML中"bgcolor"与"background-color"的区别</a> <span class="text-muted">Sardar_</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou</div> </li> <li><a href="/article/1835257575277424640.htm" title="【Python爬虫】百度百科词条内容" target="_blank">【Python爬虫】百度百科词条内容</a> <span class="text-muted">PokiFighting</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86/1.htm">数据处理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>词条内容我这里随便选取了一个链接，用的是FBI的词条importurllib.requestimporturllib.parsefromlxmlimportetreedefquery(url):headers={'user-agent':'Mozilla/5.0(WindowsNT6.1;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/80.</div> </li> <li><a href="/article/1835249513875468288.htm" title="说说在 Vue.js 中如何实现组件间通信" target="_blank">说说在 Vue.js 中如何实现组件间通信</a> <span class="text-muted">deniro</span> <div>1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功</div> </li> <li><a href="/article/81.htm" title="java短路运算符和逻辑运算符的区别" target="_blank">java短路运算符和逻辑运算符的区别</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java%E5%9F%BA%E7%A1%80/1.htm">java基础</a> <div> /* * 逻辑运算符——不论是什么条件都要执行左右两边代码 * 短路运算符——我认为在底层就是利用物理电路的“并联”和“串联”实现的 * 原理很简单，并联电路代表短路或（||），串联电路代表短路与（&&）。 * * 并联电路两个开关只要有一个开关闭合，电路就会通。 * 类似于短路或（||），只要有其中一个为true（开关闭合）是</div> </li> <li><a href="/article/208.htm" title="Java异常那些不得不说的事" target="_blank">Java异常那些不得不说的事</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a> <div>一、在finally块中做数据回收操作比如数据库连接都是很宝贵的，所以最好在finally中关闭连接。 JDBCAgent jdbc = new JDBCAgent(); try{ jdbc.excute("select * from ctp_log"); }catch(SQLException e){ ... }finally{ jdbc.close(); </div> </li> <li><a href="/article/335.htm" title="utf-8与utf-8(无BOM)的区别" target="_blank">utf-8与utf-8(无BOM)的区别</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>BOM——Byte Order Mark，就是字节序标记在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输字符"ZERO WIDTH NO-BREAK SPACE"。这样如</div> </li> <li><a href="/article/462.htm" title="JAVA Annotation之定义篇" target="_blank">JAVA Annotation之定义篇</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%B3%A8%E8%A7%A3/1.htm">注解</a><a class="tag" taget="_blank" href="/search/annotation/1.htm">annotation</a><a class="tag" taget="_blank" href="/search/%E5%85%A5%E9%97%A8/1.htm">入门</a><a class="tag" taget="_blank" href="/search/%E6%B3%A8%E9%87%8A/1.htm">注释</a> <div> Annotation: 译为注释或注解 An annotation, in the Java computer programming language, is a form of syntactic metadata that can be added to Java source code. Classes, methods, variables, pa</div> </li> <li><a href="/article/589.htm" title="tomcat的多域名、虚拟主机配置" target="_blank">tomcat的多域名、虚拟主机配置</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>众所周知apache可以配置多域名和虚拟主机，而且配置起来比较简单，但是项目用到的是tomcat，配来配去总是不成功。查了些资料才总算可以，下面就跟大家分享下经验。很多朋友搜索的内容基本是告诉我们这么配置：在Engine标签下增面积Host标签，如下： <Host name="www.site1.com" appBase="webapps"</div> </li> <li><a href="/article/716.htm" title="Linux SSH 错误解析（Capistrano 的cap 访问错误 Permission ）" target="_blank">Linux SSH 错误解析（Capistrano 的cap 访问错误 Permission ）</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/capistrano/1.htm">capistrano</a> <div> 1.ssh -v hdfs@192.168.18.133 出现 Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password). 错误运行状况如下： OpenSSH_5.3p1, OpenSSL 1.0.1e-fips 11 Feb 2013 debug1: Reading configuratio</div> </li> <li><a href="/article/843.htm" title="log4j的用法" target="_blank">log4j的用法</a> <span class="text-muted">Harry642</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a> <div>一、前言： log4j 是一个开放源码项目，是广泛使用的以Java编写的日志记录包。由于log4j出色的表现，当时在log4j完成时，log4j开发组织曾建议sun在jdk1.4中用log4j取代jdk1.4 的日志工具类，但当时jdk1.4已接近完成，所以sun拒绝使用log4j，当在java开发中</div> </li> <li><a href="/article/970.htm" title="mysql、sqlserver、oracle分页，java分页统一接口实现" target="_blank">mysql、sqlserver、oracle分页，java分页统一接口实现</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/jave/1.htm">jave</a> <div> 定义：pageStart 起始页，pageEnd 终止页,pageSize页面容量 oracle分页：　　　　select * from ( select mytable.*,rownum num from (实际传的SQL) where rownum<=pageEnd) where num>=pageStart sqlServer分页： </div> </li> <li><a href="/article/1097.htm" title="Hessian 简单例子" target="_blank">Hessian 简单例子</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/service/1.htm">service</a><a class="tag" taget="_blank" href="/search/hessian/1.htm">hessian</a> <div>hello.hessian.MyCar.java package hessian.pojo; import java.io.Serializable; public class MyCar implements Serializable { private static final long serialVersionUID = 473690540190845543</div> </li> <li><a href="/article/1224.htm" title="数据库对象的同义词和序列" target="_blank">数据库对象的同义词和序列</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E5%BA%8F%E5%88%97/1.htm">序列</a><a class="tag" taget="_blank" href="/search/%E5%90%8C%E4%B9%89%E8%AF%8D/1.htm">同义词</a><a class="tag" taget="_blank" href="/search/ORACLE%E6%9D%83%E9%99%90/1.htm">ORACLE权限</a> <div>回顾简单的数据库权限等命令; 解锁用户和锁定用户 alter user scott account lock/unlock; //system下查看系统中的用户 select * dba_users; //创建用户名和密码 create user wj identified by wj; identified by //授予连接权和建表权 grant connect to </div> </li> <li><a href="/article/1351.htm" title="使用Powermock和mockito测试静态方法" target="_blank">使用Powermock和mockito测试静态方法</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/mockito/1.htm">mockito</a><a class="tag" taget="_blank" href="/search/Powermock/1.htm">Powermock</a> <div> 实例： package com.bijian.study; import static org.junit.Assert.assertEquals; import java.io.IOException; import org.junit.Before; import org.junit.Test; import or</div> </li> <li><a href="/article/1478.htm" title="精通Oracle10编程SQL(6)访问ORACLE" target="_blank">精通Oracle10编程SQL(6)访问ORACLE</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</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/plsql/1.htm">plsql</a> <div>/* *访问ORACLE */ --检索单行数据 --使用标量变量接收数据 DECLARE v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; BEGIN select ename,sal into v_ename,v_sal from emp where empno=&no; dbms_output.pu</div> </li> <li><a href="/article/1605.htm" title="【Nginx四】Nginx作为HTTP负载均衡服务器" target="_blank">【Nginx四】Nginx作为HTTP负载均衡服务器</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div> Nginx的另一个常用的功能是作为负载均衡服务器。一个典型的web应用系统，通过负载均衡服务器，可以使得应用有多台后端服务器来响应客户端的请求。一个应用配置多台后端服务器，可以带来很多好处：负载均衡的好处增加可用资源增加吞吐量加快响应速度，降低延时出错的重试验机制 Nginx主要支持三种均衡算法： round-robin l</div> </li> <li><a href="/article/1732.htm" title="jquery-validation备忘" target="_blank">jquery-validation备忘</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/F%23/1.htm">F#</a><a class="tag" taget="_blank" href="/search/Firebug/1.htm">Firebug</a> <div>留点学习jquery validation总结的代码： function checkForm(){ validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID errorElement :"span",// 使用"div"标签标记错误，默认:&</div> </li> <li><a href="/article/1859.htm" title="solr限制admin界面访问（端口限制和http授权限制）" target="_blank">solr限制admin界面访问（端口限制和http授权限制）</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/%E9%99%90%E5%AE%9AIp%E8%AE%BF%E9%97%AE/1.htm">限定Ip访问</a> <div>solr的管理界面可以帮助我们做很多事情，但是把solr程序放到公网之后就要限制对admin的访问了。可以通过tomcat的http基本授权来做限制，也可以通过iptables防火墙来限制。我们先看如何通过tomcat配置http授权限制。第一步：在tomcat的conf/tomcat-users.xml文件中添加管理用户，比如： <userusername="ad</div> </li> <li><a href="/article/1986.htm" title="多线程-用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1" target="_blank">多线程-用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a> <div> public class IncDecThread { private int j=10; /* * 题目:用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1 * 两个问题： * 1、线程同步--synchronized * 2、线程之间如何共享同一个j变量--内部类 */ public static </div> </li> <li><a href="/article/2113.htm" title="买房历程" target="_blank">买房历程</a> <span class="text-muted">cfyme</span> <div> 2015-06-21: 万科未来城，看房子 2015-06-26: 办理贷款手续，贷款73万，贷款利率5.65=5.3675 2015-06-27: 房子首付,签完合同 2015-06-28，央行宣布降息 0.25，就2天的时间差啊，没赶上。首付，老婆找他的小姐妹接了5万，另外几个朋友借了1-</div> </li> <li><a href="/article/2240.htm" title="[军事与科技]制造大型太空战舰的前奏" target="_blank">[军事与科技]制造大型太空战舰的前奏</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%88%B6%E9%80%A0/1.htm">制造</a> <div> 天气热了........空调和电扇要准备好.......... 最近,世界形势日趋复杂化,战争的阴影开始覆盖全世界.......... 所以,我们不得不关</div> </li> <li><a href="/article/2367.htm" title="dateformat" target="_blank">dateformat</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/DateFormat/1.htm">DateFormat</a> <div> "Symbol Meaning Presentation Ex." "------ ------- ------------ ----" "G era designator (Text) AD" "y year</div> </li> <li><a href="/article/2494.htm" title="Hadoop如何实现关联计算" target="_blank">Hadoop如何实现关联计算</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E5%85%B3%E8%81%94%E8%AE%A1%E7%AE%97/1.htm">关联计算</a> <div> 选择Hadoop，低成本和高扩展性是主要原因，但但它的开发效率实在无法让人满意。以关联计算为例。假设：HDFS上有2个文件，分别是客户信息和订单信息，customerID是它们之间的关联字段。如何进行关联计算，以便将客户名称添加到订单列表中？ &nbs</div> </li> <li><a href="/article/2621.htm" title="用户模型中修改用户信息时，密码是如何处理的" target="_blank">用户模型中修改用户信息时，密码是如何处理的</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>当我添加或修改用户记录的时候对于处理确认密码我遇到了一些麻烦，所有我想分享一下我是怎么处理的。场景是使用的基本的那些(系统自带)，你需要有一个数据表(user)并且表中有一个密码字段(password),它使用 sha1、md5或其他加密方式加密用户密码。面是它的工作流程: 当创建用户的时候密码需要加密并且保存，但当修改用户记录时如果使用同样的场景我们最终就会把用户加密过的密码再次加密，这</div> </li> <li><a href="/article/2748.htm" title="中文 iOS/Mac 开发博客列表" target="_blank">中文 iOS/Mac 开发博客列表</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Blog/1.htm">Blog</a> <div> 本博客列表会不断更新维护，如果有推荐的博客，请到此处提交博客信息。本博客列表涉及的文章内容支持定制化Google搜索，特别感谢 JeOam 提供并帮助更新。本博客列表也提供同步更新的OPML文件（下载OPML文件），可供导入到例如feedly等第三方定阅工具中，特别感谢 lcepy 提供自动转换脚本。这里有导入教程。 </div> </li> <li><a href="/article/2875.htm" title="js去除空格，去除左右两端的空格" target="_blank">js去除空格，去除左右两端的空格</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/%E5%8E%BB%E9%99%A4%E5%B7%A6%E5%8F%B3%E4%B8%A4%E7%AB%AF%E7%9A%84%E7%A9%BA%E6%A0%BC/1.htm">去除左右两端的空格</a><a class="tag" taget="_blank" href="/search/js%E5%8E%BB%E6%8E%89%E6%89%80%E6%9C%89%E7%A9%BA%E6%A0%BC/1.htm">js去掉所有空格</a><a class="tag" taget="_blank" href="/search/js%E5%8E%BB%E9%99%A4%E7%A9%BA%E6%A0%BC/1.htm">js去除空格</a> <div>js去除空格，去除左右两端的空格 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&g</div> </li> <li><a href="/article/3002.htm" title="SpringMVC4零配置--web.xml" target="_blank">SpringMVC4零配置--web.xml</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/springmvc4/1.htm">springmvc4</a> <div>servlet3.0+规范后，允许servlet，filter，listener不必声明在web.xml中，而是以硬编码的方式存在，实现容器的零配置。 ServletContainerInitializer：启动容器时负责加载相关配置 package javax.servlet; import java.util.Set; public interface ServletContainer</div> </li> <li><a href="/article/3129.htm" title="《开源框架那些事儿21》：巧借力与借巧力" target="_blank">《开源框架那些事儿21》：巧借力与借巧力</a> <span class="text-muted">j2eetop</span> <a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a> <div>同样做前端UI，为什么有人花了一点力气，就可以做好？而有的人费尽全力，仍然错误百出？我们可以先看看几个故事。故事1：巧借力，乌鸦也可以吃核桃有一个盛产核桃的村子，每年秋末冬初，成群的乌鸦总会来到这里，到果园里捡拾那些被果农们遗落的核桃。核桃仁虽然美味，但是外壳那么坚硬，乌鸦怎么才能吃到呢？原来乌鸦先把核桃叼起，然后飞到高高的树枝上，再将核桃摔下去，核桃落到坚硬的地面上，被撞破了，于是，</div> </li> <li><a href="/article/3256.htm" title="JQuery EasyUI 验证扩展" target="_blank">JQuery EasyUI 验证扩展</a> <span class="text-muted">可怜的猫</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a><a class="tag" taget="_blank" href="/search/%E9%AA%8C%E8%AF%81/1.htm">验证</a> <div> 最近项目中用到了前端框架-- EasyUI，在做校验的时候会涉及到很多需要自定义的内容，现把常用的验证方式总结出来，留待后用。以下内容只需要在公用js中添加即可。使用类似于如下： <input class="easyui-textbox" name="mobile" id="mobile&</div> </li> <li><a href="/article/3383.htm" title="架构师之httpurlconnection----------读取和发送(流读取效率通用类)" target="_blank">架构师之httpurlconnection----------读取和发送(流读取效率通用类)</a> <span class="text-muted">nannan408</span> <div>1.前言. 如题. 2.代码. /* * Copyright (c) 2015, S.F. Express Inc. All rights reserved. */ package com.test.test.test.send; import java.io.IOException; import java.io.InputStream</div> </li> <li><a href="/article/3510.htm" title="Jquery性能优化" target="_blank">Jquery性能优化</a> <span class="text-muted">r361251</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>一、注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery，所有javascript开发过程中，都需要注意，请一定不要定义成如下： $loading = $('#loading'); //这个是全局定义，不知道哪里位置倒霉引用了相同的变量名，就会郁闷至死的二、请使用一个var来定义变量如果你使用多个变量的话，请如下方式定义： . 代码如下: var page </div> </li> <li><a href="/article/3637.htm" title="在eclipse项目中使用maven管理依赖" target="_blank">在eclipse项目中使用maven管理依赖</a> <span class="text-muted">tjj006</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>概览: 如何导入maven项目至eclipse中建立自有Maven Java类库服务器建立符合maven代码库标准的自定义类库 Maven在管理Java类库方面有巨大的优势，像白衣所说就是非常“环保”。我们平时用IDE开发都是把所需要的类库一股脑的全丢到项目目录下，然后全部添加到ide的构建路径中，如果用了SVN/CVS，这样会很容易就把</div> </li> <li><a href="/article/3764.htm" title="中国天气网省市级联页面" target="_blank">中国天气网省市级联页面</a> <span class="text-muted">x125858805</span> <a class="tag" taget="_blank" href="/search/%E7%BA%A7%E8%81%94/1.htm">级联</a> <div>1、页面及级联js <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> &l</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>

type属性值	说明
text	文本框，用于输入单行文本
password	密码框，用于输入密码
radio	单选框，用于多选一
checkbox	多选框
file	文件选择，用于上传文件
submit	提交按钮，用于提交
reset	重置按钮，用于清除与重置表单内容