HTML5学习笔记<三>: HTML5样式, 连接和表格
HTML样式
1, 标签:
<style>: 样式定义
<link>: 资源引用
2. 属性:
rel="stylesheet": 外部样式表
type="text/css": 引入文档的类型
margin-left:边距
3. 三种样式表的插入方法
外部样式表:
<link rel="stylesheet" type="text/css" href="mystyle.css">
注: 外部样式表需要创建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的大括号内可以设置多个属性.
内部样式表:
<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属性所赋值的文字
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中试试.
欢迎大家提问和评论, 我尽我所能的为大家解答, 一起学习, 共同成长~
南心芭比: 热爱分享, 收获快乐~
