基于CSDN的Markdown文本编辑器的博客界面优化 | HTML | 文本标签 | 图像标签 | 个人主页引导

🙋大家好！我是毛毛张!
🌈个人首页： 神马都会亿点点的毛毛张

今天毛毛张分享的内容是如何在CSDN的Markdown编辑器中实现上图的效果，如果觉得能帮助到你的话就点击个人主页点点关注吧❗

文章目录

  • 1.前言
  • 2.基础知识
  • 3.字体标签
    • 3.1 基础设置
    • 3.2 如何居中？
    • 3.3 如何加粗文本？
    • 3.4 如何实现点击文本跳转？
    • 3.5 如何实现文本的换行？
    • 3.6 总结
  • 4.图像标签
    • 4.1 如何获取圆形图标？
    • 4.2 图像标签介绍
    • 4.3 如何获取图像URL?
    • 4.4 如何控制图像尺寸？
    • 4.5 如何实现图片居中？
  • 5.总结
  • 6.参考文献

1.前言

  • 💝不知道大家在看到别人的博客的时候会不会因为别人文章的开头的介绍以及排版眼前一亮👓，正如毛毛张的开头部分，或者如下图📌
    在这里插入图片描述
  • 👉这个作者的每篇博客开头都采用了居中对齐的隶书字体，还加上了EMOJI符号，并且点击作者名称还能跳转到其主页，这种设计很好地引导了用户关注。
  • 👆上述博主的博客个人简历🧑‍🎓介绍主要通过在CSDN发布文章的Markdown文本编辑器中运用HTML语言实现。今天，毛毛张将分享如何通过文本相关标签和图像标签来优化CSDN中的个人简历🧑‍🎓展示，实现上述效果。
  • 🤴人是视觉动物🐒，在网络世界中，一篇文章不仅需要好的内容，还要有吸引人🧲的排版，使整篇文章在网页上呈现出良好的视觉效果。此外，还要在合适的地方引导用户点赞👍和关注📌。虽然丰富生动的内容非常重要，但这些表面功夫也同样重要。
  • 🖺文字如果能在适当的地方加粗、使用不同颜色、放在不同位置（如居中）会让文本呈现出不一样的效果。🧩图像则是增强网页视觉吸引力和传递信息的关键元素。如果一篇文章能图文并茂，并将图片展示得更引人注目，肯定会吸引更多读者。
  • 🔖在CSDN发布文章有两种编辑模式：富文本编辑器和Markdown文本编辑器。富文本编辑器很容易实现这些效果；✨Markdown文本编辑器的底层是HTML语言，因此需要借助HTML语法才能实现。
  • 🍁在之前的文章中，毛毛张发布过一篇关于Typora语法的文章，全面介绍了如何在Markdown编辑器中使用HTML语法编写文本。在阅读本文之前，可以先学习这篇文章：万字长文详解Typora使用技巧总结 | CSDN文本编辑器语法 | Typora记事本记笔记 | 写CSDN博客 | 使用技巧总结 | Markdown语法

2.基础知识

  • 1️⃣HTML是Hyper Text Markup Language的缩写，意思是超文本标记语言。它的作用是搭建网页📑结构，在网页上展示内容。
  • 2️⃣HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。
  • 3️⃣但是在CSDN的Markdown中仍然可以支持HTML4的语法格式，因为今天毛毛张介绍的两个标签中的字体标签在HTML4中是支持的，但是在HTML5已经不推荐使用了，虽然不推荐但是仍然是可以使用的，而且在CSDN中是支持HTML4的语法格式的
  • 4️⃣接触过前端的小伙伴应该知道，HTML主要用于网页📑主体结构的搭建，很难做出比较精美的界面，于是CSS变应运而生，主要用于页面元素美化♣，但是很不幸的是CSDN自带的Markedown编辑器暂不支持CSS语法，这使得对于一个博主想要用HTML语言实现精美的排版就比较苦难
  • 💥然而，毛毛张下面就将介绍两个标签，来实现如何在CSDN的Markdown中实现精美的排版

3.字体标签

3.1 基础设置

