搭建网页HTML结构

2021-04-22 10:29

阅读:742

标签:ima   mic   color   dex   value   copy   ali   html   orm   

div 块级标签

span 行内标签

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Documenttitle>
head>
body>
    div>
        img src="cat.jpg" alt="cat" width="50px">
        cat
    div>
    div>
        img src="cat.jpg" alt="cat" width="50px">
        cat
    div>
hr/>
    span>
        img src="cat.jpg" alt="cat" width="50px">
        cat
    span>
    span>
        img src="cat.jpg" alt="cat" width="50px">
        cat
    span>
body>
html>

技术图片

 

 

 块级标签:

  1. ~


    行内标签:

    、、


    行内元素不能包含块级元素,只能包含其他行内元素

    块级元素不能放在p标签内

    部分块级元素只能包含行内元素,不能再包含其他块级元素,如:

    h1~h6 、 p、dt

    块级元素与块级元素并列,行内元素与行内元素并列


    案例实践

    DOCTYPE html>
    html lang="en">
    head>
        meta charset="UTF-8">
        title>indextitle>
    head>
    body>
        table width="100%" rules="none">
            
            tr bgcolor="#e1f2f9">
                td width="20%">img src="images/logo.png" alt="logo">td>
                td width="60%" align="center">
                    span>暹罗猫span>  
                    span>布偶猫span>  
                    span>苏格兰折耳猫span>  
                    span>英国短毛猫span>  
                    span>波斯猫span>  
                    span>俄罗斯蓝猫span>  
                    span>美国短毛猫span>  
                    span>异国短毛猫span>
                td>
                td width="20%" align="center">
                    快速通道 select name="" id="">option value="">喵~option>select>
                td>
            tr>
            
            tr>
                td colspan="3">img src="images/banner.jpg" alt="banner" width="100%">td>
            tr>
            
            tr>
                td colspan="3" align="center">
                    table width="60%">
                        tr width="100%">
                            td width="40%">
                                p>暹罗猫 布偶猫 >>p>
                                p>> 在古代,你家猫咪可能叫这个名字p>
                                p>> 同一个洞口猫咪钻进去后还钻得回来吗?p>
                                p>> 真香!网友带猫咪回家过年遭外公拒绝p>
                                p>> 猫咪洗澡也会致死?这不是个例p>
                                p>> 再可爱的猫咪,也会被你们“玩坏”! p>
                                p>> 猫咪闯进新闻播报现场,蹭记者腿求摸p>
                                p>> 我只是一只小猫咪,这样的日子实在是太难了p>
                                p>> 挨骂还这么跩!猫咪歪头到底为了啥?p>
                            td>
                            td width="40%">
                                p>波斯猫 俄罗斯蓝猫 >>p>
                                p>> 猫咪若不会站立,那还是喵星人么?p>
                                p>> 喵:解放“双手”的感觉真好!p>
                                p>> 为了孕妇要抛弃猫咪吗?p>
                                p>> 我家猫咪,今天又来叫我起床了!p>
                                p>> “自从养了猫,每天早晨都要被猫咪舔醒”p>
                                p>> 如果猫咪也会发朋友圈,会是什么样的呢?p>
                                p>> 猫:根本停不下来p>
                                p>> 有这些表现的猫咪,说明它把你当妈妈了p>
                            td>
                            td width="20%">img src="images/weixin.png" alt="weixin">td>
                        tr>
                        tr>
                            td colspan="3">近期专题td>
                        tr>
                        tr>
                            td colspan="3">
                                table width="100%">
                                    tr>
                                        td align="center">
                                            img src="images/1.png" alt="1">
                                            p>喵喵喵p>
                                        td>
                                        td align="center">
                                            img src="images/2.png" alt="2">
                                            p>喵喵喵p>
                                        td>
                                        td align="center">
                                            img src="images/3.png" alt="3">
                                            p>喵喵喵p>
                                        td>
                                    tr>
                                table>
                            td>
                        tr>
                    table>
                td>
            tr>
            
            tr>
                td colspan="3" bgcolor="#e1f2f9" align="center" height="50px">
                    span>暹罗猫span>  
                    span>布偶猫span>  
                    span>苏格兰折耳猫span>  
                    span>英国短毛猫span>  
                    span>波斯猫span>  
                    span>俄罗斯蓝猫span>  
                    span>美国短毛猫span>  
                    span>异国短毛猫span>
                td>
            tr>
            
            td colspan="3" bgcolor="#89a9bd" align="center" height="80px">
                copyright © 2020 cyy all right deserved
            td>
        table>
    body>
    html>

    技术图片

     

    搭建网页HTML结构

    标签:ima   mic   color   dex   value   copy   ali   html   orm   

    原文地址:https://www.cnblogs.com/chenyingying0/p/12243600.html


评论


亲,登录后才可以留言!