网站首页 > 技术文章 正文
Markdown 通过简单标记语法,使普通文本内容具有一定格式。但它本身不支持修改字体、字号与颜色等功能的。一、更改字体大小、颜色、更改字体Markdown语法
<font face="逐浪新宋">我是逐浪新宋</font>
<font face="逐浪圆体">我是逐浪圆体</font>
<font face="逐浪花体">我是逐浪花体</font>
<font face="逐浪像素字">我是逐浪像素字</font>
<font face="逐浪立楷">我是逐浪立楷</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=yellow>我是黄色</font>
<font color=Blue>我是蓝色</font>
<font color= #871F78>我是紫色</font>
<font color= #DCDCDC>我是浅灰色</font>
<font size=5>我是尺寸</font>
<font size=10>我是尺寸</font>
<font face="逐浪立楷" color=green size=10>我是逐浪立楷,绿色,尺寸为5</font>
效果如下:
二、更改字体大小、颜色、更改字体
由于 style 标签和标签的 style 属性不被支持,所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。这里对于文字背景色的设置,只是将那一整行看作一个表格,更改了那个格子的背景色(bgcolor)
Markdown语法
<table><tr><td bgcolor=green>背景色yellow</td></tr></table>
效果如下:
三、Markdown创建表格
1、极简模式
水果名称| 价格 | 数量
-|-|-
香蕉 | $1 | 5 |
苹果 | $1 | 6 |
草莓 | $1 | 7 |
效果如下:
2、简单方法
name | 111 | 222 | 333 | 444
- | :-: | :-: | :-: | -:
aaa | bbb | ccc | ddd | eee|
fff | ggg| hhh | iii | 000|
效果如下:
3、原生方法
name | 111 | 222 | 333 | 444
:-: | :-: | :-: | :-: | :-:
aaa | bbb | ccc | ddd | eee|
fff | ggg| hhh | iii | 000|
效果如下:
常用的颜色
颜色名 | 十六进制颜色值 | rgb颜色
-|-|-
黑色(black) | 000000 | rgb(0, 0, 0) |
蓝色(blue) | 0000FF | rgb(0, 0, 255) |
灰色(grey) | 808080 | rgb(128, 128, 128) |
绿色(green) | 008000 | rgb(0, 128, 0) |
橙色(orange) | FFA500 | rgb(255, 165, 0) |
红色(red) | FF0000 | rgb(255, 0, 0) |
黄色(yellow) | FFFF00 | rgb(255, 255, 0) |
效果如下:
三种方法的区别
简单方法虽然是稍微简单了些,但是前后因为没有格式所以第一列和最后一列没有居中,对于极简方式来说还相当繁琐。极简方式简单,但是都是左对齐。原生方式格式更美观。个人意见强迫症患者请用原生方式,其他请随意。
表格语法说明
1)|、-、:之间的多余空格会被忽略,不影响布局。
2)默认标题栏居中对齐,内容居左对齐。
3)-:表示内容和标题栏居右对齐,:-表示内容和标题栏居左对齐,:-:表示内容和标题栏居中对齐。
4)内容和|之间的多余空格会被忽略,每行第一个|和最后一个|可以省略,-的数量至少有一个。
四、设置图片大小
1、设置设置图片百分比
Markdown语法
<img src="https://www.z01.com/Template/office/style/images/home_product_phone09.png" width="50%" height="50%">
效果如下:
2、设置图片大小
Markdown语法
<img src="https://www.z01.com/Template/office/style/images/home_product_phone09.png" width="251" height="350" >
效果如下:
3、设置图片居中Markdown语法
<div align=center><img src="https://www.z01.com/Template/office/style/images/home_product_phone09.png" width="50%" height="50%"></div>
效果如下:
PS:位置显示三个属性:center,left,right
猜你喜欢
- 2025-01-07 AUTOCAD——弧形文字排列
- 2025-01-07 CSS3页面布局方式详细介绍
- 2025-01-07 探索CSS position属性
- 2025-01-07 干货 | web前端入门基础知识
- 2025-01-07 前端入门——css Grid网格基础知识
- 2025-01-07 伪元素的妙用2 - 多列均匀布局及title属性效果
- 2025-01-07 CSS-定位
- 2025-01-07 图解 CSS Grid 布局
- 2025-01-07 批处理自动生成图片自适应大小、以图片文件名为描述的图片网页
- 2025-01-07 css 之 position 属性浅谈
- 05-15总结雅虎前端性能优化技巧(16条)
- 05-15日常生活中吃雪莲果有养生功效也有危害
- 05-15API 安全之认证鉴权
- 05-15Chaosblade: 阿里一个超级牛逼的混沌实验实施工具
- 05-15膨来仙岛丨搞电竞的都是什么成分?
- 05-15大事全知晓!2022年新闻日历来了!
- 05-15你是有多久没看过麦田圈了?一篇文章全面回顾2015麦田圈季
- 05-15魔兽世界9.1 刻希亚寻找宝箱、稀有WA(转自nga)
- 最近发表
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- sqlset (64)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- js数组插入 (83)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)