送孟浩然之广陵，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

            
            <header>
 <h1>黄鹤楼送孟浩然之广陵</h1>
 <p>【作者】李白 【朝代】唐 </p>
</header>
<main>
 <p>故人西辞黄鹤楼，烟花三月下扬州。</p>
 <p>孤帆远影碧空尽，唯见长江天际流。</p>
 <p><i><b>【注释】：1、之：去、到。2、广陵：即扬州。</p>
 </main>
<footer>
 <p> <img src="https://www.ppzuowen.com/uploads/allimg/230303/1677812043838626.jpeg"/></p>
</footer>

<table>
<tr>
  <th>标题1</th>
  <th>标题2</th>
  <th>标题3</th>
</tr>
<tr>
  <td>单元格1</td>
  <td>单元格2</td>
  <td>单元格3</td>
</tr>
<tr>
  <td>单元格4</td>
  <td>单元格5</td>
  <td>单元格6</td>
 </tr>
</table>

<a href="https://baijiahao.baidu.com/s?id=1771735781373163319&wfr=spider&for=pc"
  target="_parent">"中国传统色"</a>

<ul>
   <li>周一</li>
   <li>周二</li>
   <li>周三</li>
 </ul>
 <ol>
   <li>项目A</li>
   <li>项目B</li>
   <li>项目C</li>
 </ol>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

            
            body{
  font-family:方正楷体_GBK,楷体;
  text-align:center;
}

header,footer {
  background-color:#f4f4f4;
  padding:10px;
}

header h1 [
  color:#333;
]

footer img {
  nax-width:100%;
  height:auto;
}


table, th, td {
  border: 1px solid black;
}
table {
  vidth:90%;
  border-collapse:collapse;
}
th, td {
  padding:8px;
  text-align: left;
}
th {
  background-color: #alafc9;
}

a {
  color:red;
  text-decoration:none;
a:hover [
  color:black;
  text-decoration:underline;
}


ul {
  list-style-type:square;
  padding:20;
  nargin:10px;
  background-color:#e3f9fd;
}

ul il {
  color:#000000;
  padding:5px;
  nargin-botton:10px;
}

ol {
  nargin:50px;
  background-color:#e4c6d0;
}

ol li {
  color:#000000;
  padding:7px
  nargin-botton:5px;
}
  padding:5px;
  margin-bottom:10px;

格式化

            
                1
2

            
            // 示例代码
console.log("Hello 笔.COOL 控制台")

预览

控制台

清空