HTML难点元素解析

1、<iframe>元素
<iframe>是HTML内联框架元素，表示嵌套的浏览上下文，有效的将一个HTML页面嵌入到当前页面中。
添加iframe的语法：
<iframe src="" frameborder="0"></iframe>
VScode输入时，会帮忙把边框frameborder值设定为0，其自带默认值为1
当src的value为"#"时，嵌入的是当前页面。
一般用name属性配合<a>标签使用

<iframe name="QP" src="" frameborder="0"></iframe>
<a target="QP" href="https://i.loli.net/2018/07/21/5b52e2fc88067.jpg">link</a>

用浏览器打开，是一个默认为宽高300*150的空白框，

link左边

这是因为src中未输入指定链接，如果输入百度网址，页面在浏览器打开时就可以看到镶嵌着一个小百度页面。
因为是配合<a>标签使用，<a>标签的target属性要和name配对（见上面代码），点击link会在原本空白部分显示指定页面，效果如图：

image

这是<iframe>比较常用的一种使用方法。
2、<a>元素
<a>元素定义超链接，从一个页面到另一个页面
最重要的是 href属性，一般都是要求输入带有http协议的链接的，当然也可以输入以下三种：
1、无协议（会使用页面默认的协议）
2、a) xxx.html （发起请求，输出404）b) ?name=xxx (添加到当前页面链接后面，发起请求) c) #xxx (什么也不会发生，若只输入"#"或"#top"，则回到页面顶部）
3、javascript （伪协议，例：输入"jacascript:;" 则点击后什么也不会发生）
<a>标签target属性，该属性指定在何处显示链接的资源，以下4个关键字具有特殊意义，配合<iframe>元素使用

_self 在当前页面加载链接
_blank 在新窗口加载链接
_parent 在父页面加载链接，若无则等同于_self
_top 在顶层页面加载链接

download属性，此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。

3、<form>元素
<form> 元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。
默认和服务器的交互方式是GET请求，但其主要用来提交信息，使用的最多的是POST请求。
<input>元素是最重要的表单元素，根据不同的type属性，有不同的形态。
同时要注意一点，input元素中必须要有submit属性，否则表单无法提交，除非有js支持，或者有button元素，会自动升级为提交按钮，但需注意，button元素中不能有属性。

4、<table>元素
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
<tr>标签定义表格中的行，英文全称table row
<th>标签定义表头单元格，英文全称table header cell的
<td>标签定义表中数据单元，英文全称table data cell的

<table>
    <tr><th>Name</th><th>Gender</th><th>Age</th></tr>
    <tr><td>Tom</td><td>Male</td><td>26</td></tr>
</table>

显示如图

<table>还有<thead><tbody><tfoot>标签，顾名思义，分别是表头，标的内容主体，表的脚。使用此标签，可以直接定义表格的头部和主体以及脚。

<table>
    <tbody>
        <tr><td>Tom</td><td>Male</td><td>26</td></tr>
    </tbody>
    <thead>
        <tr><th>Name</th><th>Gender</th><th>Age</th></tr>
    </thead>
</table>

按照我们的需要自动排列

border属性可以添加边框

<table border=1> 
    <tbody>
        <tr><td>Tom</td><td>Male</td><td>26</td></tr>
    </tbody>
    <thead>
        <tr><th>Name</th><th>Gender</th><th>Age</th></tr>
    </thead>
</table>

效果如图

此外<table>元素还有<colgroup>、<col>元素来定义表格列的宽度

<table border=1> 
    <colgroup>
        <col width=200 height=200>
    </colgroup>
    <tbody>
        <tr><td>Tom</td><td>Male</td><td>26</td></tr>
    </tbody>
    <thead>
        <tr><th>Name</th><th>Gender</th><th>Age</th></tr>
    </thead>
</table>

image

当然，还可以在<col>元素中添加bgcolor属性来定义列单元格的颜色，不过不常用，一般会用css来定义。

<table border=1> 
    <colgroup>
        <col width=200 bgcolor="red">
    </colgroup>
    <tbody>
        <tr><td>Tom</td><td>Male</td><td>26</td></tr>
    </tbody>
    <thead>
        <tr><th>Name</th><th>Gender</th><th>Age</th></tr>
    </thead>
</table>

效果图

HTML难点元素解析

推荐阅读更多精彩内容