码迷,mamicode.com
首页 > Web开发 > 详细

HTML常用标签及HTML语义化理解

时间:2018-07-31 15:36:45      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:select   container   页面   stat   exp   hold   网络   format   mit   

HTML常用标签

作为一名准前端开发工程师,虽然我们可以在遇到不熟悉的HTML标签时查询MDN,但是我们也应该记住大部分常用HTML标签的用法,以免影响工作效率。

以下就是我通过网络资料整理的HTML常用标签及其用法,希望能帮助到更多新入门的同学,而且也可以梳理一下自身关于HTML的知识体系,达到巩固知识的作用。

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...

此类标签用于设置文本,常见的使用方式是填充段落,比如弹出的legal框文字HTML结构如下:

<div id="legal-window">
    <h4>LEGAL</h4>
    <img id="legal-close" src="img/embed/legal-close.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>

其中要注意一下的是bstrong
b表示样式上的加粗
strong表示内容重要,起强调作用

ul, li, ol, dl, dt, dd

此类标签用于设置带有列表内容的,比如导航栏的下拉菜单,多视频的缩略图等:

<ul class="nav-tools-list">
    <li>
        <div>
            <img src="shoppingtools-icon-1.png" >
            <span>Build & Price</span>
        </div>
    </li>
    <li>
        <div>
            <img src="shoppingtools-icon-2.png" >
            <span>Incentives & Offers</span>
        </div>
    </li>
    <li>
        <div>
            <img src="shoppingtools-icon-3.png" >
            <span>Request a Local Quote</span>
        </div>
    </li>
    <li>
        <div>
            <img src="shoppingtools-icon-4.png" >
            <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>

a

a标签用于打开链接,发送邮件,段落跳转等功能。使用时需要注意阻止掉标签的默认事件。

链接跳转,常见的关于分享按钮的HTML结构如下:

<div id="shareBox">
    <ul>
        <li id="facebook">
            <a target="_blank" rel="nofollow" data-shareWay="facebook">
                <img alt="Post on Facebook" src="img/embed/f4Icon3.png" alt="Facebook" />
            </a>
        </li>
        <li id="twitter">
            <a target="_blank" rel="nofollow" data-shareWay="twitter">
                <img alt="Tweet this" src="img/embed/f4Icon4.png" />
            </a>
        </li>
        <li id="pinterest">
            <a data-pin-do="buttonPin" data-pin-config="none" target="_blank" rel="nofollow" data-shareWay="pinterest">
                <img alt="Pin it" src="img/embed/f4Icon5.png" />
            </a>
        </li>
        <li id="email">
            <a target="_blank" rel="nofollow" data-shareWay="email">
                <img src="img/embed/f4Icon6.png" />
            </a>
        </li>
    </ul>
    <p></p>
</div>

有时候我们碰到一种需求,要求a链接点击之后不产生任何动作
JavaScript伪协议了解一下。

关于HTML标签的理解,我们还应该注意到一点,就是他的语义化。

语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。

比如说,我们需要创建一个导航栏,那么,我们应该新建一个div吗,不,这样会导致结构混乱不好分辨,我们应该用nav标签来创建导航栏,nav就是navigation,导航的意思,这样更有利于页面的内容结构化,方便维护和阅读。

从这一方面来说,学习HTML就是学习英语的过程,我们只有了解一个标签的定义,才会只知道该怎么去使用他。

HTML常用标签及HTML语义化理解

标签:select   container   页面   stat   exp   hold   网络   format   mit   

原文地址:https://www.cnblogs.com/No-harm/p/9395318.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!