说明：<font>标签是HTML4的标签之一，用于控制文本的字体、颜色和大小。虽然它在HTML5中已经不再被推荐使用，但仍然可以在HTML4文档中使用。

语法：

<font face="隶书" color="red" size=6>这是一段文本</font>

效果：

这是一段文本

CSDN支持的属性：

  • face ：该属性用于指定字体系列的名称。例如：<font face="隶书">这是一段文本</font>即表示使用隶书字体展示文本。
    • 该属性既支持中文也支持英文，但HTML中的<font>标签不支持直接指定"行楷"等字体系列名称。要在HTML中使用特定字体，通常需要使用该字体的通用名称或字体族，例如"楷体"（KaiTi）。
    • 由于字体种类繁多，毛毛张在这里提供一个：中文字体英文名称对照表，大家可以根据自己的喜好选择字体。不过，CSDN可能不支持所有字体，建议大家自行测试。中文名称不行就试英文名称，多尝试几种看看效果。
  • color：用于设置文本的颜色
    • 可以使用颜色名称（如red）或十六进制颜色代码（如#FF5733）
    • 毛毛张在之前的文章中发布过一篇博客，用于介绍颜色名称及其对应的十六进制颜色代码和英文名称的：颜色名称及色样表(HTML版)
  • size：用于设置字体大小。可以使用相对大小（1-7，其中1是最小的，7是最大的），或绝对大小（像素、磅等）。

3.2 如何居中？

  • 在HTML4中字体标签有一个属性是align：用于控制文本的水平对齐方式，可以设置为left、center、right。但是这个属性在CSDN中确实不支持的，因此我们需要重新来思考如何让文本实现居中
  • 在HTML中有一个居中标签<center>居中文本</center>，通过该标签可以实现文本的居中
    • 语法：
      <center>
<font face="隶书" color="red" size=6>这是一段居中文本</font>
</center>
    • 效果展示：
这是一段居中文本

3.3 如何加粗文本？

  • 在HTML4中字体标签有一个属性style：用于应用额外的CSS样式，但这不是标准属性，该属性可以实现文本的加粗，但是这个属性在CSDN中确实不支持的，因此我们需要重新来思考如何让文本实现加粗
  • 在HTML中有两个加粗标签：<b>加粗文本</b>和<strong>加粗文本</strong>，通过该标签可以实现文本的加测
    • 语法：
      <center>
    <b><font face="隶书" color="red" size=6>这是一段居中并且加粗的文本</font></b>
</center>
<!--或者-->
<center>
    <strong><font face="隶书" color="red" size=6>这是一段居中并且加粗的文本</font></strong>
</center>
    • 效果展示：
这是一段居中并且加粗的文本

3.4 如何实现点击文本跳转？

  • 在HTML中可以通过a标签来实现文本的跳转
  • 语法：
    <a href="url" target="_blank">相对路径本地资源连接</a>
  • 属性：
    • href：用于定义跳转的链接路径
      • href中可以使用绝对路径
      • href中也可以使用相对路径
      • href中也可以定义完整的URL
    • target：用于定义打开的方式**(CSDN中不支持)**
      • _blank：在新窗口中打开目标资源
      • _self： 在当前窗口中打开目标资源
  • 今天毛毛张介绍的是如何使用该标签跳实现跳转到个人主页，因此href属性中定义的就是个人主页的网址(url路径)
  • 代码示例：
    <center>
    <a href="https://blog.csdn.net/weixin_48235955?spm=1011.2415.3001.5343">
        <font face="隶书" color="red" size=6>点击即可跳转到毛毛张的个人主页</font>
    </a>
</center>
  • 效果展示：
点击即可跳转到毛毛张的个人主页

3.5 如何实现文本的换行？

  • 换行标签即可实现文本的换行
  • 语法：
    <br>
  • 代码：
    <center>这一句话<br>被换行了</center>
  • 效果展示：
这一句话
被换行了

