HTML:认识HTML及基本语法

目录

[1. HTML介绍](#1. HTML介绍)

[2. 关于软件选择和安装](#2. 关于软件选择和安装)

[3. HTML的基本语法](#3. HTML的基本语法)


1. HTML介绍


HyperText Markup Language 简称HTML ,意为:超文本标记语言

超文本:是指页面内可以包含的图片,链接,声音,视频等内容

标记:可以理解为标签,例如我们去商场买东西,物品有商品标签(价格,材质,型号...)

标记语言中,就提供了许多的标签,不同标签有不同的功能,最终运行时,由浏览器对标签进行解析,最终呈现出不同标签的样子。

2. 关于软件选择和安装


我选择的是 HBuilderX 软件

HBuilderX是HBuilder的升级版,它集成了编辑器和IDE的功能,具有小体积和快速启动的特点;它支持HTML5 Web开发,由DCloud(数字天堂)推出,专为前端开发者设计;HBuilderX还支持APP、小程序开持Vue等前端框架,界面简洁,对字处理提供了高效的支持。

安装教程:

搜索该网址进入官网https://dcloud.io找到并点击HBuilderX图标

点击后跳转到下载界面,选择正式版(.zip) 如果是苹果系统就下载下面的.dmg

下载完成后打开文件位置并进行解压(解压到合适的位置)

找到解压后的HBuilderX文件,点击并找到我们的应用程序(**.**exe)启动即可.

3. HTML的基本语法


当我们创建一个html文件,会自动生成下图代码:

代码解析

<!DOCTYPE html> 声明html语言版本 ----- html5

<html> </html> html标签是标记语言的根标签

<head> </head> 头标签

<meta charset="utf-8" /> 表示按照此编码解析网页,即设置解析网页的字符集

<title> </title> 标题

<body> </body> 网页的内容
标签结构:

<开始标签> 标签体 </结束标签> 闭合标签(封闭的区间)

<标签名/> 自闭和标签 没有修饰的内容,只是完成某个功能,如 <br/> 表示换行。

标签的属性:

可以通过改变标签的属性设置标签显示的格式,属性必须写在开始标签中。

属性格式:属性名="值" 一个标签中可以写多个属性。

例如:

<body bgcolor="blue"> 设置背景颜色

<font color="red" size="4">百度</font> 设置内容属性

</body>

总之我们用标签描述网页,用浏览器将网页代码解析呈现

写一段简单的代码来解释吧

html 复制代码
<!-- 
   声明html语言版本   html5
 -->
<!DOCTYPE html>

<!-- 
   html标签是标记语言的根标签
 -->
<html>
	
	<!-- head 头 -->
	<head>
		<meta charset="utf-8" />  <!-- 按照此编码解析网页 设置解析网页的字符集 -->
		<title>百度一下</title>
	</head>
	
	<body>
		<!-- 网页的内容 -->	
		HBuilderX是HBuilder的升级版,它集成了编辑器和IDE的功能,具有小体积和快速启动的特点。	
	</body>
</html>

我们每次写完代码在运行前需要先保存(Crl+s)

在左上角点击运行按钮,选择游览器运行

运行结果

相关推荐
天平5 小时前
油猴脚本创建webworker踩坑记录
前端·javascript·typescript
原则猫6 小时前
前端基础大厦
前端
陈随易8 小时前
编程语言级别的Skill市场,AI Agent 的未来形态
前端·后端·程序员
SoaringHeart8 小时前
Flutter进阶:基于 EasyRefresh 的下拉刷新封装 n_easy_refresh_mixin.dart
前端·flutter
IT_陈寒10 小时前
Vite的热更新突然不香了,排查三小时差点砸键盘
前端·人工智能·后端
子兮曰11 小时前
Agency-Agents 深度解析:400+ AI 专家的"梦之队"如何重塑开发工作流
前端·后端·vibecoding
山河木马11 小时前
渲染管线-计算得到gl_Position(顶点着色器)之后续GPU流程
javascript·webgl·图形学
竹林81811 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
karry_k12 小时前
MyBatis批量insert-select踩坑:useGeneratedKeys=true 可能让PostgreSQL返回大量插入结果
java·后端
妙码生花12 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十九):点选验证码代码逐行目检
前端·后端·go