# 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
.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連線
圖片
連接2.屬性:## href屬性: 只想另一個文件的連接
img標籤屬性:
alt: 取代文字屬性, 當圖片無法取代文字屬性: 標記 屬性: alt: 取代文字屬性, 當圖片無法取代文字屬性:正常顯示時, 顯示alt屬性所賦值的文字 width
: 寬height
#: 高 範例程式碼:
连接 点击我进入南心芭比的博客 <!--name属性-->
hello 跳转到hello############HTML表格################### 表格由f5d188ed2c074f8b944552db028f98a1 標籤來定義。有若干行(由a34de1251f0d9fe1e645927f19a896e8 標籤定義),每行被分割為若干單元格(由b6c5a531a458a2e790c1fd6421739d1c 標籤定義)。格可以包含文字、圖片、清單、段落、表單、水平線、表格等等。
表格 | 描述 |
---|---|
f5d188ed2c074f8b944552db028f98a1 | 定义表格 |
63bd76834ec05ac1f4c0ebbeaafb0994 | 定义表格标题。 |
b4d429308760b6c2d20d6300079ed38e | 定义表格的表头。 |
a34de1251f0d9fe1e645927f19a896e8 | 定义表格的行。 |
b6c5a531a458a2e790c1fd6421739d1c | 定义表格单元。 |
ae20bdd317918ca68efdc799512a9b39 | 定义表格的页眉。 |
92cee25da80fac49f6fb6eec5fd2c22a | 定义表格的主体。 |
06669983c3badb677f993a8c29d18845 | 定义表格的页脚。 |
581cdb59a307ca5d1e365becba940e05 | 定义用于表格列的属性。 |
879b49175114808d868f5fe5e24c4e0b | 定义表格列的组。 |
示例代码:
<!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中文網其他相關文章!