HTML学习笔记[Web开发]

HTML学习

本文为学习笔记，参考w3c，菜鸟，Mozilla，尚硅谷等文章编写。

文章目录

• • HTML 简介
  • • HTML文档的后缀名
    • HTML版本

• HTML 编辑工具

• HTML 标签 (HTML Tag)

• • HTML 提示：请注意，在此环境中应遵循规则：所有标签名称必须以小写字母开头

  • HTML 标签简写及全称 详细说明了各个标签的缩写形式及其完整名称

    • HTML 元素

    • • HTML元素组成
      • 嵌套元素
      • 块级元素和内联元素
      • 空元素

    • HTML 属性

    • • 属性组成
      • 布尔属性

• HTML网页结构及其相关内容

• 基础的 HTML 语法结构

• 通用声明部分

• 头部代码块

• 标题标记

• 水平分割线

• 注释代码块

• 段落标记

• 分段符或换行处理代码块

• 文本格式化选项块

• 超链接代码块

• 图片标记

• 表格元素标记

• 列表相关的 HTML 语法选项描述性内容

• 表格元素标记描述性内容（如表格标题）

• CSS样式表 - CSS相关语法内容描述性分析性内容（如变量名）
• 布局选项块（如grid, flex）
• 表单元素（form）相关 HTML 语法内容描述性分析性内容（如表单提交逻辑）
• 框架相关 HTML 语法内容描述性分析性内容（如DOM操作）
• 颜色值相关的 HTML 语法属性名称及功能描述性分析性内容（如背景颜色设置）
• 脚本标签（script）的相关 HTML 语法属性名称及功能描述性分析性内容（如事件监听功能）
• 字符实体相关的 HTML 编程逻辑解释说明性分析性内容（如特殊字符编码处理方式）
• 统一资源定位器(Uniform Resource Locators — URL ) 的相关编程逻辑解释说明性分析性内容 （如路径解析机制）

HTML 简介

中文名称： 超文本标记语言
英语名称： HyperText Markup Language

就其核心而言，HTML 是一种相当简单的、由不同元素组成的**标记语言 **，

HTML 是用来描述网页的一种语言。

• HTML 是一种特殊的标记语言
  • 标记语言是一套标记标签 (markup tag)
  • 它用来表示网页的结构和内容。
  • 它包含 HTML 标签以及纯文字内容。
  • 它也被称作 web 页面。
  • 它可以应用于各种文本片段作为 web 页面元素。

备注： HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。不过，从一致性、可读性来说，最好仅使用小写字母。

**注意:**HTML中不支持 空格、回车、制表符，它们都会被解析成一个空白字符。

是 HTML5 标准网页声明，全称为 Document Type HyperText Mark-up Language，是一条标示语言。支持 HTML5 标准的主流浏览器都认识这个声明。表示网页采用 HTML5，

HTML文档的后缀名

• .html
• .htm

htm 与 html 的区别

前一者被称作超文本标记符（H^2空间中的函数），而后者则被称为超文本标记语言体系（算法复杂度为O(n)）

通常认为 htm = html。它们都用于标记静态网页文件的类型，并且在替换时不会产生问题

两种后缀出现的原因

HTM源自于早期版本的8.3文件格式，在DOS操作系统中，默认仅限使用三字符后缀；因此采用HTM。而在Windows环境下无需区分HTM与HTML；HTML被设计用于处理较长文件名的情况；因此HTM被创建以兼容过去基于DOS的操作系统中的文件命名习惯，在功能上两者并无差异。以往情况下，在不同服务器上分别使用HTM和HTML作为存储结构；如今已被广泛采用。

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

HTML 编辑器

• 推荐使用 * Visual Studio Code （简称 VS Code）

• 相关工具包 * Live Server / Live Preview : 实时查看

• Fitten Code : 智能编程辅助工具

HTML 标签 (HTML Tag)

• HTML 标签由尖括号包围的核心词汇组成；例如 < html >。
  • HTML 标签常见于以开合形式呈现的情况；例如 < b > 和 < /b >。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：

等同于

。许多网站都使用大写的 HTML 标签。

该组织在HTML 4标准中提倡采用小写字体格式，在后续版本中则规定必须使用小写字体。

HTML 标签简写及全称

下表列出了 HTML 标签简写及全称：

HTML 元素

HTML元素组成

HTML 元素以开始标签 起始，以结束标签 终止

整个元素即指 开始标签 、内容 、结束标签 三部分组成的整体。

• 起始标记用于标识Markdown文档中的结构元素，并由左右方括号界定。
• 主体部分位于起始标记与结束标记之间。
• 结束标记标识结构块的结尾，并在其名称前带有斜杠。
  这些特殊的符号分别称为开放标记和闭合标记。

嵌套元素

