HTML5学习笔记<三>: 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属性所赋值的文字

　　宽

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

欢迎大家提问和评论, 我尽我所能的为大家解答, 一起学习, 共同成长~

南心芭比: 热爱分享, 收获快乐~ 　　

相关阅读:
IDEA启动tomcat时提示：...init The APR based Apache Tomcat Native library failed to load. The error reported was ...tcnative-1.dll: Can't load IA 32-bit .dll on a AMD 64-bit platform
Mysql中（增加、删除字段，修改字段名、字段类型、注释，调整字段顺序等）常用操作
 MySql、Mariadb创建数据库、用户及授权
 三款大前端UI框架
 TubeMQ
Delphi 修改系统时间格式为：'yyyy-MM-dd HH:mm:ss', 'yyyy''年''M''月 ''d''日'''
QString与LPCWSTR 带中文的相互转换
 Windows 下搭建 Apache Http Server 文件系统（详细）
Django day32 跨域问题，创建vue项目，axios的使用
 Django day31 contentType组件，Django的缓存
原文地址：https://www.cnblogs.com/winsoncheung/p/6559053.html