HTML
插件
live server
auto rename tag
vscode快捷键
- ! + enter：快速生成html框架
- alt + up / down：快速移动一行
- 标签*n：生成n个指定标签
文档
MDN
标签
网页描述
1
| <meta name="description" content="day day up">
|
网页关键词
1
| <meta name="keywords" content="c++,python,app">
|
网页logo
1
2
3
| <head>
<link rel="icon" href="./images/logo.png">
</head>
|
hr
1
| <hr color="brown" width="300px" size="25" align="left">
|
pre
保留文本原有格式——不删除空格和回车
等宽字体
mark
荧光笔
width
width是img等标签的属性，可以使用百分数实现动态变化
1
2
| <img src="./static/images/logo.png" alt="logo" style="width: 50%;">
|
audio
音频标签
第一种写法
1
| <audio controls src="./audios/bgm.mp3">无法播放</audio>
|
第二种写法
第一个source无法播放会使用第二个，直到找到可以播放的音乐
1
2
3
4
5
| <audio controls>
<source src="./audios/bgm.mp3" type="audio/mpeg">
<source src="./audios/sound1.mp3" type="audio/mpeg">
<source src="./audios/sound2.mp3" type="audio/mpeg">
</audio>
|
video
视频标签
第二种写法
1
| <video width="400" controls src="./vedios/video1.mp4"></video>
|
第一种写法
1
2
3
4
| <video controls width="800">
<source src="./videos/video1.mp4" type="video/mp4">
<source src="./videos/video2.mp4" type="video/mp4">
</video>
|
img
- 只设置width会保留原始比例
- title：鼠标悬停提示
1
| <img src="D:\Blog\photos\wallhaven-85dp61 (1).jpg" alt="study" width="800" height="600" title="study">
|
a
超链接
1
2
3
| <a href="./about.html" target="_blank">
<img width="50" src="./images/logo.png" alt="DQY&WYの小窝">
</a>
|
a标签不仅可以指向外部链接，还可以指向内部元素
1
2
3
| <a href="#my_pos">where is I?</a>
<p id="my_pos">I'm here</p>
|
ol（ordered list）
- 有序列表
- 快捷键：
ol>li*3
- type=”1/A/a/I/i”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <ol type="a">
<li>昵称
<ol type="i">
<li>悦</li>
<li>乖乖</li>
<li>傻傻</li>
</ol>
</li>
<li>爱好
<ol type="I">
<li>吃饭</li>
<li>睡觉</li>
<li>宋江</li>
</ol>
</li>
</ol>
|
ul（unordered list）
- 无序列表
- 快捷键：
ul>li*3
- 使用同ol
- type=”disc”：默认实心圆
- type=”circle”：空心圆
- type=”square”：小方块
- type=”none”：不显示
- 导航一般都是使用无序列表实现(css调整横向展示)
table
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
| table>tr*3>td*2{单元格}
<table>
<caption>成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>100</td>
<td>99</td>
<td>98</td>
</tr>
<tr>
<td>Bob</td>
<td>99</td>
<td>98</td>
<td>97</td>
</tr>
<tr>
<td>Tom</td>
<td>98</td>
<td>97</td>
<td>96</td>
</tr>
</tbody>
</table>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <table border="2" width="400" height="300">
<tr>
<td>单元格1</td>
<td colspan="2">单元格2</td>
</tr>
<tr>
<td rowspan="2">单元格4</td>
<td colspan="2" rowspan="2">单元格5</td>
</tr>
<tr>
</tr>
</table>
|
label
标签，点击该元素会跳转到其绑定元素，通过id进行绑定
1
2
3
4
5
6
7
|
<form>
<label for="username">用户名</label>
<input type="text" name="username" id="username">
<button type="submit">提交</button>
</form>
|
1
2
3
4
5
6
| <input type="text">
<input type="number">
<input type="email">
<input type="password">
<input type="radio">
<input type="file">
|
radio
单选，name一样的radio是互斥的
1
2
3
4
5
6
7
8
9
10
11
| <br>
<label for="cpp">cpp</label>
<input type="radio" name="lang" id="cpp" value="cpp">
<br>
<label for="python">python</label>
<input type="radio" name="lang" id="python" value="python">
<br>
<label for="go">go</label>
<input type="radio" name="lang" id="go" value="go">
|
textarea
多行的输入框
1
2
| <label for="comment"></label>
<textarea name="comment" id="comment" cols="30" rows="2" placeholde="评论"></textarea>
|
select
选项
1
2
3
4
5
6
| <label for="sex">性别</label>
<select name="sex" id="sex">
<option value="">请选择</option>
<option value="man">man</option>
<option value="woman">woman</option>
</select>
|
