前端之html初级篇-基础标签

html模版骨架标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是一个示例页面</title>
</head>
<body>
    life is 美好的!!
</body>
</html>
  1. <!DOCTYPE html> 标签用于定义文档类型,告诉浏览器如何解析 HTML 文档。在本例中,指定的文档类型为 HTML5。

  2. <html> 标签是整个 HTML 文档的根元素,包含了整个文档的内容。lang 属性用于指定页面所使用的语言,en 表示英语。

  3. <head> 元素用于存放元数据信息,不会直接展示在页面上。该元素内部包含了一些标签,包括:

    • <meta charset="UTF-8">:指定使用 UTF-8 字符集进行编码,以支持更多的字符集。

    • <meta http-equiv="X-UA-Compatible" content="IE=edge">:用于告诉浏览器使用最新版本的 IE 渲染引擎来渲染页面。

    • <meta name="viewport" content="width=device-width, initial-scale=1.0">:用于声明网页的视口(viewport),从而让网页在移动设备中正确地显示。

    • <title>Document</title>:指定 HTML 文档的标题,将显示在浏览器的标题栏中。

  4. <body> 标签内部包含了网页的实际内容,如文本、图像、链接等。本例中的内容是“life is 美好的!!”。

P标签

定义一个简单的文本段落

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>

H1-H6标签

H1-H6 标签是 HTML 中用于定义标题的标签,它们分别表示从最高级标题到最低级标题,语义上具有明显的层次感。在编写 HTML 页面时,应该按照标题的重要性逐级使用 H1-H6 标签来定义各个标题。

下面是各个标签的含义和示例:

  • <h1>:最高级标题,通常用于页面的主标题。

    <h1>中国的文化遗产</h1>
  • <h2>:二级标题,通常用于页面的次级标题。

    <h2>丝绸之路上的历史古迹</h2>
  • <h3>:三级标题,通常用于页面的小标题或副标题。

    <h3>敦煌莫高窟</h3>
  • <h4>:四级标题,通常用于文章的子标题。

    <h4>壁画与雕塑艺术</h4>
  • <h5>:五级标题,通常用于小节的标题。

    <h5>东南亚的影响</h5>
  • <h6>:最低级标题,通常用于文章中的附加信息。

    <h6>参考文献</h6>

需要注意的是,H1-H6 标签的使用应遵循以下原则:

  1. H1 标签应该只出现一次,用于页面的主标题。

  2. 在一个文档中,标题应按照从高到低的顺序依次使用,不应跳级或省略。

  3. 不要滥用标题,仅将最重要的内容设置为标题。

特点:独成一段、更改字体大小、字体加粗

<strong> 标签

<strong> 标签用于表示重要性更高的文本内容,通常会将其显示为加粗的字体。它强调的是文本的实际意义,而非视觉效果。例如:

<p>这个问题真的<strong>很重要</strong>!</p>

<em> 标签

<em> 标签用于表示需要强调的文本内容,通常会将其显示为斜体的字体。它强调的是文本的语气、感情、口音等方面,与 <strong> 不同,它更多地关注于视觉效果。例如:

<p>我<strong>不</strong>知道这是不是<em>你</em>想要的结果。</p>

需要注意的是,<strong><em> 标签都可以嵌套使用

  <strong>
      <em>举个例子</em>
  </strong>

<del> 标签

<del> 标签是 HTML 中的一个元素,用于表明文档中被删除的文本内容。通常情况下,<del> 标签会将其中包含的内容显示为一条中划线。该标签可用于在文本编辑或协作工具中显示修改过的文本或历史记录等场景。

 <del>这是一段被删除的文本内容。</del>

<address> 标签

<address> 标签是 HTML 中的一个元素,用于表示文章或文档作者的联系信息。

<address> 标签可以包含多种不同类型的联系信息,包括电子邮件地址、URL、物理地址、电话号码、社交媒体账号等等。该标签通常会以斜体形式显示,并且浏览器会在该标签前后添加换行符。

<address>
  Written by John Doe<br>
  Visit us at:<br>
  Example.com<br>
  Box 564, Disneyland<br>
  USA
</address>

divspan 标签(重要)

divspan 标签都是 HTML 中用来定义文档中区块的元素。其中,div 标签通常用于划分页面中的大块区域,而 span 标签通常用于对文本或其他行内元素进行样式设置或者调整布局。

例如,假设我们有一个网页需要分成两个区域,分别用于展示标题和内容,那么可以使用 div 标签将这两个区域分隔开来:

<div id="title">这里是标题区域</div>
<div id="content">这里是内容区域</div>

在上面的例子中,div 标签的 id 属性被用来给每个区域赋予唯一的标识符,并且可以通过 CSS 样式表来对各个区域进行样式设置。

再例如,假设我们想要调整某段文字的颜色或字体大小,那么可以使用 span 标签将此段文字包裹起来:

<p>这里是一段 <span style="color: red; font-size: 20px">重点提示</span> 的信息。</p>

在上面的例子中,span 标签被用来对“重点提示”的部分进行样式设置。注意,上面的例子是通过 style 属性直接为 span 元素添加了样式,但是更好的做法是通过 CSS 样式表来对 span 元素进行样式设置。