zoukankan      html  css  js  c++  java
  • HTML5标签(语义化)

    HTML语义化是什么?

    HTML语义化是指根据内容的结构化,选择合适的标签。举个例子:之前所有的都用div, span等标签实现页面结构,而这些标签都没有实际的意义,

    而新的HTML5标签<header> <footer> <nav> <section> <article> <aside> 等这些标签的出现与使用,让人一目了然的知道页面结构是什么样的,哪些内容是主题部分,这就是HTML语义化的好处。

    语义化的好处:

    1. 有利于SEO,有利于爬虫抓取有效的信息(爬虫是依赖于标签来确定上下文各个关键词的权重,爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.)

    2. 在没有css或者css缺失的情况下,也能呈现较好的内容结构和代码结构

    3.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页.(例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.)

    4. 方便各种不同设备的解析

    5. 有利于团队代码的开发与维护

    HTML5标签:

    header通常是放于页面头部,相关的还有<hgroup>

    <header>
        <hgroup>
            <h1>网站标题</h1>
            <h2>网站副标题</h2>
        </hgroup>
    </header>

    footer通常位于页面底部,放版权信息和相关链接等

    <footer>
        CopyRight@
    </footer>

    nav主要是页面导航区

    <nav>
        <ul>
            <li>HTML 5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
        </ul>
    </nav>

    aside用于主题article的附属信息

    <article>
        <p>内容</p>
        <aside>
            <h1>侧栏标题</h1>
            <p>侧边栏内容</p>
        </aside>
    </article>

    其他的一些标签:

    section表示节,段,部分,i表示斜体,em标签表示强调,显示为斜体,b标签表示的文本风格不同于正常的文本,没有表达任何特殊的重要性和相关性,strong标签表示加粗强调重要性

                           

  • 相关阅读:
    react className 有多个值时的处理 / react 样式使用 百分比(%) 报错
    更改 vux Tabbar TabbarItem标题下方的文字激活时的颜色
    angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
    angular 资源路径问题
    webpack 项目实战
    百度地图 创建 自定义控件(vue)
    function 之 arguments 、call 、apply
    手写 redux 和 react-redux
    ARC以及MRC中setter方法的差异
    运行时中给一个对象绑定另外一个对象
  • 原文地址:https://www.cnblogs.com/leiting/p/8204091.html
Copyright © 2011-2022 走看看