HTML简单学习,让你的好文更美!

2019-12-12 22:47:13 19点赞 39收藏 43评论

张大妈是一个综合平台,虽然大都数属于晒物,但是也有很多值友会分享经验,让大家都得到提高。这阵子看了不少值友的好文,但也深深陷入了深思,为哈呢?因为美观度不够!大妈的编辑窗口仅仅提供了基本的文字标题、加粗、链接等效果,想要达到好看的效果,还需自己努力,之前有不少值友谈了Markdown标记语言美化文章的神机,后来在《HELLO KITTY百变秀,源自招商银行的抽奖》、《Excel神操作,提升效率必学小技能》也做了一些应用,感觉其方便性,但也有一些不足,有些标记在张大妈这里不能完美解析,所以想到了web常用标记语言HTML。

为了举例,本文选择了达人“聚灵阵主”最近的一篇好文《6款洗面奶评测+好用的洗面奶推荐+其他面部清洁产品介绍 》,看完达人的辛苦码文介绍后,文末总觉得缺点什么,缺一份综合的总结表!

HTML简单学习,让你的好文更美!


表格的几个要素

<table>和</table>标签,这是表格一对大标签

<tr>和</tr>标签,这是表格一对标签

<td>和</td>标签,这是表格单元格标签

所以基本的创建表格标签语言如下:(boder值为1,表示边框粗细)

HTML简单学习,让你的好文更美!

初步撰写HTML代码

那么就可以依照语法直接来撰写了,下面的width=100%表示表格宽度为页面宽度(最大)。达人文中用的是星星描述,本文且用实心圆⏺表示一颗星,半实心圆◐表示半颗星。

HTML简单学习,让你的好文更美!

初步显示效果


露姬婷Rosette绿泥毛孔深层清洁控油袪黑头洗面奶露姬婷Rosette白泥粉色弹力保湿洗面奶旁氏POND’S米粹润泽洁面乳氨基酸洗面奶支去死皮角质深层清洁肌肤洁面乳资生堂珊珂(SENKA)绵润白泥泡沫洗面奶资生堂吾诺(UNO) 炭活净颜洁面膏大宝美容洗面奶
洁净程度⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺◐⏺⏺
保持程度⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺
泡沫细腻丰富度⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺◐⏺⏺
气味⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐
性价比⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺
推荐程度⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺

美化篇

对td标签设定bgcolor属性值(十六进制),如bgcolor=#03a1e1设定单元格颜色为淡蓝色(因为张大妈的平台限制,不能直接对行tr设定背景色),字体只能通过font标签的color属性来设定。

HTML简单学习,让你的好文更美!

美化效果如下


露姬婷Rosette绿泥毛孔深层清洁控油袪黑头洗面奶露姬婷Rosette白泥粉色弹力保湿洗面奶旁氏POND’S米粹润泽洁面乳氨基酸洗面奶支去死皮角质深层清洁肌肤洁面乳资生堂珊珂(SENKA)绵润白泥泡沫洗面奶资生堂吾诺(UNO) 炭活净颜洁面膏大宝美容洗面奶
洁净程度⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺◐⏺⏺
保持程度⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺
泡沫细腻丰富度⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺◐⏺⏺
气味⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐
性价比⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺
推荐程度⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺

继续美化

第一列太窄,所以有必要对第一列指定宽度width,例如值为100,则显示效果如下。


露姬婷Rosette绿泥毛孔深层清洁控油袪黑头洗面奶露姬婷Rosette白泥粉色弹力保湿洗面奶旁氏POND’S米粹润泽洁面乳氨基酸洗面奶支去死皮角质深层清洁肌肤洁面乳资生堂珊珂(SENKA)绵润白泥泡沫洗面奶资生堂吾诺(UNO)  炭活净颜洁面膏大宝美容洗面奶
洁净程度⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺◐⏺⏺
保持程度⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺
泡沫细腻丰富度⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺◐⏺⏺
气味⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐
性价比⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺
推荐程度⏺⏺⏺⏺⏺⏺⏺⏺◐⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺⏺


