HTML5(三)

1.      iframe是一个内联框架,一般用在侧面导航栏的比较多,

这个标签就是在 页面有一个区域,侧面有个链接,不管点哪一链接,链接的内容都会显

到这个区域中,也就是iframe里。下面举一个列子:

<ul>

      <li><ahref="js/homework1.html"target="frm">homework1</a></li>

                 <li><ahref="js/homework2.html"target="frm">homework2</a></li>

                 <li><ahref="js/homework3.html"target="frm">homework3</a></li>

                 <li><ahref="sign.html"target="frm">sign</a></li>

           </ul>

           <iframename="frm"width="100%"height="600px">

      </iframe>

上的这个小例子<ul>里是4个链接,每点一个超链接都会显示在iframe框架内,<a>标签的target属性规定在何处打开链接文档。例子中的target=”frm”这个frmiframe里的name=”frm”一样,所以都会显示在iframe

*如果iframe里的页面要返回主页面用target的这个属性:<ahref="iframe.html"target="_parent">返回首页</a>

 

Target有这几个属性:

有 4 个保留的目标名称用作特殊的文档重定向操作:

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

提示:这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

2.   css标签选择器

基础选择器

          标签选择器

          类选择器   

                  id选择器

                  通配符选择器

 复合选择器

          标签指定式选择器  

             后代选择器        

  并集选择器

 

 

这里说几个主要的,

1.      选择器的位置

选择器可以放在html页面里也可以放在.css文件里,一般是单独放在.css里再引用

放在html页面:

<styletype="text/css">

         这里放选择器

        

</style>

 

放在.css里:

直接在这里写就行了,

2.      选择器使用

(1)      类选择器    标签名{属性:值;  属性:值;}

比如说是html里有一个<p>标签,在<style></style>可以这样写选择器:

P{

     Color:red;

等属性;

}

(2)      类选择器  .自定名称{属性:值;}

类选择器很重要,一定记住名称前有一个点,引用的时候在标签里用

Class=”自定名程” 例如:

.div1{

    position:relative;

   height:500px;

   width:200px;

   background-color: yellow ;

   position:relative;

   text-align: center;

   line-height:50px;

}

                 这个类标签里有好多属性自己查,引用:<p class=”div1”>hello</p>

 (3)id选择器   #选择器名程{属性:值;属性:值}

       和类选择器很相似例如:

#div1{

      width:900px;

      height:500px;

      background-color:#FFFF99;

      margin:0auto;

}

引用:<p id=”div1”></p>看到差别了吧一个是class=“”一个是id=“”;

还有名称前面一个#一个.;

                                     (4)*{属性:值; 属性:值;}

                                     这个用的少,一般是初始化页面的时候用的,可以自己试试。

                                     初始化一般是:

*{

            margin:0;

            padding:0;

         }

还有其他的选择器:

标签指定选择器:标签名.选择器名{属性:值;  属性:值;}

特点关系:  既。。。又。。。。

                                     例如:

<styletype="text/css">

        div.div1{

           color: red;

        }

</style>

引用:

<div>

            我会不变色

            <divclass="div1">

                是不是红色

            </div>

         </div>

你会发现只有第二个div里的字变红了,也就是class=”div1”;

         5)后代选择器 

选择器 +空格+选择器{属性:属性:;...}

例如:<styletype="text/css">

                            divdiv{

                                color: red;

                                }

    </style>

 

Html里代码:

<body>

               <div>红色红色

                  <div>

                  div红色

                  </div>

               </div>

            </body>

 

         显示效果:红色红色

div红色

 

选择器在写css和html很重要,html和css一起能干很多事呢,明天写怎么用html+css画图和做简单的动画效果。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值