HTML扩展

iframe元素

<iframe src="" frameborder="0"></iframe>

• 通常用于在网页中嵌入另一个页面

• 为可替换元素

• 通常行盒

• 通常显示的内容取决于元素的属性

• CSS不能完全控制其中的样式

• 具有行块盒的特点

在页面中使用flash

1. object

<object data="" type=""></object>

• 可替换元素
  data：表示资源位置
  type：表示嵌入资源的格式（有标准格式：MIME）

MIME(Multipurpose Internet Mail Extensions)
多用途互联网邮件类型：
比如，资源是一个jpg图片，MIME：image/jpeg

• 可以加子元素：param（表示参数，也可称为未知信息）

2. embed

<embed src="" type="">

• 可替换元素

src：表示资源位置
type：表示资源类型

3. 兼容的写法

<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;
    }

其他元素

1. abbr

缩写词

<p>
    <abbr title="cascading style sheet">CSS</abbr> 是用于为页面添加样式
</p>

2. time

提供给浏览器或搜索引擎阅读的时间

<time datetime="2019-5-1">今年5月</time>

3. b （bold）

以前是一个无语义元素，主要用于加粗字体

4. q

一小段引用文本，会给包含的文本加双引号

5. blockquote

大段引用的文本

cite属性：表示文本引用的链接地址

6. br

无语义
主要用于在文本中换行

7. hr

无语义
主要用于分割

8. meta

还可以用于搜索引擎优化（SEO）

9. link

链接外部资源（CSS、图标）

rel属性：relation，链接的资源和当前网页的关系

type属性：链接的资源的MIME类型