05 HTML结构、元素、类型

coderMjjh
78 阅读11分钟

个人博客地址 www.codermjjh.cn/ 大家走过路过不要错过

HTML的结构

完整的HTML结构

  • 一个完整的html结构分为哪几部分呢？
  • 文档声明
  • html元素
    • head元素
    • body元素
<!DOCTYPE html>
<head>
  <title>Document</title>
</head>
<body>
</body>
</html>

文档声明

  • HTML最上方的一段文本我们称之为文档类型声明，用于声明文档类型
<!DOCTYPE html>

    • HTML文档声明，告诉浏览器当前页面是HTML5页面：
    • 让浏览器用HTML5的标准去解析识别内容；
    • 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；

  • HTML5的文档声明比HTML4.01、XHTML1.0简洁非常多（了解即可） image-20220325092853006.png

html元素( lang )

  • ****元素表示一个HTML文档的根（顶级元素），所以它也被称为根元素。

    • 所有其他元素必须是此元素的后代。

      <!DOCTYPE html>
<html lang="en"></html>

  • W3C标准建议为html元素增加一个lang属性，作用是

    • 帮助语音合成工具确定要使用的发音
    • 帮助翻译工具确定要使用的翻译规则

  • 比如常用的规则：

    • lang="en”表示这个HTML文档的语言是英文；
    • lang="z-CN"表示这个HTML文档的语言是中文：

head元素

  • HTML head元素规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。

    • 什么是元数据(meta data)，是描述数据的数据：

    • 这里我们可以理解成对整个页面的配置：

  • 网页的标题：title元素

    <title>网页的标题</title>

  • 网页的编码：meta元素

    • 可以用于设置网页的字符编码，让刘览器更精准地显示每一个文字，不设置或者设置错误会导致乱码：

    • 一般都使用utf-8编码，涵盖了世界上几乎所有的文字

      <metac charset="utf-8">

body元素

  • body元素里的内容讲是你在浏览器窗口中看到的东西，也就是网页的具体结构

    • 大部分HTML元素都是在 body中编写的
    <body>
	<input type="text">
	<ul>
		<li>苹果</li>
		<li>香蕉</li>
		<li>橘子</li>
	</ul>
</body>\

HTML元素

  • HTML元素本身很多，但是常用的元素就是那么几个。
  • 常用的元素（暂时掌握下面几个就够了，90%时间都在写这几个）：
    • p元素、h元素：
    • img元素、a元素、iframe元素：
    • div元素、span元素；
  • 下阶段学习的元素：
    • ul、ol、i元素：
    • button:元素、input元素：
    • table、thead、tbody、thead、th、tr、td;

HTML元素（重点）

认识元素

  • 我们会发现HTML本质上是由一系列的元素（Element）构成的；
  • 什么是元素（Element）呢？
    • 元素是网页的一部分；
    • 一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含；
  • 那么HTML有哪些元素呢？
  • 我们会发现元素非常非常的多，这么多能记得住吗？
    • 常用的，用的多自然就记住了；
    • 不常用的，知道在哪里查找即可；

元素的组成

  • 剖析一个HTML元素的组成：

image-20220324200101928.png

  • 这个元素的主要部分有：
    1. 开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
    2. 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落 在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
    3. 内容（Content）：元素的内容，本例中就是所输入的文本本身。
    4. 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素的属性

  • 元素也可以拥有属性（Attribute）：

  • 属性包含元素的额外信息，这些信息不会出现在实际的内容中。

  • 一个属性必须包含如下内容：

    1. 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
    2. 属性名称，后面跟着一个等于号。
    3. 一个属性值，由一对引号“ ”引起来。

  • 创建一个超链接元素a：

属性的分类

  • 有些属性是公共的，每一个元素都可以设置
    • 比如class、id、title属性
  • 有些属性是元素特有的，不是每一个元素都可以设置
    • 比如meta元素的charset属性、img元素的alt属性等
  • 不用去记忆，后续学到的时候自然就知道了

单标签元素 – 双标签元素

  • 双标签元素：我们会发现前面大部分看到的元素都是双标签的；
    • html、body、head、h2、p、a元素；
  • 单标签元素：也有一些元素是只有一个标签；
    • br、img、hr、meta、input；
  • 注意事项：
    • HTML元素不区分大小写，但是推荐小写

元素的结构总结

image-20220324200505311.png

元素的嵌套关系

  • 某些元素的内容除了可以是文本之外，还可以去其他元素，这样形成了元素的嵌套

    <ul>
  <li>
    <div>
      <span>第一段文字</span>
      <span>第一段文字</span>
      <span>第一段文字</span>
    </div>
    <div></div>
    <div></div>
  </li>
</ul>

image-20220324200700453.png

常见元素

常见元素-h元素

  • 在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用元素。
    • h1-h6标题(Heading)元素呈现了六个不同的级别的标题
    • Heading是头部的意思，通常会用来做材题
    • h1级别最高，而h6级别最低
    • 实际上就是给了不同的css进行调整
  • 注意：h元素通常和SEO优化有关系（什么是SEO,后续再介绍）

常见元素-p元素

  • 如果我们想表示一个段落，这个时候可以使用p元素
  • HTML

    元素（或者说HTML段落元素）表示文本的一个段落

    • p元素是paragraph单词的缩写，是段落、分段的意思；
    • p元素多个段落之间会有一定的间距；

