• html5标签及语义化


    html5标签

    结构标签:

    article标记定义一篇文章
    header标记定义一个页面或一个区域的头部
    nav标记定义导航链接
    section标记定义一个区域
    aside标记定义页面内容部分的侧边栏
    hgroup标记定义文件中一个区块的相关信息
    figure标记定义一组媒体内容以及它们的标题

    figcaption标签定义 figure 元素的标
    footer标记定义一个页面或一个区域的底部
    dialog标记定义一个对话框(会话框)类似微信

    多媒体交互标签

    video标记定义一个视频
    audio标记定义音频内容
    source标记定义媒体资源
    canvas标记定义图片
    embed标记定义外部的可交互的内容或插件 比如flash

    Web应用标签

    menu命令列表
    menuitemmenu命令列表标签 FF(嵌入系统
    commandmenu标记定义一个命令按钮
    meter状态标签(实时状态显示:气压、气温)C、O
    progress状态标签 (任务过程:安装、加载) C、F、O
    datalist为input标记定义一个下拉列表,配合option F、O
    details标记定义一个元素的详细内容 ,配合dt、dd C

    注释标签

    ruby 标记定义 注释或音标
    rp告诉那些不支持 Ruby元素的浏览器如何去显示
    rt标记定义对ruby的注释内容文本

    其他标签

    keygen标记定义表单里一个生成的键值(加密信息传送)O、F
    mark标记定义有标记的文本 (黄色选中状态)
    output标记定义一些输出类型,计算表单结果配合oninput事

    删除的HTML标签

    纯表现的元素: basefont,big,center,font, s,strike,tt,u;

    对可用性产生负面影响的元素: frame,frameset,noframes;

    产生混淆的元素: acronym ,applet,isindex,dir

    重新定义的HTML标签

    b代表内联文本,通常是粗体,没有传递表示重要的意思
    i代表内联文本,通常是斜体,没有传递表示重要的意思
    dd可以同details与figure一同使用,定义包含文本,dialog也可用
    dt可以同details与figure一同使用,汇总细节,dialog也可用
    hr表示主题结束,而不是水平线,虽然显示相同
    menu重新定义用户界面的菜单,配合commond或者menuitem使用
    small表示小字体,例如打印注释或者法律条款
    strong表示重要性而不是强调符号

    语义化的HTML结构的好处

    1.去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的,我们看到例如h1是粗体,字体大小2em,加粗;strong是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和语义化的HTML结构是不可分割的

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

    3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱.

    使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况(包括现有的或者将来新的设备).例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

    4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重. 过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

    5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记。

    因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为.SEO主要还是靠你网站的内容和外部链接的。

    6.便于团队开发和维护 W3C给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

  • 相关阅读:
    spring@Async注解实现异步方法调用
    mysql锁机制
    springboot启动时执行任务CommandLineRunner
    java-并发编程之fork/join框架
    mysql explain 执行计划详解
    mysql 时间相关sql , 按天、月、季度、年等条件进行查询
    swagger2 常用注解说明
    VirtualBox 安装CentOS虚拟机网卡配置
    RestFul是啥
    文本内文字字数过多,显示省略号
  • 原文地址:https://www.cnblogs.com/tang-lei/p/4641281.html
Copyright © 2020-2023  润新知