3.6 总结

  • 随着前面的学习，大家会慢慢发现标签是可以嵌套的，通过对上面标签的嵌套组合，就可以实现毛毛张开头那段文字
  • 代码：
    <center>
    <b><font color=darkorange face="楷体" size=4 >🙋大家好！我是毛毛张! </font></b>
    <br>
	<b><font color=darkorange face="楷体" size=4>🌈个人首页：</font></b>
    <a href="https://blog.csdn.net/weixin_48235955?spm=1000.2115.3001.5343">
    	<b><font  face="Arial, sans-serif" color="green" face="楷体" size=4 >神马都会亿点点的毛毛张 </font></b>
    </a>
</center>
  • 效果展示：
🙋大家好！我是毛毛张!
🌈个人首页： 神马都会亿点点的毛毛张

毛毛张开头那段文字展示介绍完毕了，下面毛毛张开始介绍如何通过图像标签来精美的展示图片

4.图像标签

4.1 如何获取圆形图标？

  • 如果熟悉PS或者PPT的小伙伴可以相关软件进行裁切
  • 如果嫌麻烦的小伙伴可以在浏览器上搜索原型图像在线裁切
    • 毛毛张在这里附上一个链接：https://crop-circle.imageonline.co/cn/

4.2 图像标签介绍

  • 在CSDN的Markdown编辑器中通过HTML语言嵌入图像需要使用图片标签<img>
  • 语法：
    <img src="img/logo.png"  title="尚硅谷" alt="尚硅谷logo" />
  • 属性介绍：
    • src：用于定义图片的连接
    • title：用于定义鼠标悬停时显示的文字（可省略）
    • alt：用于定义图片加载失败时显示的提示文字（可省略）
    • height：用于控制图像的高
    • width：用于控制图像的宽
  • 该标签最基本的使用只需提供一个src（source的缩写）属性，指向想要显示的图像的URL；而其height和width属性则用于控制图像尺寸，对于优化网页加载速度和改善用户体验至关重要

4.3 如何获取图像URL?

  • 方式1：通过图床的方式，将图片上传到第三方图床管理工具上，会返回一个图片的URL路径

    • 在毛毛张之前的一篇博客中详细介绍了如何使用图床工具：点击即可跳转进行学习

  • 方式2：在CSDN中手动上传图片，在CSDN手动上传的图片都会默认生成一个CSDN格式的URL路径，如下图所示

    在这里插入图片描述

  • 我们可以复制生成的URL路径，将上面的图片改写成下述格式：

    <img src="https://img-blog.csdnimg.cn/direct/4aa8ec47d1bd467390ece69275f023a8.png"/>

  • 效果展示：
    毛毛张的logo

上面这张图是不是很大？非常影响观感，所以毛毛张下面介绍如何控制图像的大小

4.4 如何控制图像尺寸？

  • 如何控制图像尺寸就必须使用前面提到的两个属性height和width了
  • 这个属性可以接受两种类型的赋值：像素(px)和百分比(%)，像素值直接设定图像的具体尺寸，而百分比值则相对于图像的父容器的尺寸
    • 方式1：像素，当宽高的像素是一致的时候可以任意省略一个
      <img src="https://img-blog.csdnimg.cn/direct/4aa8ec47d1bd467390ece69275f023a8.png" height="100" width="100" />
# 或者
<img src="https://img-blog.csdnimg.cn/direct/4aa8ec47d1bd467390ece69275f023a8.png" height="100"/>
    • 方式2：百分比，在CSDN的Markdown编辑器中，当宽高的缩放百分比是一致的时候只能省略height属性，也就是说，在CSDN的编辑器中，无法通过将height属性设置为百分比来控制图像大小
      <img src="https://img-blog.csdnimg.cn/direct/4aa8ec47d1bd467390ece69275f023a8.png" width="15%" height="15%"/>
