3月26日

3月26日

一、插入图片

常用图片格式

GIF PNG JPG

gif ：支持动画显示
png ：支持透明背景
jpeg 或 jpg ：颜色丰富

图片要放到项目里的 img 文件夹下

二、网页文字排版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本控制排版</title>
		<link rel="stylesheet" type="text/css" href="css/文本.css"/>
	</head>
	<body>
		<h1>任务04使用表单制作页面</h1>
		<h2>4.1任务概述</h2>
		<p>“新时代、新技能、新梦想”,当前我国大力弘扬劳模精神、劳动精神、工匠精神，旨在激励更多劳动者，特别是青年一代走技能成才、技能报国之路。“新云课堂”项目就是为广大学习者打造的学习知识和技能的平台。</p>
		<p>本任务将介绍如何用表单制作“新云课堂”信息登记页面、用户登录页面和用户注册页面。表单对于用户而言是数据录入和提交的界面；表单对于网站而言是获取用户信息的途径。通过在网页中添加表单元素，可以实现如会员注册、登录，问卷调查，在线考试，论坛分享、评论等功能。表单涉及信息的交互，自然离不开数据验证，数据的验证通常使用HTML表单元素与页面中的JavaScript脚本配合实现。但HTML5规范新增了对表单内容的简单验证功能，这一功能大大提升了用户的体验，我们应对其有一个初步的了解。</p>
		<p>“新云课堂”项目的用户登录页面、用户注册页面及信息登记页面就需要使用本任务的表单与表单验证来实现。</p>
		<h2>4.2任务目标</h2>
		<p>素质目标</p>
		<!--有序列表-->
		<ol>
			<li>培养学生的劳动精神和工匠精神。</li>
			<li>培养学生适应时代要求、主动获取新知识和新技能的意识。</li>
		</ol>
		<p>知识目标</p>
		<ol>
			<li>了解表单元素的定义</li>
			<li>掌握语义化表单的制作。</li>
			<li>了解HTML5属性初步验证表单的功能</li>
		</ol>
	</body>
</html>

三、网页中插入图片

1、浏览器中下载图片

2、复制图片到项目img文件中 更改为英文名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>把无序列表的修饰符改成任意的样子</title>
		<style type="text/css">
			ul,li{
				list-style-image: url(img/ty.png);//链接图片，ty是图片的名字
			}
		</style>
	</head>
	<body>
		<ul>//无序列表
			<li>晴</li>
			<li>少云</li>
			<li>多云</li>
			<li>下雨</li>
		</ul>
	</body>
</html>
posted @ 2026-03-29 19:49  宋俊鹏  阅读(5)  评论(0)    收藏  举报