HTML 布局 - HTML development manual

元素添加布局。使用元素的网页布局如何使用

元素添加布局。网站布局大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。"> HTML 布局 - HTML development manual - php.cn手册

</a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-img.html"><img></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-input.html"><input></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ins.html"><ins></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-kbd.html"><kbd></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-keygen.html"><keygen></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-label.html"><label></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-legend.html"><legend></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-li.html"><li></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-link.html"><link></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-map.html"><map></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-mark.html"><mark></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-menu.html"><menu></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-meta.html"><meta></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-meter.html"><meter></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-nav.html"><nav></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-noframes.html"><noframes></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-noscript.html"><noscript></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-object.html"><object></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ol.html"><ol></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-optgroup.html"><optgroup></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-option.html"><option></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-output.html"><output></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-p.html"><p></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-param.html"><param></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-pre.html"><pre></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-html.html"><html></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-progress.html"><progress></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-q.html"><q></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-rp.html"><rp></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-rt.html"><rt></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ruby.html"><ruby></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-s.html"><s></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-samp.html"><samp></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-script.html"><script></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-section.html"><section></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-select.html"><select></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-small.html"><small></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-source.html"><source></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-span.html"><span></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-strike.html"><strike></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-strong.html"><strong></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-style.html"><style></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-sub.html"><sub></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-summary.html"><summary></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-sup.html"><sup></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-table.html"><table></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tbody.html"><tbody></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-td.html"><td></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-textarea.html"><textarea></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tfoot.html"><tfoot></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-th.html"><th></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-thead.html"><thead></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-time.html"><time></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-title.html"><title></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tr.html"><tr></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-track.html"><track></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-tt.html"><tt></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-u.html"><u></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-ul.html"><ul></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-var.html"><var></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-video.html"><video></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/tags/tag-wbr.html"><wbr></a> </dd> </dl></li> </ul> </div> </div> </div> <div class="content"> <article class="phpcn-col-md9"> <div class="c-site"> <div class="c-site-a"> <a href="//m.sbmmt.com/course/27.html">HTML development manual</a> <span>/</span>HTML 布局 </div> </div> <div class="article-intro"> <h1 class="manual_con_title">HTML 布局</h1> <p class="intro">"HTML 布局网页布局对改善网站的外观非常重要。请慎重设计您的网页布局。在线实例使用 <div> 元素的网页布局如何使用 <div> 元素添加布局。使用 <table> 元素的网页布局如何使用 <table> 元素添加布局。网站布局大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。</p> <hr> <div class="article-body"> <div class="article-intro"> <hr> <p class="intro">网页布局对改善网站的外观非常重要。</p> <p class="intro">请慎重设计您的网页布局。</p> <hr> <div class="tryit_ex"> <span style="font-size: 1.8em; line-height: 1.8em;">在线实例</span> </div> <p>使用 <div> 元素的网页布局<br>如何使用 <div> 元素添加布局。</p> <p>使用 <table> 元素的网页布局<br>如何使用 <table> 元素添加布局。</p> <hr> <h2>网站布局</h2> <p>大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。</p> <p>大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。</p> <table class="lamp"> <tbody> <tr class="firstRow"> <th width="34"><img src="https://img.php.cn/upload/image/733/714/330/1550479109732313.jpg" title="1550479109732313.jpg" alt="lamp.jpg"></th> <td>虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。</td> </tr> </tbody> </table> <br> <hr> <h2>HTML 布局 - 使用<div> 元素</h2> <p>div 元素是用于分组 HTML 元素的块级元素。</p> <p>下面的例子使用五个 div 元素来创建多列布局：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">主要的网页标题</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> 内容在这里</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 版权 © php.cn</div> </div> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>上面的 HTML 代码会产生如下结果：</p> <p><img src="https://img.php.cn/upload/image/820/916/352/1476688391410264.png" title="1476688391410264.png" alt="000.png"></p> <hr> <h2>HTML 布局 - 使用表格</h2> <p>使用 HTML <table> 标签是创建布局的一种简单的方式。</p> <p>大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。</p> <table class="lamp"> <tbody> <tr class="firstRow"> <th width="34" style="word-break: break-all;"><img src="https://img.php.cn/upload/image/344/623/979/1550479124752591.jpg" title="1550479124752591.jpg" alt="lamp.jpg"></th> <td>即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！</td> </tr> </tbody> </table> <p>下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>主要的网页标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript </td> <td style="background-color:#eeeeee;height:200px;width:400px;"> 内容在这里</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版权 © php.cn</td> </tr> </table> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>上面的 HTML 代码会产生以下结果：</p> <img src="https://img.php.cn/upload/image/929/624/444/1476688435565362.png" title="1476688435565362.png" alt="001.png"> <br> <hr> <h2>HTML 布局 - 有用的提示</h2> <p><strong>Tip:</strong>使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程.</p> <p><strong>Tip:</strong>由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。</p> <hr> <h2>HTML 布局标签</h2> <table class="reference notranslate"> <tbody> <tr class="firstRow"> <th width="30%" align="left">标签</th> <th align="left">描述</th> </tr> <tr> <td><a href="//m.sbmmt.com/dic/html/div.html" target="_blank"><div></a></td> <td>定义文档区块，块级(block-level)</td> </tr> <tr> <td><a href="//m.sbmmt.com/dic/html/span.html" target="_blank"><span></a></td> <td>定义 span，用来组合文档中的行内元素。</td> </tr> </tbody> </table> </div> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/html/html-blocks.html" rel="prev">HTML 区块</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/html/html-forms.html" rel="next">HTML 表单</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>Tutorial Navigation</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/1/type/3.html" target="_blank" title="Big front end">Big front end</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="HTML">HTML</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="JavaScript">JavaScript</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Vue.js">Vue.js</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="React">React</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="AJAX">AJAX</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Bootstrap">Bootstrap</a> <a href="//m.sbmmt.com/course/list/1/type/3.html" title="Foundation">Foundation</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/2/type/3.html" title="Highcharts">Highcharts</a> <a href="//m.sbmmt.com/course/list/2/type/3.html" title="Maps API">Maps API</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/3/type/3.html" target="_blank" title="Backend Development">Backend Development</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Laravel">Laravel</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Python">Python</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Go">Go</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Java">Java</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="C#">C#</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="JSP">JSP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Django">Django</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Ruby">Ruby</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Perl">Perl</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Servlet">Servlet</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Lua">Lua</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="Scala">Scala</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="AppML">AppML</a> <a href="//m.sbmmt.com/course/list/3/type/3.html" title="VBScript">VBScript</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/4/type/3.html" target="_blank" title="database">database</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Redis">Redis</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Oracle">Oracle</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="MongoDB">MongoDB</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="Memcached">Memcached</a> <a href="//m.sbmmt.com/course/list/4/type/3.html" title="SQL Server">SQL Server</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/5/type/3.html" target="_blank" title="Mobile terminal">Mobile terminal</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Applets">Applets</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="uni-app">uni-app</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Flutter">Flutter</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Android">Android</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="iOS">iOS</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="Swift">Swift</a> <a href="//m.sbmmt.com/course/list/5/type/3.html" title="other">other</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/9/type/3.html" target="_blank" title="Operation and maintenance development">Operation and maintenance development</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Docker">Docker</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="PhpStudy">PhpStudy</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Git">Git</a> <a href="//m.sbmmt.com/course/list/9/type/3.html" title="Other tools">Other tools</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/7/type/3.html" target="_blank" title="UI design">UI design</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="Axure">Axure</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="MVC">MVC</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="Web Forms">Web Forms</a> <a href="//m.sbmmt.com/course/list/7/type/3.html" title="PS">PS</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/10/type/3.html" target="_blank" title="Computer Basics">Computer Basics</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Design Patterns">Design Patterns</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="regular expression">regular expression</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="HTTP">HTTP</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Website Building Guide">Website Building Guide</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="Browser information">Browser information</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="website host">website host</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="W3C">W3C</a> <a href="//m.sbmmt.com/course/list/10/type/3.html" title="CodeBasic">CodeBasic</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XML DOM">XML DOM</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XPath">XPath</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XQuery">XQuery</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XLink">XLink</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XPointer">XPointer</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XML Schema">XML Schema</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/course/list/6/type/3.html" title="SVG">SVG</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/course/list/8/type/3.html" target="_blank" title="Web Services">Web Services</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="Web Services">Web Services</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="SOAP">SOAP</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/course/list/8/type/3.html" title="RDF">RDF</a> </div> </dd> </dl></li> </ul> </div> </div> <div id="codeMark"></div> <div id="codeMain"> <div class="left"> <div id="codeEditor"></div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="submit">submit</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>

HTML Tutorial - (HTML5 Standard)

HTML media

HTML tag

-