博客应该怎么样排版

本文介绍了如何优化网络文章排版,提升阅读体验。从标点符号的正确使用、字体选择到段落划分等方面进行了详细说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

注: 本篇博文是在 优快云 博客自带的 xhEditor 下撰写的, 因为个人还不是很习惯使用 MarkDown。


前言


看了一下过去写的博客, 发现排版真是惨不忍睹, 所以准备花点时间把排版全部重新修改一下。好在博文不是很多,改起来工作量倒不是很大。

其实大部分博文都存在着排版难看的问题, 使用 MarkDown 实际上可以解决大部分问题, 因为它将大部分格式都固定化, 可以让写作者花更多精力关注在写作上, 可以说 MarkDown 专门为写作而生。 


那么为什么会出现排版看起来很乱的问题? 这归咎于纸质阅读和网络阅读的不同。 我们平时阅读的纸质书籍都遵守着严格的排版, 而且一页的书籍内容是有限的, 便于涂写, 长时间阅读也不会觉得特别累。 但是网络阅读不同, 一个小小的网页中往往充斥着大量的信息。 如果在这个页面中还有一大段文字挤在一起, 你的阅读感受如何? 自然是不适。 所以本篇博文就来说说怎么样排版可以让网络阅读变得更加舒适。


标点


这个很重要! 很重要! 很重要! 用好标点, 可以让你的博文增色不少。 我们知道字符有两种类型: 半角字符和全角字符, 分别对应英文和中文。 半角占位为一个字节, 全角占位为两个字节。 我们来对比一下在 xhEditor 中这两种字符的区别(注意后面四种符号的区别):

  • 半角字母: abcdefg
  • 全角字母: abcdefg
  • 半角数字:1234567890
  • 全角数字:1234567890
  • 半角标点(英文): `~!@#$%^&*()-_=+[]{}:;"',<.>/? 
  • 全角标点(英文):`~!@#$%^&*()-_+=[]{}:;'",<.>/?
  • 半角标点(中文): ·~!@#¥%……&*()-——=+【】{}:;‘’“”,《。》、?
  • 全角标点(中文): ·~!@#¥%……&×()-——=+【】{}:;‘’“”,《。》、?


半角的字母和数字与全角的字母和数字很好区分, 其实很少情况下会使用到全角的字母和数字。 半角和全角主要针对的是标点, 而英文标点在中文博文中也较少使用到,一般使用中文标点。 


在 xhEditor 中, 以下这几种中文标点是完全相同的(部分常用)。

·!@¥……()【】:;‘’“”,《。》、?(中文半角,占两个字节

·!@¥……()【】:;‘’“”,《。》、?(中文全角,占两个字节)


而以下这几种标点有所不同(并不常用):

~#%&*-——=+{}(中文半角,占一个字节)

~#%&×-——=+{}(中文全角,占一个字节)

空格也可以说是标点的一种吧, 半角的空格占一个字节, 全角的空格占两个字节。


那么在博客中到底怎么使用标点? 实际上并没有固定的规则, 只要符合排版美观的原则即可。个人的使用规则下:

  • 中文标点全部采用全角格式, 但是常用的几个标点在 xhEditor 中的半角和全角格式相同, 所以平时不切换为全角也没关系, 在必要的时候切换即可。
  • 除括号以外的双边标点以外, 逗号、 句号、 问号等单边标点在使用时可以加上一字节的空格(半角格式下的空格)。 加空格可以让句子之间显得不是那么紧凑, 嫌麻烦的话当然也可以不加, 很多地方是不加的。 主要原因是我个人觉得 xhEditor 的全角标点占位空间有点小。 我们可以比较一下加不加空格的区别 :

大家好,欢迎阅读我的博客,如果有不错的建议、想法和意见等的话,请在评论区留言。(不加空格)
大家好, 欢迎阅读我的博客, 如果有不错的建议、 想法和意见的话, 请在评论区留言。(加空格)

  • 中文句子中出现英文单词时依旧使用中文标点, 单词和汉字之间使用空格(半角)隔开; 出现英文整句时, 句子应该使用英文半角标点, 同时需要加上空格(半角)。

大家好, 我是 Kilento, 感谢阅读我的博客。

To be or not to be, that's a question. 

  • 博客中的引号全部使用「 」符号代替, 可以更加强调出引号中的内容。

「今天天气不错」,他看了看天说道,「不妨一起出去爬山? 」

  • 数字和汉字、字母单位之间要用空格(半角)隔开, 但「%」 和「°」等符号单位不需要。

中国有 13 亿人。

今天温度有 30° 吧。

重力加速度的大小约为 9.8 N/kg。

  • 标点和标点连在一起时不需要加空格。

字体和字体大小


博客字体可以选择自己喜欢的, 这完全没有问题。 但也不要太过个性化, 选择一种比较容易阅读的即可。我选择的中文字体是仿宋体, 英文字体是 Comic Sans MS。


字体大小一级标题可以选择 24 px, 二级标题和正文选择 18 px。当然也可以选择其他, 只要保证不要太大或者太小即可。 


分段


可以看到本篇博文的分段都使用了空行。 不同于传统写作使用段前缩进两字符作为标准, 空行的方式实际上更适合网络阅读。 当然也不是完全不需要缩进, 譬如冒号后面跟另起一段的文字之前可以加缩进。 另外注意一段的长度不要过长, 短的段落可以增加阅读体验。


一级标题与正文之间也需要空行, 二级标题和正文之间不需要空行, 一级标题和二级标题之间不需要空行。 恰当的地方也提议加空行, 原则就是让文字不要太过紧凑, 看起来比较舒适。


2017 年 5 月 30 日

Kilento

### 个人博客网站相册页面设计与排版最佳实践 #### 使用语义化的HTML结构 为了创建一个易于维护和个人风格一致的相册页面,应当采用语义化良好的HTML标记。对于相册而言,`<figure>` 和 `<figcaption>` 是两个非常有用的标签,它们可以帮助定义图像及其描述之间的关系[^3]。 ```html <div class="album"> <figure> <img src="path/to/image.jpg" alt="Image description"> <figcaption>Photo caption here</figcaption> </figure> </div> ``` #### 响应式网格布局 考虑到设备多样性和屏幕尺寸的不同,响应式的网格布局是必不可少的选择之一。可以通过CSS Grid 或 Flexbox 来轻松实现多列或多行的照片展示效果,并确保每张照片都能根据容器大小自动调整比例。 ```css .album { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } @media (min-width: 768px) { .album { grid-template-columns: repeat(3, 1fr); } } ``` #### 加载性能优化 当处理大量图片时,延迟加载(Lazy Loading)技术能有效减少初始页面加载时间。现代浏览器支持原生懒加载特性,只需简单设置 `loading="lazy"` 属性即可启用此功能[^4]。 ```html <img src="path/to/large-image.jpg" loading="lazy" width="800" height="600" alt=""> ``` #### 提供替代文本和SEO友好型元数据 为提高可访问性和搜索引擎可见度,在编写 HTML 代码时务必给定合适的 `alt` 文字说明以及必要的 SEO 友好型属性,比如 Open Graph 标签等[^5]。 ```html <meta property="og:image" content="https://example.com/path-to-your-image.jpg"/> <meta property="og:title" content="Your Album Title Here"/> <meta property="og:description" content="A brief summary of what this album contains."/> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值