重学前端学习笔记（四）--div和span不是够用吗？

ctriptech 发布于2019-08-23 17:10 / 3292人阅读

摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

HTML语义：div和span不是够用了吗？ 一、语义类标签是什么，使用它有什么好处？ 1、语义类标签

语义类标签就是尽量使用有相对应的结构的含义的Html的标签

2、好处

对开发者友好，增加可读性，网页结构清晰，便于开发维护

利用SEO，爬虫...

3、使用语义标签的建议

“用对”比“不用”好，“不用”比“用错”好。

二、作为自然语言延伸的语义类标签

作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义

winter举了两个例子：html5中的ruby标签，em标签来进行说明

比如em标签例子

把“今天我吃了一个苹果”这句话放到不同上下文中，表达的意思会不同

昨天我吃了一个香蕉。
今天我吃了一个苹果。

昨天我吃了两个苹果。
今天我吃了一个苹果。

是不是感觉不同，当没有上下文的时候，可以用em标签

今天我吃了一个  苹果 。
今天我吃了  一个  苹果。

三、作为标题摘要的语义类标签 语义化的 HTML 能够支持自动生成目录结构，HTML 标准中还专门规定了生成目录结构的算法

例如：

HTML 语义

balah balah balah balah

弱语义

balah balah

结构性元素

balah balah

......

h1-h6是最基本的标题，它们表示了文章中不同层级的标题。避免副标题可以使用html5的hgroup标签

JavaScript 对象

我们需要模拟类吗？

balah balah

......

生成标题结构如下

JavaScript 对象

我们需要模拟类吗？

...

JavaScript 对象

我们需要模拟类吗？

balah balah

......

生成标题结构如下

JavaScript 对象——我们需要模拟类吗？

...

section标签的嵌套会使h1-h6下降一级


    HTML 语义 
    balah balah balah balah
    
         弱语义 
        balah balah
    
    
         结构性元素 
        balah balah 
    
......

标题结构如下

HTML 语义

弱语义

结构性元素

......

四、作为整体结构的语义类标签 正确使用整体结构类的语义标签，可以让页面对机器更友好

个人总结

HTML并不简单，它是典型的“入门容易，精通困难”的一部分知识，我在看这篇文章的时候，就发现自己有些东西是没有留意的，查漏补缺很重要，一步一步完善自己的知识架构。

云服务器混合云笔记本硬盘和台式机硬盘一样吗前端开发买云服务器多少配置够用学习笔记云服务器流量够用吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103920.html

重学前端学习笔记（四）--div和span不是够用吗？

摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

lx1036 2019-08-02 16:15 评论0 收藏0
重学前端学习笔记（四）--div和span不是够用吗？

摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

wemall 2019-08-05 16:50 评论0 收藏0
重学前端学习笔记（四）--div和span不是够用吗？

摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

KnewOne 2019-08-29 18:42 评论0 收藏0
重学前端学习笔记（二十二）--选择器的机制

摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...

acrazing 2019-08-02 16:18 评论0 收藏0
重学前端学习笔记（二十二）--选择器的机制

摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...

jeffrey_up 2019-08-26 13:52 评论0 收藏0