3.2 HTML简介
1.HTML简介--核心知识点
3.3常用标签
1.HTML常用标签--核心知识点
2.学习任务--诗歌鉴赏
设计下图所示的静态网页: poem.html。
poem.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML常用标签</title>
</head>
<body>
<h1>山行</h1>
<h2>杜牧</h2>
<font size="4" face="黑体">
远上寒山石径斜,白云深处有人家。<br/>
停车坐爱枫林晚,霜叶红于二月花。
</font>
<hr width="280" align="left" color="red" size="3">
<p>
<b>注释</b><br>
<ol>
<li>山行:在山中行走。</li>
<li>寒山:指深秋时候的山。</li>
<li>径:小路。</li>
<li>白云深处:白云升腾、缭绕和漂浮种种动态,也说明山很高。</li>
<li>斜:此处读xiá,为伸向的意思。</li>
<li>坐:因为。</li>
</ol>
</body>
</html>
3.4表格标签
1.HTML表格标签--核心知识点
2.学习任务--求职表格设计
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<body>
<table border="1">
<!-- <tr>
<td align="center" height="25" width="378"><font size="4"><b>个人简历</b></font></td>
</tr>
</table> -->
<caption><font size="4"><b>个人简历</b></font></caption>
<!-- <table border="1"> -->
<tr height="25">
<td width="80" align="center">姓名</td>
<td width="100" align="center"></td>
<td width="80" align="center">籍贯</td>
<td width="100" align="center"></td>
</tr>
<tr height="25">
<td align="center">性别</td>
<td align="center"></td>
<td align="center">民族</td>
<td align="center"></td>
</tr>
<tr height="25">
<td align="center">年龄</td>
<td align="center"></td>
<td align="center">学历</td>
<td align="center"></td>
</tr>
<tr height="25">
<td align="center">出生年月</td>
<td align="center"></td>
<td align="center">专业</td>
<td align="center"></td>
</tr>
<tr height="25">
<td align="center">身高</td>
<td align="center"></td>
<td align="center">电子邮箱</td>
<td align="center"></td>
</tr>
<tr height="25">
<td align="center">毕业院校</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr height="25">
<td align="center">家庭住址</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr height="25">
<td align="center" >联系电话</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr height="70">
<td align="center">计算机水平</td>
<td align="center" colspan="3"></td>
</tr>
<tr height="35" >
<td align="center" rowspan="2">工作经验</td>
<td align="center" colspan="3"></td>
</tr>
<tr height="35">
<td align="center" colspan="3"></td>
</tr>
<tr height="220">
<td align="center">自我评价</td>
<td align="center" colspan="3"></td>
</tr>
</table>
</body>
</html>
3.5表单标签
1.HTML表单标签-- 核心知识点
2.学习任务--注册页面设计
设计下图所示的静态网页: registe.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签的应用</title>
</head>
<body>
<b>欢迎注册</b>
<br><br>
<form>
输入账号(文本框)<input type="text">
<br>
输入密码(密码框)<input type="password">
<br>
选择性别(单选按钮)<input type="radio" name="sex" checked>男 <!--如果没有name属性,将变为多选;checked属性默认为男 -->
<input type="radio" name="sex">女
<br>
选择爱好(复选框)<input type="checkbox">唱歌 <!--checkbox本就为复选,所以不需要name值-->
<input type="checkbox">跳舞
<input type="checkbox" checked>打球
<input type="checkbox">游戏
<br>
选择籍贯(下拉菜单)<select size="2" multiple> <!--size属性显示能看到的选项数量,multiple属性可以多选-->
<option>北京</option>
<option>山海</option>
<option>广州</option>
<option>重庆</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
3.6其他标签
1.HTML其他标签--核心知识点
2.学习任务--网页框架应用
制作如下静态网页: index.html、menu.html、content.html。
index.html
<!DOCTYPE html>
<html>
<frameset rows="10%,80%">
<frame src="menu.html" name="menu"></frame>
<frame src="content.html" name=content></frame>
</frameset>
</html>
menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="poem.html">诗歌欣赏</a>
<a href="registe.html">注册</a>
<a href="resume.html">简历</a>
</body>
</html>
content.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>欢迎光临本网站</h2>
</body>
</html>
3.7 CSS样式
1.CSS技术--核心知识点
2.学习任务--CSS技术应用
制作下图所示的静态网页:css.htmI
css.htmI
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器实例</title>
<style type="text/css">
.red{color:red}
.green{color:green}
.font18{font-size:18px}
#bold{font-weight:bold}
#font24{font-size:24px}
</style>
</head>
<body>
<h1 class="red">标题一:class="red",设置文字为红色</h1>
<p class="green font18">段落一:class="green font18",设置文字为绿色,字号为18px。</p>
<p class="red font18">段落二:class="red font18",设置文字为红色,字号为18px。</p>
<p id="bold">段落1:id="bold",设置粗体文字。</p>
<p id="font24">段落2:id="font24",设置字号为24。</p>
<p id="font24">段落3:id="font24",设置字号为24。</p>
<p id="bold font24">段落4:id="bold font24",同时设置粗体和字号为24。</p>
</body>
</html>