百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML根基:文档与网站架构
分享文章到:

HTML根基:文档与网站架构

发布时间:09/01 来源:未知 浏览: 关键词:
HTML的主要工作是编纂文本构造和文本内容(也称为语义semantics),以便阅读器能准确的显示。

本文介绍了 HTML的使用办法:在一段文本中增加标题和段落,强调语句,创立列表等等。

根基: 标题和段落节(引荐学习:HTML入门教程)

大部分的文本构造由标题和段落组成。 不管是小说、报刊、教科书还是杂志等。

html-1.jpg

内容构造化会使读者的阅读体验更轻松,更兴奋。

在HTML中,每个段落是通过 <p> 元素标签停止定义的, 比方下面这样:

<p>我是一个段落,确切不移。</p>

每个标题(Heading)是通过“标题标签”停止定义的,这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不一样级别的内容; <h1> 表示主标题(the main heading),<h2> 表示二级子标题(subheadings),<h3> 表示三级子标题(sub-subheadings),等等。

优选地,您应当只对每个页面使用一次<h1> — 这是顶级标题,所有其他标题位于层次构造中的下方。

请确保在层次构造中以准确的次序使用标题。不要使用<h3>来表示副标题,后面跟<h2>来表示副副标题 - 这是没成心义的,会致使惊奇的结果。

在可用的六个标题级别中,您应当旨在每页使用不超越三个,除非您认为有必要使用更多。具有很多级别的文档(即,较深的标题层次构造)变得难以操纵并且难以导航。在这种状况下,假如大概,倡议将内容分离在多个页面上。

列表 Lists

此刻,让我们留意一以下表。列表在生活中随处可见——从你的购物清单到你的回家道路方案列表,再到你遵从的教程说明列表。

无序的列表被用来标志每个项目。在这里,项目的次序并不重要 — 让我们看下面的早点清单的:

<ul>
  <li>豆乳</li>
  <li>油条</li>
  <li>豆浆</li>
  <li>焦圈</li>
</ul>

重点强调

在人类说话中,为了突出一句话的意思,我们平常强调某些词,并且我们平常想要标志某些词作为重点或者在某种程度上的不一样。 HTML 供给了很多语义化的元素,并且同意我们通过这些元素的意义标志正文内容,在这个章节中,我们将看到最常见的一小部分元素。

在HTML中我们用<em>(emphasis)元从来标志这样的状况。这样做既可以让文档读起来更有味,也可以被屏幕阅读器识别出来,并以不一样的腔调发出。阅读器默许风格为歪体,但你不该该纯洁使用这个标签来获得歪体风格,为了获得歪体风格,你应当使用<span>元素和一些CSS,或者是<i>元素(见下文)。

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

为什么我们需要构造化?

在这个文档的主体 (body)中包括了多个内容 — 这些内容没有做任何标志,但是编纂时使用了换行 (输入回车/换行跳转到下一行)处置。

然而,当您在阅读器中翻开文档时,您会看到文本显示为一整块!

html-1.png

这是由于没有元素给内容构造,所以阅读器不知道什么是标题,什么是段落。此外:

会员在阅读网页时,往往会快速阅读以查寻相关内容,经常只是阅读开头的标题(我们平常在一个网页上会花费很少的时间 )。假如会员不克不及在几秒内看到一些有用的内容,他们很大概会感到沮丧并分开。

对您的网页创立索引的搜索引擎将标题的内容视为影响网页搜索排行的重要关键字。没有标题,您的网页在SEO(搜索引擎优化)方面结果不佳。

严峻视力障碍者平常不会阅读网页;他们用听力来代替。完成这项工作的软件叫做屏幕阅读器(screen reader)。该软件供给了快速拜访给定文本内容的办法。在使用的各种技术中,它们通过朗读标题来供给文档的概述,让会员能快速寻到他们需要的信息。假如标题不成用,会员将被迫听到整个文档的大声朗读。

使用CSS样式化内容,或者使用JavaScript做一些有味的事情,你需要包括相关内容的元素,所以CSS / JavaScript可以有效地定位它。

以上就是HTML根基:文档与网站架构的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板