写点什么

【超文本标记语言】:走进 HTML 的世界....

作者:翼同学
  • 2022 年 8 月 28 日
    广东
  • 本文字数:1521 字

    阅读完需:约 5 分钟

【超文本标记语言】:走进HTML的世界....

1、前言


大家好,我是翼同学。今天笔记的内容是:


  • 了解 HTML 基础



2、内容

🌱什么是 HTML?


HTML,全称为:Hypertext Markup Language,也就是超文本标记语言。也就是说,HTML 是一种标记语言(而不是编程语言),也属于一种信息组织的方式。该标记语言的用处在于结构化Web网页及其内容。其中网页内容可以是标题、段落、图片、链接、列表信息、表格信息等。


因此,每一个HTML文档都是一种静态的网页文件,通过浏览器来识别,解析,并将这些HTML文档“翻译”成可以识别的信息。也就是说,HTML 是一种用于创建网页的标准标记语言,,其包括一系列元素,通过每个元素的标签设置,可以将网络上的文档信息统一格式,形成描述性文本。


了解更多细节:


  1. HTML 文档的后缀名为 .html,我们编写一个HTML文件,将后缀名改为 .html,然后用浏览器打开文件即可。

  2. 代码编辑器推荐VS Code,一个实用的编辑器能提高你的工作效率。

  3. HTML注释由<!--开始,由符号-->结束,例如

  4. HTML 使用标记标签来描述网页,是由尖括号包围的关键词,一般成对出现。

  5. 比如:<开始标签>内容</结束标签>

  6. 浏览器会忽略了源代码中空格与换行,即想要有空格的效果,就必须写上相应的空格标签

  7. HTML 文档也叫做 Web 页面,浏览器是不会显示 HTML 标签,而标签的使用决定了网页内容的展示方式。

🌱什么是元素?


我们使用HTML标记语言,就可以将所要表达的信息按某种规则(如:文字如何处理,图片如何显示等)写成HTML文档。其中HTML文档就是由一系列元素组成。


那什么是元素?


  • 其实,元素就是网页的组成部分。

  • 在 HTML 中,一个元素可以包含几个文本或者是一种照片等,甚至可以空内容。

  • 简单来说,这些 HTML 元素可以用于包含不用部分的内容,使其以某种方式工作。

🌱什么是标签?


注意,一个典型的 HTML 元素就是由一对标签组成。


在 HTML 代码中:


  • 标签是用来标识元素的开始或结束

  • 元素则是文档对象模型(DOM)中的一部分

  • 文档对象模型会被浏览器渲染、展示为页面。


举个例子:


在网页中可能有一行文本信息:



那么在我们就可以将这行文本信息封装成一个段落元素,进而使其在网页单独一行呈现出来。



我们来画一个简易示意图:



在上面这个例子中,可以看到,元素和标签不是同一概念。其中元素是包含标签的。


因此通常的,一个 HTML 元素包含三部分:


  • Opening tag:开始标签,即包含元素的名称(本例为 p),被大于号、小于号所包围。表示元素从这里开始起作用;

  • Content:,内容,也就是元素的内容。本例是一行文本信息;

  • Closing tag:结束标签与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾


当然,这只是元素的基础组成部分。另外的,元素可以拥有属性,也可以相互嵌套。具体后面再记录。

🌱空元素


不包含任何内容的元素称为空元素。最典型的有<img>元素:


举个例子:



可以看到,该<img>元素包含两个属性(即srcalt),并且注意到,该元素没有</img>结束标签,元素里也没有内容。


这是由于图像元素并不需要通过内容来产生效果,作用是向其所在的位置嵌入图片。

🌱HTML 结构


完整的HTML页面是有一定的结构(框架)要求的。


如下所示:



解析记录:


  • <!DOCTYPE html>文档类型。即一些HTML编写守则(如自动查错),可用于保证文档的正常读取。

  • <html></html>:根元素,定义了整个HTML文档。也就是说,<html>元素包含整个页面的内容。

  • <head></head>:头部元素。包含所有头部标签元素,该元素的内容对用户不可见,比如网页标题、CSS 样式声明以及字符编码声明等;

  • <meta charset="utf-8">:指定了文档使用UTF-8字符编码方式。

  • <title></title>:标题元素,用于设置网页的标题,其显示在浏览器的标签页上(也是收藏网页时的描述文本)。

  • <body></body:该元素定义了 HTML 文档的主体,是用户的可见内容,包括文本、图片、链接等。



3、写在最后


好了,今天的笔记就记到这里。

发布于: 刚刚阅读数: 3
用户头像

翼同学

关注

知行合一 2022.08.02 加入

@珠海科技学院

评论

发布
暂无评论
【超文本标记语言】:走进HTML的世界...._html_翼同学_InfoQ写作社区