前端学习记录~2023.6.5~HTML基础-CSDN博客

本文链接：https://blog.csdn.net/viator_mp3/article/details/131033584

前言
HTML基础
总结

前言

本次只是整理记录 MDN 网站上最前面的基础入门的三大件基础，后续会分别专门深入探究。

HTML基础

1. HTML 是什么

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言，可以用来定义内容结构。

HTML由一系列元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或工作。

1）元素（Element）

一个典型的元素包括一个具有一些属性的开始标签，中间的文本内容和一个结束标签

属性是 HTML 元素提供的附加信息

在这里插入图片描述
这个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称，被大于号、小于号所包围。表示元素从这里开始或开始起作用
结束标签（Closing tag）：与开始标签类似，只是在元素名之前多一个斜杠 ‘/’ 。表示元素的结尾
内容（Content）：元素的内容，本例中就是所输入的文本
元素（Element）：开始标签+结束标签+内容=元素

2）属性（Attribute）

元素也可以有属性，包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。

在这里插入图片描述

本例中，class 是属性名称，editor-note 是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

属性应该包括：

在属性与元素名称（如果有超过一个属性的话，就是上一个属性）之间应有空格
属性的名称，以及后面的‘=’
由引号所包围的属性值

双引号是最常用的，不过使用单引号也没有问题。
但在某些个别的情况下，比如属性值本身就含有双引号，那么必须使用单引号
例如：name=‘John “ShotGun” Nelson’

3）嵌套元素

将一个元素置于其他元素之中称作嵌套。

例如：下面中的 very 会被突出显示
<p>My cat is <strong>very</strong> grumpy.</p>

需要注意元素嵌套次序正确，也就是多个标签的开始与结束不能产生交叉。

4）空元素

不包含任何内容的元素称为空元素。

例如<img>元素
<img src="images/firefox-icon.png" alt="My test image" />

本元素包含两个属性，但是并没有</img>结束标签，元素里也没有内容。

这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像

5）HTML 文档详解

上面介绍了一些基本的 HTML 元素，下面看一下单个元素彼此协同后构成的完整 HTML 页面。
以下面为例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

这里包含：

<!DOCTYPE HTML>：文档类型。现在作用有限，仅用于保证文档的正常读取
<html></html>：<html>元素。该元素包含整个页面的内容，也称作根元素
<head></head>：<head>元素。该元素内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS样式表和字符编码声明等
<meta charset="utf-8">：指定文档使用 UTF-8 字符编码。UTF-8 包含了绝大多数人类已知语言的字符，基本上可以处理任何文本内容和避免后续出现问题。
<title></title>：<title>元素。该元素设置页面的标题，现实在浏览器标签页上，也作为收藏网页的描述文字
<body></body>：<body>元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容

2. 图像

一个<img>元素类似如下

<img src="images/firefox-icon.png" alt="My test image" />

src：包含图像文件路径的地址属性
alt：图像的描述内容，用于当图像不能被用户看见时显示。alt 属性的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思

图像不可见的原因可能有：

用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容
有些错误使图像无法显示

3. 标记文本

本部分包含一些最常用的文本标记 HTML 元素

1）标题（Heading）

用于指定内容的标题和子标题。
包含6个级别，从 h1 到 h6，一般最多用到3-4级

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

需要注意：不要使用标题元素来加大、加粗字体，因为标题对于无障碍访问和搜索引擎优化等问题非常有意义

2）段落（Paragraph）

用于指定段落。通常用于指定常规的文本内容

<p>这是一个段落</p>

3）列表（List）

web上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素

最常用的列表类型为：

无序列表（Unordered list）：顺序不重要，比如购物清单。使用<ul>和</ul>包围
有序列表（Ordered list）：顺序很重要，比如烹调指南。使用<ol>和</ol>包围

列表的每个项目用一个列表项目（List Item）元素<li>和</li>包围

e.g

<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together… </p>

效果如下：

At Mozilla, we're a global community of

technologists
thinkers
builders

working together…

4）链接

链接赋予了 Web 网络属性。

需要使用两个元素，a（anchor锚）和 href （hypertext reference超文本引用）

a 元素包围显示文本
href 属性设置所需网址

例如

<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>

总结

本次只是基本入门，后续会更详细探究。