HTML、CSS、Javascript三者关系
HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为。
元素类型
常见的块元素：h1~h6、p、hr、div、ul、ol、li等。
行内元素
- 不独占一行
- 不可以设置宽高
- 受空格的影响(仅受一个空格的影响)
常见的行内元素：span、b、strong、em、i、a等。
行内块元素
- 不独占一行
- 可以设置宽高
- 受空格的影响(仅受一个空格的影响)
嵌套规则：
- 块元素可以包任何的元素。除了p标签以外，p标签只能包行内元素;
- 行内元素只能包行内元素。除了a标签以外，a标签可以包任何元素;(不推荐使用)
排版标签
1
2
3
4
5
6
7
8
9
10
| <h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>只要能坚持学下来走上人生巅峰不再是梦。</p>
红豆生南国，春来发几枝。<br>
愿君多采撷，此物最相思。
<hr>
|
文本格式化标签
1
2
3
4
5
6
7
8
| <b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除线</s>
<del>删除线</del>
|
效果:
加粗
加粗
下划线
下划线
倾斜
倾斜
删除线
删除线
音频标签
1
| <audio src="音乐.mp3" controls="显示播放的控件" autoplay="自动播放" loop="循环播放"></audio>
|
效果:
视频标签
1
| <video src="视频.mp4" controls="" autoplay="" muted="实现静音播放" loop=""></video>
|
效果:
超链接
1
| <a href="http://跳转的地址"></a>
|
列表标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!-- 无序列表 -->
<ul>
<li>榴莲</li>
<li>苹果</li>
<li>香蕉</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>小米</li>
<li>华为</li>
<li>苹果</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
|
效果:
- 无序列表
- 有序列表
- 小米
- 华为
- 苹果
- 自定义列表
- 帮助中心
- 账户管理
- 购物指南
- 订单操作
表格标签
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
| <table border="1" width="300" height="150">
<caption><b>学生成绩单</b></caption>
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>王胖</td>
<td>95</td>
<td rowspan="2">20</td>
</tr>
<tr>
<td>李然</td>
<td>84</td>
</tr>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">合格</td>
</tr>
</tfoot>
</tbody>
</table>
|
效果:
学生成绩单
| 姓名 |
成绩 |
年龄 |
| 王胖 |
95 |
20 |
| 李然 |
84 |
| 总结 |
合格 |
thead(表格头部),tbody(表格主体),tfoot(表格底部)
rowspan(跨行合并),colspan(跨列合并)
表单标签
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
| <form action="" method="">
文本框：<input type="text" placeholder="请输入你的账号">
<br>
<br>
密码框：<input type="password" placeholder="请输入密码">
<br>
<br>
单选框：
<input type="radio" name="m" value="" />男
<input type="radio" name="m" checked="默认选中">女
<br>
<br>
多选框：
<input type="checkbox">音乐
<input type="checkbox">电影
<input type="checkbox">运动
<br>
<br>
上传文件：<input type="file" multiple="上传多个文件">
<br>
<br>
提交按钮：<input type="submit" value="提交" />
<br>
<br>
重置按钮：<input type="reset" value="重置" />
<br>
<br>
普通按钮：<input type="button" value="普通按钮" />
</form>
|
效果:
下拉菜单
1
2
3
4
5
6
| <select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected="">深圳</option>
</select>
|
效果:
文本域标签
1
| <textarea rows="" cols=""></textarea>
|
效果:
语义化标签
header、nav、footer、article、section、p、ul、ol、li、a、strong、em…等