前端开发使用html写一个博客基本标签的体验 0226

最新推荐文章于 2024-08-09 15:13:41 发布

原创最新推荐文章于 2024-08-09 15:13:41 发布 · 598 阅读

3 ·

CC 4.0 BY-SA版权

本文深入讲解HTML中的基础标签，包括标题、段落、斜体、加粗、换行及水平线标签的使用方法，通过实例展示如何运用这些标签来丰富网页内容。

新建一个html文件

在这里插入图片描述

写一段文本作为博客的标题

在body中写内容

在这里插入图片描述

*号的出现代表，文件有改变

保存文件后消失

快捷键： ctrl + s

在这里插入图片描述

效果

在这里插入图片描述

当前这个页面已经在一个模拟的服务器上运行了

当代码内容发生改变的时候

网页的内容会同步更新

h标签让内容变粗

<h1>内容</h1>

b标签也可以加粗，css样式也可以调整大家

h标签与b标签的区别

h标签有语意，被它包裹的内容，一般都是一个主题标题等性质的内容

在这里插入图片描述

h标签有

h1-h6共六个

i标签斜体字

<i>内容</i>

在这里插入图片描述

hr标签水平线

<hr>

在这里插入图片描述

打入正文内容

期望换行，结果失败

		有文化的人失恋了，发朋友圈写：“人生若只如初见，何事秋风悲画扇。等闲变却故人心，却道故人心易变”
		没文化的人失恋了，发朋友圈写：“蓝瘦，香菇”

在这里插入图片描述

p标签段落

<p>内容</p>

在这里插入图片描述

继续完善内容

在这里插入图片描述

b标签加粗文字

<b>内容</b>

在这里插入图片描述

期望最后一句话，换一个行

br标签换行标签单标签

<br>

在这里插入图片描述

期望标题有空隙

在这里插入图片描述

代表空格

在这里插入图片描述

本节回顾

》标题标签

在这里插入图片描述

》段落标签

在这里插入图片描述

》斜体标签

在这里插入图片描述

》加粗标签

在这里插入图片描述

》换行标签

在这里插入图片描述

》水平线标签

在这里插入图片描述

》空格字符实体

在这里插入图片描述

代码

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>论&nbsp;&nbsp;学&nbsp;&nbsp;习&nbsp;&nbsp;的&nbsp;&nbsp;重&nbsp;&nbsp;要&nbsp;&nbsp;性</h1>
		<i>2020.3.15</i>
		<hr>

		<p>有文化的人失恋了，发朋友圈写：“人生若只如初见，何事秋风悲画扇。等闲变却故人心，却道故人心易变”</p>
		<p>没文化的人失恋了，发朋友圈写：“蓝瘦，香菇”</p>

		<p> 清朝时，纪晓岚与和珅同时在朝为官，纪任侍郎（官名）和珅为尚书（官名）。
		</p>
		<p>一日两人一起喝酒，和珅指着一条狗问：“是狼（侍郎）是狗？”纪晓岚回答：“上竖（尚书）是狗，垂尾是狼”。
		</p>
		<p>这脑洞，这反应速度<br>都是<b>文化人</b>啊！
		</p>



	</body>
</html>