HTML&CSS基础-内联框架

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.如下图所示，在同一个路径中有两个网页

<!DOCTYPE html>       <!--Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档。html这种模式兼容浏览器是最好的-->

<html lang="en">

    <head  name="尹正杰" age="25">  <!--标签的开头,其里面的内容（name="尹正杰"）是标签的属性,其属性可以定义多个。-->

        <meta charset="UTF-8"/>     <!--指定页面编码，我们称这种标签类型为自闭和标签，因为我们需要在标签的结尾写上“/”，为了方便我们识别标签类型。-->

        <meta http-equiv="refresh" content="30; Url=http://www.cnblogs.com/yinzhengjie/"> <!--这是做了一个界面的跳转，表示30s不运行的话就跳转到指定的URL-->

        <title>尹正杰的个人主页</title> <!--定义头部(标签)的标题-->

        <meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区" /> <!--“content”定义关键字，其作用就是让浏览器通过搜索关键字时，会匹配该网站，这就是说如果你没有单独给百度钱的话，这些关键字就尤为重要啦！-->

        <meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。" />  <!--定义描述字符,其作用就告诉客户你的这个网站是干嘛使用的。-->

        <link rel="shortcut icon" href="https://baike.baidu.com/pic/%E9%82%93%E7%B4%AB%E6%A3%8B/6798196/0/d1a20cf431adcbef011db9bba6af2edda3cc9f66?fr=lemma&ct=single#aid=0&pic=d1a20cf431adcbef011db9bba6af2edda3cc9f66" type="image/x-icon" /> <!--定义头部图标-->

        <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!--这个是IE的浏览器生效的规则，如果你用的是谷歌，360等浏览器的话，这行规则不生效，如果你用的是IE浏览器的话，表示用IE最新的引擎去渲染HTML-->

    </head> <!--标签的结尾，结合该标签的开头，这种标签类型我们称之为主动闭合标签。-->

    <body>

        <h1>尹正杰</h1><!--定义文件的内容，其中“h1”标签中-->

        <h2>尹正杰</h2>

        <h3>尹正杰</h3>

        <h4>尹正杰</h4>

        <h5>尹正杰</h5>

        <h6>尹正杰</h6>

        <h1>You are a good boy!</h1>

        <div style="width: 4000px">  <!--是其缩进代码的父级标签，给其定义宽度属性是200像素大小-->

                    <h1>尹正杰</h1><!--块级标签：也叫父级标签，即自己单独占了一行空间，或者说是占它父级标签的100%。作用：定义文件的内容-->

                    <h1>You are a good boy!</h1>

        </div>  <!--div的标签的结尾-->

        <p>素胚勾勒出青花笔锋浓转淡<br/>瓶身描绘的牡丹一如你初妆<br/>冉冉檀香透过窗心事我了然<br/>宣纸上走笔至此搁一半<br/>釉色渲染仕女图韵味被私藏<br/>而你嫣然的一笑如含苞待放</p> <!--其中<br/>表示换行符的意思，<p></p>表示一个段落的意思。-->

        <a>yinzhengjie</a> <!--内联标签，以a开头的标签都是内联标签，这些标签的内容时连接在一起的。:-->

        <a>2017</a>

        <a href="http://www.cnblogs.com/yinzhengjie/" target="_blank">尹正杰博客</a>  <!--a标签特有的性能，重定向，通过href属性定义需要跳转的网站，通过target="_blank"表示新打开一个标签页并打开新的URL地址-->

        <a href="#Y1">Golang第一章</a>  <!--a标签特有的性能，做锚，找ID为"Y1"的标签并跳转过去-->

        <a href="#Y2">Golang第二章</a>  <!--找ID为"Y2"的标签-->

        <a href="#Y3">Golang第三章</a>  <!--找ID为"Y3"的标签-->

        <div id="Y1" style="height:700px;background-color:antiquewhite">  <!--用id来定义标签为"Y1"（一般要具有唯一性，即尽量不要让标签的id的值相同）,用style来定义高度为700像素，颜色用background-color来定义。-->

                                                                            Golang进阶之路Day1<br/>

             Go语言官方自称,之所以开发Go 语言,是因为“近10年来开发程序之难让我们有点沮丧”。 这一定位暗示了Go语言希望取代C和Java的地位,成为最流行的通用开发语言。博客地址：http://www.cnblogs.com/yinzhengjie/p/6482675.html

        </div>

        <div id="Y2" style="height:700px;background-color:rebeccapurple;">

                                <br/>Golang进阶之路Day2<br/>

            前者大家应该都很熟悉，因为我在上一篇（http://www.cnblogs.com/yinzhengjie/p/6482675.html）关于GO的博客中用"go build"命令编译不同的版本，但是在这里我们还是要演示一下go build的花式用法。博客地址：http://www.cnblogs.com/yinzhengjie/p/7000272.html

        </div>

        <div id="Y3" style="height:700px;background-color:brown;">

             Golang进阶之路Day3<br/>

            当然我这里只是介绍了Golang的冰山一角，对Golang感兴趣的小伙伴，可以看一下Golang官网的文档说明。毕竟官方才是最权威的，给出国内地址：https://golang.org/pkg/!博客地址：http://www.cnblogs.com/yinzhengjie/p/7043430.html

        </div>

        <!--功能最少的标签，最纯洁的易于加工的标签,即他们没有“h1”和"a"标签那么多的属性。-->

        <div>我是块标签</div>

        <span>我是内联标签</span> 　　　

        <!--列表-->

        <ul>    <!--打印字符穿前面带个小黑点-->

            <li>菜单一</li>

            <li>菜单二</li>

            <li>菜单三</li>

        </ul>

        <ol>  <!--打印字符串前面有数字标识-->

            <li>第一章</li>

            <li>第二章</li>

            <li>第三章</li>

        </ol>

        <ol>

            <dd>北京</dd>  <!--自带缩进，可以用于写新闻的标题-->

                <dt>朝阳区</dt>

                <dt>亦庄经济开发区</dt>

                <dt>丰台区</dt>

                <dt>海淀区</dt>

            <dd>河北</dd>

                <dt>石家庄</dt>

                <dt>保定</dt>

            <dd>陕西</dd>

                <dt>西安</dt>

                <dt>安康</dt>

        </ol>

    <!--表格-->

    <table border="1">   <!--定义一个表格，其属性是border="1"，表示加边框的意思。-->

        <thead>    <!--定义表头信息-->

            <tr>   <!--'tr'表示定义一行的数据，里面的内容由子标签<th></th>实现-->

                <th>姓名</th>    <!--'th'定义同一行每一列的内容,也就是说只要带有这个标签的且在其父标签"tr"标签中就是写的同一行内容。-->

                <th>年龄</th>

                <td>性别</td>

            </tr>

        </thead>

        <tbody> <!--定义表格的内容-->

            <tr>  <!--'tr'表示每一行的数据，其定义的是行的操作。-->

                <td>尹正杰</td> <!--td用来定义当前行的每一列的内容，与thead中的'th'用法相同。只不过'th’有加粗效果！-->

                <td>25</td>

                <td>boy</td>

            </tr>

            <tr>  <!--'tr'表示每一行的数据-->

                <td>尹正杰</td> <!--‘<td></td>’标签定义的是列的操作-->

                <td colspan="2">26</td>     <!--注意，'td'标签的colspan属性表示向右占锯的空间，我们给的值是“2”，就表示会从当前列往后在占一个列，共计当前行的两列空间！-->

            </tr>

            <tr>  <!--'tr'表示每一行的数据-->

                <td>yinzhengjie</td> <!--‘<td></td>’标签定义的是列的操作-->

                <td rowspan="2">26</td>     <!--注意，'td'标签的rowspan属性表示向下占据的空间，我们这里给的是还是“2”，即从当前行的当前列，向下扩充空一列内容。-->

            </tr>

            <tr>  <!--'tr'表示每一行的数据-->

                <td>yinzhengjie</td> <!--‘<td></td>’标签定义的是列的操作-->

                <td >26</td>     <!--表示这个'td'标签占两列的空间-->

            </tr>

        </tbody>

    </table>

    </body>

