-
Notifications
You must be signed in to change notification settings - Fork 0
/
gil学习-html.html
167 lines (154 loc) · 6.76 KB
/
gil学习-html.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>gil的html学习</title>
</head>
<body>
<header>
网站头部
<nav>导航栏</nav>
<!-- 这是导航栏 -->
</header>
<!-- 这是页眉 -->
<main>
主要内容<br>
<!-- 这是主要内容 -->
<input type="text" placeholder="输入你想要的东西" /><br />
<!-- 这是输入框，用于用户输入文本 -->
<input type="password" placeholder="Enter text here" /><br />
<!-- 这是输入框，用于用户输入文本 -->
<h1>选择你想学习的语言</h1>
<input name="language" value="html" type="checkbox" checked id="htmltag" />
<!-- value的值就是给服务器的值，checked表示默认选中 -->
<label for="htmltag"><html>html</label>
<!-- 这是标签，用于把id和for关联起来 -->
<input name="language" type="checkbox" />css
<input name="language" type="checkbox" />js <br>
<!-- 这是复选框，用于选择多项 -->
<input type="radio" /><br />
<!-- 这是单选框，用于选择一项 -->
<input type="file" /><br />
<textarea name="message" id=""></textarea><br>
<!-- 这是文本域，用于输入多行文本 -->
<select name="选项" id="select">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select><br>
<button>按钮</button>
<!-- 这是一个按钮ceshi-->
<article>文章内容</article>
<!-- 这是一个文章内容 -->
<section>
文档部分
<h1>Hello World!</h1>
<!-- 这是标题 -->
<h2>这是二级标题123</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p>
这是我的第一个段落。正在学习中，好烦啊啊，我正在学习<em>html</em>的说明文档。
</p>
<!-- 这是一个段落，里面包含了强调的文本 -->
<em>This is an example HTML document.用来表示强调的文本</em><br />
<!-- 这是一个简单的HTML文档，用来表示强调的文本 --><!-- 这是换行符 -->
<ins>This text has been inserted.用来表示插入的文本</ins><br />
<!-- 这是一个插入的文本 -->
<del>This text has been deleted.用来表示删除的文本</del><br />
<!-- 这是一个删除的文本 -->
<sup>This text is superscripted.用来表示上标的文本</sup><br />
<!-- 这是一个上标的文本 -->
<sub>This text is subscripted.用来表示下标的文本</sub><br />
<!-- 这是一个下标的文本 -->
<strong>This text is strong.用来表示加粗的文本</strong><br />
<!-- 这是一个加粗的文本 -->
<small>This text is small.用来表示小号的文本</small><br />
<!-- 这是一个小号的文本 -->
<big>This text is big.用来表示大号的文本</big><br />
<!-- 这是一个大号的文本 -->
<cite>This is a citation.用来表示引用的文本</cite><br />
<!-- 这是一个引用的文本 -->
<code>This is some code.用来表示代码的文本</code><br />
<!-- 这是一个代码的文本 -->
<kbd>This is keyboard input.用来表示键盘输入的文本</kbd><br />
<!-- 这是一个键盘输入的文本 -->
<samp>This is sample output.用来表示示例输出的文本</samp><br />
<!-- 这是一个示例输出的文本 -->
<var>x</var> = <var>y</var> + <var>z</var><br />
<!-- 这是一个变量的文本 -->
<dfn>This is a definition.用来表示定义的文本</dfn><br />
<!-- 这是一个定义的文本 -->
<abbr title="abbreviation">abbr</abbr><br />
<!-- 这是一个缩写的文本 -->
<address>123 Main St, Anytown USA</address>
<br />
<!-- 这是一个地址的文本 -->
<bdo dir="rtl">这是一个从右到左的文本.</bdo><br />
<!-- 这是一个从右到左的文本 -->
<blockquote>用来表示引用的文本</blockquote>
<br />
<!-- 这是一个块引用的文本 -->
<span>This is a span.这是用来表示文本的span标签。</span><br />
<!-- 这是一个span标签 -->
</section>
<!-- 这是一个文档部分的标签 -->
<aside>侧边栏</aside>
<!-- 这是侧边栏 -->
<div>通用标签</div>
<!-- 这是一个通用标签，最最常用的标签 -->
<u>This is underlined.</u><br />
<!-- 这是下划线 -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!-- 这是一个无序列表 -->
<ol>
<li>24343</li>
<li>31233</li>
<li>231234</li>
</ol>
<!-- 这是一个有序列表 -->
<img
src="https://img1.baidu.com/it/u=3727430941,3499095021&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1731690000&t=bfed2c2f2e13e861419d322f693d7f37"
alt="猫猫"
id="catImage"
/>
<br />
<img
src="./wp-content/themes/twentytwentythree/screenshot.png"
alt="本地图片"
width="600"
height="500"
/>
<!-- 这是一个图片，设置为本地相对路径图片，不同层级的路径，开头不一样 -->
<video src="https://www.bilibili.com/video/BV1aa4y1X73W?t=121.6"></video>
<!-- 这是一个视频，暂时没有视频，地址可以直接在vscode中复制，不会有window地址斜杆反过来的问题 -->
<audio src=""></audio>
<!-- 这是一个音频，暂时没有音频，地址可以直接在vscode中复制，不会有window地址斜杆反过来的问题 -->
<canvas>这是画布</canvas>
<!-- 这是一个画布，单独不会显示，但是可以用js画图 -->
<form action="" method="get"></form>
<!-- 这是一个表单，暂时没有表单，可以用js实现表单功能 -->
</main>
<!-- 这是主要内容 -->
<footer>
页脚
<hr>水平线</hr><br>
<!-- 这是一个水平线 -->
<a href="https://www.google.com"target="_blank" title="去谷歌">go to google</a><br />
<!-- 这是链接，指向Google网站,在新标签页打开 -->
<!-- 这是注释，按ctrl+l可以快速注释掉一行代码 -->
<a href="index.html">跳转index</a><br>
<!-- 这是跳转到index.html的链接，默认是当前页面打开 -->
<a href="#catImage">猫猫</a>
<!-- 这是跳转到id为catImage的图片的链接 -->
</footer>
<!-- 这是页脚 -->
</body>
</html>