HTML入门与HBuliderX下载安装及使用

最新推荐文章于 2024-03-29 14:01:42 发布
最新推荐文章于 2024-03-29 14:01:42 发布
阅读量8.7k 收藏 41
点赞数 4
分类专栏： HTML 文章标签： html 前端 HBuilderX 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qibulemingzi/article/details/121445276
版权

1.什么是HTML？

    HTML是超文本标记语言（文字、图片、视频、音频…）
    HTML不是编程语言，是一种标记语言

2.如何运行HTML文件？

    HTML文件是运行在浏览器之上的，HTML具有跨平台性，可以运行在Windows、MacOS、Linux、移动设备

3.HTML文件的后缀名是什么？

    HTML文件的后缀名是 .html ,或者htm

4.前端的开发工具？

    1、下载HBuilderX工具
    https://www.dcloud.io/hbuilderx.html

在这里插入图片描述

解压 => 复制到你的D盘下（最好将你的所有的软件放在统一的目录下，这个目录最好不要使用中文命名）=》打开文件夹=》找到HBuilderX.exe，双击打开
将快捷方式添加到桌面上：鼠标右键选中，点击选择发送 => 发送至桌面快捷方式

5.浏览器的选择：

    谷歌、火狐、edge/IE

6.如何创建项目

    新建项目
    填入项目名称
    勾选基本HTML项目

7.< !DOCTYPE html >是什么？

声明HTML版本
你可以写大写，也可是写小写，也可以省略，默认添加使用HTML5的规范

8.标签的格式

    标签通常情况下是成对存在的，特殊情况也可以单独存在，单独存在的标签以 / 结尾
    标签之间是可以进行嵌套的（标签里面可以包含其他标签，就像body里面可以写其他标签）

9.html的基本结构

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

10.标题标签h1-h6

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		标题标签h1-h6，字体大小和粗细随着数字的增加而变小
		<h1>h1标签</h1>
		<h2>h2标签</h2>
		<h3>h3标签</h3>
		<h4>h4标签</h4>
		<h5>h5标签</h5>
		<h6>h6标签</h6>
	</body>
</html>

在这里插入图片描述

11.段落标签p标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签</title>
	</head>
	<body>
		<h2>段落标签 p:换行，有一定的行高</h2>
		<p>轻轻的我走了，</p>
		<p>正如我轻轻的来；</p>
		<p>我轻轻的招手，</p>
		<p>作别西天的云彩。</p>
		<p>那河畔的金柳，</p>
		<p>是夕阳中的新娘；</p>
		<p>波光里的艳影，</p>
		<p>在我的心头荡漾。</p>
	</body>
</html>

在这里插入图片描述

12.有序列表ol 列表项li

html有序列表的类型type
在有序列表的默认情况下，使用数字序号作为列表的开始，可以通过type属性将有序列表的类型设置为英文或罗马字母。

【基本语法】

列表项
列表项
列表项
···

    【语法介绍】

    有序列表的序号类型如表所示。

类型值列表项目符号
1数字1、2、3、4、…
a小写英文字母a、b、c、d、…
A大写英文字母A、B、C、D、…
i小写罗马数字i、ii、iii、iv、…
I大写罗马数字I、II、III、Iv、…
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		<h2>有序列表ol</h2>
		<ol>
			<li>HTML</li>
			<li>CSS</li>
			<li>Javascript</li>
		</ol>
	</body>
</html>

在这里插入图片描述
    设置type类型值为A

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		<h2>有序列表ol</h2>
		<ol type="A">
			<li>HTML</li>
			<li>CSS</li>
			<li>Javascript</li>
		</ol>
	</body>
</html>

在这里插入图片描述

13.无序列表ul 列表项li

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<h2>无序列表使用ul</h2>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</body>
</html>

在这里插入图片描述

14.图片标签 img（单标签，没有结束标签）

