资讯专栏INFORMATION COLUMN

HTML语义化

sixleaves / 2001人阅读

摘要:头部主标题副标题举例信息科技有限公司首页客户案例技术服务关于我们联系我们学习之语义化标签正文什么是语义化标签语义化标签就是学习之语义化标签正文版权所有伪版必究框架框架是指以语言为基础搭建的编程框架。

HTML语义化 HTML
引入语义化标签的好处主要有下列三点:

比div标签有更加丰富的含义,方便开发与维护

搜索引擎能更方便的识别页面的每个部分

方便其他设备解析(如移动设备、盲人阅读器等)

div元素被替换成新的元素:header 页眉, nav 导航, section 区块, article 文章, aside 侧边栏, footer 页脚

HTML5结构代码

    
...
...
...

语义化标签
标签 语义 用法
header 标签定义文档的页眉(介绍信息)。 通常被放置在页面或者页面中某个区块元素的顶部,包含整个页面或者区块的标题、简介等信息,起到引导与导航的作用。
nav 表示页面的导航,可以通过导航连接到网站的其他页面,或者当前页面的其它部分。 nav 标签一般只用于页面的主要导航部分
aside 所包含的内容不是页面的主要内容、具有独立性,是对页面的补充。 一般使用在页面、文章的侧边栏、广告、友情链接等区域。
footer 定义文档或节的页脚。 一般被放置在页面或者页面中某个区块的底部,包含版权信息、联系方式等信息。
article 表示包含于一个文档、页面、应用程序或网站中的一段独立的内容,可以被独立的发布或者重新使用文章标记标签。 article 标签应该使用在相对比较独立、完整的的内容区块,所以我们可以在一篇博客、一个论坛帖子、一篇新闻报道或者一个用户评论中使用它。通常情况下,一个 article 元素包括标题、正文和脚注。和 nav 标签一样,该标签同样不能用在 address 标签中。
section 是一个主题性的内容分组,通常用于对页面进行分块或者对文章等进行分段。 section标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节、标签式对话框中的各种标签页等类似的功能。section 通常包含一个头部header、可能还会包含一个尾部 footer。
figure 规定独立的流内容(图像、图表、照片、代码等等)。 元素代表一段独立的内容.用于对元素进行组合。多用于图片与图片描述组合。
hgroup 用来对标题元素进行分组 用于对网页或区段(section)的标题进行组合。使用新的 HTML5 元素 hgroup,可以为 header 元素添加更多的信息。(头部主标题/副标题)
举例

**信息科技有限公司

Welcome to my WWF

For a living planet

The rest of the content...

HTML5学习之语义化标签

....正文.....

HTML5学习之语义化标签

....正文.....

版权所有*伪版必究

JavaScript框架

Javascript框架是指以Javascript语言为基础搭建的编程框架。

angular.Js

angular.Js是一款优秀的前端JS框架

Vue.js

Vue.js是用于构建交互式的Web界面的库

jQuery

jQuery是一个快速、简洁的JavaScript框架。

版权所有 © 2016-2017 **信息科技有限公司

文档级别语义

1. ruby、rt、rp

ruby 是一种排版注释系统,是位于横排基础文本上方的简短文字,主要针对东亚语言作出简单的读音注释。例如可以为中文或日文显示读音。

ruby 涉及的元素包括 ruby 、rt 以及 rp 。首先使用 ruby 指定一个具体的表达式,然后使用rt提供说明。rt部分将显示在表达式上方。

下面这个例子中,拼音将显示在文字的上方。

 beijing

但是在不支持 ruby 的浏览器中需要使用 rp 对这两个区块进行视觉上的隔离。


        bei
        jing
    


2. time

为了将现在的常用的日期和时间语句用规范的、利于机器识别的格式进行表述,time 元素提供了一个可选的时间和时区组件。

我们在每天早上 开始营业。

我在 有个约会。

为了确保机器能够正确识别,我们可以使用 datetime 属性,其属性值可以被定义为时间、日期或者这两者的复合体。

还可以使用 pubdate 为一个网页指定发布时间。

注意:在 HTML5 中,true 或 false 并非有效的属性值,当解释器发现存在布尔属性时,它将直接解释为 true 。如果需要将属性设为 false ,将这个属性去掉即可。

3. mark

mark 元素用于高亮标记一段文字。 可以使用 mark 元素来标记出网页里被搜索的关键词或是用于高亮显示一段解释性的代码。

4. wbr

wbr 元素用于让浏览器为长单词增加可选择的破折号,以便自动拆行。
在相当长的单词中插入一对 wbr 元素,可以让浏览器根据排版的需要决定是否将单词换行。破折号是否出现,以及出现的位置完全由排版决定。 wbr 只是允许自动拆行,但非强制拆行。

如果想学习 AJAX,那么您必须熟悉 XMLHttpRequest 对象。

5. 略微改变的元素

在HTML4版本中的标签元素在HTML5中有了新的定义。

使用 b 表示文档渲染为粗体,而 i 表示文档渲染为斜体。使用 strongem 来强调一段重要的文本。 cite 用来为对参考文献的引用进行定义,比如书籍或杂志的标题。 small 不仅仅指的是小字体,它还同样为法律声明增添不具有重要性的旁注或小字。 hr 现在表达的是主体性的间断,不再仅仅是分割版面的一条水平线。

6. 补充
main 标签:呈现了文档或应用的主体部分;一般页面最多只有一个。

License

可以拷贝、转发,但是必须提供原作者信息,同时也不能将本项目用于商业用途。

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

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

相关文章

  • 快速理解web语义

    摘要:代码示例语义化语义化语义化语义化语义化年月日小维语义化标签包括还有等。而没有语义化的元素如则推荐使用。语义化包含了标签语义化和命名语义化。 什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内...

    LiveVideoStack 评论0 收藏0
  • 我眼中的Web 语义

    摘要:语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的...

    codecraft 评论0 收藏0
  • 我眼中的Web 语义

    摘要:语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的...

    zhichangterry 评论0 收藏0
  • 我眼中的Web 语义

    摘要:语义化的页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器如果访客有视障能够读懂内容。 我眼中的Web 语义化 web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的...

    ChanceWong 评论0 收藏0
  • HTML基础复习——语义

    摘要:语义化概念官方解释语义化是指用合理的标记以及其特有的属性去格式化文档内容。大家知道中的也可以加粗文字,的标签也可以加粗文字,但是腾讯都没有使用。常用的语义化标签大部分拥有文本格式化的作用把文本定义为强调的内容。 HTML语义化 概念 官方解释:语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。 我的理解:在我的理...

    icattlecoder 评论0 收藏0
  • 如何理解语义(semantic)

    摘要:逻辑学的语义学着眼点在于逻辑系统的语义解释,是一个理想化的模型系统,不直接涉及自然语言。例如,通过帮助临床研究中的决策,语义技术将跨机构桥接多种形式的生物和医学信息。 showImg(https://segmentfault.com/img/bVbrJYw?w=758&h=420); 前端工程师的招聘中,经常有这样的要求:对Web 语义化有深刻理解。那么到底什么才是深刻理解Web语义化...

    CarlBenjamin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<