热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML基础:文档与网站架构

HTML入门教程:HTML的主要工作是编辑文本结构和文本内容(也称为语义semantics),以便浏览器能正确的显示。学习如何用标记(段落、标题、列表、强调、引用)来建立基础文本页面的文本结构和文本内容。
HTML的主要工作是编辑文本结构和文本内容(也称为语义semantics),以便浏览器能正确的显示。

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

内容结构化会使读者的阅读体验更轻松,更愉快。

在HTML中,每个段落是通过

元素标签进行定义的, 比如下面这样:

我是一个段落,千真万确。

每个标题(Heading)是通过“标题标签”进行定义的,这里有六个标题元素标签 ——

。每个元素代表文档中不同级别的内容;

表示主标题(the main heading),

表示二级子标题(subheadings),

表示三级子标题(sub-subheadings),等等。

优选地,您应该只对每个页面使用一次

— 这是顶级标题,所有其他标题位于层次结构中的下方。

请确保在层次结构中以正确的顺序使用标题。不要使用

来表示副标题,后面跟

来表示副副标题 - 这是没有意义的,会导致奇怪的结果。

在可用的六个标题级别中,您应该旨在每页使用不超过三个,除非您认为有必要使用更多。具有许多级别的文档(即,较深的标题层次结构)变得难以操作并且难以导航。在这种情况下,如果可能,建议将内容分散在多个页面上。

列表 Lists

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

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

  • 豆浆
  • 油条
  • 豆汁
  • 焦圈

重点强调

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

在HTML中我们用(emphasis)元素来标记这样的情况。这样做既可以让文档读起来更有趣,也可以被屏幕阅读器识别出来,并以不同的语调发出。浏览器默认风格为斜体,但你不应该纯粹使用这个标签来获得斜体风格,为了获得斜体风格,你应该使用元素和一些CSS,或者是元素(见下文)。

I am glad you weren't late.

为什么我们需要结构化?

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

然而,当您在浏览器中打开文档时,您会看到文本显示为一整块!

这是因为没有元素给内容结构,所以浏览器不知道什么是标题,什么是段落。此外:

用户在阅读网页时,往往会快速浏览以查找相关内容,经常只是阅读开头的标题(我们通常在一个网页上会花费很少的时间 )。如果用户不能在几秒内看到一些有用的内容,他们很可能会感到沮丧并离开。

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

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

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

以上就是HTML基础:文档与网站架构的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • Redis: 高效的键值存储系统
    Redis是一款遵循BSD许可的开源高性能键值存储系统,它不仅支持多种数据类型的存储,还提供了数据持久化和复制等功能,显著区别于其他键值缓存解决方案。 ... [详细]
  • 本文深入分析了在使用JavaScript中的Date.UTC()方法初始化Date对象时,getDay()方法返回值与预期不符的原因,并提供了相应的解决方案。 ... [详细]
  • 本文详细介绍了JavaScript中数组的转换方法、栈方法、队列方法、重排序方法及操作方法,包括toLocaleString()、toString()、valueOf()等基本转换方法,以及push()、pop()、shift()、unshift()等用于模拟栈和队列行为的方法。 ... [详细]
  • 探索OpenWrt中的LuCI框架
    本文深入探讨了OpenWrt系统中轻量级HTTP服务器uhttpd的工作原理及其配置,重点介绍了LuCI界面的实现机制。 ... [详细]
  • LoadRunner中的IP欺骗配置与实践
    为了确保服务器能够有效地区分不同的用户请求,避免多人使用同一IP地址造成的访问限制,可以通过配置IP欺骗来解决这一问题。本文将详细介绍IP欺骗的工作原理及其在LoadRunner中的具体配置步骤。 ... [详细]
  • 本文探讨了Java编程语言中常用的两个比较操作符==和equals方法的区别及其应用场景。通过具体示例分析,帮助开发者更好地理解和使用这两个概念,特别是在处理基本数据类型和引用数据类型的比较时。 ... [详细]
  • 本文详细介绍了PHP中的几种超全局变量,包括$GLOBAL、$_SERVER、$_POST、$_GET等,并探讨了AJAX的工作原理及其优缺点。通过具体示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 本文概述了在GNU/Linux系统中,动态库在链接和运行阶段的搜索路径及其指定方法,包括通过编译时参数、环境变量及系统配置文件等方式来控制动态库的查找路径。 ... [详细]
  • 本文详细介绍了如何使用Rufus工具制作一个兼容UEFI启动模式的Windows Server 2008 R2安装U盘,包括必要的软件和步骤。 ... [详细]
  • 本文介绍如何使用 Python 计算两个时间戳之间的时间差,并将其转换为毫秒。示例代码展示了如何通过 `time` 和 `datetime` 模块实现这一功能。 ... [详细]
  • 使用 ModelAttribute 实现页面数据自动填充
    本文介绍了如何利用 Spring MVC 中的 ModelAttribute 注解,在页面跳转后自动填充表单数据。主要探讨了两种实现方法及其背后的原理。 ... [详细]
  • 使用REM和媒体查询实现响应式布局
    本文介绍如何利用REM单位和媒体查询(Media Queries)来创建适应不同屏幕尺寸的网页布局。通过具体示例,展示在不同屏幕宽度下如何调整页面元素的样式。 ... [详细]
  • SPFA算法详解与应用
    当图中包含负权边时,传统的最短路径算法如Dijkstra不再适用,而Bellman-Ford算法虽然能解决问题,但其时间复杂度过高。SPFA算法作为一种改进的Bellman-Ford算法,能够在多数情况下提供更高效的解决方案。本文将详细介绍SPFA算法的原理、实现步骤及其应用场景。 ... [详细]
  • 本文详细对比了HashMap和HashTable在多线程环境下的安全性、对null值的支持、性能表现以及方法同步等方面的特点,帮助开发者根据具体需求选择合适的数据结构。 ... [详细]
  • 神策数据分析基础
    本文介绍了基于用户行为的数据分析方法,包括业务问题的提出与定义、具体行为的识别及统计分析流程。同时,详细阐述了如何利用事件模型(Event Model)来描述用户行为,以及在实际应用中的案例分析。 ... [详细]
author-avatar
prescott1972
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有