HTML5學習筆記<六>: HTML5框架, 背景和實體

時間 2019-12-08

標籤 html5 html 學習筆記框架背景實體欄目 HTML5 简体版

原文原文鏈接

HTML5框架

1. 框架標籤(frame):

　　框架對於頁面的設計有着很大的做用html

2. 框架集標籤(<frameset>):

　　框架集標籤訂義如何將窗口分割爲框架瀏覽器

　　每一個frameset定義一系列行或列框架

　　rows/cols的值規定了每行或每列佔據屏幕的面積學習

3. 經常使用標籤:

　　noresize: 固定框架大小spa

　　cols: 列設計

　　rows: 行code

　框架集標籤已經被棄用, 在這裏作一個大體的瞭解htm

　打開netBeans, 建立一個FrameDemo的項目, 建立4個HTML文件blog

- index.html
- framea.html
- frameb.html　　
- framec.html

　　framea.html, frameb.html和framec.html分別爲body設置不一樣的背景色:教程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--把不一樣的frame設置不一樣的顏色 其它的同樣, 只改變顏色-->
<body bgcolor="#5f9ea0">

</body>
</html>

　　在index.html中鍵入代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<!-- IDE已提示frameset已經被棄用 設置行的比例爲20:30:50 -->
    <frameset rows="20%, 30%, 50%">
        <!--用src引入外部frame-->
        <frame src="framea.html"></frame>
        <frame src="frameb.html"></frame>
        <frame src="framec.html"></frame>
    </frameset>
</html>

　　運行起來再瀏覽器中查看一下效果.

4. 內聯框架

　　iframe

　　爲了詮釋內聯框架, 這裏用超連接的打開方式來講明內聯框架, 便於理解.

　　首先先看a標籤的target參數:　　

1. _blank: 在新建窗口中打開
2. _self: 在當前的窗口中打開
3. _parent: 在上一個父窗口中打開
4. _top: 在頂級窗口中打開

　　上面的四種方式咋一看, 看不懂說的啥, 下面具體代碼說明下

　　1. htmla.html裏面的代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--被不一樣的frame設置不一樣的顏色 其它的同樣, 只改變顏色-->
<body bgcolor="#dc143c">
    frameA
    <a href="http://www.baidu.com" target="_parent">沒事兒就找找度娘</a>
</body>
</html>

　　2. htmlb.html, 在htmlb中內聯一個htmla的框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#6495ed">
<!--
        在htmlb裏面去承載htmla
    -->
frameb
<iframe src="framea.html" width="400" height="400"> </iframe>
</body>
</html>

　　3. htmlc.html, 在htmlc中內聯一個htmlb的框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="#ff8c00">
    <!--
        在htmlc裏面去承載htmlb
    -->
    frameC
    <iframe src="frameb.html" width="600px" height="600px"> </iframe>
</body>
</html>

　　4. index.html, 在index中內聯一個ftmlc的框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<!--
    target: 打開頁面的方式
        參數:
        _blank: 在新建窗口中打開
        _self: 在當前的窗口中打開
        _parent: 在上一個父窗口中打開
        _top: 在頂級窗口中打開
-->
<a href="http://www.baidu.com" target="_top">沒事兒就找找度娘</a>
<!--
    iframe: 設置內聯框架
    frameborder: 設置邊框 0 標示沒有邊框
    width: 寬度
    height: 高度
 -->
<iframe src="framec.html" frameborder="0" width="800" height="800"></iframe>

</html>

　　依次更改htmla.html中a標籤中target的參數, 而後再刷新瀏覽器後, 點擊超連接, 看看奇蹟是如何發生的.

HTML5背景

1. 背景標籤:

　　background

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<!--若兩者同時存在會怎樣-->
<body background="p.png">
</body>
</html>

2. 背景顏色:

　　bgcolor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<!--若兩者同時存在會怎樣-->
<body bgcolor="#dc143c">
</body>
</html>

　　二個同時存在, 誰在前, 以誰爲準.

3. 顏色:

　　顏色是由一個十六進制符號來定義, 這個符號由紅色, 綠色和藍色的值組成(RGB)

　　顏色最小值:0(#00)

　　顏色最大值:255(#FF)

　　紅色: #FF0000

　　綠色: #00FF00

　　藍色: #0000FF

　　開發是最好使用這個十六進制顏色的格式, 不推薦使用RGB的方式.

HTML5實體

實體:

　　HTML中預留字符串必須被替換成字符實體

　　如: < , >, $

　　這些沒法在網頁上直接呈現出來, 須要用實體來替換, 而後才能顯示, 相似其它語言中的轉義.

　　實體有不少不少, 咱們不須要去記憶, 須要用到的時候直接能夠查, 例如:

<!DOCTYPE html>
<html>
<body>

<h2>字符實體</h2>

<p>&X;</p>

<p>用實體數字（好比"#174"）或者實體名稱（好比 "pound"）替代 "X"，而後查看結果。</p>

</body>
</html>

　　實體教程參考:http://www.w3school.com.cn/html/html_entities.asp

　　查找字符實體: http://www.w3school.com.cn/tags/html_ref_entities.html

歡迎你們提問, 我盡我所能的爲你們解答, 一塊兒學習, 共同成長~

南心芭比: 熱愛分享, 收穫快樂~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。