html+css内容及markdown的基础语言

HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字图形动画声音表格链接等。

按功能类别排列

基础

标签描述

<!DOCTYPE>定义文档类型。

<html>定义 HTML 文档。

<title>定义文档的标题。

<body>定义文档的主体。

<h1> to <h6>定义 HTML 标题。

<p>定义段落。

<br>定义简单的折行。

<hr>定义水平线。

<!--...-->定义注释。

格式

标签描述

<acronym>定义只取首字母的缩写。

<abbr>定义缩写。

<address>定义文档作者或拥有者的联系信息。

<b>定义粗体文本。

<bdi>定义文本的文本方向,使其脱离其周围文本的方向设置。

<bdo>定义文字方向。

<big>定义大号文本。

<blockquote>定义长的引用。

<center>不赞成使用。定义居中文本。

<cite>定义引用(citation)。

<code>定义计算机代码文本。

<del>定义被删除文本。

<dfn>定义定义项目。

<em>定义强调文本。

<font>不赞成使用。定义文本的字体、尺寸和颜色

<i>定义斜体文本。

<ins>定义被插入文本。

<kbd>定义键盘文本。

<mark>定义有记号的文本。

<meter>定义预定义范围内的度量。

<pre>定义预格式文本。

<progress>定义任何类型的任务的进度。

<q>定义短的引用。

<rp>定义若浏览器不支持 ruby 元素显示的内容。

<rt>定义 ruby 注释的解释。

<ruby>定义 ruby 注释。

<s>不赞成使用。定义加删除线的文本。

<samp>定义计算机代码样本。

<small>定义小号文本。

<strike>不赞成使用。定义加删除线文本。

<strong>定义语气更为强烈的强调文本。

<sup>定义上标文本。

<sub>定义下标文本。

<time>定义日期/时间。

<tt>定义打字机文本。

<u>不赞成使用。定义下划线文本。

<var>定义文本的变量部分。

<wbr>定义可能的换行符。表单

标签描述

<form>定义供用户输入的 HTML 表单。

<input>定义输入控件。

<textarea>定义多行的文本输入控件。

<button>定义按钮。

<select>定义选择列表(下拉列表)。

<optgroup>定义选择列表中相关选项的组合。

<option>定义选择列表中的选项。

<label>定义 input 元素的标注。

<fieldset>定义围绕表单中元素的边框。

<legend>定义 fieldset 元素的标题。

<isindex>不赞成使用。定义与文档相关的可搜索索引。

<datalist>定义下拉列表。

<keygen>定义生成密钥。

<output>定义输出的一些类型。

框架

标签描述

<frame>定义框架集的窗口或框架。

<frameset>定义框架集。

<noframes>定义针对不支持框架的用户的替代内容。

<iframe>定义内联框架。

图像

标签描述

<img>定义图像。

<map>定义图像映射。

<area>定义图像地图内部的区域。

<canvas>定义图形。

<figcaption>定义 figure 元素的标题。

<figure>定义媒介内容的分组,以及它们的标题。

音频/视频

标签描述

<audio>定义声音内容。

<source>定义媒介源。

<track>定义用在媒体播放器中的文本轨道。

<video>定义视频。

链接

标签描述

<a>定义锚。

<link>定义文档与外部资源的关系。

<nav>定义导航链接。

列表

标签描述

<ul>定义无序列表。

<ol>定义有序列表。

<li>定义列表的项目。

<dir>不赞成使用。定义目录列表。

<dl>定义定义列表。

<dt>定义定义列表中的项目。

<dd>定义定义列表中项目的描述。

<menu>定义命令的菜单/列表。

<menuitem>定义用户可以从弹出菜单调用的命令/菜单项目。

<command>定义命令按钮。

表格

标签描述

<table>定义表格

<caption>定义表格标题。

<th>定义表格中的表头单元格。

<tr>定义表格中的行。

<td>定义表格中的单元。

<thead>定义表格中的表头内容。

<tbody>定义表格中的主体内容。

<tfoot>定义表格中的表注内容(脚注)。

<col>定义表格中一个或多个列的属性值。

<colgroup>定义表格中供格式化的列组。

样式/节

标签描述

<style>定义文档的样式信息。

<div>定义文档中的节。

<span>定义文档中的节。

<header>定义 section 或 page 的页眉。

<footer>定义 section 或 page 的页脚。

<section>定义 section。

<article>定义文章。

<aside>定义页面内容之外的内容。

<details>定义元素的细节。

<dialog>定义对话框或窗口。

<summary>为 元素定义可见的标题。

元信息

标签描述

<head>定义关于文档的信息。

<meta>定义关于 HTML 文档的元信息。

<base>定义页面中所有链接的默认地址或默认目标。

<basefont>不赞成使用。定义页面中文本的默认字体、颜色或尺寸。

编程

标签描述

<script>定义客户端脚本。

<noscript>定义针对不支持客户端脚本的用户的替代内容。

<applet>不赞成使用。定义嵌入的 applet。

<embed>为外部应用程序(非 HTML)定义容器。

<object>定义嵌入的对象。

<param>定义对象的参数。

markdown基础语言

功能快捷键

撤销:Ctrl/Command + Z

重做:Ctrl/Command + Y

加粗:Ctrl/Command + B

斜体:Ctrl/Command + I

标题:Ctrl/Command + Shift + H

无序列表:Ctrl/Command + Shift + U

有序列表:Ctrl/Command + Shift + O

检查列表:Ctrl/Command + Shift + C

插入代码:Ctrl/Command + Shift + K

插入链接:Ctrl/Command + Shift + L

插入图片:Ctrl/Command + Shift + G

查找:Ctrl/Command + F

替换:Ctrl/Command + G

合理的创建标题,有助于目录的生成

直接输入1次#,并按下space后,将生成1级标题。

输入2次#,并按下space后,将生成2级标题。

以此类推,我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

插入链接与图片

链接: link.

图片: 

带尺寸的图片: 

居中的图片:

居中并且带尺寸的图片:

当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片.

// An highlighted blockvarfoo='bar';

生成一个适合你的列表

项目

项目

项目

项目1

项目2

项目3

 计划任务

 完成任务

创建一个表格

一个简单的表格是这么创建的:

项目Value

电脑$1600

手机$12

导管$1

设定内容居中、居左、居右

使用:---------:居中

使用:----------居左

使用----------:居右

第一列第二列第三列

第一列文本居中第二列文本居右第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如:

TYPEASCIIHTML

Single backticks'Isn't this fun?'‘Isn’t this fun?’

Quotes"Isn't this fun?"“Isn’t this fun?”

Dashes-- is en-dash, --- is em-dash– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to-HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。2

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 \Gamma(n) = (n-1)!\quad\forall n\in\mathbb NΓ(n)=(n−1)!∀n∈N 是通过欧拉积分

\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能,丰富你的文章

Mon 06Mon 13Mon 20已完成进行中计划一计划二现有任务Adding GANTT diagram functionality to mermaid

关于 甘特图 语法,参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图:

张三李四王五你好!李四, 最近怎么样?你最近怎么样,王五?我很好,谢谢!我很好,谢谢!李四想了很长时间, 文字太长了不适合放在一行.打量着王五...很好... 王五, 你怎么样?张三李四王五

这将产生一个流程图。:

链接长方形圆圆角长方形菱形

关于 Mermaid 语法,参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图:

开始我的操作确认?结束yesno

关于 Flowchart流程图 语法,参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ,生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件,在上方工具栏可以选择导入功能进行对应扩展名的文件导入,

继续你的创作。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容