src属性放的是图片的路径
alt属性图片的描述，当我的图片路径出现问题的，图片无法加载，就会出现alt内的内容
title属性  当鼠标进入（悬浮）一定的时间后显示的内容
width 图片的宽度 px
height 图片的高度 px
相对路径：相对于当前项目下的某一个文件的路径img/02.jpg（一般我们使用就使用相对路径）
绝对路径：某一个盘符下的固定的路径 F:/图像/02.jpg（当我把项目移动到别的电脑上，图片显示会有问题;部分浏览器不支持绝对路径）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片标签</title>
	</head>
	<body>
		<h1>图片标签</h1>
		<img src="img/02.jpg" alt="越努力" title="这是我的壁纸" width="80" height="80"/>
		<img src="F:/图像/02.jpg" alt="越幸福" title="这是我的壁纸">
	</body>
</html>

在这里插入图片描述

15.超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<h1>超链接a</h1>
		<a href="https://www.baidu.com">百度</a>
		<a href="https://www.jd.com">京东</a>
		<a href="01-标题.html">标题</a>
	</body>
</html>

在这里插入图片描述
    点击“百度”
在这里插入图片描述

16.文字效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字效果</title>
	</head>
	<body>
		<strong>文字加粗</strong>
		<b>文字加粗</b>
		<i>斜体</i>
		<del>删除线</del>
	</body>
</html>

在这里插入图片描述

17.换行标签br

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换行标签</title>
	</head>
	<body>
		<p>
			轻轻的我走了，<br />
			正如我轻轻的来；<br />
			我轻轻的招手，<br />
			作别西天的云彩。<br />
			<br />
			那河畔的金柳，<br />
			是夕阳中的新娘；<br />
			波光里的艳影，<br />
			在我的心头荡漾。<br />
			<br />
			软泥上的青荇，<br />
			油油的在水底招摇；<br />
			在康河的柔波里，<br />
			我甘心做一条水草！<br />
		</p>
	</body>
</html>

在这里插入图片描述

18.水平线 hr

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平线</title>
	</head>
	<body>
		那河畔的金柳，<br />
		是夕阳中的新娘；<br />
		波光里的艳影，<br />
		<hr />
		在我的心头荡漾。<br />
	</body>
</html>

在这里插入图片描述

总结一刻

在这里插入图片描述

