标签的选择

这么多篇文章下来,大家对如何进行页面布局想必已经有了自己的一些想法,特别是上周的文本样式的介绍,让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有什么问题的情况下,我们需要考虑的就是如何能够实现的更好,能够让我们做的页面代码精简度、性能让能够更符合我们的开发规范。所以今天我们着重的给大家来讲解一下如何选择标签,以最精简的代码实现我们的页面制作。

本文内容概要:

1 标签的默认样式

2 标签的语义性

3 标签的嵌套规则

4 标签的选用原则

5 合理选择标签的案例展示

一、标签的默认样式

通过这么长时间的页面制作,我们知道在每次制作的时候都需要引入一个叫做reset.css的CSS文件,当这个文件引入正确的时候,我们书写出来的每一个标签都是一模一样的。回顾我们前两周的文章,在那里我们看到了标签最原始的状态,都有着自己独特的展示状态。网页的结构是由许许多多的标签组成,标签可以分为块、行、第三类,我们在使用他们进行页面的搭建的时候,也是需要考虑它们在浏览器中的默认样式的。

标签默认展示状态如下:

  1. html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dt, dd, div, form, fieldset, legend, option, details, { display: block; }/*默认以块元素显示*/
  2. noscript, a, em, strong, small, var, b, u, br, ins, del, img, audio, video, source, canvas, label {display: inline; }/*默认以行元素显示*/
  3. li { display: list-item; }/*默认以列表显示*/
  4. head { display: none; }/*默认不显示*/
  5. table { display: table; }/*默认为表格显示*/
  6. tr { display: table-row; }/*默认为表格行显示*/
  7. thead { display: table-header-group; }/*默认为表格头部分组显示*/
  8. tbody { display: table-row-group; }/*默认为表格行分组显示*/
  9. tfoot { display: table-footer-group; }/*默认为表格底部分组显示*/
  10. col { display: table-column; }/*默认为表格列显示*/
  11. colgroup { display: table-column-group; }/*默认为表格列分组显示*/
  12. td, th { display: table-cell; }/*默认为单元格显示*/
  13. caption { display: table-caption; }/*默认为表格标题显示*/

二、标签的语义性

标签原始的默认样式会对我们的布局产生很大的影响,所以大家在进行页面布局的时候都需要引入reset.css文件来清除掉标签的默认样式,这样才会利于我们的布局。但是作为开发者的我们是明白这点,但是浏览器在解析的时候却无法这样进行区分,它只会知道你这个标签仍然有默认样式,只不过是被我们使用样式进行了覆盖。所以这时候我们为了让浏览器能够更好地解析页面,我们就需要了解一下标签的语义性,说白了就是标签自身的含义是什么。

接下来大家在一起看看吧~!

  1. div:无语义的布局标签;
  2. <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。
  3. <p>段落标记,<p></p>中的文字会自动换行;
  4. <b>标签语义为“加粗”;
  5. <i>标签寓意为“倾斜”;
  6. <em>标签语义为“强调”,表示用倾斜;
  7. <strong>标签语义为“更强烈的强调”,表示用粗体;
  8. <ul>标签语义为定义无序列表;
  9. <ol>标签语义为定义有序列表;
  10. <li>标签语义为定义列表项目;
  11. <dl>标签语义为定义了定义列表;
  12. <dt>标签语义为定义了定义列表中的项目;
  13. <dd>标签语义为定义列表中定义条目的定义部分;
  14. <span>标签的语义为被用来组合文档中的行内元素;
  15. <table>标签的语义的为定义 HTML 表格;
  16. <th>标签的语义为定义表格内的表头单元格;
  17. <caption>标签的语义为定义表格标题;
  18. <button>标签的语义为定义一个按钮;
  19. <input> 标签的语义为用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等;
  20. <textarea>标签的语义为定义多行的文本输入控件;
  21. <label>标签的语义为为input元素定义标注;
  22. <ins>标签的语义为定义已经被插入文档中的文本;
  23. <del>标签的语义为定义文档中已被删除的文本;

三、标签的嵌套规则