上面的显示是不是要更好一点呢?貌似实际预览效果不尽人意,和上一步差不多,因为大妈的页面框架限定了主要内容的区域宽度,所以无法实现表格宽度100%的完美效果,这里我就截个图如下:

HTML简单学习,让你的好文更美!

总结

以上效果使用浏览器为Firefox,插件为Markdown Here,在Firefox工具中可以直接检索下载。大妈的编辑器还是有自己的特色的,所以纵然是Markdown或者是HTML也只能在这里锦上添花!

HTML简单学习,让你的好文更美!

在这里想要说明,表格文字内容不易太多,需要简化,否则效果就达不到了,当然还有一个特别要说的,在手机端,表格效果惨不忍睹,大妈不提供这个功能估计也是测试过的。貌似有些翻车的,但是也算是一种尝试吧,试错也是一种进步。

当然,这个对于初学者或许有点难度,但是我觉得对于大部分80、90后,甚至00后的值友们,这应该是比较容易掌握的,为了更好的显示效果,达人们还是学起来、用起来,让2020年的好文更美、更直观!

展开 收起

Nintendo 任天堂 Switch《健身环大冒险》体感游戏套装

Nintendo 任天堂 Switch《健身环大冒险》体感游戏套装

339元起

Office 365 家庭版

Office 365 家庭版

249元起

烛龙 古剑奇谭三-数字标准版

烛龙 古剑奇谭三-数字标准版

72元起

索尼(SONY)【PS4国行游戏】地平线:零之曙光

索尼(SONY)【PS4国行游戏】地平线:零之曙光

127.33元起

HP 惠普 暗影精灵5代 台式主机(i5-9400F、8GB、256GB+1TB、GTX1650)

HP 惠普 暗影精灵5代 台式主机(i5-9400F、8GB、256GB+1TB、GTX1650)

4599元起

索尼(SONY)【PS4国行游戏】街霸 5 街头霸王 V Street Fighter V 入门版

索尼(SONY)【PS4国行游戏】街霸 5 街头霸王 V Street Fighter V 入门版

199元起

《真三国无双7猛将传完整版》

《真三国无双7猛将传完整版》

63元起

索尼(SONY)【PS4国行游戏】最终幻想 15 Final Fantasy XV 典藏版

索尼(SONY)【PS4国行游戏】最终幻想 15 Final Fantasy XV 典藏版

339元起

Nintendo 任天堂 Switch NS 主机游戏 牧场物语 重聚矿石镇

Nintendo 任天堂 Switch NS 主机游戏 牧场物语 重聚矿石镇

376元起

Nintendo 任天堂 Switch全新正品游戏卡 NS主机游戏 NX游戏 生化启示录1+2 中文

Nintendo 任天堂 Switch全新正品游戏卡 NS主机游戏 NX游戏 生化启示录1+2 中文

298元起

Steam 《Chinese Parents(中国式家长)》 PC中文版游戏 国区礼物

Steam 《Chinese Parents(中国式家长)》 PC中文版游戏 国区礼物

23.25元起

索尼(SONY)【PS4国行游戏】最终幻想 15 Final Fantasy XV

索尼(SONY)【PS4国行游戏】最终幻想 15 Final Fantasy XV

249元起

索尼(SONY)【PS4国行游戏】索尼 SONY 小小大星球3

索尼(SONY)【PS4国行游戏】索尼 SONY 小小大星球3

99元起

Microsoft 微软 Office 365 个人版 1年订阅

Microsoft 微软 Office 365 个人版 1年订阅

239元起

Nintendo 任天堂 勇者斗恶龙11S

Nintendo 任天堂 勇者斗恶龙11S

345元起

《古剑奇谭:徽章礼盒》(2DVD 典藏版)

《古剑奇谭:徽章礼盒》(2DVD 典藏版)

182.33元起
43评论

发表评论请 登录
  • 最新
  • 最热
评论举报

请选择举报理由

相关文章推荐

更多精彩文章
更多精彩文章
最新文章 热门文章
39
扫一下,分享更方便,购买更轻松