【前端】HTML-2022/7/10-Abyss-博客

前言

本系列文章并非教程类文章，仅为个人笔记，并不会涉及Web历史，HTML介绍等内容。

如有误，欢迎在评论区指正，本人也是初学者（尽管本文章的内容本人早已掌握，但还是想把它们写出来，与今后需要学习的更多内容共同组成一个完整的前端学习笔记）

但这里有几个必须要强调的内容：

HTML（超文本标记语言: HyperText Markup Language）不是一套编程语言，而是标记语言，HTML使用的是一对对标签的形式来描述网页的内容，但也仅仅是内容，其他内容需要CSS，JavaScript来修饰，它们作为前端的三巨头，共同形成了一个完整的前端页面。（注，它们也都不是编程语言，HTML，CSS属于标记语言，JavaScript属于脚本语言）

HTML标签

HTML标签（Tag）扮演着必不可缺的角色

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

所有的标签都一定有开始标签和结束标签吗？

凡是都有例外，之后会学到的一些标签就只有开始标签，没有结束标签，比如

<img>、<input>等等

这类只有开始标签，没有结束标签的标签就叫做自结束标签，使用这些标签的时候就不需要再写结束标签了，比如：

<img>内容</img>

这种写法就是错的

标签中的属性

在标签中我们还可以指定这个标签的属性（个人理解这相当于编程语言中向函数传参）

属性：
- 在标签中（在开始标签或自结束标签中，而不是结束标签或其它地方）可以设置标签的属性
- 它还是一个名值对结构（形如x=y，x是属性名，y是属性值）

有个例子：

<img src="img/marxism.jpg">

下面来解释一下这个例子

首先，它是一个<img>标签，它是一个自结束标签，这个标签的作用就是显示一张图片，而在这个标签中，我们指定了一个src参数，它等于 img/marxism.jpg ，整个来说就是，显示一张图片，这张图片的地址是 “img/marxism.jpg”

HTML 元素

HTML元素（Elements）类似HTML标签（Tag），通常标识着同样的意思，但严格来讲，HTML元素包括了开始标签和结束标签，下面是一整个HTML元素的例子：

<h1>这是一个一号标题</h1>

HTML结构

HTML要怎么写？下面是一个HTML的例子，几乎每一个HTML的代码都会包括以下内容，相当于一个模板。

图片来源：https://www.runoob.com/html/html-intro.html

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset=”utf-8″> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题（在浏览器标签页中显示出来，在图标的右边）
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

在一个网页中，被浏览器渲染使得用户能够直接在浏览器中看到的内容，全部都被写在<body>标签对内。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文档的标题</title>
    </head>
    <body>
        <h1>这是一个一号标题</h1>
        <p>这是一个段落</p>
    </body>
</html>