軟體測試體系學習及構建（7）-HTML之文字格式化、連結、頭部、CSS

阿新 • • 發佈：2021-09-28

1 文字格式化
- 1.1 文字格式化標籤
- 1.2 舉例
2 連結
3 頭部
4 CSS

1 文字格式化

1.1 文字格式化標籤

使用某些標籤對文字進行格式化，如加粗、傾斜等，這類標籤即稱為文字格式化標籤。
如下常用的文字格式化標籤有：

標籤	說明
`<b>`	定義粗體文字
`<em>`	定義著重文字
`<i>`	定義斜體字
`<small>`	定義小號字
`<strong>`	定義加重語氣
`<sub>`	定義下標字
`<sup>`	定義上標字
`<ins>`	定義插入字
`<del>`	定義刪除字

1.2 舉例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文字格式化標籤</title>
</head>

<body>
    <b>【這是規則】</b><br>

    這是<b> 定義粗體文字</b> 的標籤！<br>
    這是<em> 定義著重文字</em> 的標籤！<br>
    這是<i> 定義斜體字</i> 的標籤！<br>
    這是<small> 定義小號字</small> 的標籤！<br>
    這是<strong> 定義加重語氣</strong> 的標籤！<br>
    這是<sub> 定義下標字</sub> 的標籤！<br>
    這是<sup> 定義上標字</sup> 的標籤！<br>
    這是<ins> 定義插入字</ins> 的標籤！<br>
    這是<del> 定義刪除字</del> 的標籤！<br>

    <hr>
    <p><b>【這是舉例】</b></p>
    <p>曾經有一份真摯的愛情<b>擺在我的面前</b></p>
    <p>我沒有好好珍惜 <i>等到失去時</i> 才感到後悔</p>
    <p>如果老天能夠再<sup>給我一次機會</sup></p>
    <p>我會對那個女孩說 <strong>我愛你</strong></p>
    <p>如果非要在這個愛上<sub>加個期限的話</sub></p>
    <p>我希望是 <del>一萬年</del></p>
</body>

</html>

2 連結

使用標籤 <a>來設定超文字連結;
超連結可以是一個字，一個詞，或者一組詞，也可以是一幅影象;
以點選這些內容來跳轉到新的文件或者當前文件中的某個部分;
在標籤<a> 中使用了href屬性來描述連結的地址。

2.1 連結標籤

使用標籤 <a>來表示超文字連結；
使用href屬性描述連結地址。

2.2 連結語法

<a href="url">連結文字</a>

2.3 連結屬性

屬性	說明
`<href>`	連結地址
`<target >`	定義被連結的文件在何處顯示
`<id>`	建立一個 HTML 文件書籤

2.4 舉例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>連結學習</title>
</head>

<body>
    <p><b>在當前標籤中開啟網頁</b></p>
    <a href="https://blog.csdn.net/NoamaNelson">NoamaNelson的CSND部落格</a><br>
    <a href="https://www.cnblogs.com/noamanelson">NoamaNelson的部落格園</a><br>
    <hr>
    <p><b>在新的視窗中開啟網頁</b></p>
    <a href="https://blog.csdn.net/NoamaNelson" target="_blank">NoamaNelson的CSND部落格</a><br>
    <a href="https://www.cnblogs.com/noamanelson" target="_blank">NoamaNelson的部落格園</a><br>
    <hr>
    <p><b>id屬性</b></p>
    <p><a id="NoamaNelson">NoamaNelson的部落格有：</a></p>
    <a href="https://blog.csdn.net/NoamaNelson#NoamaNelson">CSND部落格</a><br>
    <a href="https://www.cnblogs.com/noamanelson#NoamaNelson">部落格園部落格</a><br>
    <hr>
    <p>建立圖片連結(有邊框)：<br>
        <a href="https://blog.csdn.net/NoamaNelson#NoamaNelson">
            <img border="10" src="F:\html_study\img\1.jpg" alt="NoamaNelson的CSND部落格" width="64" height="64"></img></a>
    </p>
    <p>建立圖片連結(無邊框)：<br>
        <a href="https://blog.csdn.net/NoamaNelson#NoamaNelson">
            <img border="0" src="F:\html_study\img\1.jpg" alt="NoamaNelson的CSND部落格" width="64" height="64"></img></a>
    </p>
