行内(inline)元素

特点：

  • 和其他元素都在一行上
  • 元素的高度、宽度、行高及顶部和底部边距不可设置
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变

举例：

  • a 标签
1
<a href="http://qq.com/">QQ</a>

块级(block)元素

特点：

  • 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
  • 元素的高度、宽度、行高以及顶和底边距都可设置
  • 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度

举例：

  • p,hn标签
1
2
<p id="text1">HTML万岁</p>
<h1 id="text1">HTML万岁</h1>

有序和无序列表

有序列表(ol)

  • 有序列表(Ordered List)是一列项目，列表项目使用数字进行标记
1
2
3
4
5
<ol type="disc">
	<li>MIUI</li>
	<li>EMUI</li>
	<li>GIAO</li>
</ol>

无序列表(ul)

  • 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
1
2
3
4
5
<ul type="disc">
	<li>MIUI</li>
	<li>EMUI</li>
	<li>GIAO</li>
</ul>

表格

表格由<table>标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

  • 表格示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
	<tr>
		<th>姓名</th>
		<th>号码</th>
	</tr>
	<tr>
		<td>Giao</td>
		<td>110</td>
	</tr>
	<tr>
		<td>Miao</td>
		<td>120</td>
	</tr>
</table>
  • 表格样式示例；
1
2
3
4
5
6
7
table{
	border: 1px solid;
	border-collapse: collapse;
}
th,tr,td{
	border: 1px solid;
}
  • 表格跨行与跨列合并
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
	<tr>
		<th>姓名</th>
		<th>号码</th>
		<th>地址</th>
	</tr>
	<tr>
		<td>Giao</td>
		<td>110</td>
		<td rowspan="2">派出所</td>
	</tr>
	<tr>
		<td colspan="2">Miao</td>
		<!-- <td>120</td> -->
	</tr>
</table>

效果如下：

姓名 号码 地址
Giao 110 派出所
Miao

Form表单

表单用于向服务器传输数据

  • 一个单选框表单示例
1
2
3
4
<form>
	<input type="radio" name="sex" id="male" value="male"/><label for="male">男</label>
	<input type="radio" name="sex" id="female" value="female"/><label for="female">女</label>
</form>

效果如下：

  • 一个复选框表单示例
1
2
<input type="checkbox" id="basketball" name="hobby"><label for="basketball">篮球</label>
<input type="checkbox" id="football" name="hobby"><label for="football">足球</label>

效果如下：


Frame框架

Frameset标签与Frame

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

<frame> 标签定义 frameset 中的一个特定的窗口（框架）

  • 一个Frameset页面示例
1
2
3
4
5
6
7
<frameset rows="20%,*" />
	<frame src="top.html" >
	<frameset cols="20%,*">
		<frame src="left.html" />
		<frame src="right.html" />
	</frameset>
</frameset>

iFrame标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）

iframe和frame的区别:

  • frame不能脱离frameSet单独使用，iframe可以；
  • frame不能放在body中；

一个展示本博客的iframe示例：

1
2
<iframe width="100%" height="500rem" src="https://blog.revincx.icu/">
</iframe>

效果如下（开始套娃）：

一个展示天气的iframe示例：

1
2
3
4
<iframe 
    width="100%" frameborder="0" scrolling="no" hspace="0" 
    src="https://i.tianqi.com/?c=code&a=getcode&id=35&py=zhengzhou&site=34&icon=1">
</iframe>

效果如下：