HTML5學習筆記<三>: HTML5樣式, 連接和表格

本文轉載自查看原文 2017-03-16 13:32 2770 HTML5

HTML樣式

　　1, 標簽:

　　<style>: 樣式定義

　　<link>: 資源引用

　　2. 屬性:

　　rel="stylesheet": 外部樣式表

　　type="text/css": 引入文檔的類型

　　margin-left:邊距

　　3. 三種樣式表的插入方法

　　外部樣式表:　　

　　注: 外部樣式表需要創建css文件, 右擊工程目錄 New->File, 命名為:MyStyle.css, 必須指定后綴名.

　　　　.html文件需與.css放在同一目錄下.

　　代碼示例:

　　HTML 代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式</title>
    <link rel="stylesheet" type="text/css" href="MyStyle.css">
</head>
<body>
    <h1>標題h1</h1>
</body>
</html>

　　MyStyle.css 代碼:

h1{
    color: red;
}

　　MyStyle.css的大括號內可以設置多個屬性.

　　內部樣式表:

　　body {background-color:red}

　　p {nargin-left:20px}

　　</style>

　　注: 內部樣式的代碼需放到head標簽里面, style標簽內可以設置多個屬性.

　　代碼示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式</title>
    <style type="text/css">
        p {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <P>歡迎來到南心芭比的博客:www.cnblogs.com/winsoncheung/</P>
</body>
</html>

　　內聯樣式表:

　　注:內部樣式也可設置多個屬性, 在雙引號內多個屬性以分號";"隔開

　　代碼示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式</title>
</head>
<body>
    <P style="color: burlywood; margin-left: 20px">歡迎來到南心芭比的博客:www.cnblogs.com/winsoncheung/</P>
</body>
</html>

HTML連接

　　1. 連接數據:

　　文本連接

　　圖片連接

　　2. 屬性:

　　href屬性: 只想另一個文檔的連接

　　name屬性: 創建文檔內的連接

　　3. img標簽屬性:

　　alt: 替換文本屬性, 當圖片無法正常顯示時, 顯示alt屬性所賦值的文字

　　width: 寬

　　height: 高

　　示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>連接</title>
</head>
<body>
    <!--連接-->
    <a href="http://www.cnblogs.com/winsoncheung/">點擊我進入南心芭比的博客</a>
    <a href="http://www.cnblogs.com/winsoncheung">
        <!--圖片連接 ,img屬性-->
        <img src="http://popup.freep.cn/images/freepupload.jpg" width="100px", height="100px" alt="上傳logo">
    </a>
    <br/>
　　
　　<!--name屬性-->

<a name="tips">hello</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/> 

<!--文檔內部跳轉連接--> 

<a href="#tips">跳轉到hello</a> </body> </html>

HTML表格

　　表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

　　表格標簽

表格	描述
<table>	定義表格
<caption>	定義表格標題。
<th>	定義表格的表頭。
<tr>	定義表格的行。
<td>	定義表格單元。
<thead>	定義表格的頁眉。
<tbody>	定義表格的主體。
<tfoot>	定義表格的頁腳。
<col>	定義用於表格列的屬性。
<colgroup>	定義表格列的組。

示例代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--定義表格-->
    <table>
        <!--定義表格的行-->
        <tr>
            <!--定義表格的單元-->
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
        </tr>
        <tr>
            <!--定義表格的單元-->
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
        </tr>
    </table>
</body>
</html>

　　練習:

　　1. 沒有邊框的表格:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--定義表格-->
    <table>
        <!--定義表格的行-->
        <tr>
            <!--定義表格的單元-->
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
        </tr>
        <tr>
            <!--定義表格的單元-->
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
        </tr>
    </table>
</body>
</html>

　　2. 表格中的表頭:　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--定義表格-->
    <table border="1">
        <!--定義表頭-->
        <th>單元</th>
        <th>單元</th>
        <th>單元</th>
        <!--定義表格的行-->
        <tr>
            <!--定義表格的單元-->
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
        </tr>
        <tr>
            <!--定義表格的單元-->
            <td>單元格1</td>
            <td>單元格2</td>
            <td>單元格3</td>
        </tr>
    </table>
</body>
</html>

　　3. 空單元格:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!--定義表格-->
    <table border="1">
        <!--定義表頭-->
        <th>單元</th>
        <th>單元</th>
        <th>單元</th>
        <!--定義表格的行-->
        <tr>
            <!--定義表格的單元-->
            <td></td>
            <td></td>
            <td>單元格3</td>
        </tr>
        <tr>
            <!--定義表格的單元-->
            <td>單元格1</td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

　　4. 帶有標題的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <p>表格</p>
    <!--定義表格-->
    <table border="1">
        <!--帶標題的表格-->
        <caption>重要表格</caption>
        <tr>
        <!--定義表頭-->
        <th>單元</th>
        <th>單元</th>
        <th>單元</th>
        </tr>
        <!--定義表格的行-->
        <tr>
            <!--定義表格的單元-->
            <td></td>
            <td></td>
            <td>單元格3</td>
        </tr>
        <tr>
            <!--定義表格的單元-->
            <td>單元格1</td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

　　5. 表格內的標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1">
    <tr>
        <td>
            表格1
        </td>
        <td>
            表格2
        </td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>apple</li>
                <li>bananer</li>
                <li>polo</li>
            </ul>
        </td>
        <td>
            我想吃
        </td>
    </tr>
</table>
</body>
</html>

　　6. 單元格邊距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1">
    <tr>
        <td>單元1</td>
        <td>單元2 </td>
        <td>單元3</td>
    </tr>
    <tr>
        <td>單元4</td>
        <td>單元5</td>
        <td>單元6</td>
    </tr>
</table>
<br/>
    <!--單元格邊距-->
<table border="1" cellpadding="10">
    <tr>
        <td>單元1</td>
        <td>單元2 </td>
        <td>單元3</td>
    </tr>
    <tr>
        <td>單元4</td>
        <td>單元5</td>
        <td>單元6</td>
    </tr>
</table>
</body>
</html>

　　7. 單元格間距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table border="1">
    <tr>
        <td>單元1</td>
        <td>單元2 </td>
        <td>單元3</td>
    </tr>
    <tr>
        <td>單元4</td>
        <td>單元5</td>
        <td>單元6</td>
    </tr>
</table>
<br/>
    <!--單元格間距-->
<table border="1" cellspacing="10">
    <tr>
        <td>單元1</td>
        <td>單元2 </td>
        <td>單元3</td>
    </tr>
    <tr>
        <td>單元4</td>
        <td>單元5</td>
        <td>單元6</td>
    </tr>
</table>
</body>
</html>

　　8. 表格內的背景顏色和圖像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格內的背景圖像-->
<table border="1" backgroud="http://popup.freep.cn/images/freepupload.jpg">
    <tr>
        <td>單元1</td>
        <td>單元2 </td>
        <td>單元3</td>
    </tr>
    <tr>
        <td>單元4</td>
        <td>單元5</td>
        <td>單元6</td>
    </tr>
</table>
<br/>
    <!--表格內的背景顏色-->
<table border="1" bgcolor="#ff7f50">
    <tr>
        <td>單元1</td>
        <td>單元2 </td>
        <td>單元3</td>
    </tr>
    <tr>
        <td>單元4</td>
        <td>單元5</td>
        <td>單元6</td>
    </tr>
</table>
</body>
</html>

　　9. 單元格內容排列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table width="400" border="1">
    <tr>
        <th align="left">消費項目....</th>
        <th align="right">一月</th>
        <th align="right">二月</th>
    </tr>
    <tr>
        <td align="left">衣服</td>
        <td align="right">$241.10</td>
        <td align="right">$50.20</td>
    </tr>
    <tr>
        <td align="left">化妝品</td>
        <td align="right">$30.00</td>
        <td align="right">$44.45</td>
    </tr>
    <tr>
        <td align="left">食物</td>
        <td align="right">$730.40</td>
        <td align="right">$650.00</td>
    </tr>
    <tr>
        <th align="left">總計</th>
        <th align="right">$1001.50</th>
        <th align="right">$744.65</th>
    </tr>
</table>
</body>
</html>

　　10. 跨行和跨列單元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<h4>橫跨兩列的單元格：</h4>
<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">電話</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
</table>

<h4>橫跨兩行的單元格：</h4>
<table border="1">
    <tr>
        <th>姓名</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th rowspan="2">電話</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
</table>
</html>

　　以上例子閱讀者可復制到IntelliJ IDEA中試試.

歡迎大家提問和評論, 我盡我所能的為大家解答, 一起學習, 共同成長~

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5學習筆記 HTML5學習筆記----html5與傳統html區別學習html5的WebSocket連接 HTML5樣式和列表、CSS鏈接的四種狀態 html5制作表格 html5學習筆記(html5新標簽) HTML5學習筆記(HTML5新標簽 ) HTML5學習筆記（一）：桌面提醒 HTML5 學習筆記（五）——WebSocket與消息推送 HTML5 學習筆記（三）——本地存儲