小白自学web前端开发之认识HBuilder和html语言

前言

在官网上下载HBuilder后,也可点击下载->HBuilder下载 安装很简单,就不一一介绍了,这篇帖子呢,主要是写 HBuider的基本用法和一些html语言的东西。好了不多说了,看下面。
本节目录:
Hbuilder的使用
HTML内容

Hbuilder的使用

1.新建

我们要先新建一个web工程,然后再去建hmtl文件,具体如下:
a.新建web工程
在这里插入图片描述
在这里插入图片描述
b.在刚刚新建好的web里面新建html文件。
在这里插入图片描述
在这里插入图片描述
这样我们就新建好了。

2.运行

当写好html代码之后,如何运行呢?看下面在这里插入图片描述
运行的浏览器可以有很多,自己选择一个浏览器就好了,这里呢我推荐用chrome浏览器,运行比较快。

HTML内容

简述

新建好之后,我们会发现主界面会出现一些代码,没错,那是HBuilder给的html的“模板”,这些代码也是不可或缺的,其他编译器可能不会自动生成,就需要我们去手敲了。在学习html语言之前,可以先了解一下html语言的简介,可以叫他超文本标记语言,他的代码是以标签的形式,用html标签语言只能做出可供人们浏览的静态网页,可以在百度百科上看这里我给出链接,点击即可查看->HTML简介
简单理解html标签语言的书写;
html标签有关闭型和非关闭型两种,关闭型就是两个标签一起组成,而非关闭型则只有一个标签。
举例: 关闭型标签

<html>   </html>     
以<html>开头,以</html>结束,结束标签都有/作为标记结束,两个标签之间存放文本

举例: 非关闭型标签

<br>   换行标签,属于关闭型,没有结束标签,放到需要换行的文本的末尾即可

下面了解一下HTML的“模板”,如下图
在这里插入图片描述
标签里面还可以设置属性,比如上面的meta标签,charset就是他的属性,除此之外其他标签都有自己的属性,以后会学到。

演示

在标题和身体中写入文本,保存(这里ctrl+s快速保存),运行即可(运行方法在上面)。
在这里插入图片描述
在这里插入图片描述
这样在效果中能看出文本在浏览器中打印出来了,如果我们要给文字设置位置、背景、插入图片音频,超链接等等怎么办呢?别着急,下一个帖子教给你更多的html标签。

发布了9 篇原创文章 · 获赞 11 · 访问量 4555

猜你喜欢

转载自blog.csdn.net/JIANGYINGH/article/details/104693460