本文介绍了宋代著名女诗人李清照，并通过HTML代码展示了一种网页布局方式，包括使用不同类型的列表和定义列表来组织信息。
一、
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<title>古代诗人-李青照</title>
<h1>古代诗人</h1>
<hr/>
<h2>宋代</h2> <!--<hr/>表示下划线 <br/>表示换行-->
<h3>李清照</h3>
<img src="goods_1.jpg" alt="李清照图像的替代文字" title="《》停提示文字" width="100px" height="100px"/></br>
<a href="#">更多</a></br>
<a href="#">百度</a></br>
<a href="#">新浪</a><!--产生四个空格-->
如果时间>晚上6点，就坐车回家> <!--大于号（>）-->
如果时间<早上7点，就走路回家><!--小于号（<）-->
©2003-2013北大青鸟<!--版权符号 --></br>
<a href="http://www.baidu.com" target="_blank">百度超链接</a>
</br> <!--<br>为换行-->
<ul >
<li>Dreamweaver</li> <!--无序列表，前面的标志默认为实心圆-->
<li>Photoshop</li>
<li>Flsh</li>
</ul>
<ul type="circle" >
<li>Dreamweaver</li> <!--无序列表,加了参数，前边的标志变成空心圆 还有squre circle-->
<li>Photoshop</li>
<li>Flsh</li>
</ul>
<ol type="i"> <!--可以换成A,a,I,i默认为数字—-->
<li>Dreamweaver</li>
<li>Photoshop</li>
<li>Flsh</li>
</ol>
<!--定义列表 <dl>申明定义列表<dt>申明定义列表项<dd>申明定义列表项的定义-->
<!--dd标签内的文字有缩进-->
<dl>
<dt>Dreamweaver</dt>
<dd>网页制作软件</dd>
<dt>Photoshop</dt>
<dd>品面设计软件</dd>
</dl>
<!--据说能实现图文混编效果-->
<dl>
<dt><img src="goods_1.jpg"/></dt>
<dd>商品名称：蒸汽电熨斗</dd>
<dd>商品价格：388</dd>
<dd> 商品简介：金刚低血超硬顺滑，140ml透明大水箱设计</dd>
</dl>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
