如何写好每一篇文章(美化)

参考博客原址:https://blog.youkuaiyun.com/cungudafa/article/details/84658703
https://blog.youkuaiyun.com/cungudafa/article/details/87355580

前提:你得拥有一个优快云账号!
(下面是我个人写完几篇blog的心得,让你拥有炫酷博客~)
在这里插入图片描述

(一) 创建自己第一篇文章

  1. 登录优快云,找到它11,点击开始写你的第一篇博客。

  2. 优快云主要有两种编辑器:Markdown编辑器和富文本编辑器;我选的环境:Markdown编辑器。
    在这里插入图片描述

    Markdown编辑器特点

    • 左右对比查看,方便修改;
    • 最上面一栏和我们常用的office/WPS用法相同;
    • 编辑器支持常用快捷键:ctrl+c(复制)、ctrl+v(粘贴)、ctrl+z(撤销最后一次编辑)等;具体用法可打开保存旁边的问号按钮——帮助文档;
    • 支持强力拖拽来粘贴图片,将Word上的图片直接拖拽到Mark文档上;当然最上面一栏引入图片也可以从电脑文件夹中上传一张图片;我个人喜欢用快捷键粘贴图片~
    • 记得常点击保存,避免断电、断网、意外关闭网页造成心血化为泡沫;
    • 最后点击发布文章,好的标签、分类也是一片好文章所必要的。

    当然,并不是发布后就无法挽回,进入优快云文章管理页面,随时可以再次对其进行编辑完善~

  3. 题目位置:在最上端哦;拥有一个炫酷的title你已经成功了一大半了。
    在这里插入图片描述

  4. 导航目录:这是Markdown编辑器为博主提供的目录导航快捷方式,方便读者阅读时直接跳转到相应目录,很人性化的设计哦,具体实现如下:
    在这里插入图片描述
    在文章编辑时我们通常会设置一级标题(“#”+“一个空格”)、二级标题(“##”+“一个空格”)、三级标题(“###”+“一个空格”)等,在Markdown编辑器下提供了6级标题:
    在这里插入图片描述
    如何体现的呢:
    当你设置了一级标题时,如下:
    在这里插入图片描述
    设置二级标题和更低级标题时,“好导航、不迷路”:
    在这里插入图片描述

  5. 文本样式:可以使用菜单栏的快捷方式,也可以手敲命令实现彩色文案,效果比全篇黑白文案好很多哦!
    在这里插入图片描述

字体背景色:
在这里插入图片描述

 <table><tr><td bgcolor=orange> 背景色是orange</td></tr></table>

   
  • 1

字体美化:
在这里插入图片描述

<font color="red">中间写上想说的话</font>
<font color=#f111f1>中间写上想说的话</font>

<font face=黑体>黑体字示例</font>
<font face=微软雅黑>微软雅黑示例</font>
<font face=STCAIYUN>华文彩云示例</font>

<font color=#0099ff size=5 face=STCAIYUN>color=#0099ff size=6 face=“黑体”</font>
<font color=red size=5>color=#00ffff</font>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

安利其他博主的总结:

  1. 颜色库
  2. 搭配实例 ~~ 干货建议收藏 !!

分享一下我个人常用的16进制颜色图
在这里插入图片描述
6. 插入代码、图片、动图:
插入代码片:这是程序猿交流、分享经验不可或缺的一步,下面是几段代码片的实践,大家来感受一下:
在这里插入图片描述

插入代码片时,记得输入相应的语言种类才能高亮哦!

  1. 插入图片:
    插入图片方法:

    a. 用快捷键粘贴图片、文字等:
    ctrl+c(复制)、ctrl+v(粘贴),可以从Word上粘贴到Markdown编辑器上,不用每次点击另存Word图片再上传了,人性化+1;
    b.暴力插入:
    强力拖拽来粘贴图片,将Word上的图片直接拖拽到Mark文档上;但是Markdown编辑器不支持文字拖拽排序,只能选中文本Ctrl+z和Ctrl+v来调整编辑器上文字、图片、代码片的顺序;
    c. 菜单栏引入:
    图片也可以从电脑文件夹中上传一张图片,最原始,通常引入文件夹中的图片、视频等。

    改变图片大小:
    原图:直接复制过来,不做改变
    按原图比例缩放:在70后面+“一个空格”+“=尺寸”+“小写的x”
    按固定大小缩放:在70后面+“一个空格”+“=长x高”原图:![在这

  2. 插入GIF动图:

  • 从文件夹上传GIF动图
    在这里插入图片描述
  • 手机录屏.mp4在线转GIF上传
    (1). 任意下载一个手机录屏软件–例如:录屏精灵
    (2). 录制完之后是一个mp4格式的视频文件,上传到电脑,
    (3). 将其转成gif动态图请打开在线转换器https://ezgif.com/video-to-gif
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    如果你觉得满意就Save到本地吧,最后上传到优快云上就可以啦~
    示例:
    在这里插入图片描述
  1. 优化排版

    有没有遇到排版前后层次不齐呢,解决方法——空格拯救强迫症星人!

    下面的示例大家感受一下:
    问题一:标题上的中英文括号不一致,空格个数不一致,#个数不一致
    在这里插入图片描述
    问题二:插入片段、图片、代码片没有层次感
    在这里插入图片描述
    问题三:图片位置乱窜
    在这里插入图片描述
    问题四:不仅是图片,文字内容未换行,排版效果都会差很多,在你写博客的时候也会有明显感受!要注意换行哦!

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    问题五:序号排列不整齐:注意在“1. ”后有一个空格,与标题“# ”后有一个空格同理:
    在这里插入图片描述

  2. 再次强调注意保存保存!!!

  3. 优快云还有一个设置我要透露一下,不建议在非工作时间发博哦!就算你发了,也处于在审核状态,读者无法阅读;等待审核不如第二天9:00后再发一次,因此,习惯深夜码字的猿们非常不解,这算是优快云的一个弊端吧!
    在这里插入图片描述

(二)个人主页美化

一个漂亮的博客不仅得有可读性高的博文,优快云支持个人主页设置~

  • 进入文章管理
    在这里插入图片描述
  • 进入博客设置:设置博客标题、描述、皮肤、默认编辑器、代码片样式、版权声明~
    在这里插入图片描述
    在这里插入图片描述

最后,再炫酷的博客都不如优秀的内容支撑,技术贴才是好的贴~

      </div>
      <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-e44c3c0e64.css" rel="stylesheet">
              </div>
  </div>
  <div class="article-info-box">
    <div class="article-bar-top">
                                              <span class="time">2019年02月15日 13:13:21</span>
      <a class="follow-nickName" href="https://me.youkuaiyun.com/cungudafa" target="_blank">cungudafa</a>
      <span class="read-count">阅读数 76</span>
              </div>
    <div class="operating">
              </div>
  </div>
</div>

之前一直好奇其他博主是如何设置友情链接个人简介,今天我也发现优快云栏目管理的隐藏功能了!
示例(下面是三个大V的版面,尊重版权就不打码了):
在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

1、管理博客
在这里插入图片描述
2、栏目管理
在这里插入图片描述
3、添加自定义栏目(有且仅能设置一个自定义栏目)
在这里插入图片描述
4、自定义栏目(有点html基础即可)

我的网站:<A href="http://www.cungudafa.top">www.cungudafa.top</A><BR>
注:<BR>为换行

    
  • 1
  • 2

在这里插入图片描述
5、移动到合适位置
在这里插入图片描述
最终效果:
在这里插入图片描述

      </div>
      <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-e44c3c0e64.css" rel="stylesheet">
              </div>
### 如何使用HTML创建一篇结构化的文章 要创建一篇结构化且功能完整的HTML文章,可以从以下几个方面入手: #### 1. 基本文档结构 HTML 文档的基础框架由 `<html>`、`<head>` 和 `<body>` 组成。这是任何 HTML 页面的核心部分[^1]。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一篇文章</title> <!-- 链接外部样式表 --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 主体内容区域 --> </body> </html> ``` #### 2. 添加标题和段落 通过使用语义标签来定义文章的不同部分,比如标题可以使用 `<h1>` 到 `<h6>` 标签,而正文可以用 `<p>` 来表示段落。 ```html <body> <header> <h1>欢迎阅读我的文章</h1> <h2>副标题:深入探讨主题</h2> </header> <article> <section> <h3>第一章节:背景介绍</h3> <p>这是一个关于某个话题的文章...</p> </section> <section> <h3>第二章节:主要观点</h3> <p>在这里讨论核心论点并提供支持材料。</p> </section> </article> </body> ``` #### 3. 使用CSS美化页面 为了增强视觉效果,可以通过链接到外部 CSS 文件的方式引入样式设计。这一步骤通常在 `<head>` 中完成,正如前面提到的那样。 #### 4. 动态交互能力 如果希望网页具备动态特性,则需加载 JavaScript 脚本文件。注意脚本加载顺序很重要;某些情况下,像 `data.js` 这样的数据处理逻辑应该先于其他依赖它的脚本执行完毕后再调用。 ```html <script src="data.js"></script> <script src="app.js"></script> ``` #### 5. 整合模板引擎(可选) 对于更复杂的项目或者当需要频繁更新内容时,考虑采用模板引擎如 Thymeleaf 可以帮助实现界面与数据分离的目标,从而提升维护性和扩展性[^2][^3]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值