HTML学习笔记-1

最新推荐文章于 2024-09-10 14:15:01 发布

Kloren_

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量304

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/Kloren_/article/details/128754728

版权

HTML学习笔记[2023-1]

文章目录

HTML学习笔记[2023-1]

1、HTML简介

HTML（Hyper Text Markup Language）是一种相对简单的、由不同元素组成的标记语言，而不是一种编程语言、它可以被应用于文本片段，使文本在文档中具有不同的含义（如段落、表格、项目列表），同时它将文档结构化为逻辑块（文档有无头部？有几列内容？有无导航栏等），且可将图片，影像等内容嵌入到页面中。

2、HTML中的一些基础概念

2.1 HTML元素

HTML元素 HTML是一种用来告知浏览器如何组织页面的标记语言，它由一些列的元素（elements)组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现，下图是对一个HTML元素的详细剖析。

在这里插入图片描述

元素主要部分介绍：

开始标签：包含元素名称，左右角括号包围，表示元素从这里开始或者起作用。
结束标签：相较于开始标签在元素名前多一个斜杠，表示元素结尾。
标签内容：元素的内容。
元素：开始标签、结束标签与内容相结合即一个完整的元素。

HTML标签无大小写限制，使用小写者居多

2.2 元素嵌套

元素嵌套 可以将HTML元素放入其他HTML元素之中形成嵌套，在使用元素嵌套的时候，一定要保证所有元素都能正确的打开和关闭，这样才能按照你所想的方式展现文本，下图是元素嵌套的示例，使用和标签将段落中某一部分字体加粗和斜体。

在这里插入图片描述

2.3 块级元素与内联元素

块级元素 块级元素在页面中以块的形式展现，相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现，块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等，一个块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素中。

内联元素 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容，内联元素不会导致文本换行。

HTML中元素大多数都是“块级”元素或行内元素¹，块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此称为“块”，下图是块级元素与内联元素的简单对比，从图中也可以看出三个内联元素无间隙的排列在同一行，而三个块级元素分别另开一行且每个段落之间都有一些间隙（这是因为浏览器默认会为p元素设置css样式²）

在这里插入图片描述

2.4 空元素

并非所有元素都拥有开始标签、结束标签及内容，有些元素只有一个标签，这样的标签通常用作在此元素所在的位置插入一些东西，例如<img>元素用来在此标签所在位置处插入一张指定的照片，如下图示例。

在这里插入图片描述

2.5 元素的属性

元素可以拥有属性，属性包含元素的额外信息，这些信息不会出现在实际的内容当中，一个属性必须包含如下内容：

在元素和其他属性之间保持一个空格。
属性名称后面跟着一个等于号。
属性值由一对双引号引出来。

下图为属性的具体使用示例，在此示例中，为元素添加了class和id属性，这两种属性都可用来标识此元素。

在这里插入图片描述

2.6 布尔属性

有时你会看到没有值的属性，这种属性被称为布尔属性，它是合法的，他们只能有跟它的属性名一样的属性值，例如disabled属性，他们可以标记表单输入使之变为不可用（灰色）状态，此时用户不可向任何拥有该属性的元素输入数据。

在这里插入图片描述

3、HTML文档剖析

一个完整的HTML页面形式如下，接下来我们对这些内容逐一剖析。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5IwjC8zr-1674487398421)(C:\Users\29175\Desktop\文章存档\csdn\前端学习\图片处理\8.png)]

<!DOCTYPE html> ：声明文档类型，早期的HTML（约1991年2月），文档声明类似与链接，规定HTML页面必须遵守一种规范，使其能自动检测错误等，但是HTML发展到现在，早期的写法已经被摒弃，现在这种声明是最短有效的文档声明。
<html> ：这个元素包裹整个完整的页面，是一个根元素。
<head> ：这个元素是一个容器，包含所有你想包含在HTML页面中但不想在HTML页面上显示的内容，这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8"> ：这个元素设置文档使用utf-8字符集编码，utf-8字符集包含人类大部分的文字，基本上能够识别所有文本内容。
<title> ：设置页面标题，出现在浏览器标签上，当你标记或者收藏页面时它可用来描述页面。
<body> ：这个元素包含了你访问页面时所有显示在页面上的内容，文本、图片、音频、游戏等等。