前端基础应用：html文件编写

喆子玩点数据

已于 2022-09-14 16:13:37 修改

阅读量863

点赞数 4

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

于 2022-09-14 00:12:30 首次发布

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

版权

在这里插入图片描述

前端网页页面制作主要是写html，接下来我从他的两个标题head和body标签进行学习
大致的样式：

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

一、head标签

head相关标签主要有：meta、 title、link、style、script

1.meta标签 - 提供网页相关配置

<meta charset="utf-8">

2.title标签 - 设置网页标题

<title>京东-欢迎登录</title>

3.link标签 - 导入外部文件：

1）rel属性：确定外部文件的作用(stylesheet - 外部样式表; icon - 网页图标)
2) type属性：文件类型 - “类型/文件后缀名” (image/png、image/jpeg、text/css)
3) href属性：需要导入的具体的文件的路径

<link rel="icon" type="image/png" href="./img/hua.png">

二、body标签

1）、文本标签

1、标题标签: h1 ~ h6

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在这里插入图片描述

2、段落标签: p

<p>对此，有网友表示</p>
<p>“明明可以直接抢的，还善良的赔了一千块钱”。</p>

在这里插入图片描述

3、行内标签：span

可以让多个文字标签的内容，显示在一行中

<span>2022-09-06 14:06</span>
<span>|</span>
<span>新浪财经官方账号</span>

在这里插入图片描述

4、文字特殊效果标签：b、strong、i、em

b、strong：行内标签，并且让文字加粗
i、em：行内标签，并且让文字倾斜

<b>新浪财经官方账号</b>
<strong>新浪财经官方账号</strong>
<i>新浪财经官方账号</i>
<em>新浪财经官方账号</em>

在这里插入图片描述

5、换行与空白

在html代码中直接按回车键是无法实现换行的功能的；按多个空格最后只会有一个空格有效。

换行

<br>

空一个像素

&nbsp;

空一格空格

&emsp;

2）、图片和超链接

1、图片标签：img

1)src属性：图片地址（本地图片地址、网络图片地址）
2)alt属性：图片加载失败的时候的提示信息
3)title属性：图片标题（标题是在鼠标悬停在图片上的时候才会显示出来）

a、本地图片

<img src="img/hua.png" alt="为加载成功" title="花"><br>

在这里插入图片描述

b、网络图片

<img src="https://img2.baidu.com/it/u=400325797,2350881277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=704" alt="图片加载失败" title="花">

在这里插入图片描述

2、超链接

1）标签内容：超链接可点击可以看到的部分
2)href属性：跳转目标地址
3)targe属性：转换方式（默认是_self,直接在当前窗口中打开新的页面；_blank，会在新的窗口中打开新的页面）

a、文字超链接

<a href="https://www.baidu.com" target="_blank">百度首页</a>

在这里插入图片描述
点文字就可以转网页了

b、图片超链接

<a href="https://www.baidu.com">
<img src="img/hua.png" alt="">
</a>

在这里插入图片描述
点击图片就可以转网页了

c、打开本地网页

href的值为本地的html文件地址

<a href="03文本相关标签.html">文本相关标签</a>

在这里插入图片描述

d、本页面跳转

href的值为目标标签对应的id选择器

<h1 id="h1">我是标题1</h1>
<a href="#h2">标题2</a>	
<br

最低0.47元/天解锁文章

喆子玩点数据

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端基础应用：html文件编写

前端网页页面制作主要是写html，接下来我从他的两个标题head和body标签进行学习。
复制链接

扫一扫

专栏目录

前端基础应用：html文件编写

一、head标签

1.meta标签 - 提供网页相关配置

2.title标签 - 设置网页标题

3.link标签 - 导入外部文件：

二、body标签

1）、文本标签

1、标题标签: h1 ~ h6

2、段落标签: p

3、行内标签：span

4、文字特殊效果标签：b、strong、i、em

5、换行与空白

2）、图片和超链接

1、图片标签：img

a、本地图片

b、网络图片

2、超链接

a、文字超链接

b、图片超链接

c、打开本地网页

d、本页面跳转

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