likes
comments
collection
share

一份让开发者快速入门HTML的学习指南

作者站长头像
站长
· 阅读数 19

本专栏皆在记录笔者在学习前端技术时的一些感悟和思考，由于笔者长期从事后端开发，而学习前端仅是出于工作需要。所以后续内容中，笔者将从以一名后端开发者的视角来重新审视前端技术,尽可能的让后端开发者可以快速上手前端的相关技术。

当然，受限于个人能力限制，对于前端相关技术时难免可能会有些纰漏，如果你发现笔者的错误，还请在评论留下你宝贵的建议。

思考，输出，沉淀。用通俗的语言陈述技术，让自己和他人都有所收获。 作者：毅航😜

前言

对于HTML（HyperText Markup Language,超文本标记语言）相信大家都不陌生，其本身是一种标记语言，主要用于创建和组织网页内容。其实对于上述信息，我们只需关注两点：

  1. 超文本 ：虽然叫超文本，但本质还是一种文本的形式，只不过会包含了文本信息以及与其他文本或资源之间的关联链接。
  2. 标记：所谓的标记就是指在文本中插入的特殊符号、代码或标签，以达到改变文本的结构一种行为。

通俗来看，所谓的标记就是通过w3c定义的一些"标签"来改变页面的结构和样式的一种行为；而超文本你可以通过标签<a>来理解，因为<a>的主要作用就是使用户能够点击链接进而跳转到其他网页、文档、资源或页面。

概览Html

让我们先来看一段Html代码，看一下Html页面通常会包含哪些内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Html</title>
    <link  rel="stylesheet" type="text/css" ></link>
</head>
<body>
    
</body>
</html>

可以看到，一个页面结构通常会微微两部分信息，一个是<head>部分，另一个则是body部分。其中，<head>里面的我们称为元信息类标签，其会包括 title、meta、style、link等，其主要用来描述文档的一些基本信息,即标题、文档编码、样式信息等。而在<body>标签中则会包括各式各样的标签，例如：span、div、ul、p等等常用标签，它们通常有着自己不同的应用场景，所以有时也被称之为语义类标签。此外，还有例如img、video、audio 之类的替换型媒体类标签，其主要用来引入外部内容。那面对如此多种类繁多的标签，该如何分类呢？笔者通常会分为如下几类：

  1. 文档元信息：这部分标签通常是出现在 head 标签中，主要用于描述文档自身的一些信息；
  2. 语义相关：例如header、nav、p等标签，这类标签通常具有语义信息，进而扩展了纯文本的表现形式；
  3. 媒体类型标签：主要在页面中引入声音、图片、视频等外部元素。
  4. 表单、表格：主要包括<form>、<table>标签，其通常都会有开源样式库供我们使用，例如，element-ui。

接下来，主要就对上述提到的前两部分内容进行介绍和分析，后部分在使用时查阅对应文档即可。

文档元信息

熟悉Java注解的开发者一定知道，注解提供了一种结构化的方式，其主要用于标注程序的一些元信息便在编译、运行时执行特定逻辑。与此类似，HTML中<head>标签内的元信息也是一种元数据（metadata），但它不是给程序看的，而是给浏览器和搜索引擎看的，用于指导它们如何处理和渲染网页内容。

通常，<head>标签内可以包含如下几个标签信息：

  1. <title> ：定义网页的标题，显示在浏览器标签页上，也用于搜索引擎结果。
  2. <meta> ：用于提供元信息，如字符编码、关键词、描述等。
  3. <link> ：通常用于引入外部资源，如样式表（CSS）和图标（favicon）。
  4. <script> ：引入JavaScript代码，可以是内部脚本或外部脚本文件。
  5. <style> ：定义内部样式表，用于指定文档的样式。
  6. <base> ：指定相对链接的基本URL。

其中<meta>标签是一组键值对，它是一种通用的元信息表示标签。其在 <head> 中可以出现任意多个<meta>标签。而 <meta>标签由 name 和 content 两个属性来定义。其中name 表示元信息的名，content 则用于表示元信息的值。常见的用法有：

  1. 字符编码设置：

    <meta charset="UTF-8">

    • 用于指定网页的字符编码，确保浏览器正确解释和显示文本内容。UTF-8是最常用的字符编码，支持多种语言字符。

  2. 关键词和描述：

    <meta name="keywords" content="关键词1, 关键词2, ...">

    <meta name="description" content="网页描述">

    • 用于提供有关网页内容的关键词和描述信息。这些信息有助于搜索引擎了解网页内容并在搜索结果中显示。

  3. 视口设置（Viewport Settings） （通常在移动设备上使用）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  • 用于控制网页在移动设备上的视口设置，包括宽度和缩放级别，以确保在不同设备上具有良好的可视化效果。

语义标签

在HTML中，语义标签是用于描述文档结构和内容的标签，它们具有明确的语义，有助于浏览器和开发人员更好地理解和解释文档。比如，

  1. <header> ：定义文档或文档的一部分的页眉。通常包括网站标题、标志、导航菜单等。
  2. <nav> ：用于包含导航链接的部分，例如网站的主菜单或导航栏。
  3. <section> ：用于将文档分成不同的节（sections），通常具有自己的标题和内容。
  4. <footer> ：定义文档或文档的一部分的页脚，通常包括版权信息、联系方式等。

当然，Html中的语义标签远不止于此。从笔者角度来看，编写一个页面通过span、div、ul等几个元素的相互组合就能完成页面的大部分内容。而这些span、div、ul标签其实就像后端java中的基础语法一样，有时你可能完全不需要搞懂像并发、I/O流、反射、JVM等复杂的知识，只需要懂得Java基础语法和常用框架的使用就能胜任后端大部分crud的任务。

所以，笔者对Html5中语义化标签的看法就是 其标志着前端在不断规范化，通过这些语义标签有助于创建更具结构和含义的文档，提高了文档的可读性、可维护性和可访问性。 但有时过于遵守规范，反而会变得呆板,就像孔乙己研究茴香豆有四种写法一样。

所以，笔者建议后端开发者在做前端时，尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。这样，我们才能保证语义标签不被滥用，造成更多的问题。

想当年老夫写前端，一套div,span走天下，不知什么是“对手”，直到后来被喷，才有所悔改。所以，是否使用语义标签还是根据项目组规范来做啦~

总结

实际上，在网上可以找到很多参考资料，比如 MDN 这样的参考手册，又比如一份语言标准。本文创作初衷并不是简单的将参考手册中的内容搬运过来，从而告诉你Html标签有哪些，然后将其定义随便一写。 笔者其实更希望能通过一种成体系的思考，帮助后端开发建立对前端Html标签的一种整体性认识，而不是单纯拘泥于某个标签怎么用。进而使得学习到的内容成体系，不至于一遍遍重复学，重复忘，

不断重复学旧知识其实就是笔者当前学习所陷入的一个困境，每次总是满怀信心去学，到最后折戟沉沙。其本质原因就是因为不成体系和缺乏总结实践。所以希望你别再走笔者当年老路。

最后，希望这篇文章对你学习前端有所启发。