当前位置:首页 > 实用技巧 >

hbuilder入门(hbuilder使用方法)

来源:原点资讯(www.yd166.com)时间:2023-11-14 03:34:39作者:YD166手机阅读>>

HTML的入门

1. HTML的代码文件

(1)打开Hbuilder开发工具,新建项目,点击右键新建一个HTML文档。

(2)在文档中写HTML代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>产品列表</title>

</head>

<body>

这是产品页面

<b>好好学习,天天向上</b>

<h1>好好学习,天天向上</h1>

</body>

</html>

温馨提示:

常用的快捷键:

Ctrl s:保存

ctrl c:复制

ctrl x:剪切

ctrl v:粘贴

2. HTML的基本结构

对于HTML文件的后缀名一般为“html”或“htm”

2.1HTML的标签格式

(1)什么是html标签?

HTML标签是有开始标签和结束标签组成

开始标签:是被尖括号包围的元素名

结束标签:是被尖括号包围的斜杠和元素名

<元素>内容 </元素>

例如:<b>好好学习天天向上</b>

注意:有些HTML标签是没有结束标签的, <hr/>

(2)单标签和双标签

双标签:例如:<b></b>

单标签:<hr/> <br/>

(3) 标签的属性

<font size="1">好好学习</font>

<font size="7">好好学习</font>

hbuilder入门,hbuilder使用方法(1)

<h1 title="h1" style="color: red;">

我是一个标题标签

</h1>

3. HTML基本结构的认识

<!-- <!DOCTYPE html>:文档声明,告知浏览器文档使用哪种HTML或XHTML规范,让浏览器通过正确的方式解析我们的网页,让网页能够正确的显示。-->

<!DOCTYPE html>

<!-- <html>标签:是网页的跟标签-->

<html>

<!--head是网页头,一般表示网页中描述信息-->

<head>

<!--

meta:提供网页的相关信息,有利于搜索引擎收录

charset="UTF-8": 设置网页编码方式为utf-8

name="Keywords" :设置网页关键字

name="viewport": 设置网页视窗大小

-->

<meta name="Keywords" content="HTML5前端开发工程师入门到精通课程"/>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<!-- <title></title>:表示网页的标题 -->

<title></title>

</head>

<body>

<!--

<body> </body>:网页的主体内容,用户呈现的内容,比如文字,图片,链接,视频……

-->

</body>

</html>

4. HTML的注释

<!--这里是注释的内容-->

5. HTML的编码问题

常见编码个格式:

UTF-8:国际通用的编码格式

GBK/GB2312:中文编码字符

HTML的编码:<meta charset="UTF-8">

6. HTML规范

(1)html标签都是有尖括号包围的标签,比如<b>

(2)标签通常是成对存在,<b></b>,<h1></h1>

(3)HTML不区分大小写,我们建议小写。

(4)HTML可以嵌套,但是允许交叉嵌套

正确写法:<b> <h1>我很粗</h1> </b>

错误写法:

<b> <h1>我很粗 </b></h1>

,

栏目热文

hbuilderx详细教程(hbuilder x安装教程)

hbuilderx详细教程(hbuilder x安装教程)

代码块是快速开发的利器。简单的敲几个字母,回车,就能生成大段代码。比如我们经常会敲if...else结构,在HBuild...

2023-11-14 03:24:13查看全文 >>

hbuilderx 官网(hbuilderx是免费软件吗)

hbuilderx 官网(hbuilderx是免费软件吗)

现在前端开发大多数使用的是VSCode,VSCode确实强大,它有很多的优点,这里就不多赘述了,但是VSCode有一个不...

2023-11-14 03:53:32查看全文 >>

hbuilderx安装步骤(hbuilderx怎么导入本地文件)

hbuilderx安装步骤(hbuilderx怎么导入本地文件)

HBuilder是一款深度集成Eelipse的IDE编辑器,但其主要集中在Web前端的开发,不能进行Java等后台开发。...

2023-11-14 03:24:41查看全文 >>

hbuilderx怎么加入图片(hbuilderx怎么插入字体)

hbuilderx怎么加入图片(hbuilderx怎么插入字体)

开发语言:Html5开发工具:HBuilderX先说一下,开发工具下载,可以直接去百度搜HBuilderX,百度搜“HB...

2023-11-14 03:46:58查看全文 >>

hbuilderx微信小程序教程(微信小程序lv教程)

hbuilderx微信小程序教程(微信小程序lv教程)

主讲人:笨小猪 QQ 1218764060 微信:liufeicloud 官网:【什么是HBuilder X?】HBui...

2023-11-14 03:11:07查看全文 >>

hbuilderx怎么改成中文(hbuilderx的输入提示怎么打开关闭)

hbuilderx怎么改成中文(hbuilderx的输入提示怎么打开关闭)

之前一直使用的是2.6.X的版本,今天更新了一下HBuilderX,更新到了3.1.13。打包app的时候出现了错误,查...

2023-11-14 03:34:33查看全文 >>

hbuilder个人简介(怎么用hbuilder做个人介绍)

hbuilder个人简介(怎么用hbuilder做个人介绍)

在开发实践中,会使用到各种第三方组件,比如Element UI,通常的做法是到官网中复制模板再在本地根据设计要求进行修改...

2023-11-14 03:48:26查看全文 >>

hbuilderx使用教程视频(hbuilderx怎么插入图片视频)

hbuilderx使用教程视频(hbuilderx怎么插入图片视频)

同学,学uni-app好啊,大致上写一套代码能生成这么多个平台的应用,我简单念一下,它们分别是Android应用、IOS...

2023-11-14 03:18:23查看全文 >>

hbuilderx运行不了(下载hbuilderx怎么打不开)

hbuilderx运行不了(下载hbuilderx怎么打不开)

本文简介点赞 关注 收藏 = 学会了记录一个在使用 HBuilderX 开发 App 时遇到的问题。同步资源失败...

2023-11-14 03:28:39查看全文 >>

太极拳倒卷肱的重点难点(武当太极拳倒卷肱的正确练法)

太极拳倒卷肱的重点难点(武当太极拳倒卷肱的正确练法)

太极拳倒卷肱其独特的旋腰转脊、螺旋缠绕的运动方式,有助于人体行瘀理气、舒经活络、调摄气血。它动作简单易学,尤其适合中老年...

2023-11-14 03:39:26查看全文 >>

文档排行