如上,我们看到了所有标签的含义是什么,也可以通过它们自身的语义性来做相应的选择,做好页面优化工作。所以在自己会选择标签了之后,小编再为大家整理了一个前端开发中需要遵守的标签嵌套规则。

具体如下:

  • 1) body可以直接包含块状元素、ins、del、script。不可以直接包含行内元素;
  • 2) ins和del(行内元素)可以包含块状元素或者行内元素,其他任何行内元素都不允许包含块状元素;
  • 3) p、和h1-h6可以直接包含行内元素和文本信息,但是不允许包含块状元素;
  • 4) dl元素只允许包含dtdd,同时dt不能包含块状元素,只允许包含行内元素,对于dd可以包含任何元素;
  • 5) form元素不能够直接包含input元素。原因在于input元素属于行内元素,form元素仅仅能够包含块状元素;
  • 6) table元素只能够包含caption、colgroup、col、thead、tbody、tfoot,不能够直接包含tr或者其他任何元素。

四、标签的选用原则

当我们明白了标签的默认样式、语义性、嵌套规则等之后,再来开始选择标签来进行页面布局就会轻松很多,因为这时候我们会发现很多东西前面准备好了,现在只需要直接参照着规则来进行使用即可。

那现在我们主要就从代码的精简度层面出发,给大家总结了一些在代码书写的时候需要注意的点。

1、去除不必要的html标签

  • 1) meta标签,除了其中的编码声明行,keyword与description,其余的都可以不要;
  • 2) link标签。通常用来载入css文件的,带上type=”text/css”即可,不用再加上那句rel=”stylesheet”;
  • 3) script标签,也只保留type,而无需使用language属性;
  • 4) 加载不需要视觉操作的元素上的属性,如link,script上的class,id等。

2、主动减少html标签

  • 1) 减少html标签嵌套:精简代码,是在确认了需求改动不频繁的前提下,能用1层标签的就不要用两层,然后通过css来达到相同的视觉效果;
  • 2) 尽量少使用内联css:就是style=”height..”这种。因为内联css每次都要加个style=,关键是它只能对此元素生效。不如用一个class代替,复用起来也方便;
  • 3) 合并css:把不需要判断条件载入的css文件给合并了,可以减少一个link标签,也就减少了一个http请求。

除这些标签的选用规则以外,在页面制作中,对于图片的选用也是至关重要的。因为背景图、数据图总是让人难以区分,所以接下来小编就给大家好好划分一下:

1、使用img标签

  • 1) 如果图像是内容的一部分或图表或人,使用img标签加上alt属性;
  • 2) 如果你想打印页面并且你想要的图像包括默认情况下使用img;
  • 3) 使用img(alt文本)图像有一个重要的语义时,比如一个警告图标;
  • 4) 如果依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用img;
  • 5) 如果配合 z-index 伸展背景图像来填补它的整个窗口时使用img;
  • 6) img会首先加载因为src在html文件本身中,而背景图是样式表中引入的图像,样式表加载后才出现。

2、使用background-image属性

  • 1) 如果图像不是内容的一部分时使用backgrond-image;
  • 2) 当图像代替文本使用时使用backgrond-image;
  • 3) 如果需要缩短下载时间,通过CSS sprites 时使用backgrond-image;
  • 4) 如果只需要展示图像的一部分,通过CSS sprites时使用backgrond-image;
  • 5) 如果需要为不同的屏幕分辨率展示不同的图像,使用 media查询时使用backgrond-image。

五、合理选择标签的案例展示

如下给出的两个案例是我们最常用的页面导航的制作,两种方式对应着两种标签的选择方法,各有各的特点。

