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畫圖和做簡單的動畫效果。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章