HTML5基本属性

最新推荐文章于 2022-06-09 10:24:00 发布

Mr_White01

最新推荐文章于 2022-06-09 10:24:00 发布

阅读量567

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/Mr_White01/article/details/72859869

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.编写第一个网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>第一个网页</title>
        <style type="text/css">
            /*内部样式表*/
            div{
                height: 50px;
                background-color: red;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>

    <body>
        <!--行间样式表-->
        <div style="width: 300px;height: 50px;background-color: yellow;">cao</div>
        <span style="background-color: cornflowerblue;font-size: 24px;cao"></span>
        <span style="font-size: 24px;">cao</span>
    </body>
</html>

css文件

span{
    background-color: green;
}
.span1{background-color: yellow;}
.span2{background-color: deeppink;}

2.初识选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <link rel="stylesheet" type="text/css" href="2.初识选择器.css"/>
    </head>
    <body>
        <span class="span1">This is span1</span>
        <span class="span2">This is span2</span>
    </body>
</html>

css文件

<span {background-color: firebrick;}
.span1{font-size:50px;background-color: #008000;}
.span2{font-size:50px;background-color: #B22222;}

另外，标签选择器
1）id选择器：当前页面唯一，“#”
2）类(class）选择器：当前页面可以多个，“.”
3）标签选择器：当前页面上所有标签名为xxx的元素，比如div{},h1{},span{}等
4）群组选择器：用逗号分隔，被逗号分隔的元素（选择器）全部执行统一的代码片段，比如div,p,h1{}
5）包含选择器
3.初识块元素属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初识块元素属性</title>
        <link rel="stylesheet" type="text/css" href="css/3.初识块元素属性.css"/>
    </head>
    <body>
        <div class="div1">div</div>
        <div class="div1">div</div>
    </body>
</html>

css文件

.div1{
    height: 200px;
    width: 200px;
    background-color: greenyellow;

    /*display: inline;*/
    /*display: block;*/
}
.span1{
    background-color: #008000;
    /*display: block;*/
    width: 200px;
    height: 200px;
    display: inline-block;
    /*可以共用一行，还可以设置宽高*/
    }

4.初识行元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初识行元素</title>
        <link rel="stylesheet" type="text/css" href="css/3.初识块元素属性.css"/>
    </head>
    <body>
        <span class="span1">span</span>
            <span class="span1">span</span>
            <a href="3.初识块元素属性.html">点击跳一下</a>
            <a href="https://www.baidu.com">一刀999级</a>
            <h1>This is heading No.1</h1>
            <!--h1是整个网页的一个主题，一个页面只能有一个-->
            <h2>This is heading No.2</h2>
            <!--副标题，一个页面不超过十个大概，大型网站除外-->
            <h3>This is heading No.3</h3>
            <!--随便用-->
            <p>This is paragraph</p>
            <ul>
                <li>unorder list 1</li>
                <li>unorder list 2</li>
                <li>unorder list 3</li>
                <li>unorder list 4</li>
            </ul>
            <ol>
                <li>orde list 1</li>
                <li>orde list 1</li>
                <li>orde list 1</li>
                <li>orde list 1</li>
            </ol>
    </body>
</html>

5.border边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border边框</title>
        <style type="text/css">
            .div1{
                height: 200px;
                width: 200px;
                background: yellow;
                /*border-style: solid;*/
                /*实线*/
                /*border-style: dashed;*/
                /*虚线*/
                /*border-style: dotted;*/
                /*点线*/
                /*border-style: double;
                /*双线*/
            /*  border-width: 10px;*/
            /*    border-color: pink;*/
           border: 5px solid green;
           border-bottom: 5px dotted red;
           border-top: 5px solid black;
            }
        </style>
    </head>

    <body>
<div class="div1"></div>

</div>

</div>
    </body>
</html>

6.padding内边距

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>6.padding内边距</title>
        <style type="text/css">
            .div1{
                height: 100px;
                width: 100px;
                background: blue;
                padding: 10px 20px 30px 50px;
                /*padding赋值顺序上右下左*/
            }
        </style>
    </head>
    <body>
        <div class="div1">
            加一个内边距
        </div>
    </body>
</html>

7.margin外边距

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>margin外边距</title>
        <style type="text/css">
            .div1{
                height: 100px;
                width: 100px;
                background: red;
                margin: 20px 30px;
            }
        </style>
    </head>
    <body>
    <div class="div1"></div>

    </body>
</html>

具体每一部分的网页效果，请在火狐浏览器上截图查看！

Mr_White01

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5基本属性

1.编写第一个网页<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>第一个网页</title> <style type="text/css"> /*内部样式表*/ div{ height: 50p
复制链接

扫一扫