【Web前端开发】——（一）HTML：基本介绍

本文链接：https://blog.csdn.net/qq_45943210/article/details/123247978

本文是关于HTML的基础教程，介绍了HTML的用途、块级元素与内联元素的区别、属性的使用、空白处理、实体引用以及标签、标题、元数据、CSS和JavaScript的结合、超链接创建、文档语言设定等核心概念。通过学习，读者可以掌握HTML页面的基本构建和布局技巧。

摘要由CSDN通过智能技术生成

此系列文章是以MDN网站为参考的学习笔记

前言

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

一、HTML

1.块级元素和内联元素

<em>和</em>使内容斜体强调

块级元素：在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。
内联元素：出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。

2.属性

布尔属性：没有值的属性，他们只能有跟它的属性名一样的属性值。例如disabled属性，可以标记表单输入使之变为不可用（变灰色）

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled>

<!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 -->
<input type="text">

3.空白

无论你在HTML元素的内容中使用多少空格(包括空白字符，包括换行)，当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。

4.实体引用

在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束.

原意字符	等价字符引用
<	`<`
>	`>`
"	`"`
’	`'`
&	`&`

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

5. `<head>`标签

在页面加载完成的时候，标签head里的内容，是不会在页面中显示出来的。它包含了像页面的<title>(标题) ,CSS(如果你选择用 CSS 来为 HTML 内容添加样式)，指向自定义图标的链接和其他的元数据(描述HTML的数据，比如，作者，和描述文档的重要关键词)。

添加标题

<title>，它可以为文档添加标题。别和 <h1> (en-US) 元素搞混了，<h1> (en-US) 是为 body 添加标题的。
<title>元素是一项元数据，用于表示整个HTML文档的标题（而非文档内容）

元数据：元素

元数据就是描述数据的数据，而HTML有一个“官方的”方式来为一个文档添加元数据—— <meta> 元素。
指定你的文档中字符的编码

<meta charset="utf-8">

添加作者和描述
许多<meta> 元素包含了name 和 content 特性：

name 指定了meta 元素的类型；说明该元素包含了什么类型的信息。

content 指定了实际的元数据内容。

其他类型元数据

6.在HTML中应用CSS和JavaScript

CSS使用<link>元素，经常位于文档头部，这个link元素有2个属性，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径：

<link rel="stylesheet" href="my-css-file.css">

<script> 部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 </body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。

<script src="my-js-file.js"></script>

注意： <script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入<script>元素中，而不是指向外部脚本文件。

7.为文档设定主语言

值得一提的是可以（而且有必要）为站点设定语言，这个可以通过添加lang属性到HTML开始标签中来实现

<html lang="zh-CN">

8.HTML文字处理基础

这是一个 <span> 元素，它没有语义。当您想要对它用CSS（或者JS）时，您可以用它包裹内容，且不需要附加任何额外的意义（在未来的课程中你会发现更多这类元素）。

<span style