</html>

index.html文件内容戳这里

二.demo.html文件源代码如下

<!DOCTYPE html>

<html>

    <head>

       <title>尹正杰的网页</title>

    <head>

    <body>

        <h1>我的博客地址:<font color="red" size="7">https://www.cnblogs.com/yinzhengjie/</font></H1>

        <!--

            使用内联框架可以引入一个外部的页面,使用ifname来创建一个内联框架

            属性:

                SRC:

                    指向一个外部页面的路径，可以使用相对路径。

                width:

                    指定内联框架宽度

                height:

                    指定内联框架高度

                name:

                    可以为内联框架指定一个name属性

            在现实开发中不推荐使用内联框架，因为内联框架中的内容不会呗搜索引擎所检索。

        -->

        <iframe src="./index.html" width="1200px" height="800px" name="jason"></iframe>

    </body>

</html>

三.浏览器打开以上代码渲染结果

HTML&CSS基础-内联框架的更多相关文章

  1. HTML&CSS基础-内联样式和内部样式表

    HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...

  2. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  3. [19/06/04-星期二] HTML基础_实体(转义字符)、图片标签(img)、元标签(meta)、语法规范、内联框架(iframe)、超链接

    一.实体(转义字符) 在HTML中,一些诸如<.> 就是普通的小于号和大于号不能直接使用,因为浏览可能会把它当成一个标签去解析,所以需要一些特殊字符去表示这些特殊字符, 这些字符我们称他们 ...

  4. HTML5 内联框架iFrame

    由于现在frame和frameset很少使用,已经过时了,已经被div+CSS代替了,所以,这里只是举例说明一下,当下还在使用的内联框架iFrame 所谓的iFrame内联框架,我的理解就是在网页内部 ...

  5. html5--1.16 内联框架

    html5--1.16 内联框架 学习要点: 1.iframe内联框架2.综合实例1 1.iframe内联框架 1.iframe元素用来在文档中添加一个内联框架. 2.iframe为body元素的子元 ...

  6. HTML基础 内联样式改进 三毛语录

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 计算机网络之iframe内联框架跨域

    iframe框架同源下的数据调用 iframe框架非同源下的数据传输 一.iframe框架同源下的数据调用 1.父窗口向子窗口获取数据 //html1父级窗口 <iframe src=" ...

  8. __x__(14)0906第三天__<iframe> 内联框架 引入有一个外部html页面

    在现实开发中,不推荐使用内联框架,因为<iframe></iframe>中的内容不会被搜索引擎检索. 在特殊情况中,如内网项目,不用放在互联网上时,可以使用<iframe ...

  9. Iframe内联框架

    iframe:内联框架标签,用于在网页中任意的位置嵌入另一个网页 <iframe src="url地址"> </iframe> iframe标签的常用属性 ...

