电脑小白学编程 HTML基础概述程序员复习学习必备

全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容：正式引入HTML网页开发，学习并了解HTML的相关知识。变身Web开发达人，做全栈程序员。这是以第一课，希望以我的方式，你将学会HTML这门课程。

写在前面

今天的话，主要讲解一下HTML相关知识，同样在接下来的一段时间的安排中，也以HTML为主。崇尚全栈，也就意味着我们，需要学习主流的技术知识。在前一段时间内，主要讲解了.Net的只是教程。当然.NET并没有完毕。

C#语言

只是在这里把HTML穿插进来，一则巩固自己所得，二来学习一下这门非常简单的HTML技术。学习完毕HTML之后则会，继续进行基础加强、数据库、MVC等教程的协作工作。

PDF文档

同时在前一个阶段内，讲解的并不是很好，在这个HTML阶段内，则会吸取教训，争取写出更符合初学者学习的技术教程。当然前面的课程也会不断的修正，最后我会生成PDF的文档，发给大家。

HTML概述

HTML，超文本标记语言，超文本就意味着有多于文字的形式，比如包含超链接、图片、视频、动画等形式。HTML是应用在网站网页展现的一种语法结构。我们在使用浏览器浏览网页的时候，看到的界面都是由HTML代码表现出来的。HMTL可以说是一种展示文字图片视频等元素的一种方式。通过特定的标记就能展示出来自己想要的效果。如何展现？就让我一步步教你。

学习HTML的必要性

物联网

互联网的飞速发展，导致了形形色色的网站应用被创建。云计算、物联网仿佛唾手可得。把诸多应用建立在云上，通过这种浏览器与用户交互的形式让人们使用。这些所有网络应用，只要是通过浏览器进行使用的情况，都是需要HTML技术。当然HTML作为基础之用。这就要求我们程序员，必须学习并熟悉HTML语言。能在这个基础上进行Web的开发。

HTML语言的特点

HTML是解释性语言，不需编译，直接书写之后，就可以运行。
HTML是纯文本类型的语言，你完全可以通过记事本程序进行创建书写。
虽然HTML可以通过记事本来创建写代码，但是并不推荐，因为以前学习过.Net，所以依旧使用Visual Studio。VS也是前端的开发神器。
自己写的HTML代码，在不同的浏览器内，可能会有不同的展示效果。这是由浏览器的渲染引擎决定的。
HTML具有平台无关性，在任何平台只要拥有一款浏览器，你就可以打开HTML网页。
HTML代码运行在浏览器中，也就是需要使用浏览器进行测试。

HTML

今天就先说一下HTML的基本知识，电脑编程系列教程，下节继续。

TML的入门

1. HTML的代码文件

（1）打开Hbuilder开发工具，新建项目，点击右键新建一个HTML文档。

（2）在文档中写HTML代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

这是产品页面

</body>

</html>

温馨提示：

常用的快捷键：

Ctrl+s:保存

ctrl+c:复制

ctrl+x：剪切

ctrl+v：粘贴

2. HTML的基本结构

对于HTML文件的后缀名一般为“html”或“htm”

2.1HTML的标签格式

（1）什么是HTML标签？

HTML标签是有开始标签和结束标签组成

开始标签：是被尖括号包围的元素名。

结束标签：是被尖括号包围的斜杠和元素名

<元素>内容 </元素>

例如：<b>好好学习天天向上</b>

注意：有些HTML标签是没有结束标签的, <hr/>

(2)单标签和双标签

双标签：例如：<b></b>

单标签：<hr/> <br/>

(3) 标签的属性

我是一个标题标签

</h1>

3. HTML基本结构的认识

<!DOCTYPE html>

<html>

<head>

<!--

meta：提供网页的相关信息，有利于搜索引擎收录

charset="UTF-8"：设置网页编码方式为utf-8

name="Keywords" ：设置网页关键字

