0. 真正的Markdown

（用reveal.js演示）(什么是段落？行间距、段间距）

  • 换行：行末两个空格+回车
  • 分段：使用空行来分段（连续两个回车）
  • 表格：
  1. | 表头 | 表头 | 表头 |
  2. | - | - | - |
  3. | 内容 | 内容 | 内容 |
  • 图片： ![](地址)
  • 链接： [链接文字](链接地址)

markdown的本质：简化的html

（用typora演示，视图->放大）

斜体 斜体

markdown特点：简化的排版，因此丧失了对细节的控制

typora中使用html:

markdown版demo和html版demo

修改对齐方式（css）

1. html基础

参考《构建Web应用系统——基于JSP+Servlet+JavaBean》第3章

1.1 基础标记

  • ：文件的开头，文件所有内容内容都要放在标记内
  • ：头标记，放置html文件的信息（如定义css样式）
  • ：网页标题</li><li><body>：页面主体</li></ul> <h2 id="yr41f"><a name="yr41f" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.2 排版标记</h2><ul> <li><br>：换行（不成对出现）</li><li><p>：段落标记，段前端后各有一个空行</li><li><span>：行内分段</li><li><small>：字号—</li><li><big>：字号++</li><li><<font style="color:#000088;">img</font><font style="color:#000000;"> </font><font style="color:#660066;">src</font><font style="color:#666600;">=</font><font style="color:#008800;">“地址”</font>>：插入图片。不需要配对</li><li><a href="地址">…</a>：在…中插入链接</li><li><kbd>：键盘</li><li><b>：加粗</li><li><i>：斜体</li><li><em>：强调（斜体？）</li><li><code>：行内代码体</li></ul> <h2 id="77rmpr"><a name="77rmpr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.3 属性和值</h2><h3 id="be4p6p"><a name="be4p6p" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.3.1 style</h3><ul> <li>可用于<img></li><li>style=”height: 180px”（可用于<img>）</li><li>style=”zoom: 200%”（可用于<img>）</li><li>style=”background: rgba(255,255,0,0.1)”（可用于<img>）</li><li>style=”background-color: rgba(0,0,0,0.9)”（可用于<p>）</li><li>style=”display: inline-block”（？）</li><li>style=”text-align: left”（可用于<section>）</li></ul> <h2 id="7x09ho"><a name="7x09ho" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.3.2 class</h2><ul> <li>class=”navigate-down”（用于链接，向下翻）</li><li>class=”r-frame”（图片加智能边框）</li><li>class=”r-fit-text”（文字撑满）</li><li>class=”fragment”（淡入动画）</li><li>class=”fragment grow”（放大动画）</li><li>class=”fragment shrink”（缩小动画）</li><li>class=”fragment fade-out”（淡出动画）</li><li>class=”fragment fade-in-then-out”（淡入后淡出）</li><li>class=”fragment fade-in-then-semi-out”（淡入后变暗）</li><li>class=”fragment fade-right/up/down/left”（从左/下/上/右侧飞入）</li><li>class=”fragment highlight-red/blue/green”（变红/蓝/绿）</li><li>data-fragment-index=”1”</li></ul> <h3 id="3dkotw"><a name="3dkotw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.3.3 data系列（reveal.js）</h3><h4 id="fuape0"><a name="fuape0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.3.3.1 用于<section></h4><ul> <li>data-visibility=”hidden”</li><li>data-auto-animate</li><li>data-markdown</li><li>data-background=”#dddddd”</li><li>data-background=”图片地址”</li><li>data-background-repeat=”repeat”<br>data-background-size=”100px”（密铺图片背景）</li><li>data-background-video=”视频地址”<br>data-background-color=”#000000”</li><li>data-background-iframe=”网页地址”<br>data-background-interactive</li><li>data-transition=”…”</li><li>data-background-transition=”…”</li><li>data-separator=”\r?\n—-\r?\n”<br>data-separator-vertical=”\r?\n—\r?\n”</li><li>data-separator-notes=”Note::”</li></ul> <h4 id="ecvfd3"><a name="ecvfd3" class="reference-link"></a><span class="header-link octicon octicon-link"></span> </h4><ul> <li>data-id=””（用于平滑）</li></ul> <h1 id="13d817"><a name="13d817" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. 在typora中使用html</h1><h2 id="7jd59r"><a name="7jd59r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1 居中及字体大小</h2><div align="center"><font size="8">文本</font></div>