H5+class3

今天学习的内容主要包含了四大块:

  • 表单,以及一堆标签;
  • 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必须写在所有属性的最后

你可能感兴趣的:(H5+class3)