搭建網頁HTML結構

時間 2020-02-01

標籤搭建網頁 html 結構欄目 HTML 简体版

原文原文鏈接

div 塊級標籤html

span 行內標籤spa

<!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>

塊級標籤：code

<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>~<h6>、<p>、<form>、<hr>orm

行內標籤：htm

<b>、<em>、<img>、<input>、<a>、<sup>、<sub>、<textarea>、<span>blog

行內元素不能包含塊級元素，只能包含其餘行內元素input

塊級元素不能放在p標籤內it

部分塊級元素只能包含行內元素，不能再包含其餘塊級元素，如：io

h1~h6 、 p、dttable

塊級元素與塊級元素並列，行內元素與行內元素並列

案例實踐

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。