是时候使用Markdown写作了
来源:互联网 发布:js防水卷材厚度 编辑:程序博客网 时间:2024/05/20 10:53
Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。它允许人们”使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档”。 —— 来自维基百科
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。 —— 来自维基百科
本文是用Markdown编辑器(有道云笔记)学习HTML的记录。
自从有道云笔记增加了对Markdown语法的支持后,在PC端就喜欢用它来写文字,Markdown语法很简单,通过点几次工具栏上的按钮,基础语法差不多就掌握了,然后就是实践,不需要每次都去点,毕竟双手一直保持在键盘上的感觉是很爽的。Markdown的用户有很多,如GitHub、Stack Overflow、简书、有道云笔记等,使用Markdown写文字,在支持Markdown语法的网站实现一次编写,到处可用。
微信公众账号的排版,微信公众号自带的编辑器功能比较弱,不少第三方公司也开发了微信排版器,使用排版器,主要是通过选择排版器提供的各种样式,且需要脱离键盘点击鼠标,不符合写作的规律。而,微信后台是支持Markdown格式的,在Markdown编辑器里写好文字,拷贝粘贴到微信公众账号的编辑器中,使用Markdown here工具渲染,插入图片并修订,发布,done。
Markdown的语法标签与HTML语法标签是一一对应的,下面通过对比的方式学习。
标题
浏览器会自动地在标题的前后添加空行。
语法:
<h1>
- <h6>
1到6个#HMTL实例:
<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
Markdown实例:
# 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题
段落
语法:
<p>
>HTML实例:
<p>段落1</p>
Markdown实例:
> 区块1第一层>> 区块1第二层>>> 区块1第二层>> 区块2第一层
链接
HTML实例:
<a href="http://www.w3cschool.cn" title="w3cschool">链接w3cschool</a>
Markdown实例:
[链接w3cschool](http://www.w3cschool.cn/ "w3cschool")
图像
img
元素是自关闭标签,不需要结束标记。<img>
是空标签,它只包含属性,并且没有闭合标签。
语法:src属性的值是图像的url地址,alt属性用来为图像定义一串预备的可替换的文本,在浏览器无法载入图像时,替换文本属性告诉读者他们失去的信息。
<img src="url" alt="some_text">
HTML实例:
<img src="w3cschool.png" width="104" height="142">
Markdown实例:
![image](http://note.youdao.com/favicon.ico)
空元素
没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。如<br>
。在开始标签中添加斜杠,如<br />
,是关闭空元素的正确方法。
水平线
<hr>
标签在HTML页面中创建水平线,用于分隔内容。
HTML实例:
<p>段落1</p><hr><p>段落2</p><hr><p>段落3</p>
注释
HTML实例:
<!-- 这是一个注释 -->
折行
在不产生一个新段落的情况下进行换行,使用<br />
标签。
HTML实例:
<p>这个<br />段落<br />演示了分行的效果</p>
空格和空行
对于HTML,无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。
当显示页面时,浏览器会移除源代码中多余的空格和空行,所有连续的空格或空行都会被算作一个空格。
<base>
元素
<base>
标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接。
<link>
元素
<link>
标签定义了文档与外部资源之间的关系,通常用于链接到样式表。
<style>
元素
<style>
标签定义了HTML文档的样式文件引用地址。
HTML实例:
<head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head>
<meta>
元素
HTML实例:
<!-- 为搜索引擎定义关键词 --><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"><!-- 为网页定义描述内容 --><meta name="description" content="Free Web tutorials on HTML and CSS"><!-- 定义网页作者 --><meta name="author" content="Hege Refsnes"><!-- 每30秒中刷新当前页面 --><meta http-equiv="refresh" content="30">
表格
表格由<table>
标签来定义,每个表格有若干行(由<tr>
标签定义),每行被分割为若干个单元格(由td
标签定义),边框属性用border
属性定义,表格表头由<th>
标签定义。
HTML实例:
<!-- 表格实例 --><table border="1"><tr><th>Header 1</th><th>Header 2</th> </tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
Markdown实例:
header 1 | header 2---|---row 1 col 1 | row 1 col 2row 2 col 1 | row 2 col 2
列表
无序列表始于<ul>
标签,每个列表项始于<li>
标签。
有序列表始于<ol>
标签,每个列表项始于<li>
标签。
自定义列表以<dl>
标签开始,每个自定义列表项以<dt>
标签开始,每个自定义列表项的定义以<dd>
标签开始。
HTML实例:
<!-- 无序列表 --><ol><li>Coffee</li><li>Milk</li></ol><!-- 有序列表 --><ol><li>Coffee</li><li>Milk</li></ol><!-- 自定义列表 --><dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>
Markdown实例:
- Coffee- Milk1. Coffee2. Milk
<div>
和<span>
大多数HTML元素被定义为块级元素和内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。如:<h1>
, <p>
, <ul>
, <table>
.
内联元素在显示时通常不会以新行开始。如:<b>
, <td>
, <a>
, <img>
.
<div>
元素是块级元素,是可用于组合其他HTML元素的容器,它没有特定的含义,由于它属于块级元素,浏览器会在其前后显示折行,如果与CSS一同使用,可用于对大的内容块设置样式属性。它的另一个常见的用途是文档布局。
<span>
元素是内联元素,可用作文本的容器,它也没有特定的含义,当与CSS一同使用时,可用于为部分文本设置样式属性。
微信公众号「数据分析」,分享数据科学家的自我修养,既然遇见,不如一起成长。
- 是时候使用Markdown写作了
- 是时候使用Javascript严格模式了
- 是时候使用Javascript严格模式了
- 是时候使用Fragment懒加载了
- 使用 Markdown 写作那些事儿
- 是时候这样了
- 是时候了!
- 是时候了
- 是时候了
- 是时候 UWP 了
- 是时候回归了
- 是时候整理了
- Markdown写作
- Markdown写作
- 使用Sublime完成Markdown写作记录
- 是时候开始使用JavaScript严格模式了
- 是时候开始使用JavaScript严格模式了
- 移动开发者们,是时候使用HTML5了!
- 三角形最佳路径问题
- table css
- 前端第三方API
- mongodb限制访问
- JAVA辗转相除求最大公约数
- 是时候使用Markdown写作了
- 中工校赛总结
- SpringMVC模式 controller处理ajax的请求及传值(一)
- CPU-Cache-and-Memory-Ordering
- js实现简单的动画(4个按钮控制图片上下左右移动)
- jQuery each()方法的使用
- poj 2155 Matrix(二维树状数组)(经典)
- HTTP --- 头部详细解释
- 内核文件路径正则匹配