重学前端
程劭非(winter)
前手机淘宝前端负责人
105347 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

HTML语义:如何运用语义类标签来呈现Wiki网页?

class="note"
HTML语义标签表示
熟悉的语义标签
建议
争议
谨慎使用语义标签
pre, samp, code
nav, ol, ul
dfn
figure, figcaption
time
blockquote, q, cite
strong
p
hr
abbr
hgroup, h1, h2
article
aside
论文格式
总结
Wikipedia文章分析
好处和场景
HTML语义类标签

该思维导图由 AI 生成,仅供参考

你好,我是 winter,今天我们继续来聊聊 HTML 模块的语义类标签。
在上一篇文章中,我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么,哪些场景适合用到语义类标签呢,又如何运用语义类标签呢?
不知道你还记不记得在大学时代,你被导师逼着改毕业论文格式的情景,如果你回想一下,你在论文中使用的那些格式,你会发现其实它们都是可以用 HTML 里的语义标签来表示的。
这正是因为 HTML 最初的设计场景就是“超文本”,早期 HTML 工作组的专家都是出版界书籍排版的专家。
所以,在这一部分,我们找了个跟论文很像的案例:Wikipedia 文章,这种跟论文相似的网站比较适合用来学习语义类标签。通过分析一篇 Wiki 的文章用到的语义类标签,来进一步帮你理解语义的概念。
你可以在电脑上,打开这个页面:
为了防止这个页面被修改,我们保存了一个副本:
这是一篇我们选择的 Wiki 文章,虽然在原本的 Wikipedia 网站中,也是大量使用了 div 和 span 来完成功能。在这里,我们来尝试分析一下,应该如何用语义类标签来呈现这样的一个页面 / 文章。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入介绍了如何运用HTML语义类标签来呈现Wiki网页的内容。通过分析Wikipedia文章中使用的语义类标签,作者帮助读者理解语义的概念,并详细介绍了侧边栏、文章主体、标题、缩写、横线、注记、重要词语、引述、日期、图片、定义、目录、预先编写好的段落等内容在HTML中的语义表示方法。通过对每个部分的分析和示例代码,读者可以清晰地了解如何使用语义类标签来呈现不同类型的内容,从而提高网页的可读性和可访问性。文章内容详实,适合想要深入了解HTML语义类标签运用的读者阅读学习。文章还提到了HTML工作组对语义标签的增加是非常谨慎和保守的,以及对语义标签的使用建议,为读者提供了更多实用的指导。文章内容丰富,对于想要提升网页可读性和可访问性的开发者和设计师来说,是一篇值得深入阅读的技术文章。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(122)

  • 最新
  • 精选
  • wangzy
    语义化标签的一些点可能会降低开发者的使用欲望 1.有些标签可能还不知道就已经过时了 2.很多语义标签自带样式,而这些样式我们并不需要,所以还要先取消默认样式。 3.现代网页已经不再是按照书籍排版的结构来的,很多页面元素并不容易明确应该使用哪个语义标签。

    作者回复: 对,你讲的这三点都很准,跟我的感受很接近。尤其是3,我觉得至少有一半内容不知道用啥标签好。

    2019-10-23
    43
  • silver6wings
    在未来高度自动化后,设计师编辑好的矢量图文件可以自动生成前端代码的技术产生之后,这门手艺是否还会需要,还是会变得像手工刺绣一样仅仅是一项娱乐运动,这点大佬您怎么看?

    作者回复: 没你想的那么简单,像你说的那个程度Dreamweaver早就做到了,矢量图没有正确的语义,不带排版信息,也不会替你做交互,这几样才是前端的主要工作。

    2019-02-19
    4
  • 朋克是夏天的冰镇雪碧
    看到文中说 cite 标签表示引述的作品名,一下子有点没理解这句话是什么意思,然后自己去搜了搜,看到有人说可以把 cite 标签理解为书名号,豁然开朗。

    作者回复: 然而这个说法是错的。 cite的意思是你引用了作品中的片段或者观点。不是所有提到作品的地方都可以用cite。典型的场景是论文的引用关系。

    2019-07-29
  • Anoxia.苏
    两个wiki的页面,一个无法打开,一个打开后显示not found 极客时间版权所有: https://time.geekbang.org/column/article/78168

    编辑回复: 我刚试了一下,显示能打开呀。

    2019-02-27
  • Semantha
    这篇文章中的好多标签都没用过。。。

    作者回复: 没关系,不用追求使用新奇的标签,记住几个用几个,慢慢会的就多了。

    2019-02-23
  • 孤舟【Evelyn】
    请问是几个模块交叉来讲的吗?还是html部分已经结束?

    编辑回复: 交叉着来哈

    2019-02-18
  • 一直都在
    老师,html5的新的标签兼容都不是很好,很多低版本的浏览器都不支持(那应该如何去语义化文本文档结构呢,我一般是写注释,您有什么好的建议呢?)

    作者回复: 如果确实有兼容IE8及以下的需求,建议不写新标签。 不过现在这样的业务应该非常少了,我从2012年做移动端已经没有过这方面的困扰。

    2019-02-15
  • 扇子
    winter老师能不能提供下与课程对应的实际的源码供我们进一步详细学习呢?

    作者回复: 哈哈,我没有写源码,自己写写看吧,理论上学完自己可以写出来哟。

    2019-02-15
  • ClarenceC
    突然觉得 html 语义标签,有点像 markdown 语法,都是用一个标签去表达一个文本的意思和作用。请求一下 winter 大大,因为现在我们一般都是使用 div span 搭建结构,语义标签的实用场景在那里呢?移动端和 pc端会不会有所不同啊?

    作者回复: 本质上两者都是富文本的描述。 语义标签的应用场景我在html第一篇就讲了。

    2019-02-13
  • LeonZhang
    最后的表格当中date写错成data了

    编辑回复: 您好 老师说就是data哈

    2019-01-26
收起评论
显示
设置
留言
99+
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部