HTML:认识HTML及基本语法

目录

1. HTML介绍

2. 关于软件选择和安装

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

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

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

运行结果 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/661227.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站升级提示:我用react+go重构了网站并记录了部署项目简要步骤

先贴出来地址&#xff0c;这是我网站的地址易查网 可能有细心的小伙伴们已经看到了&#xff0c;原来我的网站是这样式的 妥妥的phph5 改造 前端react框架 前段时间学习了react&#xff0c;正愁无处练手&#xff0c;就有人说我的网站很low,我感觉这正是一个好的机会&#xff…

uniapp + uView动态表单校验

项目需求&#xff1a;动态循环表单&#xff0c;并实现动态表单校验 页面&#xff1a; <u--form label-position"top" :model"tmForm" ref"tmForm" label-width"0px" :rulesrules><div v-for"(element, index) in tmForm…

洞察Agent AI智能体的未来:机遇与挑战并存

&#x1f512;文章目录&#xff1a; &#x1f6f4;什么是Agent AI智能体 &#x1f4a5;Agent AI智能体的技术组成 ☂️Agent AI智能体的应用场景 &#x1f4a3;Agent AI智能体的挑战与问题 &#x1f6b2; Agent AI智能体在未来社会中的角色和影响 ❤️对Agent AI智能体未来的期…

2024五一杯数学建模B题思路分析 - 未来新城背景下的交通需求规划与可达率问题

文章目录 1 赛题选题分析 2 解题思路详细的思路过程放在文档中 ! ! &#xff01;&#xff01;&#xff01;&#xff01;&#xff01;3 最新思路更新 1 赛题 B题 未来新城背景下的交通需求规划与可达率问题 随着城市化的持续发展&#xff0c;交通规划在新兴城市建设中显得尤为关…

【Linux】进程创建

思维导图 学习内容 在这一篇博客的主要内容是学习fork函数&#xff0c;了解fork函数的功能、返回值等。我们需要学会使用fork函数创建子进程。 学习目标 进程的概念fork函数的初始fork函数的返回值写时拷贝fork函数的常规用法fork函数调用失败的原因 零、进程的概念 进程&am…

【C++】封装哈希表 unordered_map和unordered_set容器

目录​​​​​​​ 一、unordered系列关联式容器 1、unordered_map 2、unordered_map的接口 3、unordered_set 二、哈希表的改造 三、哈希表的迭代器 1、const 迭代器 2、 operator 3、begin()/end() ​ 4、实现map[]运算符重载 四、封装 unordered_map 和 unordered_se…

Python+PYGObject/PYGtk+CSS样式--2024python示例

隔久点不用老是会忘&#xff0c;留个笔记。。 PythonPYGObject/PYGtk&#xff0c;加载 CSS 样式的演示代码 demo 运行的效果截图&#xff1a; #!/usr/bin/env python3 import sys import gigi.require_version("Gtk", "3.0") from gi.repository import …

C语言(操作符)1

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;关注收藏&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#x…

基于SSM的志愿者管理系统(含源码+sql+视频导入教程+文档+PPT)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的志愿者管理系统3拥有三个角色&#xff1a; 管理员&#xff1a;用户管理、志愿组织管理、注册申请观看、活动管理、报名管理、打卡管理、公告管理等 用户&#xff1a;登录注册、…

动态规划-子序列问题2

文章目录 1. 最长定差子序列&#xff08;1218&#xff09;2. 最长的斐波那契子序列的长度&#xff08;873&#xff09;3. 最长等差数列&#xff08;1027&#xff09;4. 等差数列划分 II - 子序列&#xff08;446&#xff09; 1. 最长定差子序列&#xff08;1218&#xff09; 题…

制定语音芯片的语音识别指令时需要关注的内容

背景 最近定义设备识别的语音指令以及对应的语音反馈。虽然语音控制在软件里只是很小的一块功能&#xff0c;但也不能太马虎。新人入坑就要学习&#xff0c;学习前人的经验规避问题&#xff0c;最后总结经验给后人&#xff0c;给未来的自己。好记性不如烂笔头~ 下面一些问题是…

1天搞定uniApp+Vue3+vite+Element UI或者Element Plus开发学习,使用vite构建管理项目,HBuilderX做为开发者工具

我们通常给小程序或者app开发后台时&#xff0c;不可避免的要用到可视化的数据管理后台&#xff0c;而vue和Element是我们目前比较主流的开发管理后台的主流搭配。所以今天石头哥就带大家来一起学习下vue3和Element plus的开发。 准备工作 1&#xff0c;下载HBuilderX 开发者…