HTML简介：想成为前端开发者？先从掌握HTML开始

HTML简介：想成为前端开发者？先从掌握HTML开始！

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

谁见过风呢

勿论你和我

但当树木俯首

风正经过

- 2024.03.05 -

在这个数字化的时代，我们每天都在与网页打交道。你是否曾经好奇过，这些充满魔力的网页是如何诞生的呢？今天，我们就来揭开构成这些网页的神秘面纱——HTML（超文本标记语言）。

一、什么是HTML

网页的基本组成

网页是构成网站的基本元素，通常由图片、链接、文字、声音、视频等元素组成，通常我们看见的网页都是.htm和.html后缀结尾的文件，因为都称为HTML文件。

什么是HTML

HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。

使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。

每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL），实际上就是下载、解析和显示 HTML 文档的过程。将众多 HTML 文档放在一个文件夹中，然后提供对外访问权限，就构成了一个网站。

二、HTML的历史

HTML的故事始于1989年，当时蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）提出了一个名为“万维网”的概念。

为了实现这一概念，他发明了HTML，并随后与罗伯特·卡里奥一起发明了HTTP协议。从那时起，HTML就成为了互联网不可或缺的一部分。

上图简单罗列了HTML的发展历史，大家可以简单了解一下。

三、HTML相关概念

什么是标签

HTML 标记通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如<html/>。

封闭类型标记（也叫双标记），必须成对出现,如<p></p> 。

标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。

非封闭类型标记，也叫作空标记，或者单标记，如<br/>

<标签>内容<标签/>

什么是元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。但是严格来讲，一个HTML 元素包含了开始标签与结束标签，如下实例。

HTML 元素：

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

web浏览器

Web 浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取 HTML 文件，并将其作为网页显示。浏览器并不是直接显示的 HTML 标签，但可以使用标签来决定如何展现 HTML页面的内容给用户：

HTML 属性

属性是用来修饰元素的，属性必须位于开始标签里，一个元素的属性可能不止一个，多个属性之间用空格隔开，多个属性之间不区分先后顺序。

每个属性都有值，属性和属性的值之间用等号链接，属性的值包含在引号当中，属性总是以名称/值对的形式出现。

四、HTML的基本结构

一个典型的HTML文档由以下几个基本元素构成：

<!DOCTYPE html>

这是文档类型声明，告诉浏览器这个文档使用的是HTML5标准。

<html>

这是整个HTML文档的根元素，其他所有元素都包含在这个标签内。

<head>

这个部分包含了所有关于网页的元信息，如标题、字符集声明、引入的CSS样式表和JavaScript文件等。

<title>

这个标签定义了网页的标题，它显示在浏览器的标题栏或标签页上。

<body>

这个部分包含了网页的所有内容，如文本、图片、链接、表格、列表等。

HTML的结构示例

让我们通过一个简单的例子来具体了解HTML的结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个简单的段落。</p>
<a href="https://www.example.com">点击这里访问示例网站</a>
</body>
</html>

在这个例子中，我们可以看到一个完整的HTML文档结构，从<!DOCTYPE html>开始，到最后一个</html>结束。

想象一下，如果HTML是一棵树，那么<html>就是树干，<head>和<body>就像是树的两个主要分支。<head>中的标签好比是树叶，它们虽然不起眼，但却至关重要，为树木提供营养。而<body>中的标签则像是树枝和果实，它们构成了树的主体，吸引人们的目光。

想要快速入门HTML吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！搜索【云端源想】前往学习哦！

五、HTML的特点

HTML的特点主要包括简易性、可扩展性、平台无关性和通用性等。具体如下：

1、简易性：

HTML是一种相对容易学习和使用的语言，它的版本升级通常采用超集方式，使得新版本能够兼容旧版本的标签和功能，这样既保持了向后兼容性，又能够灵活方便地引入新的功能。

2、可扩展性：

随着互联网的发展，HTML也在不断增加新的元素和属性来满足新的需求，如支持多媒体内容的嵌入、更丰富的表单控件等。这种设计使得HTML能够适应不断变化的网络环境。

3、平台无关性：

HTML编写的网页可以在不同的操作系统和浏览器上显示，这是因为HTML是一种与平台无关的语言。这意味着无论用户使用什么设备或浏览器，都能够访问和浏览HTML页面。

4、通用性：

HTML是网络的通用语言，它是一种简单的标记语言，用于创建和结构化网页内容。由于其广泛的支持和普及，几乎所有的设备和浏览器都能够解析和显示HTML内容。

5、支持多种媒体格式：

HTML不仅支持文本内容，还能够嵌入图片、音频、视频等多种媒体格式，这使得网页可以提供丰富的用户体验。

6、标准化：

HTML遵循万维网联盟（W3C）制定的国际标准，这意味着网页开发者可以根据这些标准来创建网页，确保网页的互操作性和可访问性。

7、标签丰富：

HTML提供了一系列的标签，如标题、列表、链接、表格等，这些标签使得开发者能够创建出结构清晰、功能丰富的网页。

综上所述，HTML作为一种基础的网页开发语言，因其易学易用、跨平台、多功能和高度标准化的特点，成为了构建现代网络内容的核心工具。

HTML作为连接世界的纽带，其重要性不言而喻。它是数字世界的基石，也是每个想要进入互联网领域的人必须掌握的技能。无论你是梦想成为前端开发者，还是仅仅想要更好地理解这个由代码构成的世界，学习HTML都是一个不错的开始。

今天就先讲到这里了，

更多前端开发基础知识点击文末阅读原文查看哦！

