HTML5 与 CSS3 基础语法自学教程(十三)

  • 默认呈现效果是 h1 元素字体最大,然后依次减小, h6 元素字体最小。

  • h1 ~ h6 元素每个元素独占一行,也就是说, h1 ~ h6 元素呈现垂直方向排列规则。

关于标题元素在开发中的使用时需要注意如下要点:

  • 对于搜索引擎抓取 HTML 页面的内容, h1 元素仅次于 title 元素。为了可以被搜索引擎抓取,建议一个 HTML 页面只包含一个 h1 元素。

  • 不要为了减小标题的字体而使用低级别的标题, 而是通过使用 CSS font-size 属性实现。

  • 避免跳过某级标题,始终要从 h1 元素开始,依次使用 h2 元素、 h3 元素、… …

例如如下示例代码展示的就是错误的用法:

Heading level 1

Heading level 3

Heading level 4

例如如下示例代码展示的就是正确的用法:

Heading level 1

Heading level 2

Heading level 3

段落元素

HTML

元素表示一个段落,该元素通常呈现出当前段落的文本与其他段落的文本之间会以空白进行隔离。如下示例代码展示了

元素的用法:

这是第一个段落内容. 这是第二个段落内容.

上述示例代码运行效果如下图所示:

01-02.png

如上述示例所示呈现的效果,分析图如下:

01-03.png

注意:如果想要改变段落之间的间隔空间,建议使用 CSS margin 属性实现,而不是插入空的段落元素或者
元素。

粗体元素

HTML 元素用来定义需要提醒注意的内容。该元素在过去被认为是 粗体元素 ,因为绝大多数浏览器解析该元素呈现的是粗体效果。

注意:如果不是出于语义目的而使用 元素,那么让文本显示粗体更好的方式是使用将 CSS 的 font-weight 属性设置为 bold。

如下示例代码展示了 元素的用法:

这是一个段落内容.

上述示例代码运行效果如下图所示:

01-04.png

元素的 应用场景 例如摘要中的关键字、评论中的产品名称,或其他典型的应该加粗显示的文字。

以前 元素的含义就是让文本变成粗体效果。但从 HTML4 版本开始,不赞成标签表示带样式信息,于是 元素的含义发生了变化。

斜体元素

HTML 元素用来定义表现因某些原因需要区分普通文本的一系列文本,例如技术术语、外文短语或是小说中人物的思想活动等。浏览器运行解析 元素一般呈现的效果是斜体。

如下示例代码展示了 元素的用法:

这是一个段落内容.

上述示例代码运行效果如下图所示:

01-05.png

元素类似, 元素在较早版本的 HTML 中只是一个用来将文本内容呈现为斜体效果的元素。而在 HTML4 版本开始,这些标签现在定义了更多的语义而不只是排版外观。

上标与下标元素

HTML 元素表示为上标元素,HTML 元素表示为下标元素。这两个元素的特点如下:

  •   元素定义的文本内容与主体内容相比,显示更高更小。

  •   元素定义的文本内容与主体内容相比,显示更低更小。

如下示例代码展示了 元素和 元素的用法:

你将在下学期学习到 E=MC2 公式。 水的化学成分叫做H2O。

上述示例代码运行效果如下图所示:

01-06.png

换行符

HTML
元素会在 HTML 页面中生成一个换行符。编写在
元素后的文本内容会呈现在第二行中。

如下示例代码展示了
元素的用法:

这是一个
段落内容.

上述示例代码运行效果如下图所示:

01-07.png

水平线元素

HTML


元素用来表示段落元素之间的主题转换。在较早版本的 HTML 中,


元素表示一个水平线,并且浏览器运行解析也是水平线效果。但目前


元素被定义为语义上的,而不是表现上。

如下示例代码展示了
元素的用法:

§1: 这是一个段落内容.


§2: 这是另一个段落内容.

上述示例代码运行效果如下图所示:

01-08.png

HTML5 版本的结构化元素

article 元素

HTML

元素用来定义 HTML 页面中的可独立分配或可复用结构,例如论坛的帖子、新闻网站的文章等。

如下示例代码展示了

元素的用法:

前端开发

前端开发现在已经是软件开发领域中的主流。 版权归属 *** 公司所有。

上述示例代码运行效果如下图所示:

01-09.png

section 元素

HTML

元素用来定义 HTML 页面中的独立部分,该独立部分没有更具体的的语义元素来描述该元素。

如下示例代码展示了

元素的用法:

前端开发

前端开发现在已经是软件开发领域中的主流。

上述示例代码运行效果如下图所示:

01-10.png

关于

元素在开发中的使用时需要注意如下要点:

  • 一般通过是否包含一个标题元素( h1 ~ h6 )作为子级元素来识别每一个

    元素。
  • 如果元素内容可以分为几个部分的话,应该使用 article 元素 而不是 section 元素。

这是第一个测试内容.

这是第二个测试内容.
  • 不要将 section 元素作为一个普通容器使用,这应该是 div 元素的用法。

`nav` 元素

HTML