iframe元素
<iframe src="" frameborder="0"></iframe>
-
通常用于在网页中嵌入另一个页面
-
为可替换元素
-
通常行盒
-
通常显示的内容取决于元素的属性
-
CSS不能完全控制其中的样式
-
具有行块盒的特点
在页面中使用flash
- object
<object data="" type=""></object>
- 可替换元素
data:表示资源位置
type:表示嵌入资源的格式(有标准格式:MIME)
MIME(Multipurpose Internet Mail Extensions)
多用途互联网邮件类型:
比如,资源是一个jpg图片,MIME:image/jpeg
- 可以加子元素:param(表示参数,也可称为未知信息)
- embed
<embed src="" type="">
- 可替换元素
src:表示资源位置
type:表示资源类型
- 兼容的写法
<object data="./example.swf" type="application/x-shockwave-flash">
<param name="quality" value="high">
<embed quality="high" src="./example.swf" type="application/x-shockwave-flash">
</object>
若浏览器能识别object元素,则忽略embed
若不能识别object元素,则识别embed(embed不能作为object的子元素)
表格元素
在css技术出现之前,网页通常使用表格布局。
后台管理系统中可能会使用表格。
前台:面向用户
后台:面向管理员。对界面要求不高,对功能性要求高。
表格为什么不再适用于网页布局?
表格的渲染速度过慢。
- 表格术语
<table>
<caption>这是表格标题</caption>
<thead>
<!-- table row -->
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
</thead>
<tbody>
<tr>
<!-- <td rowspan="2">数据1</td>
合并列单元格 -->
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
<td>数据5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">合计:XXX</td>
<!-- colspan:合并行单元格 -->
</tr>
</tfoot>
</table>
table{
width: 100%;
border-collapse: collapse;
/*
边框折叠方式
separate(默认):边框之间是分离的
collapse:折叠,把相邻的边框合并
*/
}
table caption{
font-size: 2em;
font-weight: bold;
margin: 10px 0;
}
th,td{
border: 1px solid #ccc;
text-align: center;
padding: 20px 0;
}
thead{
background-color: darkcyan;
}
tbody tr:nth-child(odd){
background-color: #eee;
}
tbody tr:hover{
background-color: darkgrey;
}
tbody tr td:first-child{
color: rgb(24, 168, 80);
}
tfoot td{
text-align: center;
padding-right: 20px;
}
其他元素
- abbr
缩写词
<p>
<abbr title="cascading style sheet">CSS</abbr> 是用于为页面添加样式
</p>
2. time
提供给浏览器或搜索引擎阅读的时间
<time datetime="2019-5-1">今年5月</time>
- b (bold)
以前是一个无语义元素,主要用于加粗字体
- q
一小段引用文本,会给包含的文本加双引号
- blockquote
大段引用的文本
cite属性:表示文本引用的链接地址
- br
无语义
主要用于在文本中换行
- hr
无语义
主要用于分割
- meta
还可以用于搜索引擎优化(SEO)
- link
链接外部资源(CSS、图标)
rel属性:relation,链接的资源和当前网页的关系
type属性:链接的资源的MIME类型