</body>
</html>

3 頭部

3.1 head元素

<head> 元素包含了所有的頭部標籤元素；
<head>元素中可插入指令碼（scripts）, 樣式檔案（CSS），及各種meta資訊；
可新增在頭部區域的元素標籤有：

<title>, <style>, <meta>, <link>, <script>, <noscript> ,<base>

3.2 title元素

<title>定義文件標題；
文件中是必須有的；
應用：

①瀏覽器工具欄的標題；
②收藏夾中的標題；
③搜尋引擎結果頁面的標題。

舉例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>標題學習</title>
    </head>

    <body>
        什麼都沒有！！！
    </body>
</html>

3.3 base元素

<base>描述基本的連結地址/連結目標;
該標籤作為HTML文件中所有的連結標籤的預設連結；
舉例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>標題學習</title>
    </head>

    <body>
        <!-- base元素 -->
        <base href="https://blog.csdn.net/NoamaNelson#NoamaNelson" target="_blank">
        <a href="#base">CSDN部落格</a>
    </body>
</html>

3.4 style元素

<style>定義了HTML文件的樣式檔案引用地址；
<style> 元素中你也可以直接新增樣式來渲染 HTML 文件。
舉例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>標題學習</title>

        <!-- style -->
        <style type="text/css">
        body {background-color: coral;}
        a {color: darkblue;}
        </style>

    </head>

    <body>
        <!-- base元素 -->
        <base href="https://blog.csdn.net/NoamaNelson#NoamaNelson" target="_blank">
        <a href="#base"><b>CSDN部落格</b></a>
    </body>
</html>

3.5 link 元素

定義文件與外部資源之間的關係；
通常用於連結到樣式表；
舉例：

/* my.css */

body {background-color: rgb(170, 80, 255);}
a {color: darkblue;}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>頭部學習</title>

        <!-- style -->
        <!-- <style type="text/css">
        body {background-color: coral;}
        a {color: darkblue;} -->
        <!-- </style> -->

        <link rel="stylesheet" type="text/css" href="F:\html_study\css\my.css">

    </head>

    <body>
        <!-- base元素 -->
        <base href="https://blog.csdn.net/NoamaNelson#NoamaNelson" target="_blank">
        <a href="#base"><b>CSDN部落格</b></a>
    </body>
</html>

3.6 meta元素

<meta>標籤描述了一些基本的元資料;
常用於指定網頁的描述，關鍵詞，檔案的最後修改時間，作者，和其他元資料;
<meta> 一般放置於 <head> 區域；
元資料可使用於瀏覽器，搜尋引擎）等。
舉例：

<!DOCTYPE html>
<html>
    <head>
        <!-- meta元素 -->
        <!-- meta可以定義網頁作者、編碼、頁面重新整理、等等 -->
        <meta charset="utf-8" name="author" content="NoamaNelson" http-equiv="refresh" content="3">
        <title>頭部學習</title>

        <!-- style -->
        <!-- <style type="text/css">
        body {background-color: coral;}
        a {color: darkblue;} -->
        <!-- </style> -->

        <link rel="stylesheet" type="text/css" href="F:\html_study\css\my.css">



    </head>

    <body>
        <!-- base元素 -->
        <base href="https://blog.csdn.net/NoamaNelson#NoamaNelson" target="_blank">
        <a href="#base"><b>CSDN部落格</b></a>
    </body>
</html>

3.7 script元素

<script>標籤用於載入指令碼檔案；
後續學習。

4 CSS

CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式；
CSS 可以通過以下方式新增到HTML中：

① 內聯樣式- 在HTML元素中使用"style" 屬性；
②內部樣式表 -在HTML文件頭部 <head> 區域使用<style> 元素來包含CSS；
③外部引用 - 使用外部 CSS 檔案；

