使用HTML标签制作简单的导航和课程表

1.制作简单的图文列表

  1. <ui>
  2.    <li><a href=""><img src="图片url" alt="" width="200"></a></li>
  3.    <li><a href=""><img src="图片url" alt="" width="200"></a></li>
  4.    <li><a href=""><img src="图片url" alt="" width="200"></a></li>
  5.  </ui>

效果：

2.制作简单的导航

  1. <ol>
  2.         <li><a href="页面URL">关于我们</a></li>
  3.         <li><a href="页面URL">联系我们</a></li>
  4.         <li><a href="页面URL">帮助</a></li>
  5. </ol>

效果：

3.制作简单的友情链接

  1. <dl>
  2.         <dt>友情链接</dt>
  3.         <dd><a href="www.baidu.com">百度</a></dd>
  5.         <dt>友情链接</dt>
  6.         <dd><a href="www.php.cn">php中文网</a></dd>
  8.         <dt>友情链接</dt>
  9.         <dd><a href="www.163.com">网易</a></dd>
  10.     </dl>

效果：

4.制作简单的课程表

  1. <table border="1" style="text-align: center;">
  2.         <caption>课程表</caption>
  3.         <thead>
  4.             <tr bgcolor="green">
  5.                 <th>时间</th>
  6.                 <th>星期一</th>
  7.                 <th>星期二</th>
  8.                 <th>星期三</th>
  9.                 <th>星期四</th>
  10.                 <th>星期五</th>
  11.             </tr>
  12.         </thead>
  13.         <tbody>
  14.             <tr>
  15.                 <td rowspan="4" >上午<br/>8:00-11:50</td>
  16.                 <td>语文</td>
  17.                 <td>语文</td>
  18.                 <td>数学</td>
  19.                 <td>英语</td>
  20.                 <td>数学</td>
  21.             </tr>
  22.             <tr>
  23.                 <td>数学</td>
  24.                 <td>英语</td>
  25.                 <td>音乐</td>
  26.                 <td>美术</td>
  27.                 <td>体育</td>
  28.             </tr>
  29.             <tr>
  30.                 <td>语文</td>
  31.                 <td>数学</td>
  32.                 <td>语文</td>
  33.                 <td>英语</td>
  34.                 <td>语文</td>
  35.             </tr>
  36.             <tr>
  37.                 <td>英语</td>
  38.                 <td>语文</td>
  39.                 <td>英语</td>
  40.                 <td>语文</td>
  41.                 <td>英语</td>
  42.             </tr>
  43.             <tr bgcolor="yellow">
  44.                 <td colspan="6">中午休息</td>
  45.             </tr>
  46.             <tr>
  47.                 <td rowspan="3">下午<br/>13:30-13:30</td>
  48.                 <td>美术</td>
  49.                 <td>音乐</td>
  50.                 <td>语文</td>
  51.                 <td>数学</td>
  52.                 <td>体育</td>
  53.             </tr>
  54.             <tr>
  55.                 <td>体育</td>
  56.                 <td>美术</td>
  57.                 <td>数学</td>
  58.                 <td>语文</td>
  59.                 <td>美术</td>
  60.             </tr>
  61.             <tr>
  62.                 <td>音乐</td>
  63.                 <td>体育</td>
  64.                 <td>英语</td>
  65.                 <td>英语</td>
  66.                 <td>音乐</td>
  67.             </tr>
  68.         </tbody>
  69.         <tfoot>
  70.             <tr bgcolor="yellow">
  71.                 <td>备注：</td>
  72.                 <td colspan="5">下午放学后需要做完作业才可以回家</td>
  73.             </tr>
  74.         </tfoot>
  75.     </table>

效果：

学习总结

标签元素的属性和语义化布局

1.通用属性：ID,CLASS,STYLE,几乎所有的元素都有。

id: 唯一元素
class: 同类元素
style: 自定义某个元素样式

2.预置属性：

a标签里的href和img标签里的src就是预置属性。
ID,CLASS,STYLE,也是预置属性，只不过几乎所有的元素都会有。

3.事件属性：有一个通用前缀: on+事件名称: 事件属性

<button onclick="alert('提交成功')">提交</button>

4.自定义属性：有一个通用前缀: “data-“

v-model , v-for, v-bind, 都是自定义属性

5.语义化布局：HTML5定义了一种新的语义化标签来描述元素的内容，让很多更语义化的结构化代码标签代替大量无意义的<div>标签

更多相关文章

  1. Android(安卓)沉浸式状态栏实现
  2. Android自定义属性时TypedArray的使用方法
  3. 转帖并消化:Android中一种使用AttributeSet自定义控件的方法
  4. Android布局 android:gravity 和 android:layout_Gravity一些细
  5. Android属性动画应用超简单代码打造酷炫扇形(卫星)，圆形菜单
  6. Android常用布局类整理(一)
  7. android架构师之路——APP外置换肤原理解析
  8. Android的一些属性
  9. Android布局之相对布局——RelativeLayout

随机推荐

  1. C# 中虚方法和抽象方法
  2. C语言变量的定义包括变量存储类型和变量
  3. for循环是先执行循环体语句，后判断表达式
  4. c语言文件读写操作有哪些？
  5. c语言源程序的扩展名是什么？
  6. c语言中switch的用法是什么？
  7. C语言中void是什么意思？
  8. C语言中for语句的执行过程是什么？
  9. c语言中“&&”什么意思？
  10. 在c语言中，一条简单语句的结束符为什么？