div和span标签以及标签分类

div标签

什么是div标签

作用:一般用于配合css完成网页基本布局。

span标签

什么是span标签

作用:一般用于配合css修改网页中的一一些局部信息


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div和span标签title>
    <style>
        .conter {
            width: 1000px;
            height: 500px;
            background: #f7fb8f;
            margin: auto;
            margin-bottom: 10px;
        }

        .footer {
            width: 1000px;
            height: 200px;
            background: #1ef942;
            margin: auto;
            margin-bottom: 10px
        }

        .header {
            width: 1000px;
            height: 80px;
            background: #c0d8c7;
            margin: auto;
            margin-bottom: 10px

        }

        .logo {
            width: 200px;
            height: 50px;
            background: pink;
            float: left;
            margin: 20px;
        }
        .mav {
            width: 600px;
            height: 50px;
            background: pink;
            float: right;
            margin: 20px;
        }
        .img3 {
            width: 600px;
            height: 50px;
            float: right;
        }
        .imgu {
            width: 200px;
            height: 50px;
            float: left;
        }

        .article {
            width: 650px;
            height: 400px;
            background: #f3ebf0;
            float: right;
            margin: 20px;
        }

        .aside {
            width: 250px;
            height: 400px;
            background: purple;
            float: left;
            margin: 20px;
        }
        .p1 { /*article中的标题*/
            text-align: center;
            text-decoration: underline;
            font-family: '宋体',serif;
            font-size: 30px;
            letter-spacing: 1px;
        }
        .p1 span {
            color: #6667ff;
            font-style: italic;
            font-size: 30px;
        }
        .p2 {
            text-align: center;
            text-decoration: none;
            font-family: '宋体','华文楷体',sans-serif;
            font-size: 20px;
            letter-spacing: 1px;
        }
        .p2 span {
            color: #0f1810;
            font-style: italic;
            font-size: 20px;

        }
        .p3 {
            text-align: center;
            font-size: 28px;
            font-family: "华文行楷",sans-serif;
        }


    style>

head>
<body>
<div class="header">
    <div class="logo">
        <img src="images/up.jpg" alt="不见了" class="imgu">
    div>
    <div class="mav">
        <img src="images/1.jpg" alt="找不到了" class="img3">
    div>
div>

<div class="conter">
    <div class="aside">div>
    <div class="article">
        <p class="p1">木兰花-<span>拟古绝词span>p>
        <p class="p2"> <span>纳兰性德span>p>
        <p class="p3">人生若只如初见,何事秋风悲画扇p>
        <p class="p3">等却变得故人心,却道故人心易变p>
        <p class="p3">骊山语罢清宵半,泪雨霖铃终不怨p>
        <p class="p3">何如薄幸锦衣郎,比翼连枝当日愿p>
    div>
div>
<div class="footer">div>

body>
html>

div和span标签以及标签分类_第1张图片

它们之间的区别

1。div标签会独占一行,span标签不会。

2.div是一个容器级别的标签,span是一个文本级别的标签

容器级别标签和文本级别标签的区别

容器级别标签可以嵌套所有标签。

文本级别标签只可以嵌套文字/超链接/图片

容器级别标签

div h ul ol dl li dt dd …

文本级标签

span p buis strong em ins del….

一般情况下嵌套在div中, 或按照组标签来嵌套。

CSS中的标签分类

块级元素

会独占一行,所有的 容器级元素块级元素,p也是块级元素。

行内元素

不会独占一行,文本级元素除了p,都是行内元素。

块级元素和行内元素区别

块级元素:1.独占一行

​ 2.如果没有设置宽度,那么默认和父元素一样宽。如果设置了就和设置高度和宽度一样。

行内元素:1.不会独占一行

​ 2.如果没有设置宽度,会默认和内容一样宽,且其设置了也不会发生改变。不可设置高度和宽度。

行内块级元素

为了让元素能过不独占一行,又可以设置宽度和高度。img input 。。。

显示模式的转换




    
    显示模式转换

    



我是div
我是div
我是span 我是span

"cc">我是段落

"cc"
>我是加粗

通过display属性可以转换:

block块级

inline行内

inline-block 行内块级

div和span标签以及标签分类_第2张图片

将div转换为行内,span转化为块级,p转换为行内块级

你可能感兴趣的:(HTML5,css,html)