随机推荐

  1. selenium===使用docker搭建selenium分布式测试环境

    准备: #请在此之前先了解,selenium grid :参考:selenium-grid ,下载地址,win-本地部署过程 >>>环境准备: Linux操作系统 >>& ...

  2. Jmeter通过SSHCommand测试获取Linux服务器资源文件信息

    有些时间我们想通过接口测试来获取服务器上面的某个资源文件信息,应该怎么办? 别急.... Jmeter通过ssh协议可以实现这个操作. 下面来看一下具体的实现吧. 需要提前安装好的工具: 1.按照好j ...

  3. 查看Oracle表空间以及用户与其默认表空间情况

    Oracle中一个表空间可能是多个用户的默认表空间,下面语句统计了用户及其默认表空间情况,如果用户多个,用户之间通过逗号分隔. select t.default_tablespace, to_char ...

  4. 【maven学习】pom.xml文件详解

    环境 apache-maven-3.6.1 jdk 1.8 eclipse 4.7 POM是项目对象模型(Project Object Model)的简称,它是Maven项目中的文件,使用XML表示, ...

  5. Gradle之dependenciens的各种依赖说明

    implementation:对于使用了该命令编译的依赖,对该项目有依赖的项目将无法访问到使用该命令编译的依赖中的任何程序,也就是将该依赖隐藏在内部,而不对外部公开.api 完全等同于compile指 ...

  6. Tomcat：Commons Daemon procrun stdout initialized

    1.问题查询 更换了Tomcat版本后服务器无法启动,看日志出现了Commons Daemon procrun stdout initialized错误,一开始以为是环境变量的配置问题,但是仔细检查后 ...

  7. [转帖]Beyond compare4密钥

    Beyond compare4密钥 https://blog.csdn.net/lemontree1945/article/details/92963423 学习一下 最近想破解水卡.... w4G- ...

  8. linux设置定时任务的方法（自己总结）

    Linux设置定时任务步骤 linux设置定时任务的关键字是:crontab 1:查看现在已经有的定时任务的命令是  crontab -l,执行命令如下图: 2:新建定时任务的命令是:crontab ...

  9. C# 历遍对象属性

    今天有个网友问如何历遍对象的所有公共属性,并且生成XML.采用序列化方式的话比较简单,我写个手工解析的例子,这样能让初学者更加理解也比较灵活,记录一下吧或许会有人用到. 对象模型: public cl ...

  10. Locust性能测试_先登录场景案例

    前言 有很多网站不登录的话,是无法访问到里面的页面的,这就需要先登录了实现场景:先登录(只登录一次),然后访问页面->我的地盘页->产品页->项目页 官方案例 下面是一个简单的loc ...