我的第二课
加油
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 经典模式 -->
<div id="header">header></div>
<div id="maim">main</div>
<div id="footer">footer</div>
<!-- id权重太大 -->
<!-- 改进 -->
<div class="header">header></div>
<div class="maim">main</div>
<div class="footer">footer</div>
<!-- 语义化标签 -->
<header>header</header>
<maid>maid</maid>
<footer>footer</footer>
<!-- div+class模式 -->
<!-- 1.目前至少90%以上项目为移动端 -->
<header>我是文章头部</header>
<div class="article-header">我是文章头部</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>链接与图像</title>
</head>
<body>
<!-- 1.链接与跳转 -->
<a href="https://php.cn">phP.cn</a>
<hr />
<!-- 2.在指定窗口打开 -->
<a href="https://tmall.com" target="tmall">天猫</a>
<iframe src="https://tmall.com" frameborder="2">name=”tmall”</iframe>
<hr />
<!-- 3.站内跳转 -->
<!-- 使用锚点/书签 -->
<a href="hello">我要找到你</a>
<h2 id="holle" style="margin-top: 1000px">你发现我了吗</h2>
<a href="#">回到顶部</a>
<hr />
<img src="小狗.jpg" alt="小狗" />
<!-- <a href="">php中网</a> -->
<!-- <h2>我好爱大家</h2> -->
<hr />
<!-- <a href="https://tmall.com"><img src="小狗.jpg" alt="小狗" /></a> -->
<hr />
<h2>动物世界</h2>
<div class="box">
<!-- div+class -->
<!-- 可点击的图片链接 -->
<a href=""><img src="小狗.jpg" alt="小狗" /></a>
<!-- 可点击的图片链接 -->
<a href="">今晚有狗肉吃了</a>
<div >
<div class="box">
<!-- div+class -->
<!-- 可点击的图片链接 -->
<a href=""><img src="小猫.jpg" alt="小猫" /></a>
<!-- 可点击的图片链接 -->
<a href="">猫就有点寂寞了</a>
</div>
</div >
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表格与布局</title>
</head>
<body>
<!-- table+caotion+thead+tbody+tfoot -->
<!-- tr+td -->
<table width="“300”" border="“1”">
<caption>
<!-- 标题 -->
</caption>
<!-- 表头 -->
<thead>
<tr bgcolor=“Lightgreen”>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</thead>
<!-- 表格所有的数据必须在单元格td的元素中，必须写到tr中 -->
<tbody>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<!-- 从表体2行3列开始水平方向合并三列 -->
<td bgcolor="red" colspan="3">x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td bgcolor="violet" rowspan="2">x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<!-- 这一个单元格应该被注释或删除 -->
<!-- <td>x</td> -->
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
<!-- 可以有多个tbody -->
<!-- 表尾 -->
</tbody>
<tfoot>
<tr>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
</tr>
</tfoot>
</table>
<hr />
<!-- 课程表格案例 -->
<table border="1"width=“450”>
<!-- <caption>代表表头</caption> -->
<caption>
合肥市南门小学五年级课程表
</caption>
<!-- <thead>代表表体</thead> -->
<thead>
<tr>
<td>时间</td>
<td>周一</td>
<td>周二</td>
<td>周三</td>
<td>周四</td>
<td>周五</td>
</tr>
</thead>
<!-- 上午 -->
<tbody>
<tr>
<td rowspan="4">上午</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>
</tbody>
<!-- 中午 -->
<tbody>
<tr>
<td bgcolor="red" colspan="6">中午休息</td>
</tr>
</tbody>
<!-- 下午 -->
<tbody>
<tr>
<td rowspan="3">下午</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>
<td>备注</td>
<td colspan="5">每天下午15:30-17:30在校写作业</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 后台顶部 -->
<div class="header">
<h1>网站管理后台</h1>
</div>
<span>admin</span>
<a href="">退出</a>
</div>
</div>
<!-- 左侧导航 -->
<ul class="nav">
<li><a href="demo3.html">菜单单项1</a></li>
<li><a href="demo4.html">菜单单项2</a></li>
<li><a href="demo5.html">菜单单项3</a></li>
</ul>
<!-- 右侧内容区 -->
<iframe srcdoc=<P>请点击左边菜单栏打开</P>“ frameborder=”0” name=“content”></iframe>
</body>
</html>