一起走进Html的世界(学习什么是HTML)_常见浏览器是用的html4.01还是html5-CSDN博客

本文介绍了HTML的基础概念，包括其构成元素和编写步骤，并重点演示了如何使用HBuilder创建和编辑HTML文档。此外，还讲解了HTML的基本语法，如标签结构、文档声明和编码设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章目标

了解什么是HTML
安装HBuilder
简单使用HTML基础语法

HTML基础入门

网页概述：什么是网页
- 简单来说就是,我们平时用浏览器打开的,看到的都是网页,如:百度,就是具体的网页
网页是如何编写的

在这里插入图片描述

什么是HTML

HTML（英文：Hyper Text Markup Language）中文为超文本标记语言。

文本：就是网页上编写普通文字等信息。
超文本：就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
标记：就是标签。例如：<a>一个链接</a>

编写第一个网页

编写第一个网页的步骤是：

建：创建txt文件，在任意位置创建“文本文档”。（鼠标右键>新建>文本文档）
名：修改文件扩展名，修改成“模板.html”。（F2快捷键或文件上右键>重命名）
编：使用“记事本”编辑html文档，并按照指定格式，编写HTML内容。
查：双击html文档，使用浏览器查看结果。

1.创建文本

2.修改名称

3.编辑HTML

4.添加内容

5.打开HTML

6.总结

HTML基本语法概述

扩展名

HTML文件的扩展名为*.html。因为历史原因，开发中也会看到*.htm作为扩展名，但不建议使用。上世纪操作系统要求所有文件的扩展名必须是三位，所以*.html和*.htm没有其他区别

HTML内容

在这里插入图片描述
html文档一般必须包含3种标签：<html>、<head>、<body>

<html>:是html文档的最外围标签，整个文档只能有一个。包含：头标签head和体标签body
<head>:是头标签，head标签中的内容浏览器处理后一般不显示。只有title显示标题
<body>:是体标签，主要用于编写需要显示的内容，html的大多数标签都放在中

标签概述

HTML标签都是HTML规范规定固定内容，开发中，我们只需要知道标签名和标签解析后的效果即可。HTML标签在使用中大体可以划分成两类：

双标签：由开始标签和结束标签组成，必须成对出现<开始标签>标签体</结束标签>
单标签：只有开始标签，一般需要添加/表示结束<标签名 />
注意：
在开发中应该编写成<h1>xxx</h1，实际我们发现编写<h1>xxx”显示效果一样。这是因为现在所有的浏览器都具有非常强大的容错能力。语法是错误的，只是浏览器自动帮着纠正了，如果有一天浏览器不帮这个忙了，结果将会不可预测。要求：双标签必须编写结束标签。

标签的关系

一个页面是由很多个标签组成的，标签和标签之间的关系主要有两种

父子（嵌套）关系

<head>
	<title>
	</title>
</head>

在这里插入图片描述

并列关系

<head></head>
<body></body>

编码规范：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐
注意：标签书写不能交叉

搭建环境

HBuilder介绍

使用记事本或Notepad++开发HTML代码效率比较低，现阶段比较流行的前端IDE(集成开发环境)是HBuilder。HBuilder是在eclipse的基础上，将不需要的内容删除，将需要的内容进行强化。
快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML等语言的开发效率

HBuilder下载与安装

下载地址：https://download1.dcloud.net.cn/download/HBuilderX.3.2.9.20210927.zip
解压就可以使用了

HBuilder使用

创建WEB项目

在这里插入图片描述

创建HTML页面

在这里插入图片描述

执行效果

在这里插入图片描述

文档声明

文档声明：通知浏览器文档所使用的 HTML 规范。不同版本的规范浏览器处理方式不同。常见规范版本：HTML5、HTML4.01。以后开发中我们使用HTML5规范。规范都是固定格式
HTML5规范【掌握】

<!DOCTYPE html>

HTML4.01规范(了解)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

设置编码

HTML5简化写法：(固定格式)

<meta charset="UTF-8">

HTML标准版

<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>

HTML基本语法

注释标签

HTML注释以""结尾，为HTML源码内容，提供给开发人员编写说明性文字，当浏览器解析显示时将被忽略。格式如下：

<!--注释-->

在这里插入图片描述

标题标签 h1

HTML提供系列标签，用于修饰标题，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6> <h1> 定义最大的标题，要求一个html页面中只能有一个<h1>标签,<h6>定义最小的标题
例如：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	<h1>今天天气真好！</h1>
	<h2>今天天气真好！</h2>
	<h3>今天天气真好！</h3>
	<h4>今天天气真好！</h4>
	<h5>今天天气真好！</h5>
	<h6>今天天气真好！</h6>
	<h7>今天天气真好！</h7>
	</body>
</html>

标题标签hr

<hr /> 标签在 HTML 页面中创建一条水平分隔线，视觉上将文档分隔成多个部分

size属性：水平线的高度，单位像素
noshade属性：没有阴影，取值：noshade，表示显示纯色

在这里插入图片描述

字体标签 font

<font> 用于设置字体尺寸、字体颜色等。
		size属性：设置字体的大小。可用的值：从 1 到 7 的数字。浏览器默认值是 3。
		color属性：设置字体的颜色
			颜色的取值：#xxxxxx  或 colorname
				#xxxxxx 表示使用红绿蓝三原色设置颜色。
					红绿蓝分别取值：00 -- FF，此处使用16进制。（FF就是十进制的255）
					#000000 表示黑色，#FFFFFF白色
					#FF0000红色，#00FF00绿色，#0000FF蓝色
					红绿蓝2位取值相同可以省略成1位。例如：#112233 简化成#123

在这里插入图片描述

换行标签br

<br /> 插入单个换行

在这里插入图片描述
使用<br />

段落标签p

格式：

<p> 段落内容 </p>

功能：为文章分段。
效果：换行、前后空出一行：
在这里插入图片描述

格式化标签b，i

		<!-- 格式化-->
		<b>粗体</b>
		<i>斜体</i>
		<s>删除线</s>
		<!---转换以下文字->
	《笑傲江湖之东方不败》有人就有恩怨，有恩怨就有江湖，人就是江湖，你怎么退出？

在这里插入图片描述

《笑傲江湖之<b>东方不败</b>》有人就有恩怨，有<b>恩怨就有江湖</b>，人就是<i>江湖</i>，你怎么<s>退出</s>？

总结

在这里插入图片描述