新手前端系列-什么是HTML？一文让你秒懂！

今天我们来聊聊一个听起来可能有点技术感，但其实超级亲切的东东——HTML。别急，我保证不用任何复杂的术语，咱们就像聊天一样，聊聊HTML到底是个啥。
一、超文本标记语言
想象一下，你有一张白纸，你想在上面画画，写点东西。那么你就需要用到画笔，而HTML，全称是“超文本标记语言”（HyperText Markup Language），它就像你手中的画笔和颜料，帮助你在这张白纸上“画”出网页。不过，这里的“画”不是真的画画，而是用一种特殊的“语言”来告诉浏览器，这个网页上应该有什么内容，这些内容应该怎么排列。
举个例子，就像你写日记一样：
你可能会写上日期：“2024年6月13日”。
然后是天气：“今天天气晴朗”。
接着是正文：“今天我去公园玩了，很开心。”
新建一个文本文件，修改文件后缀为html。在文件中，你可以这样写：

<!DOCTYPE html>
<html>
<head>
  <title>我的日记</title>
</head>
<body>
  <h1>2024年6月13日</h1>
  <p>今天天气晴朗。</p>
  <p>今天我去公园玩了，很开心。</p>
</body>
</html>

看，这就是HTML的基本结构。写完后保存，然后双击运行就可以在浏览器上看到效果了。其中 <!DOCTYPE html> 告诉浏览器这是HTML5文档；<html>是整个文档的根元素；<head> 里可以放一些不会显示在页面上的信息，比如网页的标题；<body> 里则是网页的主要内容。

二、做个个人简历网页
再比如，你想做个个人简历网页：
你可能会写上你的名字：“张三”。
然后是你的教育背景：“毕业于XX大学”。
还有你的工作经历：“曾在XX公司担任XX职位”。
在HTML中，你可以这样组织：

<!DOCTYPE html>
<html>
<head>
  <title>张三的简历</title>
</head>
<body>
  <h1>张三</h1>
  <h2>教育背景</h2>
  <p>毕业于XX大学</p>
  <h2>工作经历</h2>
  <p>曾在XX公司担任XX职位</p>
</body>
</html>

这里，<h1>和<h2>是标题标签，用来表示不同级别的标题。<p>是段落标签，用来表示一段文字。

三、HTML就像乐高积木
HTML就像乐高积木，你可以通过组合不同的标签来构建你的网页。
<img>标签用来插入图片。
标签用来创建链接，可以链接到其他网页或者网页的某个部分。

标签用来创建表格，展示数据。 <ul>和<ol>分别用来创建无序列表和有序列表。但是，HTML只是告诉浏览器网页的结构和内容，它本身并不关心网页长什么样。剩下的这就轮到CSS（层叠样式表）和JavaScript登场了。CSS用来美化网页，比如改变文字颜色、调整布局等。而JavaScript则可以让网页动起来，比如点击按钮后弹出一个对话框。总结一下，HTML就像是房子的框架，CSS是装修，JavaScript是房子里的电器。 HTML定义了网页的结构，比如标题、段落、图片等。 CSS负责美化这些结构，让网页看起来更漂亮。 JavaScript则让网页具有交互性，比如响应用户的点击事件。所以，当你看到网页上的文字、图片、链接等，它们都是通过HTML来组织的。而网页的美观和交互性，则需要CSS和JavaScript来实现。四、HTML是一种标记语言超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML 是一种基础技术，常与 CSS、JavaScript 一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取 HTML 文件，并将其渲染成可视化网页。它没有条件判断、循环等编程概念，它只是用来告诉浏览器网页的结构。学习HTML就像是学习如何用不同的积木搭建房子，一旦你掌握了基本的标签和属性，你就可以开始创造属于你自己的网页了！HTML 使用“标记”（markup）来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素” 如： <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video> 等。五、小结希望这篇文章能让你对HTML有个基本的了解，下次当你浏览网页时，或许你会对背后的技术有更深的认识。记得，每个人都可以是网页的创造者，HTML就是你手中的第一把钥匙！加油，小白也能成为网页大师！

html 前端

阅读 474更新于 2024-07-11