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>
转载：https://blog.csdn.net/m0_43443133/article/details/105378759
查看评论