# 等价于
<img src="https://img-blog.csdnimg.cn/direct/4aa8ec47d1bd467390ece69275f023a8.png" width="15%" height="auto"/>
# 等价于
<img src="https://img-blog.csdnimg.cn/direct/4aa8ec47d1bd467390ece69275f023a8.png" width="15%"/>
  • 效果展示：
  • 为什么要指定height和width？
    • 指定图像的height和width属性有助于浏览器在页面加载之前预留足够的空间给图像，这样可以避免图像加载时页面布局突然改变，从而提升用户体验。这种做法还可以加快页面渲染速度，因为浏览器不需要重新计算和布局页面的其他元素。
  • 注意事项：
    • 避免使用height和width来缩放图像：直接在HTML中缩放大图像可能会导致不必要的网络负载，因为用户浏览器需要下载完整尺寸的图像，然后再缩放显示。应该使用图像编辑工具在上传到网站之前，先调整图像的尺寸。
    • 保持宽高比：如果你改变了图像的高度或宽度，应确保修改后的尺寸保持原图像的宽高比，以避免图像看起来被拉伸或压缩。
    • 使用百分比进行响应式设计： 使用百分比值而非固定的像素值可以创建响应式图像，这些图像的大小会根据其容器的大小而变化，从而在不同设备上提供更好的用户体验。

看到上述图片你会发现它是一直居左对齐了，这就很不好了，哪个如何实现图片的居中呢？

4.5 如何实现图片居中？

  • 语法：在图片后缀名后面加上#pic_center表示居中，默认是#pic_left表示居左，同理#pic_right表示居右
<img src="https://img-blog.csdnimg.cn/direct/4aa8ec47d1bd467390ece69275f023a8.png#pic_center" width="15%"/>
  • 效果展示：

到此，毛毛张就介绍了一张图片如何在CSDN中如何更好的展示以及注意细节

5.总结

  • 文字如果能在适当的地方加粗、使用不同颜色、放在不同位置（如居中）会让文本呈现出不一样的效果
  • 正确使用<img>标签的height和width属性对于提升网页性能和用户体验非常关键。遵循上述最佳实践，可以确保你的网站在不同设备和浏览器上都能快速、正确地渲染图像
  • 下面毛毛张附上自己的博客前面的个人界面引导的模板
    <img src="https://img-blog.csdnimg.cn/d6e346881b7e487cb5a5d827b7be894b.gif#pic_center">
<img src="https://img-blog.csdnimg.cn/direct/4aa8ec47d1bd467390ece69275f023a8.png#pic_center" width=100"/>
<center>
    <b><font color=darkorange face="楷体" size=4 >🙋大家好！我是毛毛张! </font></b>
    <br>
	<b><font color=darkorange face="楷体" size=4>🌈个人首页：</font></b>
    <a href="https://blog.csdn.net/weixin_48235955?spm=1000.2115.3001.5343">
    	<b><font  face="Arial, sans-serif" color="green" face="楷体" size=4 >神马都会亿点点的毛毛张 </font></b>
    </a>
</center>
<img src="https://img-blog.csdnimg.cn/d6e346881b7e487cb5a5d827b7be894b.gif#pic_center">

6.参考文献

  • https://blog.csdn.net/wtyuong/article/details/137283941

  • https://blog.csdn.net/wtyuong/article/details/136949175

  • https://www.w3school.com.cn/tags/att_img_height-width.asp

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/735385.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Sword and Shield Animations（劈砍防御剑盾带动画动作）

Sword and Shield Animations（劈砍防御剑盾带动画动作）

这是一个动画资产包，为剑和盾牌用户提供手工制作的成对动画和空闲。包括8向步行和跑步动画、攻击、跳跃、冲刺、向下状态移动和过渡、躲避、阻挡、蹒跚、各种配对终结者动画等。 一切你需要把剑和盾牌战士带到生活中。 动画总数：115 攻击19 区块5 关闭状态14 Evade 5 怠速9 跳…
阅读更多...
Sequelize入门及简单的增删改查

Sequelize入门及简单的增删改查

前言 学习一下NodeJS怎么使用Sequelize怎么查询数据库数据 一、Sequelize是什么&#xff1f; Sequelize 是一个基于 promise 的 Node.js ORM, 二、搭建项目 1.安装过程 npm i -g sequelize-cli //全局安装sequelize-clinpm i sequelize mysql2 //安装sequelize和mysql2…
阅读更多...
AI视频教程下载-与ChatGPT结合的UX用户体验/UI用户界面设计策略

AI视频教程下载-与ChatGPT结合的UX用户体验/UI用户界面设计策略