夏至青柠
关注
  • 4
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
无痛学习HTML（2）手把手教你VS code的下载与安装！
a553224850的博客
07-01 1250
磨刀不误砍柴工。好的编译器对于代码的学习是至关重要的；而博主大力推荐html编译器：Visual Studio Code（视觉工作室）简称 VS code！他有着简洁的外观和多到吓人的插件，并且插件都非常实用！Fellow me 一起下载VS code，开启HTML学习旅程！
phpMyAdmin下载、安装和使用入门教程
10-30
phpMyAdmin下载、安装和使用入门教程
html下载软件
10-26
html下载软件 html下载软件 html下载软件 html下载软件
html安装及入门
最新发布
hanqing_165的博客
03-29 421
本文仅仅简单介绍了前端软件Visual Studio code的安装与基础配置（汉化以及liver安装）。
HBuilderX 安装教程
JMFive的博客
03-22 5750
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【软件安装教程】专栏的第篇文章;【软件安装教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉
Html5下载功能实现
weixin_44103002的博客
05-17 3055
downloader模块管理网络文件下载任务，用于从服务器下载各种文件，并支持跨域访问操作。通过plus.downloader获取下载管理对象。Downloader下载使用HTTP的GET/POST方式请求下载文件，符合标准HTTP/HTTPS传输协议。 plus.downloader.createDownload(url, options, completedCB);创建下载任务 URL：下...
下载安装Hbuilder X
m0_63549185的博客
09-13 2354
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了java,c,web和Ruby.HBuilder本身主体是有java编写.它基于Eclipise,所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。数字天堂是HTML5联盟成员,在前端方面非常具有权威。
Visual Studio Code开发HTML安装教程及简易示例
热门推荐
程序员龙一
02-07 1万+
VSCode开发HTML安装教程及简易示例 安装环境：Win10 1 下载、安装Visual Studio Code 下载 点击下面链接，点击Download按钮下载安装包。 Visual Studio Code 免费下载地址 安装 VSCode的安装非常简单，只要根据软件安装提示，点击“下一步”和完成即可。 2 VSCode汉化 VSCode这款软件对中文使用这非常友好，我们可以通过安装中文插件的方式实现软件的汉化。 在输入框中输入“ Chinese (Simplified) Language ”；
HTML前端学习环境安装以及环境建立
a969667的博客
12-15 433
3.全部下载完成后，进入资源管理器（软件左上角），看见打开文件夹点击，自行新建一个文件夹（注：这个文件夹将存放以后你写的程序代码），完成后在资源管理器中会看见自己建的文件夹（如图“前端”），然后点击该文件夹，并在里面再建一个文件夹（如图“第一次”）（文件夹名称后面从左到右数第二个为新建文件夹），然后点击（如图‘第一次’）通过文件夹名称后面从左到右数第一个功能——新建文件，创建写代码的环境【注：创建文件时，文件名称后面必须添加( .html )的后缀，否则无法编写程序！
Docker安装和简单使用入门教程
09-30
主要介绍了Docker安装和简单使用入门教程,由于小编使用的是linux系统，支持docker的，所以安装相对比较简单，需要的的朋友参考下吧
html5media
10-22
flowplayer相关插件，附带了使浏览器兼容html5的插件。解决浏览器不兼容html5的问题
HTML5 软件安装流程框架
03-27
HTML5 类似于exe 软件安装 流程框架，大家可以拿去学习下
html5打包APP.zip
09-01
必须安装java环境，才可以打包，支持网址或者资源文件
html入门软件及资料
09-26
html入门软件安装方法及资料，颜色rgb详细查看表，Sublime Text 3安装教辅，sublime插件安装，Sublime快捷键教辅
CTeX入门教程 CTeX安装与使用
09-05
CTeX入门教程 CTeX安装与使用 CTeX入门教程 CTeX安装与使用
Python入门的工具安装与使用
07-01
工欲善其事必先利其器，python入门，首先你需要安装相关的工具，最后进入python知识语法的学习，该课程专为程序小白打造，零基础也能学会的基础工具安装与使用，希望大家在看完视频后，有所收获，人生苦短，我学...
HBuilder是HTML5,谈谈HBuilder以及HTML5+
weixin_35231383的博客
06-16 928
随着HTML5规范的发布以及chrome、Safari、firefox等浏览器的大规模支持，HTML5的开发得到了广泛使用，随后延伸到了APP端的开发。这一两年来，使用HTML5在APP端的开发形成了一股不小的热潮，让原本许多web开发的工程师们也能以比较低的学习成本踏入了App端的开发。在一些极端的情况下，还能实现一次开发，多平台发布的优势。在这么一个优势驱使下，一些优秀的hybrid App更...
前端入门介绍及HbuilderX的下载
weixin_59413281的博客
04-01 1224
1.web的基本组成： 结构 （html） 表现 （css） 行为（js） 2.html:超级文本标记语言。 html5：html的第五个版本。 3.html的基本结构 <!--文档头部声明 声明它是个html文件--> <!DOCTYPE html> <!-- 根元素 告诉文件我要在这里面写html代码 --> <html> <!--浏览器的头部--> <head> <!-- 编码格式 --&g..
docker入门与实践 下载
12-23
对于想要学习Docker入门与实践的人来说，首先需要下载Docker软件。下载Docker的方法有多种，可以根据自己的操作系统选择合适的方式来进行安装。 对于Windows操作系统的用户来说，可以前往Docker官方网站下载Docker Desktop for Windows。安装过程中需要注意的是，电脑需要满足一定的硬件和软件要求，比如64位的Windows 10 Pro、Enterprise或Education版本、支持Hyper-V的处理器等。 对于Mac操作系统的用户来说，可以前往Docker官方网站下载Docker Desktop for Mac。安装过程中需要注意的是，电脑需要满足一定的硬件和软件要求，比如Mac版本需要为OS X Yosemite 10.10.3或更高版本。 对于Linux操作系统的用户来说，可以根据自己的发行版选择合适的方式来安装Docker。在官方网站上提供了针对不同发行版的安装指南，可以根据指南选择适合自己的安装方式进行下载安装。 总的来说，想要学习Docker入门与实践的人可以根据自己的操作系统选择合适的下载方式进行安装。安装完成后，就可以开始学习Docker的基本概念和实践操作，为今后的学习和工作打下坚实的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值