编程语言前端html
Source
Edit
History

undefined 

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
72
73
74
75
76
77
78
79
80
81
<!-- DOCTYPE: 告诉浏览器，我们要使用什么规范 -->
<!DOCTYPE html>

<html lang="en">
<!-- head 标签代表网页头部 -->
<head>
    <!-- meta 描述性标签，他用来描述我们网站的一些信息 -->
    <!-- meta 一般用来做 SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="java">
    <meta name="description" content="learn java">

    <!-- title 网页标题  -->
    <title>第一个网页</title>
</head>

<!-- body 标签代表网页主体 -->
<body>
<!-- 使用name 作为标记-->
<a name="top">顶部</a>

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>

<!--段落标签-->
<p>你好 真的好</p>
<p>非常好 哈哈哈哈</p>

<!-- 换行标签 -->
哈哈哈哈<br/>
下一行<br/>

<!-- 水平线标签,就是一条线 -->
<hr/>

<!--字体样式 粗体、斜体-->
<h1>字体样式标签</h1>
<strong>粗体：i love you </strong><br/>
<em>斜体：i love you</em>

<br/>
<!-- 特殊符号 -->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
&gt;
<br/>
&lt;
<br/>
版权符号：&copy;
<br/>

<!-- 图像标签 src:图片地址，相对地址/绝对地址 alt:图片加载失败会以文字显示-->
<img src="../sources/image/hello.jpg" alt="image" title="悬停文字" width="300" height="300">
<br/>
<img src="../sources/image/hello.jpeg" alt="image hello">
<br/>

<!-- 链接标签 href: 表示要跳转到那个页面
    target: 表示窗口在哪里打开，_blank 在新标签中打开 _self 在自己的网页打开 -->
<a href="https://google.com" target="_blank">点击我跳转到google</a>
<br/>
<a href="https://baidu.com" target="_self"><img src="../sources/image/hello.jpg" alt="哈哈哈"></a>
<hr/>

<!-- 锚链接 需要一个标记，跳转到标记 -->
<a href="#top">回到顶部</a>
<hr/>

<!-- 功能性链接
 邮件链接：mailto
 -->
<a href="mailto:1251108673@qq.com">点击联系我</a>
<hr/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="加我领取好看的小说" title="加我领取好看的小说"/></a>

</body>
</html>

列表&表格&音视频

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页</title>
</head>
<body>

<!-- 有序列表 类似于 1.2.3 -->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C/C++</li>
</ol>

<!-- 无序列表 应用范围：导航、侧边栏... -->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C/C++</li>
</ul>

<!-- 自定义列表
 dl: 标签
 dt: 列表名称
 dd: 列表内容
 -->
<dl>
    <dt>学科</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C/C++</dd>

    <dt>位置</dt>
    <dd>西安</dd>
    <dd>宝鸡</dd>
</dl>

<!-- 表格
 行 tr
 列 td
 -->
<table border="5px">
    <tr>
        <!-- colspan 跨列-->
        <td colspan="3">1-1</td>
    </tr>
    <tr>
        <!-- rowspan 跨行 -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

<!-- 音频和视频
src: 资源路径
controls: 显示控制条
autoplay: 自动播放 -->
<video src="../sources/video/video.mp4" controls autoplay></video>
<hr/>
<audio src="../sources/audio/消愁.mp3" controls autoplay></audio>

</body>
</html>