HTML元素测试

Posted on | In

测试HTML元素是否都能正确显示。

标题测试

在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。
你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：
* * *
***
*****
- - -
---------------------------------------

　　 　

h1

h2

h3

h4

h5
h6
行首插入1到6个 # ，对应到标题1到6阶，例如：
# 这是 H1
## 这是 H2
###### 这是 H6

　　

h1

h2

底线形式，利用 =（最高阶标题)和 - （第二阶标题）,例如：
This is an h1
=============

This is an h2
-------------

段落测试

1
<h1>标题文字</h1>


Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor.

This is the first level of quoting.

This is nested blockquote.

Back to the first level.


Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. 

1
2
3
4
5
6
7
8
9
10
11
12
13
[text](url)
<a href="url">text</a>
*斜体文本*
_斜体文本_
<i> 斜体文本</i>
**加粗文本**
__加粗文本__
<b>加粗文本</b>
***粗斜体文本***
___粗斜体文本___
<u> 下划线文本</u>
<strike> 删除文本</strike>
<br>换行</br>

　

1
2
3
4
5
6
7
嵌套引用
> 最外层引用
> > 多一个> 嵌套一层引用
> > > 多层嵌套

html 5<blockquote> 标签
<blockquote>引用区块</blockquote>

列表测试

Markdown 支持有序列表和无序列表。

无序列表使用星号、加号或是减号作为列表标记,有序列表则使用数字接着一个英文句点。

Unordered List (ul)

  • Red
  • Green
  • Blue
1
2
3
*   Red
*   Green
*   Blue

等同于：

1
2
3
+   Red
+   Green
+   Blue

等同于：

1
2
3
-   Red
-   Green
-   Blue

Ordered List (ol)

  1. Bird
  2. McHale
  3. Parish
1.  Red
2.  Green
3.  Blue

非常重要的一点是，在列表标记上使用的数字并不会影响输出的 HTML 结果，上面等同于：

1.  Red
1.  Green
1.  Blue

等同于：

2.  Red
6.  Green
3.  Blue

以上ol列表所产生的 HTML 标记都为：

1
2
3
4
5
<ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
</ol>

表格测试

Name Academy score
Harry Potter Gryffindor 90
Hermione Gryffindor 100
Draco Malfoy Slytherin 90 
1
2
3
4
5
Name | Academy | score 
- | :-: | -: 
Harry Potter | Gryffindor| 90 
Hermione  | Gryffindor | 100 
Draco Malfoy | Slytherin | 90

　

Name Academy score
Harry Potter Gryffindor 90
Hermione Gryffindor 100
Draco Malfoy Slytherin 90 
1
2
3
4
5
| Name | Academy | score | 
| - | :-: | -: | 
| Harry Potter | Gryffindor| 90 | 
| Hermione  | Gryffindor | 100 | 
| Draco Malfoy | Slytherin | 90 |

　

表头 表头 表头
111 22222 333333333333
33333333333333 111 22222 
1
2
3
4
| 表头 | 表头 | 表头 |
| ------ | ------ | ------ |
| 111 | 22222 | 33333333333 |
| 3333333333333 | 111 | 222222 |

　

左对齐 右对齐 居中
111 22222 3333333333
333333333333 111 22222 
1
2
3
4
| 左对齐 | 右对齐 | 居中 |
| :------| ------: | :------: |
| 111 | 22222 | 3333333333 |
| 33333333333 | 111 | 22222 |

　

语法说明：

  1. 第一行为表头，第二行分隔表头和主体部分，第三行开始每一行代表一个表格行。
  2. 列与列之间用管道符号 “|” 隔开。
  3. -:表示内容和标题栏居右对齐，:-表示内容和标题栏居左对齐，:-:表示内容和标题栏居中对齐。
  4. 内容和|之间的多余空格会被忽略，每行第一个|和最后一个|可以省略，-的数量至少有一个。
  5. 表格的语句上一行必须为空行，不然表格不生效。
　
-EOF-
0%