HTML5样式、链接和表格

gearss 2016-05-19

展开全文

HTML5样式、链接和表格

[摘要：本章内容 1. HTML款式 2. HTML链接 3. HTML表格 HTML款式 1. 标签： <style>:款式界说 <link>:资本援用 2. 属性： rel="stylesheet":中]

本章内容

1. HTML样式
2. HTML链接
3. HTML表格

HTML样式

1. 标签：
    <style>:样式定义
    <link>:资源引用 
2. 属性：
    rel="stylesheet":外部样式表
    type="text/css":引入文档的类型
    margin-left:边距
3. 三种样式表插入方法：
    外部样式表：
        <link rel="stylesheet" type="text/css" href="mystyle.css">
    内部样式表：
        <style type="text/css">
        body{background-color: red}
        p{margin-left: 20px}
        </style
    内联样式表：
        <p style= "color: red">

代码效果

外部样式表

工程目录结构：

这里写图片描述

index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <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: aquamarine;
}

运行效果：

这里写图片描述

内部样式表

index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">

    <style type="text/css">
        p{
            color: olivedrab;
        }
    </style>
</head>
<body>
    <h1>标题h1</h1>

    <p>hello world</p>
</body>
</html>

效果：

这里写图片描述

内联样式表

index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">

    <style type="text/css">
        p{
            color: olivedrab;
        }
    </style>
</head>
<body>
    <h1>标题h1</h1>

    <p>hello world</p>

    <a style="color:deeppink" href="http://www.baidu.com">百度链接</a>
</body>
</html>

效果：

这里写图片描述

HTML链接

1. 链接数据
    文本链接
    图片链接
2. 属性：
    herf属性：指向另一个文档的链接
    name属性：创建文档内的链接
3. img标签属性：
    alt:替换文本属性
    width:宽
    height:高

代码效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>链接</title>
</head>
<body>
    <a href="http://www.baidu.com">百度一下哈哈哈</a><br/><br/>
    <a href="http://www.baidu.com"><img src="a.png" width="100px" height="100px" alt="helloimg"></a><br/><br/>
    <a href="http://www.baidu.com"><img src="b.png" width="100px" height="100px" alt="helloimg"></a>
    <br/><br/>
    <a name="a1">a1</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/>
    <a href="#a1">a2</a>
</body>
</html>

效果：

这里写图片描述

a2在画面外面，最底部，点击直接跳到a1

表格

<table>              定义表格
<caption>            定义表格标题
<th>                 定义表格的表头
<tr>                 定义表格的行
<td>                 定义表格的单元
<thead>              定义表格的页眉
<tbody>              定义表格的主体
<tfoot>              定义表格的页脚
<col>                定义表格的列属性

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>biaoge</title>
</head>
<body>
    <h3>没有边框的表格</h3>
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>

        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
    </table>

    <h3>表头&空的单元格&表格标题</h3>
    <table border="1">
        <caption>表格的标题</caption>
        <tr>
            <th>单元</th>
            <th>单元</th>
            <th>单元</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td></td>
            <td>单元格3</td>
        </tr>

        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
    </table>
    <h3>表格内的标签</h3>
    <table border="1">
        <tr>
        <td>单元1</td>
        <td>单元2</td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </td>
            <td>单元4</td>
        </tr>
    </table>

    <h3>单元格的边距&间距&背景色&背景图片</h3>
    cellpadding 是边距<br/>
    cellspacing 是间距
    <table border="1" cellpadding="10" cellspacing="10" bgcolor="#a52a2a" background="a.png">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>

        <tr>
            <td>单元格4</td>
            <td>单元格5</td>
            <td>单元格6</td>
        </tr>
    </table>

    <h3>跨行</h3>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th colspan="2">电话</th>
        </tr>

        <tr>
        <td>甲</td>
        <td>123456</td>
        <td>234567</td>
        </tr>
    </table>
    <h3>跨列</h3>
    <table border="1">
        <tr>
            <th>姓名</th>
            <td>乙</td>
        </tr>

        <tr>
            <th rowspan="2">电话</th>
            <td>123456</td>
        </tr>

        <tr>
            <td>123456</td>
        </tr>
    </table>
</body>
</html>

效果：

这里写图片描述

OK！又是愉快的一天结束了！

文章点评：

精选专题

Laravel入门教程

Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。

hadoop学习及应用

Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。 Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。 Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。