dw旅游网站设计教程,高端品牌内衣有哪些牌子,html5 网站建设,平台设计标准HTML语义#xff1a;如何运用语义类标签来呈现Wiki网页
在上一篇文章中#xff0c;我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么#xff0c;哪些场景适合用到语义类标签呢#xff0c;又如何运用语义类标签呢#xff1f;
不知道你还记不记得在大…HTML语义如何运用语义类标签来呈现Wiki网页
在上一篇文章中我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么哪些场景适合用到语义类标签呢又如何运用语义类标签呢
不知道你还记不记得在大学时代你被导师逼着改毕业论文格式的情景如果你回想一下你在论文中使用的那些格式你会发现其实它们都是可以用 HTML 里的语义标签来表示的。
这正是因为 HTML 最初的设计场景就是“超文本”早期 HTML 工作组的专家都是出版界书籍排版的专家。
所以在这一部分我们找了个跟论文很像的案例Wikipedia 文章这种跟论文相似的网站比较适合用来学习语义类标签。通过分析一篇 Wiki 的文章用到的语义类标签来进一步帮你理解语义的概念。
你可以在电脑上打开这个页面
https://en.wikipedia.org/wiki/World_Wide_Web
为了防止这个页面被修改我们保存了一个副本
World Wide Web - Wikipedia
这是一篇我们选择的 Wiki 文章虽然在原本的 Wikipedia 网站中也是大量使用了 div 和 span 来完成功能。在这里我们来尝试分析一下应该如何用语义类标签来呈现这样的一个页面 / 文章。
我们看一下这个页面。
aside 首先我们来看下左侧侧边栏根据上一篇文章中提到的语义定义这里属于 aside 内容。是导航性质的工具内容。
article 我们来到文章主体部分因为主体部分具有明确的独立性所以可以用 article 来包裹。
hgroup, h1, h2
在语义的上一篇文章中我们介绍过 hgroup 和 h1-h6 的作用hgroup 是标题组h1 是一级标题h2 是二级标题。这里World Wide Web 是文章的大标题适合 h1 元素。
接下来出现了一个副标题。From Wikipedia, the free encyclopedia。这个地方适合使用 h2跟 h1 组成一个 hgroup所以代码可能是类似这样的:
hgrouph1World Wide Web /h1h2From Wikipedia, the free encyclopedia/h2/hgroup
hr 学会发现在 Wiki 的界面中出现了一条很长的横线大家都知道 hr 标签表示横向分隔线那么这个地方是不是应该用 hr 呢 答案是不用。我们读一下标准的定义就知道了hr 表示故事走向的转变或者话题的转变显然此处两个标题并非这种关系所以我们应该使用 CSS 的 border 来把它当作纯视觉效果来实现所以这里是不需要用 hr 的。
p 接下来一段我们看到了三段“note”也就是注记。它在文章中用作额外注释。 “WWW” and “The Web” redirect here. For other uses of WWW, see WWW (disambiguation). For other uses of web, see Web (disambiguation). For the first web software, see WorldWideWeb. Not to be confused with the Internet. HTML 中并没有 note 相关的语义所以我们用普通的 p 标签加上classnote来实现。后面的多数自然段都是普通的段落我们用 p 标签来实现。
strong 注意这里 “World Wide Web (WWW)” 和 “the Web” 使用了黑体呈现从上下文来看这里表示这个词很重要所以我们使用 strong 标签。
p A global map of the web index for countries in 2014strongThe World Wide Web (WWW)/strong, also called strongthe Web/strong,
......
blockquote, q, cite 接下来我们看到了一个论文中很常见的用法“引述”。 interlinked by hypertext links, and accessible via the Internet.[1] 注意看这里的[1]当我们把鼠标放上去的时候出现了引述的相关信息 “What is the difference between the Web and the Internet?”. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015. 在 HTML 中有三个跟引述相关的标签 blockquote 表示段落级引述内容q 表示行内的引述内容cite 表示引述的作品名。
这里的作品名称 “What is the difference between the Web and the Internet?”应当使用 cite 标签。
citeWhat is the difference between the Web and the Internet?/cite. W3C Help and FAQ. W3C. 2009. Archived from the original on 9 July 2015. Retrieved 16 July 2015.
在文章的结尾处有对应的 References 一节这一节中所有的作品名称也应该加入 cite 标签。 这里我们看看引用的原文就可以知道Wiki 文章中的信息并非直接引用如果是直接引用的内容那么我们还应该加上 blockquote 或者 q 标签。
此外还有time、figure, figcaption、dfn、nav, ol, ul、pre, samp, code的解释请移步
开发者网站--做一个wiki页面是体验HTML语义的好方法