记得关注【云端源想IT】一起学编程！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

喽，大家好，我是雷工！

最近有项目用到KingFusion软件，由于KingFusion是B/S架构的客户端组态软件，因此在学习KingFusion产品时会涉及许多前端的知识。

像JavaScript语言就是需要用的，俗话说：活到老学到老。今天学习JavaScript基础语法知识，并记录笔记方便回顾。

1、JavaScript概念

JavaScript是一种具有函数优先的轻量级，即时编译型，运行在客户端（浏览器）的脚本语言，用于实现人机交互的效果。

2、JavaScript特点

2.1、代码不进行预编译：其源代码在发往客户端运行之前不需要进行编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。

2.2、JavaScript中，如果一行运行不了，那么下面的语句也无法运行。

3、JavaScript优点

3.1、使用范围广。

3.2、入门简单，容错性强。

3.3、开元学习资料丰富。

4、JavaScript作用

4.1、网页特效：监听用户的一些动作让网页做出相应的反馈。

4.2、表单验证：可以针对表单数据的合法性进行判断。

4.3、数据交互：获取后台的数据，渲染到页面前端。

4.4、服务端编程：Node.js。

5、JavaScript的构成

5.1、ECMAScript:规定了JavaScript基础语法的核心知识。

例如：变量，分支语句，循环语句、对象等等。

5.2、Web APIs:

5.2.1、DOM 操作文档。

例如：对界面元素进行移动、大小、添加删除等操作。

5.2.2、BOM 操作浏览器

例如：界面弹窗，检查窗口宽度、存储数据到浏览器等。

后记

在这知识大爆炸的时代，穷尽一生也不可能把所有知识学完，只能是跟现有工作相结合，缺什么补什么，用到什么学什么。如有不当描述欢迎指正。

末有福利

前端开发，入门简单，有一台可以运行多款浏览器的电脑，能联网查询资料即可。深入的部分，需要更多的理论知识、肯钻研的精神。前端开发，需要入门了解的屈指可数，主要就是如下几个大方面：

背景知识

软件安装

文本编辑器

vscode(推荐使用，功能强大)
Sublime Text
NodePad++

浏览器

Firefox,Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

版本控制

Git GitHub

构建工具

Webpack
Gulp

Web standards

Web standards ，主要定义浏览器端，功能接口标准的，标准的具体实现，由不同的浏览器厂商完成。

当下使用的web技术

主流浏览器

Firefox, Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

协议

协议，主要用于通信。前后端不是独立的，彼此通过协议，互换信息，web系统才能运行正常

http
https
socket

HTML, CSS, and JavaScript

开发工具

各浏览的DevTool,便于调试
Linters插件
Minify工具
CDN等
测试工具
js库和前端框架（站点构建的更快、更高效）

服务端语言

Python, NodeJS, Deno, Go, Rust

面临的挑战

浏览器兼容

Web standards，各实现厂商不同，支持力度不同，浏览器兼容问题自然存在

响应式设计

厂商的不同，展示场景的不同，意味着不能全篇一律敲定，需要动态变化展示内容

性能

天下站点，只有快，才能留住用户

易用性

站点的访问人群不同，要具备普适性，都能轻松使用。

国际化

国际语言众多，需要尽可能的多支持

安全性

用户隐私数据保护

HTML

html基础概念

html元素

当然，也有例外，不是这种格式的

# Empty elements， or (void elements.) 
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
复制代码

html元素嵌套

<p>My cat is <strong>very</strong> grumpy.</p>
复制代码

块元素和行内元素

块元素，独占一行；行内元素，按先后顺序，排列这些与css的display不同，不影响元素能包含哪些元素，能被哪些元素包含

元素属性

其中，也存在一种特殊的属性：Boolean attributes

<input type="text" disabled>
# 等效于
<input type="text" disabled="disabled">
复制代码

另外，也会存在一些特殊的写法。推荐都是key="value"形式

<a href=https://www.mozilla.org/>favorite website</a>
复制代码

html文档结构

不管多少连续的空白，浏览器都会解析会一个空格

<!DOCTYPE html> # 定义解析格式
<html> # 文档的root 
  <head> #定义源数据地方 
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body> # 文档的可见内容部分
    <p>This is my page</p>
  </body>
</html>
复制代码

元数据等请移步参考

html特殊字符

<, >,",' and &, 这是html自身使用的，如果用户需要展示，那么需要转义

html注释

<!-- 
 <p>I am!</p> 
-->
复制代码

html 多媒体

image

普通的图片

alt描述图片

# 推荐添加alt,而不是text子元素节点添加
<img src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
         it has a large head with long sharp teeth">
复制代码

caption添加标题

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">
 <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
复制代码

响应式图片

根据展示设备尺寸的不同，加载不同的图片

<img srcset="elva-fairy-480w.jpg 480w,
            elva-fairy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
           800px"
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy">
复制代码

设备尺寸相同，但是分辨率不同

<img srcset="elva-fairy-320w.jpg,
            elva-fairy-480w.jpg 1.5x,
            elva-fairy-640w.jpg 2x"
    src="elva-fairy-640w.jpg"
    alt="Elva dressed as a fairy">
复制代码

利用picture，不同设选择加载不同的图片

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
复制代码

picture+svg

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
复制代码

audio

单一url 浏览器厂商，针对音频的支持格式不是不同的，譬如： MP3, MP4 and WebM

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>
复制代码

浏览器适配问题

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
复制代码

video

单一url 浏览器厂商，针对视频的支持格式不是不同的

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>
复制代码