搭建网页HTML结构
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>
块级标签：
<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>~<h6>、<p>、<form>、<hr>
行内标签：
<b>、<em>、<img>、<input>、<a>、<sup>、<sub>、<textarea>、<span>
行内元素不能包含块级元素，只能包含其他行内元素
块级元素不能放在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> <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> <!-- 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> <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>