你也可以把元素放到其他元素之中——这被称作 嵌套 。

正确例：

    <p>My cat is <strong>very</strong> grumpy.</p>
    
    
    html

错误例：

    <p>My cat is <strong>very grumpy.</p></strong>
    
    
    html

请确保所有元素都被正确嵌套在一起：在示例中，我们首先打开了 <p> 标签，在随后的步骤中又打开了 <strong> 标签。因此必须先关闭 <strong> 标签以完成整个操作流程。

每个元素都必须以正确的方式开启和关闭** ，这样才能按照你的预期进行展示 。因为上述示例中出现的这种重叠 ，浏览器不得不做出推测 ，这种推测可能会导致不可预测的结果

块级元素和内联元素

在 HTML 中有两种你需要知道的重要元素类别，块级元素 和 内联元素 。

• 块级元素在页面中以独立的样式呈现，在HTML标记语言中被视为单独的标记实体，并放置于其前面所有前面文字段落之后的新行位置上；后续所有内容也会放置于新的行位置上；作为页面结构的一部分, 块级标记通常是用于表示标题, 段落, 列表, 菜单项或页脚等不同类型的视觉层级标记. 有时, 一块标记也可能代表其他特定类型的视觉层级结构;例如, 标题层次结构中的H1, H2等. 在HTML语法规范中, 块标记不允许嵌套于内联标记内部, 但可以嵌套于其他块标记内部.
• 内联元素通常用于将格式应用到文档内容的一部分而不影响整段文字的整体布局. 内联格式指令不会触发文本换行操作. 它们通常与标准文本混合使用. 例如,标签创建超链接地址链接指向的位置; 标签用于强调文字; 标签用于突出显示文字.

考虑如下示例：

复制代码

    <em>第一</em><em>第二</em><em>第三</em>
    
    <p>第四</p>
    <p>第五</p>
    <p>第六</p>
    
    
    html

属于 HTML 中的一种块级元素类型。
因此，在第二行代码中，每个

元素都会独立地呈现。
段落之间通常会有空行（这正是因为大多数浏览器在渲染

元素时会应用默认的 CSS 行间距样式）。

备注： HTML5 重新定义了元素的类别：见元素内容分类。尽管这些新的定义虽然更加精确，但相较于现有定义中的块级元素和内联元素来说更为复杂，在之后的讨论中仍沿用旧的分类体系。

备注： 为了避免混淆的原因之一是 HTML5 保留了旧的术语而不采用新的术语。

备注： 你可以查看包含有详细列表的相关页面。相关页面包括块级元素和内联元素。

空元素

并非所有的元素都同时拥有起始标记、内容部分以及结束标记。某些元素仅有一个标记，在其所属位置插入或嵌入其他内容。这些无三个标记的特殊标记即被称为空标记或纯标记。

空元素在开始标签中进行关闭 （以开始标签的结束而结束）

​ 例如：元素 <img> 是用来在页面插入一张指定的图片。元素 <br> 是换行

复制代码

    <img
      src=""
      alt="Firefox 图标" />
    
    
    html

效果如下：

注释： 在HTML中，默认情况下无需在非空元素标签后添加斜杠/（/），例如 <img src="images/cat.jpg" alt="cat" /> 这样的写法是正确的。“src属性路径为 'images/cat.jpg' ，alt属性值为 'cat'”。同样也是一种合法且有效的语法结构。当希望HTML文件被视为有效的XML文档时，默认使用这种格式也是允许的。

HTML 属性

• HTML 元素允许定义属性以提供必要的功能参数。
• 通常情况下，这些参数可以通过在起始标签附近设置的属性进行描述与配置。
• 属性一般位于起始标签后方并包含用于指定功能所需的关键信息的内容参数定义域内。

字段存储着元素的补充信息

属性组成

• 在属性和元素名称之间设置一个空格。
• 当一个元素拥有多个属性时，则这些属性必须通过空格进行分隔。
• 属性名称后跟一个等式符号。
• 由一对双引号括起的字符串表示该属性值。
• 双引号是最常见的选择之一，在这种情况下也是最常用的选项。

属性总是以名称/值对的形式出现，比如：name=“value” 。

布尔属性

通常会遇到未赋值的情况，在这种情况下我们称其为布尔型属性。每个布尔型属性只能存储一个单一的值（这个唯一值通常与该 attribute 的名称相同）。例如，请考虑 disabled 属性：你可以将其赋给表单 input 元素以阻止用户输入内容（这样的表单 input 通常会被设计为灰色显示）。示例如下：

复制代码

    <!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
    <input type="text" disabled />
    
    <!-- 下面这个输入框不包含 disabled 属性，所以用户可以向其中输入 -->
    <input type="text" />
    
    
    html

HTML 网页结构

< html>	< head>	< title>页面标题