搭建网页HTML结构

2020-01-30 20:02:21 阅读：210 来源： 互联网

div 块级标签

span 行内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</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>

块级标签：

行内标签：

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

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

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

h1~h6 、 p、dt

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

案例实践

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</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>&nbsp;&nbsp;
                <span>布偶猫</span>&nbsp;&nbsp;
                <span>苏格兰折耳猫</span>&nbsp;&nbsp;
                <span>英国短毛猫</span>&nbsp;&nbsp;
                <span>波斯猫</span>&nbsp;&nbsp;
                <span>俄罗斯蓝猫</span>&nbsp;&nbsp;
                <span>美国短毛猫</span>&nbsp;&nbsp;
                <span>异国短毛猫</span>
            </td>
            <td width="20%" align="center">
                快速通道&nbsp;<select name="" id=""><option value="">喵~</option></select>
            </td>
        </tr>
        <!-- banner -->
        <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>&nbsp;&nbsp;
                <span>布偶猫</span>&nbsp;&nbsp;
                <span>苏格兰折耳猫</span>&nbsp;&nbsp;
                <span>英国短毛猫</span>&nbsp;&nbsp;
                <span>波斯猫</span>&nbsp;&nbsp;
                <span>俄罗斯蓝猫</span>&nbsp;&nbsp;
                <span>美国短毛猫</span>&nbsp;&nbsp;
                <span>异国短毛猫</span>
            </td>
        </tr>
        <!-- 页脚 -->
        <td colspan="3" bgcolor="#89a9bd" align="center" height="80px">
            copyright &copy; 2020 cyy all right deserved
        </td>
    </table>
</body>
</html>

标签：块级,行内,网页,猫咪,元素,HTML,nbsp,毛猫,搭建
来源： https://www.cnblogs.com/chenyingying0/p/12243600.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

搭建网页HTML结构