Home Web Front-end HTML Tutorial Block-level elements and inline elements_html/css_WEB-ITnose

Block-level elements and inline elements_html/css_WEB-ITnose

Jun 24, 2016 am 11:46 AM

List of block-level elements

 
定义地址
定义表格标题
定义列表中定义条目
定义文档中的分区或节
定义列表
定义列表中的项目
定义一个框架集
创建 HTML 表单

定义最大的标题

定义副标题

定义标题

定义标题
定义标题
定义最小的标题

创建一条水平线
元素为 fieldset 元素定义标题
  • 标签定义列表项目
    </td> <td>为那些不支持框架的浏览器显示文本,于 frameset 元素内部</td> </tr> <tr> <td><noscript></td> <td>定义在脚本未被执行时的替代内容</td> </tr> <tr> <td><ol></td> <td>定义有序列表</td> </tr> <tr> <td><ul></td> <td>定义无序列表</td> </tr> <tr> <td><p></td> <td>标签定义段落</td> </tr> <tr> <td><pre class="brush:php;toolbar:false"></td> <td>定义预格式化的文本</td> </tr> <tr> <td><table></td> <td>标签定义 HTML 表格</td> </tr> <tr> <td><tbody></td> <td>标签表格主体(正文)</td> </tr> <tr> <td><td></td> <td>表格中的标准单元格</td> </tr> <tr> <td><tfoot></td> <td>定义表格的页脚(脚注或表注)</td> </tr> <tr> <td><th></td> <td>定义表头单元格</td> </tr> <tr> <td><thead></td> <td>标签定义表格的表头</td> </tr> <tr> <td><tr></td> <td>定义表格中的行</td> </tr> </table> <p> </p> <p><strong>List of inline elements</strong> </p> <table>   <tr> <td><a></td> <td>标签可定义锚</td> </tr> <tr> <td><abbr></td> <td>表示一个缩写形式</td> </tr> <tr> <td><acronym></td> <td>定义只取首字母缩写</td> </tr> <tr> <td>< b ></td> <td>字体加粗</td> </tr> <tr> <td><bdo></td> <td>可覆盖默认的文本方向</td> </tr> <tr> <td><big></td> <td>大号字体加粗</td> </tr> <tr> <td><br></td> <td>换行</td> </tr> <tr> <td><cite></td> <td>引用进行定义</td> </tr> <tr> <td><code></td> <td>定义计算机代码文本</td> </tr> <tr> <td><dfn></td> <td>定义一个定义项目</td> </tr> <tr> <td><em></td> <td>定义为强调的内容</td> </tr> <tr> <td><i></td> <td>斜体文本效果</td> </tr> <tr> <td><img></td> <td>向网页中嵌入一幅图像</td> </tr> <tr> <td><input></td> <td>输入框</td> </tr> <tr> <td><kbd></td> <td>定义键盘文本</td> </tr> <tr> <td><label></td> <td>标签为 input 元素定义标注(标记)</td> </tr> <tr> <td><q></td> <td>定义短的引用</td> </tr> <tr> <td><samp></td> <td>定义样本文本</td> </tr> <tr> <td><select></td> <td>创建单选或多选菜单</td> </tr> <tr> <td><small></td> <td>呈现小号字体效果</td> </tr> <tr> <td><span></td> <td>组合文档中的行内元素</td> </tr> <tr> <td><strong></td> <td>语气更强的强调的内容</td> </tr> <tr> <td><sub></td> <td>定义下标文本</td> </tr> <tr> <td><sup></td> <td>定义上标文本</td> </tr> <tr> <td><textarea></td> <td>多行的文本输入控件</td> </tr> <tr> <td><tt></td> <td>打字机或者等宽的文本效果</td> </tr> <tr> <td><var></td> <td>定义变量</td> </tr> </table> <p> </p> <p><strong>List of variable elements - variable elements are based on context The context determines whether the element is a block element or an inline element </strong> </p> <table>   <tr> <td><button></td> <td>按钮</td> </tr> <tr> <td><del></td> <td>定义文档中已被删除的文本</td> </tr> <tr> <td><iframe></td> <td>创建包含另外一个文档的内联框架(即行内框架)</td> </tr> <tr> <td><ins></td> <td>标签定义已经被插入文档中的文本</td> </tr> <tr> <td><map></td> <td>客户端图像映射(即热区)</td> </tr> <tr> <td><object></td> <td>object对象</td> </tr> <tr> <td><script></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> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Statement of this Website</div> <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> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <!-- <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Article</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796781206.html" title="Saving in R.E.P.O. Explained (And Save Files)" class="phpgenera_Details_mainR4_bottom_title">Saving in R.E.P.O. Explained (And Save Files)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 months ago</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796783009.html" title="Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 weeks ago</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/article.html">Show More</a> </div> </div> </div> --> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Hot AI Tools</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>AI-powered app for creating realistic nude photos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Online AI tool for removing clothes from photos.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Undress images for free</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI clothes remover</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>Generate AI Hentai for free.</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ai">Show More</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Article</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796781206.html" title="Saving in R.E.P.O. Explained (And Save Files)" class="phpgenera_Details_mainR4_bottom_title">Saving in R.E.P.O. Explained (And Save Files)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 months ago</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796783009.html" title="Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 weeks ago</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/article.html">Show More</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Hot Tools</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Easy-to-use and free code editor</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Chinese version</h3> </a> <p>Chinese version, very easy to use</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Zend Studio 13.0.1</h3> </a> <p>Powerful PHP integrated development environment</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Visual web development tools</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac version</h3> </a> <p>God-level code editing software (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ai">Show More</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Hot Topics</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7564</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1385</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/steamdzhmcssmgs" title="What is the format of the account name of steam" class="phpgenera_Details_mainR4_bottom_title">What is the format of the account name of steam</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>85</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/winactivationkeyper" title="win11 activation key permanent" class="phpgenera_Details_mainR4_bottom_title">win11 activation key permanent</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>61</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/newyorktimesdailybrief" title="nyt connections hints and answers" class="phpgenera_Details_mainR4_bottom_title">nyt connections hints and answers</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>28</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>99</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/faq/zt">Show More</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796782759.html" title="What is the purpose of the &lt;progress&gt; element?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/21/2025032112342868456.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the purpose of the &lt;progress&gt; element?" /> </a> <a href="https://www.php.cn/faq/1796782759.html" title="What is the purpose of the &lt;progress&gt; element?" class="phphistorical_Version2_mids_title">What is the purpose of the &lt;progress&gt; element?</a> <span class="Articlelist_txts_time">Mar 21, 2025 pm 12:34 PM</span> <p class="Articlelist_txts_p">The article discusses the HTML &amp;lt;progress&amp;gt; element, its purpose, styling, and differences from the &amp;lt;meter&amp;gt; element. The main focus is on using &amp;lt;progress&amp;gt; for task completion and &amp;lt;meter&amp;gt; for stati</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796782758.html" title="What is the purpose of the &lt;datalist&gt; element?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/21/2025032112332857446.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the purpose of the &lt;datalist&gt; element?" /> </a> <a href="https://www.php.cn/faq/1796782758.html" title="What is the purpose of the &lt;datalist&gt; element?" class="phphistorical_Version2_mids_title">What is the purpose of the &lt;datalist&gt; element?</a> <span class="Articlelist_txts_time">Mar 21, 2025 pm 12:33 PM</span> <p class="Articlelist_txts_p">The article discusses the HTML &amp;lt;datalist&amp;gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796791823.html" title="Is HTML easy to learn for beginners?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174395586298618.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Is HTML easy to learn for beginners?" /> </a> <a href="https://www.php.cn/faq/1796791823.html" title="Is HTML easy to learn for beginners?" class="phphistorical_Version2_mids_title">Is HTML easy to learn for beginners?</a> <span class="Articlelist_txts_time">Apr 07, 2025 am 12:11 AM</span> <p class="Articlelist_txts_p">HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796782760.html" title="What is the purpose of the &lt;meter&gt; element?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/21/2025032112352661331.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the purpose of the &lt;meter&gt; element?" /> </a> <a href="https://www.php.cn/faq/1796782760.html" title="What is the purpose of the &lt;meter&gt; element?" class="phphistorical_Version2_mids_title">What is the purpose of the &lt;meter&gt; element?</a> <span class="Articlelist_txts_time">Mar 21, 2025 pm 12:35 PM</span> <p class="Articlelist_txts_p">The article discusses the HTML &amp;lt;meter&amp;gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &amp;lt;meter&amp;gt; from &amp;lt;progress&amp;gt; and ex</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796782318.html" title="What is the purpose of the &lt;iframe&gt; tag? What are the security considerations when using it?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/20/2025032018054766795.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the purpose of the &lt;iframe&gt; tag? What are the security considerations when using it?" /> </a> <a href="https://www.php.cn/faq/1796782318.html" title="What is the purpose of the &lt;iframe&gt; tag? What are the security considerations when using it?" class="phphistorical_Version2_mids_title">What is the purpose of the &lt;iframe&gt; tag? What are the security considerations when using it?</a> <span class="Articlelist_txts_time">Mar 20, 2025 pm 06:05 PM</span> <p class="Articlelist_txts_p">The article discusses the &amp;lt;iframe&amp;gt; tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796782305.html" title="What is the viewport meta tag? Why is it important for responsive design?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/20/2025032017560614263.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the viewport meta tag? Why is it important for responsive design?" /> </a> <a href="https://www.php.cn/faq/1796782305.html" title="What is the viewport meta tag? Why is it important for responsive design?" class="phphistorical_Version2_mids_title">What is the viewport meta tag? Why is it important for responsive design?</a> <span class="Articlelist_txts_time">Mar 20, 2025 pm 05:56 PM</span> <p class="Articlelist_txts_p">The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796792987.html" title="The Roles of HTML, CSS, and JavaScript: Core Responsibilities" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174411031220217.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="The Roles of HTML, CSS, and JavaScript: Core Responsibilities" /> </a> <a href="https://www.php.cn/faq/1796792987.html" title="The Roles of HTML, CSS, and JavaScript: Core Responsibilities" class="phphistorical_Version2_mids_title">The Roles of HTML, CSS, and JavaScript: Core Responsibilities</a> <span class="Articlelist_txts_time">Apr 08, 2025 pm 07:05 PM</span> <p class="Articlelist_txts_p">HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796791144.html" title="What is an example of a starting tag in HTML?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174386905283883.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is an example of a starting tag in HTML?" /> </a> <a href="https://www.php.cn/faq/1796791144.html" title="What is an example of a starting tag in HTML?" class="phphistorical_Version2_mids_title">What is an example of a starting tag in HTML?</a> <span class="Articlelist_txts_time">Apr 06, 2025 am 12:04 AM</span> <p class="Articlelist_txts_p">AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.</p> </div> </div> <a href="https://www.php.cn/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Public welfare online PHP training,Help PHP learners grow quickly!</p> </div> <div class="footermid"> <a href="https://www.php.cn/about/us.html">About us</a> <a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a> <a href="https://www.php.cn/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1745014484"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' 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 type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时,取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则,保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>