建議使用通過外部引用CSS檔案;
樣式標籤有<style>和<link>。

4.1 內聯樣式

當特殊的樣式需要應用到個別元素時，可使用內聯樣式；
方法是在相關的標籤中使用樣式屬性；
樣式屬性可以包含任何 CSS 屬性；
舉例：

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>CSS簡單瞭解</title>
</head>


<body>
    <!-- 內聯樣式-背景色-居中-->
    <p style="background-color: darkblue;text-align:center;">人生自古誰無死，</p>
    <p style="background-color: rgb(28, 139, 0);text-align:center;">留取丹心照汗青。</p>
    <hr>
    <!-- 內聯樣式-字型顏色-居中-->
    <p style="font-family: 'Courier New';color: red;text-align:center;">天生我材必有用，</p>
    <p style="font-family: 'Segoe UI';color: tomato;text-align:center;">千金散盡還復來。</p>
    <hr>
    <!-- 內聯樣式-字型大小-居中-->
    <p style="font-size: larger;text-align:center;">人生得意須盡歡，</p>
    <p style="font-size: larger;text-align:center;">莫使金樽空對月。</p>


</body>
</html>

4.2 內部樣式表

當單個檔案需要特別樣式時，就可以使用內部樣式表；
在<head> 部分通過 <style>標籤定義內部樣式表；
舉例：

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>CSS簡單瞭解</title>
    <style>
        body {background-color: yellow;}
        p {text-align: center;font-family: 'Courier New', Courier, monospace; color:blue; font-weight: bold;}
    </style>
</head>


<body>
    <!-- 內聯樣式-背景色-居中-->
    <!-- <p style="background-color: darkblue;text-align:center;">人生自古誰無死，</p>
    <p style="background-color: rgb(28, 139, 0);text-align:center;">留取丹心照汗青。</p> -->
    <hr>
    <!-- 內聯樣式-字型顏色-居中-->
    <!-- <p style="font-family: 'Courier New';color: red;text-align:center;">天生我材必有用，</p>
    <p style="font-family: 'Segoe UI';color: tomato;text-align:center;">千金散盡還復來。</p> -->
    <hr>
    <!-- 內聯樣式-字型大小-居中-->
    <!-- <p style="font-size: larger;text-align:center;">人生得意須盡歡，</p>
    <p style="font-size: larger;text-align:center;">莫使金樽空對月。</p> -->

    <p>登鸛雀樓</p>
    <p>昔人已乘黃鶴去，<br>此地空餘黃鶴樓。<br>黃鶴一去不復返，<br>白雲千載空悠悠。<br>晴川歷歷漢陽樹,<br>芳草萋萋鸚鵡洲。<br>日暮鄉關何處是？<br>煙波江上使人愁。</p>

</body>
</html>

4.3 外部樣式表

當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇；
可以通過更改一個檔案來改變整個站點的外觀。

/* study_css.css*/

body {background-color:deeppink;}
p {text-align: center;font-family: 'Courier New', Courier, monospace; color:blue; font-weight: bold;}

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>CSS簡單瞭解</title>
    <link rel="stylesheet" type="text/css" href="F:\html_study\css\study_css.css">
</head>


<body>

    <p>登高</p>
    <p>風急天高猿嘯哀，<br>渚清沙白鳥飛回。<br>無邊落木蕭蕭下，<br>不盡長江滾滾來。<br>萬里悲秋常作客,<br>百年多病獨登臺。<br>艱難苦恨繁霜鬢，<br>潦倒新停濁酒杯。</p>

</body>
</html>

『全棧測試技術，分享，共勉，共進，提升』

軟體測試體系學習及構建（7）-HTML之文字格式化、連結、頭部、CSS

目錄1 文字格式化1.1 文字格式化標籤1.2 舉例2 連結2.1 連結標籤2.2 連結語法2.3 連結屬性2.4 舉例3 頭部3.1 head元素3.2 title元素3.3 base元素3.4 style元素3.5 link 元素3.6 meta元素3.7 script元素4 CSS4.1 內聯