HTML学习笔记——块级标签、行级标签、图片标签

时间：2022-04-21 09:07:41

1>块级标签、行级标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

    p{

        width: 200px;

        height: 100px;

        border: 3px solid red;

    }

    p span{

        color: red;

    }

</style>

</head>

<body>

    <p>今天是<span>星期一</span></p>

    <!-- 块级标签/能设置宽高度 -->

    <p>我是p标签</p>

    <p>我是p标签</p>

    <p>我是p标签</p>

    <!-- 行级标签/能和其他标签待在一行 -->

    <span>我是span标签</span>

    <span>我是span标签</span>

    <a href="">百度</a>

    <a href="">百度</a>

</body>

</html>

2>图片标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

    #dog{

        width:300;

        height: 400px;

    }

    #cat{

        width:300;

        height: 400px;

    }

    p{

        color: blue;

        font-size: 30px;

        font-family: 微软雅黑；

        width: 800px;

        height: 200px;

        border: 3px solid blue;

        text-align:center;

        line-height: 200px;

    }

</style>

</head>

<body>

    <img src="dog.jpg" id="dog" />

    <img src="cat.jpg" id="cat" />

    <p>今天是星期一</p>

</body>

</html>

相关文章