- 发布日期:2024-10-04 20:42 点击次数:192
就像我在上一篇著作中所说的那样裸舞,博客的重心应该在写而不是折腾博客上,既然一经有了这样多案例,那就最佳不要闭门觅句了。本文会浮浅先容各式可以写博客的标识言语,然后浮浅提一下博客要有什么东西。
天然我的最终指标如故我方完成从源文档到博客的一整套器用。顺带一提,本文是用 HTML 写的。本文在很猛进度上即是一篇节略的札记,比及博客完成后我也许会把它合并到更规整的著作里。
使用 HTML 写博客博客一般齐是手脚网页呈现的,使用 HTML 编写博客能够获取最大的开脱度,但要能够作念到这少许你就不得不会少许 HTML+CSS+JavaScript,是以一般应该很少会有东说念主径直用 HTML 来写博客。两位大神 RMS 和 ESR 齐是手搓的 HTML,这可以通过他们的网页源代码看出来:
HTML 源代码 RMS ESR当前的 HTML 一经有上百个元素了,然而就写一个浮浅博客这个指标而言,咱们需要使用的也即是那十几个资料,这里就浮浅先容(学习)一下咱们要用到的 HTML 元素。
HTML 中的常见元素在 MDN 中咱们可以找到整个的 HTML 元素,不外大部分咱们齐用不上,这里就浮浅挑几个先容一下算了:
<h1> 到 <h6>用于呈现六个不同级别的标题,其中 <h1> 最高,而 <h6> 最低。
从一级到六级标题<h1 >一级标题</h1> <h2 >二级标题</h2> <h3 >三级标题</h1> <h4 >四级标题</h2> <h5 >五级标题</h1> <h6 >六级标题</h2>
<a>可以通过 href 属性创建通向其他网页、文献、吞并页面内的位置、电子右键地址或任何其他 URL 的超流畅。
<a> - HTML(超文本标识言语) | MDN Wikipedia, the free encyclopedia Github 对于 GNU 操作系统 - GNU 工程 - 开脱软件基金会 GNU Emacs - GNU Project <p> 和 <br><p> 示意文本的一个段落,通常推崇为一整块与相邻文天职离的文本。<br> 在文本中生成一个换行标识,它与 <p> 不同,是一个内联元素。
<ol> 和 <ul>咱们可以使用 <ol>(ordered list)和 <ul>(unordered list)来示意有序列表和无序列表,通过在 <ol> ... </ol> 内使用 <li> ... </li> 对即可写出表格:
<table><table> 用来创建表格,与 table 合营的 tag 非凡的多,有 <caption>,<colgroup>,<col>,<thead>,<tbody>,<tr>,<td> 等。
<q> 和 <blockquote><blockquote> 示意位于其中的是援用内容。通常在渲染时这部分的内容会有一定的缩进。若引文来源于汇注裸舞,则可以将原内容的出处 URL 地址缔造到 cite 上,若要以文本形态陈述读者引文出处,可以通过 <cite> 元素
<q> 是 HTML 援用标签,示意一个阻滞的行内援用文本。在使用它时最佳不要引入换行符,淌若要援用长文本应使用 <blockquote> 替代。
你说的对,然而《原神》是由米哈游自主研发的一款全新绽放天下冒险游戏。游戏发生在一个被称作「提瓦特」的幻念念天下,在这里,被神选中的东说念主将被授予「神之眼」,诱掖元素之力。你将上演一位名为「旅行者」的精巧脚色,在开脱的旅行中相遇性情相反、智力专有的同伴们,和他们一说念打败劲敌,找回失踪的亲东说念主——同期,冉冉发掘「原神」的真相。子在川上曰 骸骨如此夫 不舍日夜的兴致是:在岸上等着吧,仇东说念主的尸体旦夕会从河上飘过来的。这里对引文使用了 <q> 标识,戒备引号无法复制。
<img>通过 <img> 咱们可以在文档中镶嵌图片。一般来说 Web 最常用的图像行为包括:APNG,AVIF,GIF,JPEG,PNG,SVG 和 WebP。WebP 在静态图像和动画的性能均比 PNG,JPEG,JIF 好得多。
上头这些标签仅仅 HTML 标签的一小部分,况且我连最通用的 <div> 标签也莫得先容。对于 HTML 元素的参考可以阅读 HTML 元素参考。许多标签是为了语义化而出现的,对于什么是语义化可以参考这个流畅。
CSS 与 JavaScript使用 HTML 咱们可以搭起网页的骨架,或者说是网页的内容。淌若你使用过一些比较浮浅的标识言语(比如 markdown 或 org-mode)的话,你应该对这些元素并不生疏,你可以很容易地在 markdown 中找到对应物。光是这些标签是莫得办法裸流露悦宗旨内容的,念念要在浏览器中阅读 markdown 博客你最初需要使用它来生成 HTML,然后使用 CSS 提供的形势和排版,临了使用 JavaScript 提供的动态功能。淌若莫得 CSS 的话生成的博客偶然和你当前看到的这个网页差未几,光溜溜的。淌若莫得 JavaScript 就莫得太多的动态成果,天然对于静态博客来说有莫得动态成果齐差未几即是了。
CSS 的全称是 Cascading Style Sheets,即层叠形势表,它是一种用来为 HTML 或 XML 添加形势(字体、间距和样式)的计较机言语。淌若整个的网页齐像本网页的话,那么互联网会非凡没趣。使用 CSS 可以透顶戒指浏览器若何裸露 HTML 元素,从而充分展示悦宗旨经营形势。对于 CSS 的学习应该有不少的书,这里就不保举了,让咱们以一个浮浅的 CSS 动画完结对 CSS 的先容。
淌若说 HTML 是骨架,CSS 是皮,那么 JavaScript 即是肉了。JS 运行在浏览器中,在页面加载的时刻自动奉行。天然当前 JS 不仅可以在浏览器中运行,还可以在做事端运行,比如 Node,deno 等等。通过使用 JavaScript 咱们能够作念与网页操作、用户交互和 Web 做事器联系的整个事情。对于若何学习和使用 JS 我也没什么好说的,这里只保举一册当代 JavaScript 教程。
在我运转了解 HTML+CSS+JavaScript 之前,我写博客齐是通过 Emacs 将 org-mode 源文献转化为 HTML,再配上网上找到的 CSS 凑成一个博客,HTML 在我眼里即是难写的代名词。当前为了重新构建博客我也不得不啃这一口屎,扫尾我发现这屎的滋味果然还可以。原先我是通过 Emacs 的 ox-html 导出博文再在浏览器中查验,当前写完一段径直就可以 F5 刷新望望成果了,这样反倒方便不少。因为博客网页比较浮浅,合营上 Emacs 的 HTML mode,这些 tag 输入并不贫困,况且开脱度远比 org-mode 要高。
但这并不虞味着 HTML 就非凡好写,由于博客结构浮浅,其中许多 HTML 代码齐是叠加的。底下让咱们来学习和制造一些器用,在生动和方便之间作念一个折衷。
从标识言语到 HTML编写博客并不条目咱们齐会 HTML,咱们可以使用愈加浮浅的标识言语,比如 Markdown 来编写博客,然后使用一些器用将 md 文献生成可被浏览器读取的 html。大大齐的静态博客器用齐对比较流行的标识言语提供了撑握,比如 Hugo、Hexo、Jekyll 齐撑握 markdown。本节的任务是先容一些常见(或不常见)的标识言语,为读者(和我)轩敞一下视线。
各式标识言语齐有相应的器用来匡助咱们生成 HTML,淌若咱们念念要让不同标识言语生成相通的 HTML 行为,咱们可以计划对各言语的 parser 中间居品进行一些经管获取一种结伴的抒发方式,再由它来生成咱们念念要的 HTML:
不外内容上咱们也没必要这样自找贫困,一般的器用齐会提供径直生成 HTML 的功能,给生成的 HTML 提供相通或相通的 CSS 即可。
markdown以下内容来自维基百科
markdown 是一种轻量级标识言语,由约翰·格鲁伯和亚伦·斯沃茨发明。它允许东说念主们使用易读易写的纯文本行为编写文档,然后篡改成灵验的 HTML 文档。这种言语摄取了许多在电子邮件中已有的纯文本标识的特点。由于 markdown 的轻量化、易读易写特点,况且对于图片、图表、数学公式齐有撑握,当前许多网站齐等闲使用 markdown 来撰写匡助文档或是用于论坛上发表音讯。如 Github,Discord,Reddit 等。markdown 以至能被用来撰写电子书。就算你很少战争编程,莫得上过 github,淌若你使用过各式札记软件的话你也应该对 markdown 很熟识了。比较于 txt 它的功能弥漫丰富,比较于 word,ppt 它又显得浮浅快捷。在莫得使用 org-mode 之前我一直在使用 markdown 编写博客,写完后将文本通过软件篡改为 html,临了再复制到博客上。我用过一些 markdown 裁剪器,我认为最佳用的如故 marktext,我也传说过 typora,只不外传说要付费就莫得再进一步了解了。
楠里 足交计划到之后可能仍会使用 markdown,这里我浮浅先容一下 markdown 的基本用法,算是给我方作念个札记:
可以使用 = 和 - 分辨示意一级标题和二级标题,也可以在一转的开头使用 # 示意标题,一个 # 对应一个级别,和 <h1> 到 <h6> 访佛这是一级标题 ====== 这是二级标题 ------ 底下是一级至六级标题: # H1 ## H2 ### H3 #### H4 ##### H5 ###### H6
在 markdown 等分段可以在段末添加两个空格,或者在段与段之间添加一个空行这是一段这是下一段
这是一段(empty)这是下一段
在一转的开头使用 *,+ 或 - 开头手脚无序列表标识,列表内容与标识之间需要一个空格 有序列表使用数字加上 . 号来示意,点与内容中间需要一个空格:1. 第一项2. 第二项3. 第三项
在一转的开头使用 > 来示意援用,内容与 > 之间需要一个空格:> 援用内容
使用 ` 来把代码包起来,就像这样:`printf()` 使用 ``` lang 可以创建代码块,lang 指定使用的言语``` c printf("hello world");return 0;```
使用 [流畅称号](流畅 URL) 来创建流畅,或者是 <url> 使用 ![alt 属性文本](图片地址 可选标题) 来创建图片 使用 | 来创建表格, - 被用来分隔表头和其他行| 表头 | 表头 裸舞