使用HTML标签制作简单的导航和课程表
1.制作简单的图文列表
<ui>
<li><a href=""><img src="图片url" alt="" width="200"></a></li>
<li><a href=""><img src="图片url" alt="" width="200"></a></li>
<li><a href=""><img src="图片url" alt="" width="200"></a></li>
</ui>
效果:
2.制作简单的导航
<ol>
<li><a href="页面URL">关于我们</a></li>
<li><a href="页面URL">联系我们</a></li>
<li><a href="页面URL">帮助</a></li>
</ol>
效果:
3.制作简单的友情链接
<dl>
<dt>友情链接</dt>
<dd><a href="www.baidu.com">百度</a></dd>
<dt>友情链接</dt>
<dd><a href="www.php.cn">php中文网</a></dd>
<dt>友情链接</dt>
<dd><a href="www.163.com">网易</a></dd>
</dl>
效果:
4.制作简单的课程表
<table border="1" style="text-align: center;">
<caption>课程表</caption>
<thead>
<tr bgcolor="green">
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" >上午<br/>8:00-11:50</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>数学</td>
<td>英语</td>
<td>音乐</td>
<td>美术</td>
<td>体育</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>英语</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr bgcolor="yellow">
<td colspan="6">中午休息</td>
</tr>
<tr>
<td rowspan="3">下午<br/>13:30-13:30</td>
<td>美术</td>
<td>音乐</td>
<td>语文</td>
<td>数学</td>
<td>体育</td>
</tr>
<tr>
<td>体育</td>
<td>美术</td>
<td>数学</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<td>音乐</td>
<td>体育</td>
<td>英语</td>
<td>英语</td>
<td>音乐</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="yellow">
<td>备注:</td>
<td colspan="5">下午放学后需要做完作业才可以回家</td>
</tr>
</tfoot>
</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>标签