今天学习的内容主要包含了四大块:
- 表单,以及一堆标签;
- video/audio
- marquee跑马灯标签
- 废弃的标签
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…
1.表单,以及一堆标签
例子:
表单练习
例子中出现的标签:
1.fieldset+legend:给表单添加一个外框,同时再给表单添加一个标题。
2.input根据type的不同,可以是:
- text:文本输入框;
- password:暗文输入框,比如密码输入框的类型;
- radio:单选框,比如性别的选择,通常和name属性配合使用;
- checkbox:多选框,比如兴趣爱好;
- date:日期;
- email:自动识别输入的内容是不是email,如果不是则报错;
- number:强制输入的内容只能是数字,配合maxlegend=“数字”使用;
- submit:用于将表单中的内容提交到对应的网址,和form表单的action(填写url)配合使用。
- reset:将表单中填写的内容全部清空。
3.name:通常一个input按钮就会带上一个name标签,这样在以后ajax使用中会知道它是用于和服务器做交互使用的。通常比如这个栏是用于输入名称,那么name="acount",如果是密码,那么name="password",目的是规范,好识别。
4.value:比如上面的性别选项中,第一项是男,那么它的value就会默认添加male 的名称,最后配合name,就会提交给服务器,变成gender=male,用于储存/验证等。
5.checked:格式就是checked=“checked”,目的是在多选项中提前选中一个,作为提示用户这里可以选择选中。和select一样意思,只是使用的配合标签不同。
6.textarea:大面积的输入内容,它常用的属性有这些: - cols:横排输入个数;
- rows:竖排输入个数;
- resize:通过css设置成none,那么表格大小将不能在浏览器中被拖动大小;
7.label:通过包裹文本框前面的文字,让文字与右边对应的文本框产生,关联,当我们点击汉字的时候,也能激活文本框,用于提升用户体验。格式比如:
8.按钮换背景:通过css实现,格式:background: url(图片路径);
9.details:详情与概要,比如一个人然后一堆简介,summary里面只是填写人名,详细内容填写人的生平事迹。当我们点击到人旁边的箭头的时候,详细信息才会显示出来。格式:
概要信息
详情信息
10.datelist:用户可以自己输入内容,也可以输入提供的库里面的内容。格式如下:
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…·…·…·…·…
2.video/audio:
video:格式一:
video:格式二:
video标签属性:
- src: 用于告诉video标签需要播放的视频地址
- autoplay: 用于告诉video标签是否需要自动播放视频
- controls: 用于告诉video标签是否需要显示控制条
- poster: 用于告诉video标签视频没有播放之前显示的占位图片
- loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放
- preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
- muted:静音
- width/height: 和img标签中的一模一样
audio与vidio使用异同点:
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…·…·…·…·…
3.marquee:跑马灯
格式:
属性:
- direction: 设置滚动方向 left/right/up/down
- scrollamount: 设置滚动速度, 值越大就越快
- loop: 设置滚动次数, 默认是-1, 也就是无限滚动
- behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
注意:W3C不推荐,但是浏览器厂商都完美支持这个标签。这类标签现在使用的比较少,主要现在的设计都讲究简洁,用这个标签有点花哨。
4.被废弃的标签:
废弃他们的原因主要是为了让语义和修饰分家:
以上标签都是没有语义的,都是用来修改样式的
b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本天津下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的
以前:
我是文字
我是文字
我是文字
我是文字
现在:
我是文字
我是文字
我是文字
我是文字
实际上:更多的是通过css来实现:
40-HTML中被废弃的标签
我是文字
我是文字
我是文字
我是文字
原价 999,现价 9.9
这里的font在css中的使用:可以分开写,也可以连写:
font的属性:
- style
- weight
- size
- family
1.style:规定文字样式的属性
格式:font-style: italic;
取值:
normal : 正常的, 默认就是正常的
italic : 倾斜的
快捷键:
fs font-style: italic;
fsn font-style: normal;
2.weight:规定文字粗细的属性
格式: font-weight: bold;
单词取值:
bold 加粗
bolder 比加粗还要粗
lighter 细线, 默认就是细线
数字取值:
100-900之间整百的数字
快捷键
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;
3.size:规定文字大小的属性
格式:font-size: 30px;
单位:px(像素 pixel)
注意点: 通过font-size设置大小一定要带单位, 也就是一定要写px
快捷键
fz font-size:;
fz30 font-size: 30px;
·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·…·……·…·…·…·…·…·…·…·…
4.family:规定文字字体的属性
格式:font-family:"楷体";
注意点:
1.如果取值是中文, 需要用双引号或者单引号括起来
2.设置的字体必须是用户电脑里面已经安装的字体
快捷键
ff font-family:;
缩写格式:font: style weight size family;
注意点:
1.在这种缩写格式中有的属性值可以省略
sytle可以省略
weight可以省略
2.在这种缩写格式中style和weight的位置可以交换
3.在这种缩写格式中有的属性值是不可以省略的
size不能省略
family不能省略
4.size和family的位置是不能顺便乱放的
size一定要写在family的前面, 而且size和family必须写在所有属性的最后