制作导航栏,直接使用div~a的形式,减少层级的嵌套。如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>H5course</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
        .nav {
            width: 980px;
            height: 34px;
            margin: 20px auto 0;
            padding: 4px 0 0 88px;
            background: url("images/nav_bac.jpg") 0 0 repeat-x;
        }
        .nav a {
            float: left;
            height: 34px;
            padding: 0 15px;
            line-height: 34px;
            color: #fff;
        }
        .nav .active-nav, .nav a:hover {
            padding: 0 14px;
            border-left: 1px solid #ac1736;
            border-right: 1px solid #ac1736;
            background: url("images/nav_act_bac.jpg") 0 0 repeat-x;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a class="active-nav" href="" title="">首页</a>
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">HTML5学堂</a>
        <a href="" title="">HTML5学堂</a>
    </div>
</body>
</html>

制作导航栏,使用ul~li~a来实现,多嵌套一个层架,但是结构稳定。如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>H5course</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
        .nav {
            width: 980px;
            height: 34px;
            margin: 20px auto 0;
            padding: 4px 0 0 88px;
            background: url("images/nav_bac.jpg") 0 0 repeat-x;
        }
        .nav li a {
            float: left;
            height: 34px;
            padding: 0 15px;
            line-height: 34px;
            color: #fff;
        }
        .nav .active-nav, .nav li a:hover {
            padding: 0 14px;
            border-left: 1px solid #ac1736;
            border-right: 1px solid #ac1736;
            background: url("images/nav_act_bac.jpg") 0 0 repeat-x;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a class="active-nav" href="" title="">首页</a>
        </li>
        <li>
            <a href="" title="">HTML5学堂</a>
        </li>
        <li>
            <a href="" title="">HTML5学堂</a>
        </li>
        <li>
            <a href="" title="">HTML5学堂</a>
        </li>
        <li>
            <a href="" title="">HTML5学堂</a>
        </li>
        <li>
            <a href="" title="">HTML5学堂</a>
        </li>
        <li>
            <a href="" title="">HTML5学堂</a>
        </li>
        <li>
            <a href="" title="">HTML5学堂</a>
        </li>
        <li>
            <a href="" title="">HTML5学堂</a>
        </li>
        <li>
            <a href="" title="">HTML5学堂</a>
        </li>       
    </ul>
</body>
</html>

两组代码展示的效果是一致的,如下:

六、作业安排

拿出上次我们写的页面,查看自己对于标签的选用是否合理,如不合理需要怎么修改。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-06-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏木头编程 - moTzxx

HTML 图片映射<map>标签整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1084
来自专栏hightopo

基于 HTML5 的 WebGL 3D 智能楼宇监控系统

1383
来自专栏GIS讲堂

Openlayers3中SVG图加载

鉴于SVG的优势,在图层展示的时候,会想到SVG的方式,但是OL3里面只支持ImageStatic的方式加载,也就是只能加载栅格图片,为此,本文实现Openla...

1164
来自专栏姬小光

小鸡君の前端小姜汤【第015期】- 绝对定位

前面我们学过了“表格布局”(回复 007 或 7)的简单栗子,如果大家用心尝试的话,应该已经可以做出一些粗糙的页面了。

581
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(八)CSS3三个案例

而分辨率则一般用像素来度量 px,表示屏幕水平和垂直方向的像素数,例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

911
来自专栏施炯的IoT开发专栏

美化Windows Mobile上的自定义数据表

    前段时间做实验室项目,需要以报表的形式将数据展示给用户。首先想到的是visual studio自带的listview,用起来是比较方便,可是看着不美观,...

1736
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(一)屏幕相关基本知识,调试,视口,屏幕适配

而分辨率则一般用像素来度量 px,表示屏幕水平和垂直方向的像素数,例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

552
来自专栏进步博客

纯CSS实现响应式表格

自从转岗至腾讯云后,项目中接触到大量的数据表格。多列数据表格在空间有限的手机屏幕下,难以完美呈现,需要做响应式处理。本文介绍一种使用纯CSS实现响应式表格的方法...

872
来自专栏安富莱嵌入式技术分享

【安富莱二代示波器教程】第8章 示波器设计—测量功能

二代示波器测量功能实现比较简单,使用2D函数绘制即可。不过也专门开辟一个章节,为大家做一个简单的说明,方便理解。

702
来自专栏HTML5学堂

几个前端工程师应当掌握的“词语”

HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,...

3396

扫码关注云+社区