html零基础入门教程 HTML入门教程

如今，前端工程师已经成为R&D系统的重要岗位之一。但恰恰相反，大学的计算机专业很少有人愿意开设前端课程，大多数前端工程师都是通过实践和工作不断学习知识。最近收到很多同学

本文最后更新时间： 2023-04-24 01:43:29

如今，前端工程师已经成为R&D系统的重要岗位之一。

但恰恰相反，大学的计算机专业很少有人愿意开设前端课程，大多数前端工程师都是通过实践和工作不断学习知识。

最近收到很多同学的后台消息，说希望多介绍一些前端教程。

今天就为大家带来一门适合前端初学者的课程，可以带你从零到HTML、CSS、JS、React等前端核心技能，打造一款待办管理应用~

项目效果:

课程从最基础的HTML/ CSS/JS开始，也包括TypeScript/React/Fabric等常用技能的讲解。由浅入深，循序渐进。如果你想快速入门React框架，这个课程会是你非常好的选择。

登陆“实验楼”官网，搜索“从0到1的建筑待办申请”，了解全部课程内容。

以下是课程第一节——“HTML入门”的内容，带你快速入门HTML。让我们进入前门看一看:

HTML简介

实验导论

这个实验是学习HTML，并详细解释网页是如何工作的。主要内容有:HTML常用标签、HTML文档结构、HTML表格和表单、HTML有序列表和无序列表。通过这一部分，您可以构建一个简单的HTML网页。

学习点

什么是 HTMLWeb 是如何工作的文档结构常见标签表格表单有序列表和无序列表

什么是HTML？

HTML(超文本标记语言)是创建网页的标准标记语言。HTML不需要编译，可以直接由浏览器执行。它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。

网络是如何工作的

让我们演示一下用户如何看到显示的网页。

具体来说:

当用户通过浏览器输入网址后，浏览器先在 DNS 服务器上找到它，然后对它进行解析。解析完成后，浏览器给服务器发送 http 请求。服务器同意这个请求，就把 HTML 文件发送回浏览器。浏览器拿到 HTML 文件，对其解析执行，显示在用户屏幕上。

HTML文档结构

我们先来看一个例子:

<!DOCTYPE html><html> <head> <title>HTML 简介</title> <meta charset="utf-8" /> </head> <body></body></html>

这是HTML的基本骨架。我们将逐步介绍这些是什么意思。

文档类型声明

& lt！DOCTYPE html & gt这是我们的文档声明头。他告诉浏览器这个文档是处理HTML文档的。

Html标签

Html标记是根元素，它表示文档的开始。这个标签包含两个子标签:head和body。

头部元件

标题下包含的标签有标题、元、链接、样式、脚本等。(后面会讲到)。

标题标签

功能:设置文档的标题或名称。浏览器通常会在窗口顶部或选项卡页面上显示该选项卡的内容。每个HTML文档只能有一个，并且必须有title标签。

元标签

& lt元字符集="UTF-8 " >声明字符的编码格式是utf-8。

主体标签

body标签定义了文档的主体，这是我们的主要内容(如文本、超链接、图像、表格和列表等。).

常见标签

1.h级标签

H标签有六种:h1、h2、h3、h4、h5、h6，代表我们的称谓。

<!DOCTYPE html><html> <head> <title>HTML 简介</title> <meta charset="utf-8" /> </head> <body> <h1>我是一级标题</h1> <h2>我是二级标题</h2> <h3>我是三级标题</h3> <h4>我是四级标题</h4> <h5>我是五级标题</h5> <h6>我是六级标题</h6> </body></html>

为了大家更有效的学习，请使用实验楼的环境。首先，我们创建一个新文件，单击文件，然后创建一个名为index.html的新文件。

然后输入上面的代码。

我们来看看运行效果。右键单击index.html文件，单击“打开方式”，然后单击“预览”。

最后的效果是:

2.p标签

p标签是我们的文本标签。p标签会自动在其两个标签之间创建一些空白色。删除以前的代码

<p>我是第一段文字，实验楼，做实验，学编程</p><p>我是第二段文字，实验楼，做实验，学编程</p>

3.图片标签

HTML 的图像是通过标签 <img> 来定义的。语法: <imgsrc="图片地址"/> 删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。HTML图像通过标签传递；删除以前的代码

<p>实验楼图片：</p><img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4 .标签

& lta & gt这是一个超链接标签，这意味着我们可以通过点击它跳转到一个网页。删除以前的代码