常见元素-img元素

  • 我们应该如何告诉浏览器来显示一张图片呢？使用mg元素

  • HTML元素将一份图像嵌入文档.

    • img是image单词的所以，是图像、图像的意思；
    • 事实上img是一个可替换元素(replaced element);img有两个常见的属性：

  • src属性：source单词的缩写，表示源

    • 是必须的，它包含了你想嵌入的图片的文件路径。

  • alt属性：不是强制性的，有两个作用

    • 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本：
    • 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；

  • 某些其他属性目前已经不再使用

    • 比如width、height、border

img-元素-图片的路径

  • 设置img的src时，需要给图片设置路径；
    • 网络图片：一个URL地址（后续会专门讲URL）
      • 网络图片的设置非常简单，给一个地址即可
    • 本地图片：本地电脑上的体魄，后续会和html一起部署刀服务
  • 本地图片的路径又两周方式
    • 方式一：绝对路径（几乎不用）；
      • 电脑的根目录一直找到资源的路径
    • 方式二；相对路径（常用）
      • 相当于文件夹的一个路径
      • ./ 代表当前文件夹（1个），可以省略
      • ../ 代表上级文件夹（2个）
  • 对于网页来说，不管什么操作系统（Windows，Mac，Linux），路径分隔符都是/，而不是\

img元素-图片的格式

image-20220325204015786.png

常见元素-a元素

  • 在网页中我们经常需要跳转到另外一个链接，这个时候我们使用元素：

  • HTMLa元素（或称锚(anchor)元素）：

    • 定义超链接，用于打开新的URL:

  • a元素有两个常见的属性：

    • href：Hypertext Reference的简称
      • 指定要打开的URL地址：
      • 也可以是一个本地地址：
    • target:该属性指定在何处显示链接的资源，
      • _self:默认值，在当前窗打开URL
      • _blank:在一个新的窗口中打开URL:
      • 其他不常用，后面iframe可以讲一下：

a元素-锚点链接

  • 锚点链接可以实现：跳转到网页中的具体位置

  • 锚点链接有两个重要步骤：

    • 在要跳到的元素上定义一个id属性；
    • 定义a元素，并且a元素的href指向对应的id；
    <a href="#one">段落1</a>

<p id="one"></p>

a元素-图片链接

  • 在很多网站我们会发现图片也是可以点击进行跳转的

    • img元素跟a元素一起使用，可以实现图片链接； image-20220325204435738.png

  • 实现思路：

    • a元素中不存放文字，而是存放一个img元素；
    • 也就是img元素是a元素的内容；
    <a href="https://www.mi.com/redmik50">
	<img src="./images/xiaomi_01.jpeg" alt="小米手机">
</a>

a元素-其他URL地址

  • a元素一定是用来跳转到新网页的么？

    <a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip ">网页下载</a>
<a href="mailto:12345@qq.com">邮件</a>

iframe元素

  • 利用iframe元素可以实现：再一个HTML文档中嵌入其他HTML文档
  • frame border属性
    • 用于规定师傅线上边框
      • 1：显示
      • 0：不显示
  • a元素target其他值
    • _parent：再父窗口打开URL
    • _top：在顶层窗口打开URL

div、span元素

div、span元素的历史

  • 在HTML中有两个特殊的元素div元素、span元素：
    • div元素：division，分开、分配的意思；
    • span元素：跨域、涵盖的意思；
  • 这两个元素有什么作用呢？无所用、无所不用。
  • 产生的历史：
    • 网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
    • 后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可；
    • 比如h1元素可以是一段普通的文本+CSS修饰样式；
    • 这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理；
  • 所以，理论上来说：
    • 我们的页面可以没有div、span；
    • 我们的页面也可以全部都是div、span；
    • 以上两种都比较极端，所以现在引入了语义化的HTML标签使用，什么样的标签就做什么样的事情

div、span元素的区别

  • 这个时候有一个问题：我出现一个不就可以了吗？
  • div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；
    • div元素：多个div元素包裹的内容会在不同的行显示；
      • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
      • 用于把网页分割为多个独立的部分
    • span元素：多个span元素包裹的内容会在同一行显示；
      • 默认情况下，跟普通文本几乎没差别
      • 用于区分特殊文本和普通文本，比如用来显示一些关键字

不常用元素

  • strong元素：内容加粗、强调；
    • 通常加粗会使用css样式来完成；
    • 开发中很偶尔会使用一下；
  • i元素：内容倾斜；
    • 通常斜体会使用css样式来完成；
    • 开发中偶尔会用它来做字体图标（因为看起来像是icon的缩写）；
  • code元素：用于显示代码
    • 偶尔会使用用来显示等宽字体；
  • br元素：换行元素
    • 开发中已经不使用；
  • 更多元素详解，查看MDN文档：

HTML的类型

  • 在前面我们会经常提到div是块级元素会独占一行, span是行内级元素会在同一行显示.

    • 到底什么是块级元素, 什么是行内级元素呢?

  • HTML定义元素类型的思路:

    • HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等;
    • 当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?
      • 为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的;
    • 比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起;
    • 比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起;
    • 而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行;

  • 所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过CSS的)成了两类:

    • 块级元素（block-level elements）: 独占父元素的一行
    • 行内级元素（inline-level elements）:多个行内级元素可以在父元素的同一行中显示
avatar
文章
阅读
粉丝