一、Emmet插件使用

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Emmet插件使用</title>
  8.   </head>
  9.   <body>
  10.     <!-- 1、id用#,class用. -->
  11.     <!-- #box 再按tab键  会自动生成下行代码-->
  12.     <div id="box">#box生成id为box的div</div>
  13.     <!-- .container  会自动生成下行代码-->
  14.     <div class="container">.container 生成class为container的div</div>
  15.     <!-- 2.默认标签和内容 -->
  16.     <div class="box">div.box中div可以不写，直接写.box即可</div>
  17.     <!-- 内容可以直接写入{} 例如：.box{内容}-->
  18.     <div class="box">内容</div>
  19.     <!-- 层级标签 >和+ -->
  20.     <!-- 父子结构用>号 ul>li{content}-->
  21.     <ul>
  22.       <li>content</li>
  23.     </ul>
  24.     <!-- 三层结构 ul>li>a{php.cn}-->
  25.     <ul>
  26.       <li><a href="">php.cn</a></li>
  27.     </ul>
  28.     <!-- 兄弟标签用+ 例如：.title{站名：}+.url{php中文网}-->
  29.     <div class="title">站点名称:</div>
  30.     <div class="url">php中文网</div>
  31.     <!-- 4.重复生成* ul.menu>li*8>a{item}-->
  32.     <ul class="menu">
  33.       <li><a href="">item</a></li>
  34.       <li><a href="">item</a></li>
  35.       <li><a href="">item</a></li>
  36.       <li><a href="">item</a></li>
  37.     </ul>
  38.     <!-- 5.序号：用$顺序编号，例如：ul.menu>li*3>a{item$} -->
  39.     <ul class="menu">
  40.       <li><a href="">item1</a></li>
  41.       <li><a href="">item2</a></li>
  42.       <li><a href="">item3</a></li>
  43.     </ul>
  44.     <!-- 用$@8顺序从8开始编号，例如：ul.menu>li*5>a{item$@8} -->
  45.     <ul class="menu">
  46.       <li><a href="">item8</a></li>
  47.       <li><a href="">item9</a></li>
  48.       <li><a href="">item10</a></li>
  49.       <li><a href="">item11</a></li>
  50.       <li><a href="">item12</a></li>
  51.     </ul>
  52.     <!-- 用$@-8反序编号到8，例如：ul.menu>li*5>a{item$@-8} -->
  53.     <ul class="menu">
  54.       <li><a href="">item12</a></li>
  55.       <li><a href="">item11</a></li>
  56.       <li><a href="">item10</a></li>
  57.       <li><a href="">item9</a></li>
  58.       <li><a href="">item8</a></li>
  59.     </ul>
  60.     <!-- 6.分组 .cart>h3.title{购物车}+ul.item>li*5>a{tiem$} -->
  61.     <div class="cart">
  62.       <h3 class="title">购物车</h3>
  63.       <ul class="item">
  64.         <li><a href="">tiem1</a></li>
  65.         <li><a href="">tiem2</a></li>
  66.         <li><a href="">tiem3</a></li>
  67.         <li><a href="">tiem4</a></li>
  68.         <li><a href="">tiem5</a></li>
  69.       </ul>
  70.     </div>
  71.     <!-- 快速生成10行5列,例如：table>caption{表格标题}+(thead>tr>th{title}*10)+(tbody>tr*5>td{item}*10) -->
  72.     <table border="1">
  73.       <caption>
  74.         表格标题
  75.       </caption>
  76.       <thead>
  77.         <tr>
  78.           <th>title</th>
  79.           <th>title</th>
  80.           <th>title</th>
  81.           <th>title</th>
  82.           <th>title</th>
  83.           <th>title</th>
  84.           <th>title</th>
  85.           <th>title</th>
  86.           <th>title</th>
  87.           <th>title</th>
  88.         </tr>
  89.       </thead>
  90.       <tbody>
  91.         <tr>
  92.           <td>item</td>
  93.           <td>item</td>
  94.           <td>item</td>
  95.           <td>item</td>
  96.           <td>item</td>
  97.           <td>item</td>
  98.           <td>item</td>
  99.           <td>item</td>
  100.           <td>item</td>
  101.           <td>item</td>
  102.         </tr>
  103.         <tr>
  104.           <td>item</td>
  105.           <td>item</td>
  106.           <td>item</td>
  107.           <td>item</td>
  108.           <td>item</td>
  109.           <td>item</td>
  110.           <td>item</td>
  111.           <td>item</td>
  112.           <td>item</td>
  113.           <td>item</td>
  114.         </tr>
  115.         <tr>
  116.           <td>item</td>
  117.           <td>item</td>
  118.           <td>item</td>
  119.           <td>item</td>
  120.           <td>item</td>
  121.           <td>item</td>
  122.           <td>item</td>
  123.           <td>item</td>
  124.           <td>item</td>
  125.           <td>item</td>
  126.         </tr>
  127.         <tr>
  128.           <td>item</td>
  129.           <td>item</td>
  130.           <td>item</td>
  131.           <td>item</td>
  132.           <td>item</td>
  133.           <td>item</td>
  134.           <td>item</td>
  135.           <td>item</td>
  136.           <td>item</td>
  137.           <td>item</td>
  138.         </tr>
  139.         <tr>
  140.           <td>item</td>
  141.           <td>item</td>
  142.           <td>item</td>
  143.           <td>item</td>
  144.           <td>item</td>
  145.           <td>item</td>
  146.           <td>item</td>
  147.           <td>item</td>
  148.           <td>item</td>
  149.           <td>item</td>
  150.         </tr>
  151.       </tbody>
  152.     </table>
  153.   </body>
  154. </html>

二、元素的属性和布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>元素的属性</title>
  8.   </head>
  9.   <body>
  10.     <!-- 1.通用属性3个 -->
  11.     <!-- class -->
  12.     <div class="top">top</div>
  13.     <!-- id -->
  14.     <div id="box">box</div>
  15.     <!-- style -->
  16.     <div style="color: green; font-size: 20px">hello</div>
  17.     <!-- 2.预置属性 -->
  18.     <img src="" alt="" />
  19.     <a href=""></a>
  20.     <!-- 3.自定义属性:data-前缀 -->
  21.     <div class="box" data-email="22@php.cn">用户邮箱</div>
  22.     <!-- 4.事件属性：on + 事件名称-->
  23.     <button
  24.       onclick="this.nextElementSibling.textContent=this.previousElementSibling.dataset.email"
  25.     >
  26.       获取邮箱
  27.     </button>
  28.     <p></p>
  29.     <button onclick="alert('提交成功')">确定</button>
  30.     <hr />
  31.     <h1>布局</h1>
  32.     <div class="header">header</div>
  33.     <div class="mail">mail</div>
  34.     <div class="footer">footer</div>
  35.     <hr />
  36.     <!-- 图片 -->
  37.     <img
  38.       src="https://tenfei04.cfp.cn/creative/vcg/800/version23/VCG41175510742.jpg"
  39.       alt="风景"
  40.     />
  41.     <!-- 链接 -->
  42.     <a href="https://www.zaikun.cn" target="">软件开发</a>
  43.     <!-- 列表 -->
  44.     <!-- 无序列表 ul>li{item}*3-->
  45.     <ul>
  46.       <li>item</li>
  47.       <li>item</li>
  48.       <li>item</li>
  49.     </ul>
  50.     <!-- 列表:ul>li{$.item}*3 -->
  51.     <ul>
  52.       <li>1.item</li>
  53.       <li>2.item</li>
  54.       <li>3.item</li>
  55.     </ul>
  56.     <!-- 有序列表：ol>li{item}*3 -->
  57.     <ol>
  58.       <li>item</li>
  59.       <li>item</li>
  60.       <li>item</li>
  61.     </ol>
  62.     <!-- 自定义列表：类似名词解释 -->
  63.     <dl>
  64.         <dt>地址
  65.             <dd>兰州市城关区</dd>
  66.         </dt>
  67.         <dt>邮箱
  68.             <dd>121@php.cn</dd>
  69.         </dt>
  70.     </dl>
  71.     <hr>
  72.     <!-- html5 : nav>a{link$}*3-->
  73.     <nav>
  74.         <a href="">link1</a>
  75.         <a href="">link2</a>
  76.         <a href="">link3</a>
  77.     </nav>
  78.     <!-- 图文混排:ul.nav>(li.item>a>img)*3 -->
  79.     <ul class="nav" style="display: flex; list-style: none;">
  80.         <li class="item">
  81.             <a href=""><img src="" alt=""></a>
  82.             <a href="">图片1</a>
  83.         </li>
  84.         <li class="item">
  85.             <a href=""><img src="" alt=""></a>
  86.             <a href="">图片2</a>
  87.         </li>
  88.         <li class="item">
  89.             <a href=""><img src="" alt=""></a>
  90.             <a href="">图片3</a>
  91.         </li>
  92.     </ul>
  93.     <hr>
  94.     <!-- 表格 -->
  95.     <table border="1" width="500">
  96.         <caption>表格标题</caption>
  97.         <!-- 先行后列 -->
  98.         <!-- 表头：thead>th{表头}*3 -->
  99.         <thead>
  100.             <th>日期</th>
  101.             <th>单位名称</th>
  102.             <th>事项</th>
  103.             <th>收入</th>
  104.             <th>支出</th>
  105.         </thead>
  106.         <!-- 主体: tbody>tr*3>td{内容}*5-->
  107.         <tbody>
  108.             <tr>
  109.                 <!-- 垂直方向合并 -->
  110.                 <td rowspan="2" bgcolor="cyan">内容</td>
  111.                 <td>内容</td>
  112.                 <td>内容</td>
  113.                 <td>内容</td>
  114.                 <td>内容</td>
  115.             </tr>
  116.             <tr>
  117.                 <!-- <td>内容</td> -->
  118.                 <td>内容</td>
  119.                 <td>内容</td>
  120.                 <td>内容</td>
  121.                 <td>内容</td>
  122.             </tr>
  123.             <tr>
  124.                 <td>合计</td>
  125.                 <!-- 水平合并 -->
  126.                 <td colspan="4" bgcolor="red">内容</td>
  127.                 <!-- <td>内容</td>
  128.                 <td>内容</td>
  129.                 <td>内容</td> -->
  130.             </tr>
  131.         </tbody>
  132.     </table>
  133.   </body>
  134. </html>

三、作业

1.课程表演示效果

2. 课程表代码如下

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>华侨学校五年级第二学期课程表</title>
  8.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       width="500"
  13.       cellspacing="0"
  14.       cellpadding="5"
  15.       align="center"
  16.     >
  17.       <caption style="font-size: larger; margin: 20px 40px">
  18.         华侨学校五年级第二学期课程表
  19.       </caption>
  20.       <thead align="center">
  21.         <th>时间</th>
  22.         <th>星期一</th>
  23.         <th>星期二</th>
  24.         <th>星期三</th>
  25.         <th>星期四</th>
  26.         <th>星期五</th>
  27.       </thead>
  28.       <tbody align="center">
  29.         <tr>
  30.           <td rowspan="4" bgcolor="ycan">上午</td>
  31.           <td>语文</td>
  32.           <td>数学</td>
  33.           <td>语文</td>
  34.           <td>英语</td>
  35.           <td>语文</td>
  36.         </tr>
  37.         <tr>
  38.           <!-- <td>x</td> -->
  39.           <td>数学</td>
  40.           <td>语文</td>
  41.           <td>英语</td>
  42.           <td>语文</td>
  43.           <td>体育</td>
  44.         </tr>
  45.         <tr>
  46.           <!-- <td>x</td> -->
  47.           <td>英语</td>
  48.           <td>体育</td>
  49.           <td>语文</td>
  50.           <td>数学</td>
  51.           <td>英语</td>
  52.         </tr>
  53.         <tr>
  54.           <!-- <td>x</td> -->
  55.           <td>科学</td>
  56.           <td>道法</td>
  57.           <td>信息</td>
  58.           <td>体育</td>
  59.           <td>数学</td>
  60.         </tr>
  61.         <tr>
  62.           <!-- 水平合并 -->
  63.           <td colspan="6">中午休息</td>
  64.           <!-- <td>x</td>
  65.           <td>x</td>
  66.           <td>x</td>
  67.           <td>x</td>
  68.           <td>x</td> -->
  69.         </tr>
  70.         <tr>
  71.           <td rowspan="3">下午</td>
  72.           <td>道德</td>
  73.           <td>劳动</td>
  74.           <td>体育</td>
  75.           <td>信息</td>
  76.           <td>道法</td>
  77.         </tr>
  78.         <tr>
  79.           <!-- <td>x</td> -->
  80.           <td>综实</td>
  81.           <td>美术</td>
  82.           <td>科学</td>
  83.           <td>体育</td>
  84.           <td>科学</td>
  85.         </tr>
  86.         <tr>
  87.           <!-- <td>x</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 colspan="5" align="left">课后辅导</td>
  97.           <!-- <td>x</td>
  98.           <td>x</td>
  99.           <td>x</td>
  100.           <td>x</td> -->
  101.         </tr>
  102.       </tbody>
  103.     </table>
  104.   </body>
  105. </html>

图文列表效果

图文效果

图文列表代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>图文列表</title>
  8.   </head>
  9.   <body>
  10.     <h1 style="text-align: center;" >图文列表</h1>
  11.     <ul class="nav" style="list-style: none">
  12.       <li style="text-align: center;">
  13.         <a href=""
  14.           ><img src="image/1.jpeg" width="400px" height="300px" alt=""
  15.         /></a>
  16.       </li>
  17.       <li style="text-align: center;><a href=""">图片1</a></li>
  18.       <li style="text-align: left;">
  19.         <a href=""
  20.           ><img src="image/2.jpeg" width="400px" height="300px" alt=""
  21.         /></a>
  22.         <li style="text-align: left;><a href=""">图片2</a></li>
  23.       </li>
  24.       <li style="text-align: right;">
  25.         <a href=""
  26.           ><img src="image/3.jpeg" width="400px" height="300px" alt=""
  27.         /></a>
  28.       </li>
  29.       <li style="text-align: right;"><a href=""">图片3</a></li>
  30.       <li style="text-align: center;">
  31.         <a href=""
  32.           ><img src="image/4.jpeg" width="400px" height="300px" alt=""
  33.         /></a>
  34.       </li>
  35.       <li style="text-align: center;><a href=""">图片4</a></li>
  36.       <li style="text-align: center;">
  37.         <a href=""
  38.           ><img src="image/5.jpeg" width="400px" height="300px" alt=""
  39.         /></a>
  40.       </li>
  41.       <li style="text-align: center;><a href=""">图片5</a></li>
  42.     </ul>
  43.   </body>
  44. </html>

更多相关文章

  1. HTML图片列表及表格制作课程表
  2. Emmet插件使用和HTML知识及课程表作业
  3. Android中数据存储——ContentProvider存储数据
  4. android主流UI布局
  5. 图文列表和表格（课程表）
  6. 图文列表与课程表代码实现
  7. HTML入门学习之表格制作课程表实战练习
  8. 图文列表与课程表
  9. 使用table做一个简易的课程表

随机推荐

  1. 属性资源与Android命名空间
  2. Android中生成和扫描二维码
  3. Android(安卓)通知（使用NotificationCompa
  4. Android进程系列第八篇---LowmemoryKille
  5. Android系统利用tcpdump抓包
  6. Android开发者指南(29) ―― USB Host an
  7. Android(安卓)调用系统相机拍照保存以及
  8. Android使用AccessibilityService实现USB
  9. 即将到来的Android(安卓)N，将具备这些新特
  10. Fast File Transfer – 让 Android 通过