微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

菜鸟零基础学习HTML5   ----- 1.3、HTML5样式、链接和表格

一、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">hello HTML5</p>
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>样式</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <style type="text/css">
        body{
            color: aqua;
        }
    </style>

</head>
<body>
    <h1>标题h1</h1>

    <p>百度一下</p>
    <a href="http://www.baidu.com" style="color: red">点击我跳转百度</a>
</body>
</html>

其中mystyle.css的代码如下:

h1{
    color: red;
}

二、HTML链接

   1、连接数据:

    文本链接

    图片链接

   2、属性

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

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

   3、img标签属性

    alt:替换文本属性

    width:宽

    height:高

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title></title>
</head>
<br>
    <a href="http://www.baidu.com">点击我跳转百度</a></br>
    <br href="http://www.baidu.com">
        <img src="img1.jpg" width="100px"height="100px"alt="小女孩"></br>
    </a>
    <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></br></br></br>
    
    <a href="#tips">点击我跳转到hello</a>
</body>
</html>

三、HTML表格

    

wKiom1YCg5Ohd2PMAAE4NCNzNS0089.jpg

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1" background = "img1.jpg">
        <caption>表格1</caption>
        <tr>
            <td>单元1</td>
            <td>单元2</td>
            <td>单元3</td>

        </tr>
        <tr>
            <td>单元1</td>
            <td>单元2</td>
            <td>单元3</td>
        </tr>
    </table>
    <br/>
    <table cellpadding="10" bgcolor="aqua" cellspacing="10" border="1">
        <caption>表格2</caption>
        <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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。