zoukankan      html  css  js  c++  java
  • 关于语义类标签新理解

    初衷:

    本篇是看过极客时间里winter老师的文章《04 | HTML语义:如何运用语义类标签来呈现Wiki网页?》写的。
    由于叶叶从事的工作原因,单纯写静态页面并非自己常态化工作,更多的是实现其中业务逻辑,于是便忽略了HTML的学习,直到看到这篇文章后,才意识到自己懂得真心少。

    内容:

    1.什么是HTML语义化?

    简单理解就是:用恰当的HTML标签、class类名,让机器和人快速理解网页内容。

    2.HTML语义化的好处?

    • 益于开发和维护;
    • 增加可阅读性,使页面更加结构化;
    • 利于SEO搜索引擎检索……

    3.常见的HTML语义化标签有哪些?

    body, article, nav, aside, section, header, footer, hgroup,h1-h6、address等

    4.划重点

    group: 标签用于对网页或区段(section)的标题进行组合(标题组);例:

    <hgroup>
      <h1>Welcome to my WWF</h1>
      <h2>For a living planet</h2>
    </hgroup>
    
    <p>The rest of the content...</p>
    

    abbr:标签指示简称或缩写,比如 "WWW" 或 "NATO"。
    通过对缩写进行标记,您能够为浏览器、拼写检查和搜索引擎提供有用的信息。
    此标签最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。
    小技巧:可以在 标签中使用全局的 title 属性,这样就能够在鼠标指针移动到 元素上时显示出简称/缩写的完整版本。例:

    The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
    

    hr与 VS 下边框?
    hr:标签在 HTML 页面中创建一条水平线。
    水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。
    但是阅读文章后,才意识到原来hr标签也表示故事走向的转变或者话题的转变。于是在选择hr或者使用border 的CSS时,也就有所区分了。例:

    <h1>This is header 1</h1>
    <hr />
    <p>This is some text</p>
    

    关于blockquote, q, cite 引用标签的使用???

    不得不承认,叶叶居然是第一次看见这三个标签。真感觉瑟瑟发抖……仔细看了一下MDN以及各种文档,最后还是不太清楚,
    它是怎么实现鼠标点击上去,弹出右上角的提示框,类似于a标签的title属性。
    如果有清楚的同学,麻烦告诉叶叶一声,不胜感谢! 至于它的使用,等叶叶熟悉了,再来补充。


    5.附上一张图:

    6.传送门

    结语:

    在实际生产中,我们需要用对的语义标签,用好语义标签,万一不懂、不会的,不用也是最佳的方案。最后,叶叶还是保持一颗“空杯心态”继续学习。

  • 相关阅读:
    使用非ServiceDependency方法获得模块中已注册的服务
    一个比较有效的存储过程命名规则
    SQL重复记录查询
    Redis命令行启动,修改密码
    springboot+dubbo后端打包成jar并运行
    开发问题:NOAUTH Authentication required
    @Api报错
    String的indexof使用
    开发报错:init datasource error, url: jdbc:mysql://localhost:3306/book(初始化数据库错误)
    开发问题:异常Required request body is missing
  • 原文地址:https://www.cnblogs.com/zhengyeye/p/10338967.html
Copyright © 2011-2022 走看看