【前端】HTML-2022/7/10

前言

本系列文章并非教程类文章,仅为个人笔记,并不会涉及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的代码都会包括以下内容,相当于一个模板。

图片[1]-【前端】HTML-2022/7/10-Abyss-博客
图片来源: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>

HTML版本

HTML有许多版本,但本文章及以后的所有系列文章都使用HTML5

版本发布时间
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013
数据来源:https://www.runoob.com/html/html-intro.html

<!DOCTYPE>声明有助于浏览器中正确显示网页。

以免出现歧义,在编写HTML文档时必须要正确的声明文档使用的HTML版本,如使用HTML5,则必须在文档的第一行书写:

<!DOCTYPE html>

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,只要内容正确,即便没有按实例的大小写规则书写也不会出错(但本人还是习惯性严格按照<!DOCTYPE html>来书写)

编码(字符集)

当我们将数据存入计算机中时,所有的数据在计算机中都是以二进制的形式存储的,以存储文字为例,我们存储一段文字,需要将这些文字字符转换成计算机能理解的二进制编码,当我们从计算机中读取的时候,也必须将二进制编码转换回字符,供我们理解。

这一套过程涉及到两个概念——编码解码

  • 编码
    • 编码指的是将字符转换为二进制码的过程
  • 解码
    • 解码指的是将二进制码转换为字符的过程

与密码学中的编码解码很类似。

密码学的编码解码需要一套算法才能正常运作,计算机中的编码解码也不例外,我们也需要一套规则。

这套规则就被称为:字符集

  • 字符集:
    • 计算机编码解码采用的规则称为字符集(charset)

很好理解,字符集就是,让一个字符能够对应一个二进制码,比如说a就对应01,b就对应11,c就对应10等等(本人瞎编的)实质上就是一个翻译器,就好比我们使用翻译器(中文到英文)的时候,输入你好,翻译器就返回给我们hello。

看似很OK,但还会出现一个大问题:

全世界的字符集可不是只有一个的,如果编码和解码用的字符集不一样怎么办?

这个时候就会出现我们常说的乱码

所以为了保证不出现乱码的情况,我们必须保证编码和解码使用的是同一套字符集。

那字符集有哪些?

多了去了,常见的有:ASCII、GB2312、GBK、UTF-8……

ASCII,相信很多人都听说过,但它只支持英文(因为计算机是美国人发明的,当时计算机在其他语种的国家也并不普及,他们并不会考虑到其他语言的情况)

现在使用最多的字符集就是UTF-8了,它包含了世界上几乎所有已知的字符。

说了那么多概念,有什么用呢?

实际上在开发中并不怎么用得到,但是技多不压身嘛(

在HTML中,我们必须要向浏览器声明使用的字符集,以免出现乱码的问题。

这时候我们就需要在head标签对内将字符声明为 UTF-8 :

<meta charset="UTF-8">

HTML注释

HTML中的注释形如:

<!-- 注释内容 -->
© 版权声明
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论