行内(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>

效果如下: