. 将课堂介绍过的<a>,<img><ul>,<table>,<iframe>的案例,全部上机练习,并自己扩展一些案例,发布到作业博客中;

标签<a>

跳转到站外

  1. <a href="https://www.taobao.com/">京东</a>
  2. <a href="跳转地址"><img src="图片名称"  /></a>
  3. <a href="跳转地址">文字跳转</a>

标签<img>

  1. <img src="图片地址">
  2. <img src="图片名称" alt="" />

标签<ul>

  1.   <!--1,有序列表-->
  2.     <h3>东京奥运奖牌榜</h3>
  3.     <ol>
  4.       <li>美国:113</li>
  5.       <li>中国:88</li>
  6.       <li>日本:58</li>
  7.     </ol>
  8.      <!--2,有序列表-->
  9.     <h3>购物车</h3>
  10.     <ul>
  11.       <li>笔记本电脑一台</li>
  12.       <li>蓝牙耳机一副</li>
  13.       <li>卫生纸10卷</li>
  14.     </ul>
  15.     <ul class="menu" style="display: flex; place-content: space-around">
  16.       <li class="item"><a href="">首页</a></li>
  17.       <li class="item"><a href="">教学视频</a></li>
  18.       <li class="item"><a href="">社区问答</a></li>
  19.       <li class="item"><a href="">资源下载</a></li>
  20.       <li class="item"><a href="">关于我们</a></li>
  21.     </ul>

标签<table>

  1. <table width="1000" border="1">
  2.       <!--标题-->
  3.       <caption>
  4.         表格标题
  5.       </caption>
  7.       <!--表头-->
  8.       <thead>
  9.         <tr bgcolor="lightgreen">
  10.           <td>X</td>
  11.           <td>X</td>
  12.           <td>X</td>
  13.           <td>X</td>
  14.           <td>X</td>
  15.           <td>X</td>
  16.         </tr>
  17.       </thead>
  18.       <!--表格中的所有数据必须放在单元格td的元素中，必须写到tr中-->
  19.       <!--表格主体-->
  20.       <tbody>
  21.         <tr>
  22.           <td>X</td>
  23.           <td>X</td>
  24.           <td>X</td>
  25.           <td>X</td>
  26.           <td>X</td>
  27.           <td>X</td>
  28.         </tr>
  29.         <tr>
  30.           <td>X</td>
  31.           <td>X</td>
  32.           <td>X</td>
  33.           <td>X</td>
  34.           <td>X</td>
  35.           <td>X</td>
  36.         </tr>
  37.         <tr>
  38.           <td>X</td>
  39.           <td>X</td>
  40.           <!--从表体2行3列开始水平方向合并3列-->
  41.           <td bgcolor="red" colspan="3">X</td>
  42.           <!---<td>X</td>
  43.           <td>X</td>--->
  44.           <td>X</td>
  45.         </tr>
  46.         <tr>
  47.           <td>X</td>
  48.           <td bgcolor="violet" rowspan="2">X</td>
  49.           <td>X</td>
  50.           <td>X</td>
  51.           <td>X</td>
  52.           <td>X</td>
  53.         </tr>
  54.       </tbody>
  55.       <!--注意2点；合并操作一定是发生在 单元格上td元素-->
  57.       <!--合并属性colspan，rowspan，一定要写到被合并的起始单元格上-->
  58.       <tfoot>
  59.         <tr>
  60.           <td>X</td>
  61.           <td>X</td>
  62.           <td>X</td>
  63.           <td>X</td>
  64.           <td>X</td>
  65.           <td>X</td>
  66.         </tr>
  67.       </tfoot>
  68.     </table>
  69.     <table border="1" width="1000">
  70.       <hr />
  71.       <caption>
  72.         合肥市南门小学五年级课程表
  73.       </caption>
  74.       <thead bgcolor="lightgreen">
  75.         <tr>
  76.           <td>时间</td>
  77.           <td>周一</td>
  78.           <td>周二</td>
  79.           <td>周三</td>
  80.           <td>周四</td>
  81.           <td>周五</td>
  82.         </tr>
  83.       </thead>
  84.       <!--上午-->
  85.       <tbody>
  86.         <tr>
  87.           <td rowspan="4">上午</td>
  88.           <td>数学</td>
  89.           <td>数学</td>
  90.           <td>数学</td>
  91.           <td>数学</td>
  92.           <td>数学</td>
  93.         </tr>
  94.         <tr>
  95.           <td>数学</td>
  96.           <td>数学</td>
  97.           <td>数学</td>
  98.           <td>数学</td>
  99.           <td>数学</td>
  100.         </tr>
  101.         <tr>
  102.           <td>数学</td>
  103.           <td>数学</td>
  104.           <td>数学</td>
  105.           <td>数学</td>
  106.           <td>数学</td>
  107.         </tr>
  108.         <tr>
  109.           <td>数学</td>
  110.           <td>数学</td>
  111.           <td>数学</td>
  112.           <td>数学</td>
  113.           <td>数学</td>
  114.         </tr>
  115.       </tbody>
  116.       <!--中午-->
  117.       <tbody>
  118.         <tr>
  119.           <td colspan="6">中午休息</td>
  120.         </tr>
  121.       </tbody>
  122.       <!--下午-->
  123.       <tbody></tbody>
  125.       <tbody>
  126.         <tr>
  127.           <td rowspan="3">下午</td>
  128.           <td>数学</td>
  129.           <td>数学</td>
  130.           <td>数学</td>
  131.           <td>数学</td>
  132.           <td>数学</td>
  133.         </tr>
  134.         <tr>
  135.           <td>数学</td>
  136.           <td>数学</td>
  137.           <td>数学</td>
  138.           <td>数学</td>
  139.           <td>数学</td>
  140.         </tr>
  141.         <tr>
  142.           <td>数学</td>
  143.           <td>数学</td>
  144.           <td>数学</td>
  145.           <td>数学</td>
  146.           <td>数学</td>
  147.         </tr>
  148.       </tbody>
  149.       <tfoot>
  150.         <tr>
  151.           <td>备注:</td>
  152.           <td colspan="5">每天下午15:30-17:30在校写作业</td>
  153.         </tr>
  154.       </tfoot>
  155.     </table>

标签<iframe>

  1. <body>
  2.     <h2><a href="https://www.taobao.com/" target="taobao">淘宝</a></h2>
  3.     <iframe
  4.       srcdoc="<em>点击上面的链接打开</ em>"
  5.       frameborder="1"
  6.       width="400"
  7.       height="400"
  8.       name="taobao"
  9.     ></iframe>
  10.     <hr />
  11.   </body>
  1.     <!--右侧内容区-->
  2.     <iframe
  3.       srcdoc="<P>请点击左边菜单栏打开</P>"
  4.       frameborder="0"
  5.       name="content"
  6.     ></iframe>

2. 预习css知识

什么是CSS？

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

更多相关文章

  1. HTML常用标签的用法示例
  2. HTML5 初识
  3. 网页的标题标签（Title Tag）要怎么写才是最优化？
  4. 做SEO时，需要了解哪些HTML标签 ？
  5. HTML常用标签汇总
  6. html表单、元素的来源及csss外部样式和上下文选择器
  7. Html基本语法
  8. html练习之表单标签使用
  9. Visual Studio Code打印html标签快捷写法

随机推荐

  1. Android NDK相关的库方法
  2. Android shape使用和属性含义
  3. EditText的错误信息
  4. 【Android学习笔记】Android概述与开发环
  5. Android KitKat 4.4平台开发-添加USB ADB
  6. 如何使用Android SDK开发Android应用?
  7. Android NDK开发技巧二
  8. Android中文合集 最终版
  9. Android开发的前景分析――之你为何看好A
  10. Android开发实例源代码批量下载