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. vue-cli3用图形化的方式创建项目

    Vue脚手架可以快速生成Vue项目基础的架构. A.安装3.x版本的Vue脚手架: npm install -g @vue/cli B.基于3.x版本的脚手架创建Vue项目: 1).使用命令创建Vue ...

  2. Python3 打包exe

    cx_Freeze(不推荐) 以前只用 cx_Freeze 支持将 python3 打包成 exe ,示例如下: 在你要打包的 python 文件下新建这个 setup.py 文件: #!/usr/b ...

  3. Docker容器部署Mysql数据库服务器

    本节会用到的Docker命令如下: docker images 查看mysql镜像id docker run -d -p xxxxxxxxxxxxxxx/zhufc/mysql:v2 通过镜像生成 启 ...

  4. abort exit _exit return的区别

    exit()函数导致子进程的正常退出,并且参数status&这个值将被返回给父进程.exit()应该是库函数.exit()函数其实是对_exit()函数的一种封装(库函数就是对系统调用的一种封 ...

  5. [LeetCode] 768. Max Chunks To Make Sorted II 可排序的最大块数 II

    This question is the same as "Max Chunks to Make Sorted" except the integers of the given ...

  6. spring boot前后端参数传递方式

    使用spring boot2X做后端,postman做前端测试 1.获取json字符串 @RestController public class Demo { @RequestMapping(&quo ...

  7. 解决 plsql 启动报错 Initialization error

    由于文件  oci.dll   路径没添加  1.点击edit 2.点击PL/SQL 3.弹框中 填写oci.dll文件的完整路径!完整路径!完整路径!完整路径!完整路径!完整路径!完整路径!完整路径 ...

  8. Linux下将.Asp Core 部署到 Docker容器中

    我们来部署一个简单的例子: 将一个简单的.Aps Core项目部署到Docker容器中并被外网访问 说明: 下面的步骤都是建立在宿主服务器系统已经安装配置过Docker容器,安装Docker相对比较简 ...

  9. cf 595 补题

    1.B2   Books Exchange (hard version) 题意:有n(1~n)个孩子看书,定义一个数组,记录了每个孩子看完

  10. 查看Linux服务器配置

    1.查看CPU lscpu 2.查看内存 free -g 或 free -m 3.查看硬盘 df -h