前端学习——HTML（二），标签查询、常见的标签举例

本文链接：https://blog.csdn.net/Wby_Nju/article/details/104090444

本文主要探讨了前端HTML中的div标签在页面布局中的作用，以及h1到h6、p、span、strong、em等文本相关标签的使用。此外，还介绍了ul、li、ol、dl、dt、dd如何构建各种列表，并讲解了form表单相关标签在处理用户输入时的重要角色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

div
h1~h6, p, span, strong, em...
ul, li, ol, dl, dt, dd
form表单相关

前置资料：前端学习——HTML（一）
参考资料： HTML常用标签
H5标签查询：查询地址
HTML5教程：教程地址

div

div标签用于组合其他HTML元素，本身无实在意义。常用于页面的布局，比如一个展开式的广告页面框架大致如下：

<body>
    <div id="wrap-container">
        <div id="collapsed-container"></div>
        <div id="expanded-container"></div>
    </div>
</body>

h1~h6, p, span, strong, em…

<div id="legal-window">
    <h4>LEGAL</h4>
    <img id="legal-close" src="https://www.legalclose.com/wp-content/uploads/2019/02/logo.png" alt="close window">
    <p>*Requires a system with Intel<sup>&reg;</sup> Turbo Boost Technology. Intel<sup>&reg;</sup> Turbo Boost Technology and Intel<sup>&reg;</sup> Turbo Boost Technology 2.0 are only available on select Intel<sup>&reg;</sup> processors. Consult your PC manufacturer. Performance varies depending on hardware, software, and system configuration. For more information, visit http://www.intel.com/go/turbo. Copyright &copy; 2014 Intel Corporation. All rights reserved. Intel, the Intel logo, Intel Core, Look Inside, Intel Inside, and Pentium are trademarks of Intel Corporation in the U.S. and/or other countries. Other names and brands may be claimed as the property of others.</p>
</div>

在这里插入图片描述

ul, li, ol, dl, dt, dd

此类标签用于设置带有列表内容的，比如导航栏的下拉菜单，多视频的缩略图等：
在这里插入图片描述

<ul class="nav-tools-list">
    <li>
        <div>
            <img src="https://gw.alipayobjects.com/zos/rmsportal/xwaMkpycAdwCBrdgyWiT.png" 

alt="">
            <span>Build & Price</span>
        </div>
    </li>
    <li>
        <div>
            <img src="shoppingtools-icon-2.png" alt="">
            <span>Incentives & Offers</span>
        </div>
    </li>
    <li>
        <div>
            <img src="shoppingtools-icon-3.png" alt="">
            <span>Request a Local Quote</span>
        </div>
    </li>
    <li>
        <div>
            <img src="shoppingtools-icon-4.png" alt="">
            <span>Search Dealer Inventory</span>
        </div>
    </li>
</ul>

在这里插入图片描述

form表单相关

页面中涉及到表单时候，需要使用到form相关标签：

<form name="frm-sample" class="frm-sample" action="try" method="post">
    <input type="text" class="form-control" placeholder="Name">
    <div id="status-message"></div>
    <div id="sample-captcha"></div>
    <a id="check-is-filled" class="info-btn">Check if visualCaptcha is filled</a>
    <button type="submit" name="submit-bt" class="submit">Submit form</button>
</form>

在这里插入图片描述