Revolutionize UX_UI_ AI-Design Strategies with ChatGPT 提升你的设计工具包&#xff1a;使用ChatGPT、Figma和Miro的AI驱动UX/UI策略 50个创新UX提示 了解人工智能的基础知识。介绍ChatGPT及其底层技术。区分不同AI模型及其在设计中的应用。将AI工具融入设计工作流程的策略…
阅读更多...
【Java基础】

【Java基础】

Java基础常见面试题总结(上) 基础概念与常识 Java 语言有哪些特点? 简单易学&#xff08;语法简单&#xff0c;上手容易&#xff09;&#xff1b;面向对象&#xff08;封装&#xff0c;继承&#xff0c;多态&#xff09;&#xff1b;平台无关性&#xff08; Java 虚拟机实现…
阅读更多...
JAVA期末复习2

JAVA期末复习2

目录 一、Java基础知识 1. 下面几个标识符中&#xff0c;哪些是命名正确的 (A) 2. 分析以下代码&#xff0c;哪些是合法的 (C) 3. 以下代码的执行结果是&#xff08; B &#xff09; 4. 下面哪个不是java中的关键字&#xff1f;&#xff08; B &#xff09; 5. 下面对数组…
阅读更多...
Javase.图书管理系统基本框架

Javase.图书管理系统基本框架

图书管理系统基本框架 1.核心类介绍2. book包详解2.1 Book 类2.1.2 代码展示2.1.2 代码解析 2.2 BookList 类2.2.2 代码展示2.2.2 代码解析 2.3Book类和BookList类的联系 3. 用户角色与管理3.1 User 类3.1.1 代码展示3.1.2 代码解析 3.2 adminUser 类3.2.1 代码展示3.2.2代码解…
阅读更多...
Spring-bean

Spring-bean

Spring 网站&#xff1a;spring.io 两个方面&#xff1a; 简化开发&#xff1a; IoCAOP 框架整合&#xff1a; MyBatis SpringFrameWork系统架构&#xff08;上层依赖下层&#xff09; 解决问题&#xff08;代码耦合度高——模块与模块之间的依赖程度&#xff09; 目标&am…
阅读更多...
SARscape——中值滤波

SARscape——中值滤波

目录 一、算法原理1、概述2、参考文献 二、软件操作三、结果展示1、原始图像2、滤波结果 一、算法原理 1、概述 中值滤波是把局部区域中的中间亮度值作为区域中心点像元的输出值。当取定的局部区域为&#xff13;&#xff58;&#xff13;的正方形时&#xff0c;区域共有&…
阅读更多...
红队内网攻防渗透：内网渗透之内网对抗：横向移动篇WinRS命令WinRM管理RDP终端密码喷射点CrackMapExec

红队内网攻防渗透：内网渗透之内网对抗：横向移动篇WinRS命令WinRM管理RDP终端密码喷射点CrackMapExec

红队内网攻防渗透 1. 内网横向移动1.1 内网横向移动方法分类1.2 WinRM&WinRS1.2.1 利用条件1.2.1.1 探针可用1.2.1.2 连接执行1.2.1.3 CS上线利用1.2.1.3.1 反向连接上线1.2.1.4 CS内置模块1.2.1.5 其他解决1.3 RDP1.3.1 探针连接1.3.2 连接执行1.3 CrackMapExec-密码喷射1…
阅读更多...
MyBatis Plus Generator代码生成

MyBatis Plus Generator代码生成

一、MyBatis Plus Generator MyBatis Plus是一个功能强大的持久层框架&#xff0c;它简化了MyBatis的使用&#xff0c;提供了许多便捷的功能。其中&#xff0c;MyBatis Plus Generator是一个强大的代码生成器&#xff0c;可以帮助我们快速地根据数据库表结构生成对应的实体类、…
阅读更多...
DVWA 靶场 SQL Injection (Blind) 通关解析

DVWA 靶场 SQL Injection (Blind) 通关解析

