温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML5样式 链接 表格

发布时间:2020-02-27 06:39:22 来源:网络 阅读:368 作者:yeleven 栏目:移动开发

HTML样式

    1.标签:

        <style>    样式定义

        <link>    资源引用

    2.属性:

        rel = "stylesheet"   外部样式表

        type = "text/css"    引用文档的类型

        margin-left    边距

    外部样式表:       

        <link rel="stylesheet" type="text/css" href="mystyle.css">

    内部样式表:      

        <style>
            body{
                background-color:red;
            }
            p{
                margin-left:20px;
            }
        </style>

    内联样式表:

        <p >


HTML链接

    1.链接数据:

        文本链接

                <a href="www.baidu.com">百度</a>

        图片链接

                <a href="
                    <img src="1.jpg">
                 </a>

    2.属性:

        href属性:指向另一个文档的链接

        name属性:创建文档内的链接

                <a name="tips">hello</a>
                <a href="#tips">跳转到hello</a> //在百度百科里面使用的非常多

    3.img标签属性:

        alt:替换文本属性(在图片不能正常显示时替换为文本"1.jpg_logo")

                <img src="1.jpg" width="500px" height="500px" alt="1.jpg_logo">


HTML表格

    <table>    定义表格

    <caption>    定义表格标题

    <th>    定义表格表头

    <tr>    定义表格的行

    <td>    定义表格的单元

    <thead>   定义表格的页眉

    <tbody>   定义表格的主体

    <tfoot>   定义表格的页脚

    <col>     定义表格的列属性

    1.表格的表头        

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的表头</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>单元1</th>
            <th>单元2</th>
            <th>单元3</th>
        </tr>
        <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>
        <tr>
            <th>单元1</th>
            <th>单元2</th>
            <th>单元3</th>
        </tr>
        <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">
        <tr>
            <th>单元1</th>
            <th>单元2</th>
            <th>单元3</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

    4.带有标题的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有标题的表格------加p元素</title>
</head>
<body>
<p>带标题的表格</p>
<table border="1">
    <tr>
        <th>单元1</th>
        <th>单元2</th>
        <th>单元3</th>
    </tr>
    <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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有标题的表格------加caption</title>
</head>
<body>
<table border="1">
    <caption>带标题的表格</caption>
    <tr>
        <th>单元1</th>
        <th>单元2</th>
        <th>单元3</th>
    </tr>
    <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>

    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>苹果</li>
                <li>菠萝</li>
                <li>香蕉</li>
            </ul>
        </td>
        <td>
            好想吃啊
        </td>
    </tr>
</table>
</body>
</html>

    6.单元格边距(cellpadding)

<!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><br/>
</table>
<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.单元格间距(cellspacing)

<!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><br/>
</table>
<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" bgcolor="aqua">
    <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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的背景图像</title>
</head>
<body>
<table border="1" background="1.jpg" cellpadding="100">
    <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>


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI