一、今日学习内容:
1.学习Markdown
2.笔记日志撰写标准
3.表格、列表、表单、布局标签
二、代码编写
1.使用所学的表格标签制作一个表格代码如下:
<!DOCTYPE html>
<html>
<head>
<title>课程表</title>
<style>
#p1 b {
position:relative;
right:60px;
top:10px;
}
#p1 strong {
position:relative;
left:60px;
bottom:10px;
}
#p1:before {
content: "";
position: absolute;
width:1px;
height:210px;/*这里需要自己调整,根据td的宽度和高度*/
top:89px; /*下移*/
left:220px; /* 向右移*/
background-color: black;
display: block;
transform: rotate(-80deg);/*这里需要自己调整,根据线的位置*/
transform-origin: top;
}
</style>
</head>
<body>
<h1><center>课程表</center></h1>
<table style="text-align:center" width="928" height="400" border="1" align="center"
text-aligm="center">
<thead>
<tr>
<th colspan="2" id="p1"><b>节次</b><strong>星期</strong></th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
</thead>
<tr>
<td rowspan="5">上午</td>
<td>早自习</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td></td>
</tr>
<tr>
<td>第一节</td>
<td>物理</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td>物理</td>
</tr>
<tr>
<td>第二节</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>第三节</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
<td>语文</td>
<td>数学</td>
<td>生物</td>
</tr>
<tr>
<td>第四节</td>
<td>化学</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>体育</td>
<td>化学</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>第一节</td>
<td>语文</td>
<td>化学</td>
<td>物理</td>
<td>化学</td>
<td>计算机</td>
<td>语文</td>
</tr>
<tr>
<td>第二节</td>
<td>语文</td>
<td>物理</td>
<td>生物</td>
<td>英语</td>
<td>生物</td>
<td>英语</td>
</tr>
<tr>
<td>第三节</td>
<td>德育</td>
<td>数学</td>
<td>体育</td>
<td>生物</td>
<td>自习</td>
<td></td>
</tr>
<tr>
<td>晚上</td>
<td>晚自习</td>
<td>数学</td>
<td>英语</td>
<td>语文</td>
<td>化学</td>
<td>物理</td>
<td></td>
</tr>
</table>
</body>
</html>
成品如图所示:
2.两个站点的布局结构,并书写HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>w3schoo1</title>
</head>
<body>
<!--头部布局开始-->
<div id="header">
<div id="h-logo">
<a href="http://www.w3school.com.cn/index.html" title="w3school在线教程">W3shool</a>
</div>
<div>
<form>
<input type="text">
<input type="submit" value="GO" title="搜索">
</form>
</div>
<a href="http://www.w3school.com.cn/index.html" title="html 系列教程">HTML/CSS</a>
<a href="http://www.w3school.com.cn/index.html" title="浏览器脚本教程">JavaScript</a>
<a href="http://www.w3school.com.cn/index.html" title="服务器脚本教程">Server Side</a>
<a href="http://www.w3school.com.cn/index.html" title="ASP>NET 教程">ASP>NET</a>
<a href="http://www.w3school.com.cn/index.html" title="ASP>XML 系列教程">XML</a>
<a href="http://www.w3school.com.cn/index.html" title="ASP>web services 系列教程">Web Services</a>
<a href="http://www.w3school.com.cn/index.html" title="ASP>NET 教程">Web Building</a>
</div>
<!--头部内容结束-->
<!--内容部分布局开始-->
<div id="centent">
<h3>HTML 教程</h3>
<ul>
<ol title="HTML 教程">HTML</ol>
<ol title="HTML 教程">HTML5</ol>
<ol title="HTML 教程">XHTML</ol>
<ol title="HTML 教程">CSS</ol>
<ol title="HTML 教程">CSS3</ol>
<ol title="HTML 教程">TCP/IP</ol>
</ul>
</div>
<div id="c-center">
<h2>领先的 Web 技术教程 - 全部免费</h2><hr/>
<p>在w3school,你可以找到你所需要的所有的网站建设教程。<br/>
从基础的 HTML 到 CSS,乃至进阶的XML、SQL、JS、PHP 和 ASP.NET。<br/>
<b >从左侧的菜单选择你需要的教程!</b>
</p>
</div>
<div id="c-right">
<h3>参考手册</h3>
<ul>
<li>HTML/HTML5颜色</li>
<li>HTML颜色</li>
<li>CSS 1,2,3</li>
</ul>
</div>
</div>
<!--内容部分布局结束-->
<!--底部布局开始-->
<div id="buttom">
<p style="background-color:#D8D8D8;color:white ">W3School 简体中文版提供的内容仅用于培训和测试,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关</p>
<p><a href="/about/about_use.asp" title="关于使用">使用条款</a>和<a href="/about/about_privacy.asp" title="关于隐私">隐私条款</a>。版权保留,保留一切权利。赞助商:“<a target="_blank" href="http://www.yktz.net/" title="上海赢科投资有限公司">上海赢科投资有限公司</a>。<a target="_blank" href="http://www.miitbeian.gov.cn/">蒙ICP备06004630号</a></p>
</div>
<!--底部布局结束-->
</div>
</div>
</body>
</html>
成品如下:
三、预习的内容
1.预习了CSS的样式的大概内容为第二天做准备
四、学习心得
经过今天的一天学习收获颇多,深刻认识了div对于布局而言的重要,以及编写列表所需的一些标签。