前言 DVWA代表Damn Vulnerable Web Application&#xff0c;是一个用于学习和练习Web应用程序漏洞的开源漏洞应用程序。它被设计成一个易于安装和配置的漏洞应用程序&#xff0c;旨在帮助安全专业人员和爱好者了解和熟悉不同类型的Web应用程序漏洞。 DVWA提供了一系列的漏洞场…
阅读更多...
微型操作系统内核源码详解系列五（五）：cm3下Pendsv切换任务上篇

微型操作系统内核源码详解系列五（五）：cm3下Pendsv切换任务上篇

系列一&#xff1a;微型操作系统内核源码详解系列一&#xff1a;rtos内核源码概论篇&#xff08;以freertos为例&#xff09;-CSDN博客 系列二&#xff1a;微型操作系统内核源码详解系列二&#xff1a;数据结构和对象篇&#xff08;以freertos为例&#xff09;-CSDN博客 系列…
阅读更多...
C++初学者指南第一步---8.类型系统（基础）

C++初学者指南第一步---8.类型系统（基础）

C初学者指南第一步—8.类型系统&#xff08;基础&#xff09; 文章目录 C初学者指南第一步---8.类型系统&#xff08;基础&#xff09;1.用const声明常量2.类型别名3.类型推导 auto4.常量表达式&#xff1a;constexpr (C11) 1.用const声明常量 语法&#xff1a; Type const v…
阅读更多...
君子小人的格局、境界

君子小人的格局、境界

子曰&#xff1a;君子怀德&#xff0c;小人怀土&#xff1b;君子怀刑&#xff0c;小人怀惠。 直译&#xff1a;君子怀念道德&#xff0c;小人怀念乡土&#xff1b;君子关心法度&#xff0c;小人关心恩惠。 这里的君子与小人只是体现格局、境界的不同&#xff1b; 君子怀的是德…
阅读更多...
出海计划 | 赴马来西亚开展水环境项目考察暨2024中马水务合作论坛

出海计划 | 赴马来西亚开展水环境项目考察暨2024中马水务合作论坛

报名咨询
阅读更多...
Windows环境利用 OpenCV 中 CascadeClassifier 分类器识别人眼 c++

Windows环境利用 OpenCV 中 CascadeClassifier 分类器识别人眼 c++

Windows环境中配置OpenCV 关于在Windows环境中配置opencv的说明&#xff0c;具体可以参考&#xff1a;VS2022 配置OpenCV开发环境详细教程。 CascadeClassifier 分类器 CascadeClassifier 是 OpenCV 库中的一个类&#xff0c;它用于实现一种快速的物体检测算法&#xff0c;称…
阅读更多...
一些3D数据集的简单介绍

一些3D数据集的简单介绍

一、Objaverse 1.0 Objaverse 1.0: a large dataset of objects with 800K (and growing) 3D models with descriptive captions, tags and animations. Assets not only belong to varied categories like animals, humans, and vehicles, but also include interiors and ex…
阅读更多...
【课程总结】Day10：卷积网络的基本组件

【课程总结】Day10：卷积网络的基本组件

前言 由于接下来的课程内容将围绕计算机视觉展开&#xff0c;其中接触最多的内容是卷积、卷积神经网络等…因此&#xff0c;本篇内容将从卷积入手&#xff0c;梳理理解&#xff1a;卷积的意义、卷积在图像处理中的作用以及卷积神经网络的概念&#xff0c;最后利用pytorch搭建一…
阅读更多...
Vue76-路由对浏览器历史记录的影响

Vue76-路由对浏览器历史记录的影响

一、push模式 默认是push 二、replace模式 替换当前记录&#xff01; &#xff08;当前指针指向的那一条记录&#xff09; 三、小结
阅读更多...
只有一个鸿蒙好？还是鸿蒙、安卓、IOS并存好？

只有一个鸿蒙好？还是鸿蒙、安卓、IOS并存好？

这个话题&#xff0c;现在很敏感&#xff0c;为了防止被喷&#xff0c;我提前且清楚的交待我的观点&#xff1a;我双手欢迎鸿蒙、欢迎仓颉&#xff0c;而且我已经用行动来支持&#xff0c;比如2021年刚发布ArkUI时&#xff0c;我就第一时间上手了&#xff0c;且这几年一直在跟进…
阅读更多...
最新文章

Copyright @ 2022~2023