笔记03

一. 文本控制白板

DOCTYPE html
html
head
meta charset="UTF-8"
title>文本控制排版/title
style text="text/css">

/style
link rel="stylesheet" type="text/css" href="css/style03.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

二. 有序列表和无序列表

circle 空心圆 square实心正方形

DOCTYPE html
html
head
meta charset="UTF-8"
title>有序无序列表/title
style type="text/css">
.two{
list-style-type:circle
}
.three{
list-style-type:square
}

/style
/head
body

ul
li>苹果/li
li>香蕉/li
/ul
ul class="two"
li>苹果/li
li>香蕉/li
/ul
ul class="three"
li>苹果/li
li>香蕉/li
/ul

ol
li>穿衣服/li
li>吃饭/li
/ol

/body
/html

把有序列表换成带括号的样子

DOCTYPE html
html

head
meta charset="UTF-8"
title>把有序列表换成带括号的样子/title
style type="text/css">
.custom-list {
list-style: none;
/* 移除默认的列表样式 /
counter-reset: my-counter;
/ 初始化计数器 */
}

.custom-list li {
counter-increment: my-counter;
/* 每次出现li时增加计数器 */
}

.custom-list li:before {
content: "(" counter(my-counter) ")";
/* 设置内容为计数器，并加上括号 /
margin-right: 5px;
/ 可选：在编号和文本之间添加一些空间 */
}
/style
/head

body
ol class='custom-list'
li>了解表单元素的定义/li
li>掌握语义化表单的制作/li
li>了解HTML5属性初步验证表单的功能/li
/ol
/body
无序列表的特性：

1.没有顺序，每个li标签独占一行，属于块状元素

2.默认li标签列表前面有一个实心小圆点

三. 把无序列表的修饰符改成任意的样子

head
meta charset="UTF-8"
title>把无序列表的修饰符改成任意的样子/title
style type="text/css">
ul,li{
list-style-image:url(img/sun.png) ;
}
/style
/head
body
ul
li>晴/li
li>少云/li
li>多云/li
li>下雨/li
/ul
/body
把想要的修饰符插入的方法

1.阿里图库下载图标icon
2.点击下载，选择合适的颜色和大小（一般是16px），格式是png
3.把下载的图片保存到项目文件的img文件里，并重命名为英文格式

四. 插入图片

1.图片一定要放到项目里的img文件夹下

2.图片格式选择原则：在保证成像质量的情况下，文件大小越小越好

3.常见的图片格式：jepg gif png

新的两种：svg webp

gif:支持动画显示

png:支持透明背景

jepg：颜色丰富

插入图片的格式：

img src="img/sun.png"  /
alt：当图片不能正常显示时，替换的文字，方便爬虫去捕获网页信息 
title:图片悬停到图片上显示的文字 ​ 
属性名=“属性值” 属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序