HTML第二章

最新推荐文章于 2020-12-01 05:43:31 发布

dasanke1762

最新推荐文章于 2020-12-01 05:43:31 发布

阅读量220

点赞数

原文链接：http://www.cnblogs.com/1402380606HZ/p/7444744.html

版权

一.列表:信息资源展现的一种形式，使信息结构化和条理化，并且以列表的形式展现出来
1.1无序列表
  语法：
   <ul>
    <li>女装/男装/内衣</li>
    <li>鞋靴/箱包/配件</li>
    <li>童装玩具/孕产/用品</li>
   </ul>
  特点：1.没有顺序，每个li元素独占一行（块级元素）
     2.默认每个li元素前有一个实心的小圆点
     3.一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
  注意：
   1.遵循W3C标准，ul标签下只能有li标签，但是li标签下可以包含任何标签
1.2有序列表
  语法：
   <ol>
    <li>李强</li>
    <li>李强2</li>
   </ol>
  特点：1.有顺序，每个li元素独占一行
     2.默认每个li元素前有顺序标识1,2,3
     3.一般用于排序类型的列表，例如：问卷调查，
1.3定义列表
  语法：
   <dl>
    <dt>标题1</dt>
    <dd>标题1的内容1</dd>
    <dd>标题1的内容2</dd>
    <dt>标题2</dt>
    <dd>标题2的内容1</dd>
    <dd>标题2的内容2</dd>
   </dl>
  特点：1.没有顺序，每个dt和dd标签独占一行
     2.默认没有标记
     3.一般用于一个标题下有一个或者多个列表选

上机训练01:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>无序列表的使用</title>
</head>
<body>
     <h1>热搜&nbsp&nbsp更多</h1>
     <ul>
         <li><img src="image01/img1.png" width="160"height="100"title="没有"><br><p>推荐活动|原创音乐现金榜T榜</p></li>
         <li><img src="image01/img2.png" width="160"height="100"title="没有"><br><p>推荐节目|《TAImusic》爆笑来袭</p></li>
         <li><img src="image01/img3.png" width="160"height="100"title="没有"><br><p>推荐歌单|继续宠爱张国荣</p></li>
         <li><img src="image01/img4.png" width="160"height="100"title="没有"><br><p>推荐活动|330金属音乐巡演 成都小酒馆音乐空间</p></li>
         </ul>
</body>
</html>

上机训练02:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>音乐排行榜</title>
</head>
<body>
      <h1>音乐排行榜</h1>
       <ol>
           <li><a href="">潇洒走一回</a>&nbsp&nbsp<img src="image02/pic1.png"></li>
           <li><a href="">偏偏喜欢你</a>&nbsp&nbsp<img src="image02/pic1.png"></li>
           <li><a href="">酒干倘卖无</a>&nbsp&nbsp<img src="image02/pic1.png"></li>
           <li><a href="">不说再见</a>&nbsp&nbsp&nbsp&nbsp&nbsp<img src="image02/pic1.png"></li>
           <li><a href="">舍不得你</a>&nbsp&nbsp&nbsp&nbsp&nbsp<img src="image02/pic1.png"></li>
           <li><a href="">请跟我来</a>&nbsp&nbsp&nbsp&nbsp&nbsp<img src="image02/pic1.png"></li>
</body>
</html>

上机训练03:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>流量调查表</title>
</head>
<body>
    <h2>流量调查表<h2>
        <table border="3">
            <tr>
                <th>总页面流量</th>
                <th>共计来访</th>
                <th>会员</th>
                <th>游客</th>
            </tr>
            <tr>
                <td>9756488</td>
                <td>97656</td>
                <td>7538087</td>
                <td>43364677</td>
            </tr>
            <tr>
                <td>46776686</td>
                <td>85544</td>
                <td>69357</td>
                <td>568787</td>
            </tr>
            <tr>
                <td>7538087</td>
                <td>546774</td>
                <td>476897</td>
                <td>334545</td>
            </tr>
            <tr>
                <td>平均每人浏览</td>
                <td colspan="3">1.58</td>
            </tr>
</body>
</html>

上机训练04:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>北大青鸟宣传片</title>
</head>
<body>
     <video controls="controls">
        <source src="video/vedio.avi">
         <source src="video/vedio.mp4">
         <source src="video/video.webm">
     </video>
</body>
</html>

上机训练05:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>iframe的使用</title>
</head>
<body>
       <h3>使用iframe嵌套网页</h3>
       <p>
           <a href="https://www.baidu.com/index.php?tn=site888_2_pg" target="mainFrame">点击打开百度</a><br/>
           <a href="http://360.xueshihou.org/" target="mainFrame">点击打开北大青鸟</a><br/>
           <a href="sheng_01.html" target="mainFrame">点击打开了一个HTML页面</a><br/>
       </p>
           <iframe name="mainFrame" width="800px" height="400px"/>
</body>

简答4
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>品牌全知道</title>
</head>
<body>
      <img src="image06/iknowshouye.jpg">
      <h3>品牌全知道</h3>
      <ul>
          <li><img src="image06/icon-1.jpg">理肤泉敏感全知道</li>
          <li><img src="image06/icon-2.jpg">薇姿健康肌肤全知道</li>
          <li><img src="image06/icon-3.jpg">中信银行全知道</li>
          <li><img src="image06/icon-4.gif">Windows7全知道</li>
          <li><img src="image06/icon-5.jpg">海信电视全知道</li>
          <li><img src="image06/icon-6.jpg">多美滋全知道</li>
          <li><img src="image06/icon-7.jpg">三星手机全知道</li>
      </ul>
</body>
</html>

简答5:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>贵美商城-商品购买页</title>
</head>
<body>
       <table border="3" >
           <tr >
                <td width="1400px" height="200"></td>
           </tr>
           <tr>
               <td width="1400px" height="600"> </td>
           </tr>
           <tr>
               <td width="1400px" height="200"> </td>
           </tr>
           </table>
</body>
</html>

转载于:https://www.cnblogs.com/1402380606HZ/p/7444744.html

dasanke1762

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML第二章

一.列表:信息资源展现的一种形式，使信息结构化和条理化，并且以列表的形式展现出来1.1无序列表语法：<ul><li>女装/男装/内衣</li><li>鞋靴/箱包/配件</li><li>童装玩具/孕产/用品</li></ul>特点：1.没有顺序，每个...
复制链接

扫一扫