name="viewport": 设置网页视窗大小

-->

</head>

<body>

<!--

<body></body>：网页的主体内容，用户呈现的内容，比如文字，图片，链接，视频……

-->

</body>

</html>

4. HTML的注释

5. HTML的编码问题

常见编码个格式：

UTF-8:国际通用的编码格式

GBK/GB2312:中文编码字符

HTML的编码：<meta charset="UTF-8">

6. HTML规范

（1）html标签都是有尖括号包围的标签，比如<b>

（2）标签通常是成对存在，<b></b>,<h1></h1>

（3）HTML不区分大小写，我们建议小写。

（4）HTML可以嵌套，但是允许交叉嵌套

正确写法：<b> <h1>我很粗</h1> </b>

错误写法：

~~<b> <h1>我很粗 </b></h1>~~

今天，前端工程师已经成为研发体系中的重要岗位之一。

可是与此相对的是，极少大学的计算机专业愿意开设前端课程，大部分前端工程师的知识，也都是在实践和工作中不断学习的。

最近收到很多同学的后台留言，说希望多推出一些前端方向的教程。

今天我们就带来一门适合前端初学者的课程，可以带你从零入门 HTML、CSS、JS、React 等前端核心技能，并创建一个待办事项的管理应用～

项目效果：

课程从最基础的 HTML/ CSS/JS 讲起，还包含了 TypeScript/React/Fabric 等常用技能的讲解。由浅入深，层层递进，如果你想快速上手 React 框架，这门课会是你非常好的选择。

访问“实验楼”官网，搜索“从 0 到 1 构建待办事项应用”就能学习全部课程内容。

以下是课程第一节的内容 —— 「HTML 简介」，带你快速入门HTML，让我们一起进入前端的大门看看吧：

「HTML 简介」

实验介绍

本实验是对 HTML 进行学习，并且较详细的说明了 Web 是如何工作的。主要内容有：HTML 常见标签、HTML 文档结构、HTML 表格和表单、HTML 有序列表和无序列表。通过本节学习，可以构建简单的 HTML 网页。

知识点

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

什么是 HTML

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

Web 是如何工作的

下面我们来演示用户是如何看到一个网页显示的。

具体来讲：

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

HTML 文档结构

首先我们来看一个例子：

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

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

文档类型声明

<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器，本文档处理的是 HTML 文档。

html 标签

html 标签即根元素，此处表示文档的开始，该标签包含两个子标签：head 和 body。

head 元素

head 标签下面所包含的标签由 title、meta、link、style、script 等（后面会讲到）。

title 标签

作用：设置文档的标题或者名称。浏览器通常将该标签的内容显示在窗口顶部或者标签页上。每个 HTML 文档只能有一个，必须有一个 title 标签。

meta 标签

<metacharset="UTF-8"> 声明字符的编码格式为 utf-8。

body 标签

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>

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

然后输入上面的代码。

让我们来看一下运行效果吧。鼠标右键 index.html 文件，点击 Open With，然后点击 Preview。

最终效果为：

2.p 标签

p 标签是我们的文本标签，p 标签会自动在其两个标签之间创建一些空白。删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。

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

3. 图片标签

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

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

4.a 标签

<a> 标签是超链接标签，意思就是我们点击它可以跳转到一个网页。删掉上段代码 <body> 标签里的内容，把下面的内容放到 <body> 标签里面去。

<a href="https://www.shiyanlou.com/">实验楼</a>

点击文字：

跳转到指定网页：

篇幅有限，后续的课程内容，请在“实验楼”边敲代码边学习～

访问“实验楼”官网，搜索“从 0 到 1 构建待办事项应用”，就能找到课程，继续学习啦！

在线咨询

上一篇：HTML语言是什么？
下一篇：分享 10个酷炫的后台模板，给不爱写页面的程序员

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

电脑小白学编程 HTML基础概述 程序员复习学习必备