使用Hbuilder和HTML基本标签

最新推荐文章于 2024-06-14 10:01:58 发布

零基础程序员

最新推荐文章于 2024-06-14 10:01:58 发布

阅读量9.5k

点赞数 9

分类专栏： java第二阶段文章标签：前端

本文链接：https://blog.csdn.net/qq_39386278/article/details/95248114

版权

java第二阶段专栏收录该内容

2 篇文章 1 订阅

订阅专栏

Hbuilder的使用和HTML基本标签

上一篇说了HTML的入门:使用txt文件写一个简单的网页.本篇介绍一下HTML编写的软件使用,编写工具中常见的有EditPlus和nodePad++,本人感觉前者还是比较好用的.
开发者工具中webStom最好用,但是收费,不适用于一般人使用.Hbuilder是一个很好的软甲,完全满足一般开发者的需求,并且免费使用,现在培训机构都在使用这个软件…

Hbuilder的基本介绍

对于Hbuilder的安装,网络上有很多教程,这里就不介绍了.
首先,新建工程–>web工程–>在工程下新建HTML文件–>选择HTML5(默认)生成即可,发现结构自动生成了…

设置字体大小快捷键:Ctrl + 滑轮

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

这里做一下声明,只需概要了解:
DOCTYPE:这是HTMl的声明,声明是一个H5版本的文件,如果不写,以混合形式渲染.
meta:网页中设置网页信息的标签(就是一个标签);其属性有name,可以多个值(后面讲name的作用);charset:编码格式,中国地区,默认UTF-8

基本标签

px:像素单位,显示器为很多肉眼难以见到的小灯组成,一个小灯就是一像素,像素越高,灯就越多,画质也就越好
属性值:一些标签中的属性设置,有些属性不需要就可以不写.

这里介绍一下文中使用的基本标签,内容不能一一列举,只写常用的:

Hr: 水平分割线,在网页上显示一条分割线,它拥有的属性: 长度:width;线高:size,范围1~7;颜色:color;单位为px,例如width=“600px”;
H*:标题标签,范围1~6;
b 或 strong: 都为字体加粗
i 或em: 都为字体倾斜
span 或 label : 都为文本标签
br: 换行,在网页设计中需要使用
才能达到换行的效果,否则会都显示在一行,使用快捷键Shift + 回车,后面的/可有可无.

<body>
	<hr width="600px" size="5" color="greenyellow"/>
	
   		<h1>一号标题</h1>
   		<h2>二号标题</h2>
   		<h6>六号标题</h6>
   		
   		<b>加粗</b>
   		<strong>还是加粗</strong>
   		
   		<i>倾斜</i>
   		<em>还是倾斜</em>
   		
   		<span>文本区域1</span>
   		<label>文本区域2</label>
   		
   		<br />换了个行
</body>

制表符

在html设计中,不能显示出一些非字符的操作,例如空格,打印一大串的空格,在网页上只显示一个空格的位置,还有大于号小于号等,避免与代码中的<>符号冲突,也需要用制表符,这里只写这几个常用的.

空格: &nbsp
大于号>: &gt
小于号<: &lt

 空格的使用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格的使用<br />
   		
大于号 &gt;
小于号&lt;

超链接

网页中有很多超链接,用过点击某个事件,实现跳转另一个网页的操作.
超链接一般使用A标签,如:

<a href="https://www.baidu.com">

作用:点击跳转指定的URL地址
href为超链接;https为网络协议(了解即可,不深究)
href的属性:

“#”:跳转为本页面,(实现不跳转操作)
“JavaScript:void(0)”:不跳转,禁用事件(点击无效)

Target:设置跳转的打开方式,默认值为_self,操作为在当前选项卡打开页面;
_blank操作为在新的选项卡中打开网页

<a href="https://www.baidu.com" target="_self">当前位置打开百度</a><br />
<a href="https://www.baidu.com" target="_blank">新选项卡位置打开百度</a>

图片标签

图片与文本不同,不能普通输入,这里使用img标签,首先将需要用到的图片拷贝到img文件夹下,如果没有就自己建一个

<img src="img/lianhua.jpg" width="400px" border="23px" />

属性介绍:
src:引用图片的地址,使用的快捷键Alt+ / 就可以显示
width:图片的宽度
heigth:图片的高度(一般情况下一width只使用一个就行,否则图片失帧,不好看)
border:图片外边框大小

完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>基本标签的使用</title>
		<link rel="shortcut icon" href="img\lobo.ico"/>
	</head>
	<body>
	
   		<hr width="600px" size="5" color="greenyellow"/>
   		
   		<h1>一号标题</h1>
   		<h2>二号标题</h2>
   		<h6>六号标题</h6>
   		
   		<b>加粗</b>
   		<strong>还是加粗</strong>
   		
   		<i>倾斜</i>
   		<em>还是倾斜</em>
   		
   		<span>文本区域1</span>
   		<label>文本区域2</label>
   		
   		<br />换了个行
   		
   		<br />
   		空格的使用&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格的使用
   		<br />
   		
   		大于号 &gt;
   		小于号&lt;<br />
   		
   		<a href="https://www.baidu.com" target="_self">当前位置打开百度</a><br />
   		<a href="https://www.baidu.com" target="_blank">新选项卡位置打开百度</a><br />
   	
   		<img src="img/lianhua.jpg" width="400px" border="23px" />   </a>
   		
	</body>
</html>

效果图:
在这里插入图片描述
以上为Hbuilder的基本操作和一些基本标签的介绍和使用,下一篇将介绍列表和表格使用

零基础程序员

关注

9
点赞
踩
69

收藏

觉得还不错? 一键收藏
1
评论
使用Hbuilder和HTML基本标签

Hbuilder的使用和HTML基本标签上一篇说了HTML的入门:使用txt文件写一个简单的网页.本篇介绍一下HTML编写的软件使用,编写工具中常见的有EditPlus和nodePad++,本人感觉前者还是比较好用的.开发者工具中webStom最好用,但是收费,不适用于一般人使用.Hbuilder是一个很好的软甲,完全满足一般开发者的需求,并且免费使用,现在培训机构都在使用这个软件…Hbui...
复制链接

扫一扫