04_HTML 内联框架和超链接标签

时间：2018-09-29 姓名：魏文应

在当前 html 引入另外一个 html 文件：

src="lesson-02.html" 引用了 lensson-02.html 这个文件，效果就是这样

内联框架还可以指定其它属性，如：宽度（ width ）和高度（ height ），以及名字（ name ）：

注意：不推荐使用内联框架，因为搜索引擎不会检索内联 .html 的内容。

使用 <a> 标签，添加超链接：

显示效果如下：

点过的超链接，会变成红色。 target="_blank" 属性，使得点击时，在 新标签打开 超链接页面。 target="_self" 属性，是在 当前标签页面 中打开超链接。当然，还可以在 内联框架 中打开：

下面通过 target="test" 关联内联框架中的 name="test" 属性，点击超链接以后的显示效果如下：

在结构、表现、行为中，居中显示属于 表现，在 CSS 设置，所以不建议使用 HTML 进行居中说明。如果你非要在 HTML 中说明居中，可以使用 <center> 标签：

注意：不推荐使用 <center> 标签。

在网页中，我们经常点击 回到顶部 超链接，就回到了页面顶部：

a 标签中，设置超链接属性 href="#" ，点击这个超链接，就可以回到顶部。当然，也可以通过设置 a 标签的 id 属性，去到页面中任意一个位置：

id 属性的值，在同一个 HTML 页面中不能重复。很好理解，如果你在很多个地方设置了 id="label" ，那么 href="#label" 就不知道定位到那个位置。id 的数值只能以字母开头，比如， id="123abc" 就不行，不能以数字开头。

类似点击 联系我们 的效果：

第一种做法:在“导1.html”中点击“导2-1.html”的时候target="second"

不过这种方法要求导1.html的样子和导2.html一样

第二种:在“导1.html”中点击“导2-1.html”的时候先跳到导2.html,记得多传个参数,在导2.html做判断,比如传了个tiaozhuandao2=1的参数 在导2.html判断

取参数的步奏就不写了

var tiaozhuandao2 = 1//这是取参数

if(tiaozhuandao2=1)

document.getElementsByName("second")[0].src="导2-1.html"

就可以了

1、新建一个html文件，命名为test.html。

2、在test.html文件内，引入jquery.min.js库文件，成功加载该文件，才能使用jquery中的方法。

3、在test.html文件内，创建一个div模块，在div内，使用img标签创建一张图片，图片地址为images文件夹下面的1.jpg图片。

4、在test.html文件内，设置img标签的id属性，下面将通过此id来绑定点击事件，例如，设置img标签的id属性为myimg。

5、在test.html文件内，在js标签中，通过img标签的id获得对象，给该对象绑定click点击事件，当图片被点击时，执行function内的代码。

6、在function方法体内，使用location.href来实现跳转至另一个页面，例如，这里设置跳转至百度网站。

7、在浏览器打开test.html文件，点击图片，查看实现的效果。

---