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

今天我们来聊聊一个听起来可能有点技术感,但其实超级亲切的东东——HTML。别急,我保证不用任何复杂的术语,咱们就像聊天一样,聊聊HTML到底是个啥。

一、超文本标记语言

想象一下,你有一张白纸,你想在上面画画,写点东西。那么你就需要用到画笔,而HTML,全称是“超文本标记语言”(HyperText Markup Language),它就像你手中的画笔和颜料,帮助你在这张白纸上“画”出网页。不过,这里的“画”不是真的画画,而是用一种特殊的“语言”来告诉浏览器,这个网页上应该有什么内容,这些内容应该怎么排列。

举个例子,就像你写日记一样:

  1. 你可能会写上日期:“2024年6月13日”。

  2. 然后是天气:“今天天气晴朗”。

  3. 接着是正文:“今天我去公园玩了,很开心。”

新建一个文本文件,修改文件后缀为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> 里则是网页的主要内容。

二、做个个人简历网页

再比如,你想做个个人简历网页:

  1. 你可能会写上你的名字:“张三”。

  2. 然后是你的教育背景:“毕业于XX大学”。

  3. 还有你的工作经历:“曾在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>标签用来插入图片。

<a>标签用来创建链接,可以链接到其他网页或者网页的某个部分。

<table>标签用来创建表格,展示数据。

<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就是你手中的第一把钥匙!加油,小白也能成为网页大师!

相关推荐

  1. 新手前端系列-什么HTML

    2024-07-11 14:22:01       17 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-11 14:22:01       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-11 14:22:01       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-11 14:22:01       45 阅读
  4. Python语言-面向对象

    2024-07-11 14:22:01       55 阅读

热门阅读

  1. 各数据库查询模式名、表名、表注释、表大小

    2024-07-11 14:22:01       18 阅读
  2. c++ 常用数学函数讲解 初步讲解

    2024-07-11 14:22:01       21 阅读
  3. 菜鸟的Leetcode(02)

    2024-07-11 14:22:01       22 阅读
  4. uniapp图片压缩之后在上传

    2024-07-11 14:22:01       20 阅读
  5. composables 目录下的文件(web前端)

    2024-07-11 14:22:01       21 阅读
  6. 刷题——利用两个栈实现队列

    2024-07-11 14:22:01       22 阅读
  7. AWS需要实名吗?

    2024-07-11 14:22:01       20 阅读
  8. Redis新手教程

    2024-07-11 14:22:01       19 阅读
  9. 薄冰英语语法学习--代词1

    2024-07-11 14:22:01       17 阅读