新手小白学习web第04弹
本人是一名在校大学生，正在进行web的攻读，昨天是我跟随老师进行学习的第四次课程，感觉收获颇多，那么就由我来给大家来分享一下我昨天的学习成果吧，有啥不足欢迎补充
3.23
一、文字排版
老师上课给了我们一段文字让我们进行排版，文字如下
任务****04
使用表单制作页面
4.1任务概述
“新时代、新技能、新梦想”,当前我国大力弘扬劳模精神、劳动精神、工匠精神，旨在激励更多劳动者，特别是青年一代走技能成才、技能报国之路。“新云课堂”项目就是为广大学习者打造的学习知识和技能的平台。
本任务将介绍如何用表单制作“新云课堂”信息登记页面、用户登录页面和用户注册页面。表单对于用户而言是数据录入和提交的界面；表单对于网站而言是获取用户信息的途径。通过在网页中添加表单元素，可以实现如会员注册、登录，问卷调查，在线考试，论坛分享、评论等功能。表单涉及信息的交互，自然离不开数据验证，数据的验证通常使用HTML表单元素与页面中的JavaScript脚本配合实现。但HTML5规范新增了对表单内容的简单验证功能，这一功能大大提升了用户的体验，我们应对其有一个初步的了解。
“新云课堂”项目的用户登录页面、用户注册页面及信息登记页面就需要使用本任务的表单与表单验证来实现。
4.2任务目标
素质目标
（1）培养学生的劳动精神和工匠精神。
（2）培养学生适应时代要求、主动获取新知识和新技能的意识。
知识目标
（1）了解表单元素的定义。
（2）掌握语义化表单的制作。
（3）了解HTML5属性初步验证表单的功能。
老师让我们运用段落知识来给文本排版，如各级文本标题
h1~h6,段落标题
以下是我写的代码，可能有些不足
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本排版练习</title>
<script type="text/javascript">
p{
text-indent: 2rem;
}
</script>
<link rel="stylesheet" type="text/css" href="css/23作业.css"/>
</head>
<body>
<h1>任务04<hr>
使用表单制作页面
</h1>
<h2>4.1任务概述</h2>
<p>“新时代、新技能、新梦想”,当前我国大力弘扬劳模精神、劳动精神、工匠精神，旨在激励更多劳动者，特别是青年一代走技能成才、技能报国之路。“新云课堂”项目就是为广大学习者打造的学习知识和技能的平台。
</p>
<p>本任务将介绍如何用表单制作“新云课堂”信息登记页面、用户登录页面和用户注册页面。表单对于用户而言是数据录入和提交的界面；表单对于网站而言是获取用户信息的途径。通过在网页中添加表单元素，可以实现如会员注册、登录，问卷调查，在线考试，论坛分享、评论等功能。表单涉及信息的交互，自然离不开数据验证，数据的验证通常使用HTML表单元素与页面中的JavaScript脚本配合实现。但HTML5规范新增了对表单内容的简单验证功能，这一功能大大提升了用户的体验，我们应对其有一个初步的了解。
</p>
<p>“新云课堂”项目的用户登录页面、用户注册页面及信息登记页面就需要使用本任务的表单与表单验证来实现。</p>
<h2>4.2任务目标</h2>
<p>素质目标
</p>
<ul>
<li>培养学生的劳动精神和工匠精神。
</li>
<li>培养学生适应时代要求、主动获取新知识和新技能的意识。
</li>
</ul>
<p>知识目标
</p>
<ul>
<li>了解表单元素的定义。</li>
<li>掌握语义化表单的制作</li>
<li>了解HTML5属性初步验证表单的功能。</li>
</ul>
</body>
</html>
其中学习到了新的标签
,
它们都属于无序列表
特点：
1、没有顺序，每个
2、默认
无序列表一般用于实现无需类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
其中我还学习到了将实心小圆点改为其他图标的方法
body{
background-color: red;
ul{
/*方形*/
/*list-style-type: square;*/
list-style-image: url(../img/chi.svg);
}
}
之后还学习了导航条的制作
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
background-color: #183365;
color: beige;
height: 60px;
}
li{
list-style-type:none;
/*浮动方式左浮动*/
float: left;
/*设置一定的宽度*/
width: 100px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>学校概括</li>
<li>招生就业</li>
<li>人才培养</li>
<li>学生工作</li>
<li>师资队伍</li>
<li>校园文化</li>
<li>旧版回顾</li>
</ul>
</body>
</html>
这就是本人3.23日的学习笔记
浙公网安备 33010602011771号