Home >Web Front-end >HTML Tutorial >Back-end coders talk about front-end (HTML) Lesson 2: Common elements_html/css_WEB-ITnose

Back-end coders talk about front-end (HTML) Lesson 2: Common elements_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:48:38892browse

1. Root element

定义文档类型。
定义 HTML 文档。

2. Metadata element

定义关于文档的信息。
定义关于 HTML 文档的元数据。
定义文档与外部资源之间的关系,一般用于引入样式表。
定义页面上所有链接的默认地址或默认目标。
</td> <td>定义文档标题。</td> </tr> <tr> <td><style></td> <td>定义文档的样式信息。</td> </tr> </table> <h3>3. Script element </h3> <table> <tr> <td><script></td> <td>定义客户端脚本。</td> </tr> <tr> <td><noscript></td> <td>定义当浏览器不支持脚本的时候所显示的内容</td> </tr> </table> <h3> 4. Block elements </h3> <table> <tr> <td><body></td> <td>定义文档的主体。</td> </tr> <tr> <td><h1>、<h2>...<h6></td> <td>定义文档标题。</td> </tr> <tr> <td><p></td> <td>定义文档段落。</td> </tr> <tr> <td><blockquote></td> <td>定义块引用。</td> </tr> <tr> <td><ul>、<ul>、<dl></td> <td>定义列表。</td> </tr> <tr> <td><table></td> <td>定义表格。</td> </tr> </table> <h4 class="mt-10"> 1. List elements </h4> <li>Unordered list <table> <tr> <td><ul></td> <td>定义无序的列表。</td> </tr> <tr> <td><li></td> <td>定义列表项。</td> </tr> </table> </li> <li>Ordered list <table> <tr> <td><ol></td> <td>定义有序的列表。</td> </tr> <tr> <td><li></td> <td>定义列表项。</td> </tr> </table> </li> <li>Definition list<table> <tr> <td><dl></td> <td>定义定义列表。</td> </tr> <tr> <td><dt></td> <td>定义定义术语。</td> </tr> <tr> <td><dd></td> <td>定义定义描述。</td> </tr> </table> </li> <h4 class="mt-10">2. Table elements </h4> <table> <tr> <td><table></td> <td>定义表格。</td> </tr> <tr> <td><thead></td> <td>定义表格的页眉。</td> </tr> <tr> <td><tbody></td> <td>定义表格的主体。</td> </tr> <tr> <td><tfoot></td> <td>定义表格的页脚。</td> </tr> <tr> <td><th></td> <td>定义表格的表头行。</td> </tr> <tr> <td><tr></td> <td>定义表格的行。</td> </tr> <tr> <td><td></td> <td>定义表格单元。</td> </tr> </table> <h3>5. Text elements </h3> <h4 class="mt-10">1. Text formatting elements </h4> <table> <tr> <td><em></td> <td>定义着重文字。</td> </tr> <tr> <td><strong></td> <td>定义加重语气。</td> </tr> <tr> <td><sup></td> <td>定义上标字。</td> </tr> <tr> <td><sub></td> <td>定义下标字。</td> </tr> <tr> <td><ins></td> <td>定义插入字。</td> </tr> <tr> <td><del></td> <td>定义删除字。</td> </tr> <tr> <td><b></td> <td>定义粗体文本。</td> </tr> <tr> <td><i></td> <td>定义斜体文本。</td> </tr> <tr> <td><big></td> <td>定义大号字。</td> </tr> <tr> <td><small></td> <td>定义小号字。</td> </tr> </table> <h4 class="mt-10">2. "Computer output" tag </h4> <table> <tr> <td><code></td> <td>定义计算机代码。</td> </tr> <tr> <td><kbd></td> <td>定义键盘码。</td> </tr> <tr> <td><pre class="brush:php;toolbar:false"></td> <td>定义预格式文本。</td> </tr> </table> <h4 class="mt-10">3. References, citations and term definitions </h4> <table> <tr> <td><q></td> <td>定义简短引用。</td> </tr> <tr> <td><blockquote></td> <td>定义长引用。</td> </tr> <tr> <td><address></td> <td>定义地址。</td> </tr> </table> <h3>6. Links and Images</h3> <table> <tr> <td><a></td> <td>定义超链接</td> </tr> <tr> <td><img></td> <td>定义图像。</td> </tr> <tr> <td><map></td> <td>定义图像地图。</td> </tr> <tr> <td><area></td> <td>定义图像地图中的可点击区域。</td> </tr> </table> <h3>7. <div> and <span></h3> <table> <tr> <td><div></td> <td>定义文档中的分区或节(division/section)。</td> </tr> <tr> <td><span></td> <td>定义 span,用来组合文档中的行内元素。</td> </tr> </table> <h3>8. Frame</h3> <table> <tr> <td><frameset></td> <td>定义如何将窗口分割为框架。(注:<frameset>元素只能嵌套在<html> 元素或<frameset>元素自身中!)</td> </tr> <tr> <td><frame></td> <td>定义放置在每个框架中的 HTML 文档。</td> </tr> </table> <h3>9. , Inline frame </h3> <table> <tr> <td><iframe></td> <td>定义内联的子窗口(框架)。</td> </tr> </table> <h3>10. Form elements </h3> <table> <tr> <td><form></td> <td>定义供用户输入的表单。</td> </tr> <tr> <td><input></td> <td>定义输入域。</td> </tr> <tr> <td><textarea></td> <td>定义文本域 (一个多行的输入控件)。</td> </tr> <tr> <td><lable></td> <td>定义一个控制的标签。</td> </tr> <tr> <td><select></td> <td>定义一个选择列表。</td> </tr> <tr> <td><option></td> <td>定义下拉列表中的选项。</td> </tr> <tr> <td><optgroup></td> <td>定义选项组。</td> </tr> <tr> <td><button></td> <td>定义一个按钮。</td> </tr> <tr> <td><fieldset></td> <td>定义域。</td> </tr> <tr> <td><legend></td> <td>定义域的标题。</td> </tr> </table> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement:</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article:<a class="dBlack" title="Backend Coders Talk About Frontend (HTML) Lesson 1: HTML Overview_html/css_WEB-ITnose" href="https://m.php.cn/faq/274779.html">Backend Coders Talk About Frontend (HTML) Lesson 1: HTML Overview_html/css_WEB-ITnose</a></span><span>Next article:<a class="dBlack" title="Backend Coders Talk About Frontend (HTML) Lesson 1: HTML Overview_html/css_WEB-ITnose" href="https://m.php.cn/faq/274782.html">Backend Coders Talk About Frontend (HTML) Lesson 1: HTML Overview_html/css_WEB-ITnose</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training,Help PHP learners grow quickly!</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>