HBuilderX前端html功能应用

喆子玩点数据

已于 2022-09-07 21:35:42 修改

阅读量3.8k

点赞数 5

分类专栏： html基础文章标签：前端 html css

于 2022-09-06 23:50:32 首次发布

本文链接：https://blog.csdn.net/m0_58239511/article/details/126736032

版权

本文介绍了HBuilderX中HTML的基本结构和常见标签的使用，包括网页标题、head相关标签如meta、title、link，文本标签如h1~h6、p、span，以及图片img标签和超链接a标签的详细属性讲解。

摘要由CSDN通过智能技术生成

一、认识网页

html版本说明：html代表最新版本（html5)
网页基本结构 html标签代表整个网页（包含一个head标签和一个body标签）

head标签-代表网页头部 
<head>
设置文本编码方式
<meta charset="utf-8">
<!-- 设置网页标题 -->

	<title>我的网站</title>

</head>
	</head>
<body>
	
</body>

```

在这里插入图片描述

二、head相关标签

head相关标签主要有：meta、 title、link、style、script
1.meta标签 - 提供网页相关配置
2.title标签 - 设置网页标题
3.link标签 - 导入外部文件
link导入外部文件的作用：设置网页图标 2）导入外部样式表
1）rel属性：确定外部文件的作用(stylesheet - 外部样式表; icon - 网页图标)
2) type属性：文件类型 - “类型/文件后缀名” (image/png、image/jpeg、text/css)
3) href属性：需要导入的具体的文件的路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东-欢迎登录</title>
		<link rel="icon" type="image/png" href="./img/hua.png">
			</head>
	<body>
		
	</body>
</html>

在这里插入图片描述

三、文本相关标签

1. 标题标签: h1 ~ h6
2.段落标签: p
3.行内标签：span :
可以让多个文字标签的内容，显示在一行中
4.文字特殊效果标签：b、i、em、strong
b标签、strong标签：行内标签，并且让文字加粗
i标签、em标签：行内标签，并且让文字倾斜
5. 换行和空白
在html代码中直接按回车键是无法实现换行的功能的；按多个空格最后只会有一个空格有效。

- 换行(可以在任何需要换行的位置使用br标签来达到换行的目的)
- 空一个像素
- 空一格空格

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

最低0.47元/天解锁文章