社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > HTML5學習筆記（三）-HTML5樣式, 連接與表格程式碼詳解

HTML5學習筆記（三）-HTML5樣式, 連接與表格程式碼詳解

黄舟
發布： 2017-03-16 15:37:20
原創
1584 人瀏覽過

HTML樣式

#　　1, 標籤:

<style>: 样式定义
　　<link>: 资源引用
登入後複製

　　2. 屬性:

　rel="stylesheet": 外部样式表
　　type="text/css": 引入文档的类型
　　margin-left:边距
登入後複製

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

　　外部樣式表:　　

　　<link rel="stylesheet" type="text/css" href="mystyle.css">
登入後複製

#　　外部樣式表:　　

<!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>
登入後複製
　　註註」 : 外部樣式表需要建立css檔案, 右鍵工程目錄New->
File

, 命名為:MyStyle.css, 必須指定後綴名稱.

　　　　.html檔案需與.css放在同一目錄下.

#　　程式碼範例:

　　HTML 程式碼:

h1{
    color: red;
}
登入後複製

　　油檔. ##　　MyStyle.css的大括號內可以設定多個屬性.

　　內部樣式表:

　<style type="text/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>
登入後複製

　　內聯樣式表:

　　<p style="color:red">
登入後複製

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

　　程式碼範例:

<!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: 取代文字屬性, 當圖片無法取代文字屬性：正常顯示時, 顯示alt屬性所賦值的文字　　width

: 寬

　　

height

#: 高　　範例程式碼: 

    
    连接
    
    点击我进入南心芭比的博客
    
        
        
    
    　　<!--name属性-->
登入後複製
hello        
 
跳转到hello
登入後複製
############HTML表格###################　　表格由 標籤來定義。有若干行（由 標籤定義），每行被分割為若干單元格（由
標籤定義）。格可以包含文字、圖片、清單、段落、表單、水平線、表格等等。
表格描述
定义表格
定义表格标题。
定义表格的表头。
定义表格的行。
定义表格单元。
定义表格的页眉。
定义表格的主体。
定义表格的页脚。
定义用于表格列的属性。
定义表格列的组。

示例代码:

<!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中试试.

以上是HTML5學習筆記（三）-HTML5樣式, 連接與表格程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
HTML5样式，连接，表格
來源：php.cn
上一篇：HTML5學習筆記（二）-元素,屬性,格式化具體介紹 下一篇：HTML5學習筆記（四）-列表, 區塊和佈局程式碼實例
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用MySQL SQL查詢計算另一張表中欄位的總和 我有一個這樣的模式：具有屬性“user_id”和“username”的用戶表以及具有屬性“customer_id”（user_id的FK）和“finalPrice”的訂單表資料庫架...
來自於 2024-04-06 19:39:29
0
1
441
使用 DocuSign 的簡單按鈕可以輕鬆連接您的帳戶並取得令牌 我正在使用sdk版本，幾乎得到了我想要的東西，但這還不清楚。我們如何才能只透過一次點擊連接一個文件帳戶，例如不使用任何表格或其他東西。只需一個連接按鈕，即可使用sdk獲取代幣和帳戶...
來自於 2024-04-04 15:46:02
0
1
396
如何在 PHP 中使午夜工作以截斷時間？ 這不會將時間設為午夜：newDateTime('firstdayof-1monthmidnight')就好像midnight不存在一樣。在PHP7.3.33和PHP8.2.4中測試...
來自於 2024-04-03 13:48:12
0
1
332
如何連接到表格並顯示其內容？ （MySQL 和 PHP） 我有兩個mysql表（產品和類別）。我在兩個表中都有一些模擬數據。現在我需要以某種方式將類別附加到產品上。例如-ID為1的產品應返回以下內容：|productname|catego...
來自於 2024-04-03 09:55:31
0
1
350
我的 CSS 樣式表不再起作用/連結到我的 HTML 文件 - 可能是什麼原因？ 我已經在很多論壇上搜索了答案，並且查看了大約50個google鏈接，但還沒有發現任何有效的方法...我的CSS沒有顯示在我的HTML上。我的程式碼工作得很好，直到我在其中添加了一個...
來自於 2024-04-03 09:49:45
0
1
402
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板