运用H5新标签重构旧项目时的思索

2023年7月31日 227次阅读 来源: duck2u

经常运用H5构造标签

在HTML 5中，为了处置惩罚文档构造不够清楚、明白，追加了许多跟构造相干的元素。

header元素

header元素是一种具有指导和导航作用的构造元素，通经常运用来安排全部页面或页面内的一个内容区块的题目，但也可以包含其他内容，比方数据表格、搜刮表单或相干的LOGO图片。

nav元素

nav元素是一个可以用来作为页面导航的链接组，个中的导航元素链接到其他页面或当前页面的其他部份。

main元素

main元素示意网页中的主要内容。主要内容地区指与网页题目或运用程序中本页面主要功用直接相干或举行扩大的内容。

section元素

section元素用来对网站或运用程序中页面上的内容举行分块，一个section元素平常由内容及其题目构成。

article元素

article元素代表文档、页面或运用程序中自力的、完全的、可以单独被外部援用的内容。

aside元素

aside元素用来示意当前页面或文章的隶属信息部份，它可以包含当前页面或主要内容相干的援用、侧边栏、广告、导航条，以及其他相似的有别于主要内容的部份。

footer元素

footer元素可以作为其上层父级内容区块或一个根区块的脚注。footer平常包含其相干区块的脚注信息，如作者、相干浏览链接以及版权信息等。

新标签怎样向下兼容

兼容HTML 5新增构造元素和媒体查询

因为IE8及更早的IE浏览器不能剖析HTML 5新增的构造元素，所以须要经由过程document.createElement来建立并设置默许款式display:block来举行兼容处置惩罚。另有更简朴的方法就是引入html5shiv，其道理相似。

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->

IE浏览器须要respond.js合营才完成对媒体查询（media query）的支撑。

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

然则，要注意以下几点：

  • respond.js与跨域css的题目须要分外做一些跨域的设置。
  • respond.js不能在经由过程file://协定接见的页面上发挥平常的功用，务必经由过程http（https）协定接见页面。
  • respond.js不支撑@import引入的css文件。

上面的计划处置惩罚了HTML 5新增构造元素和媒体查询的兼容题目，与此同时，只管直接让IE浏览器运转最新的衬着形式。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

如果是国内的浏览器，平常都同时支撑兼容形式（IE内核）和高速形式（webkit内核），可以经由过程以下体式格局让国产浏览器默许采纳高速形式衬着页面。

<meta name="renderer" content="webkit">

不要运用section、article作为div的替代品

在运用HTML 5新增构造标签的过程当中，新的构造标签可以较快的规划出页面骨架（skeleton），HTML代码的可读性和清楚度大大的进步，然则它们仅限于协助构建文档提要的语义部份，如果是款式容器照样继承运用div。

    <article>
        <header>
            <h1>title</h1>
            <p>abstract</p>
        </header>
        <p>content</p>
        <section>
            <h2>comments</h2>
            <article>
                <header>
                    <div class="avatar"></div>
                    <h3>username</h3>
                </header>
                <p>content</p>
            </article>
            <article>
                <header>
                    <div class="avatar"></div>
                    <h3>username</h3>
                </header>
                <p>content</p>
            </article>
        </section>
    </article>

CSS挑选器效力题目

对我们大多数人来讲，CSS挑选器并不生疏。最基本的元素挑选器（比方div）、ID挑选器（比方#id）、类挑选器（比方.class）在CSS代码中常经常运用到，另有一些偶然用到的兄弟挑选器（比方h2+p）、子挑选器（比方ul>li）、通用挑选器（*）。诸多的挑选器范例致使挑选同一个DOM元素的挑选器会有多种，至于挑选哪一种，可以从高效的角度斟酌来构成日常平凡编写CSS挑选器的范例。

单个挑选器

单个CSS挑选器的效力从高到低的排序以下：

  1. ID挑选器（#id）
  2. 类挑选器（.class）
  3. 元素挑选器（div）
  4. 兄弟挑选器（h2+p）
  5. 子挑选器（ul>li）
  6. 子女挑选器（ul li a）
  7. 通配符挑选器（*）
  8. 属性挑选器（type=’text’）
  9. 伪类/伪元素挑选器（a:hover）

组合挑选器

然而在现实运用场景中，更多用到是的组合挑选器。组合挑选器在被浏览器剖析的时刻是从右到左的体式格局，所以组合挑选器里最右侧的挑选器（症结挑选器）在效力方面起决定性作用，如许就可以依据单个挑选器的效力挑选在症结挑选器处运用哪一种范例的挑选器了。

#links a {...}
#links a.link {...}

明显，症结挑选器中a.link类挑选器会比a标签挑选器婚配更少的元素，浏览器可以更快的找到它们并衬着。

html body .wrapper #nav li a {...}

然则，要防止像上面如许过分限定挑选器，不然浏览器将消费更多的时候。

    原文作者：duck2u
    原文地址: https://segmentfault.com/a/1190000015793082
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