关于HTML5和CSS3的几个新增

      HTML5新增input输入类型,即typ后面的值1

文本域inputtyp="txt"

单选按钮inputtyp="radio"

复选框inputtyp="chckbox"

下拉列表slctoption

密码域inputtyp="password"

提交按钮inputtyp="submit"

可单击按钮inputtyp="button"

图像按钮inputtyp="imag"

隐藏域inputtyp="hiddn"

重置按钮inputtyp="rst"

文件域inputtyp="fil"

      HTML5新增的input输入类型有

  mail类型:用于验证mail的格式,当提交表单时会自动验证mail域的值

  url类型:用于验证URL地址的格式,当提交表单时会自动验证url域的值

  numbr类型:会根据你的设置提供选择数字的功能,min属性设置最小值、max属性设置最大值,valu属性设置当前值,stp属性设定每次增长的值(即步长值),某些浏览器还不支持

inputtyp="numbr"nam="num1"min="1"max=""stp="5"/

  rang类型:用于应该包含一定范围内数字值的输入域,其会以一个滑块的形式展现,min属性设置最小值、max属性设置最大值,valu属性设置当前值,如果没有设置,则其默认值的范围是1-

inputtyp="rang"nam="rang1"min="1"max="50"/

  日期和时间类型:

  HTML5拥有多个可供选取日期和时间的新输入类型:

  dat-选取日、月、年

  month-选取月、年

  wk-选取周和年

  tim-选取时间(小时和分钟)

  dattim-选取时间、日、月、年(UTC时间)

  dattim-local-选取时间、日、月、年(本地时间)

  sarch类型:用于搜索域,比如站点搜索或Googl搜索,为其加上rsults="s"属性,则会在搜索框前面加上一个搜索图标

inputtyp="sarch"nam="sarch1"/

input[typ="sarch"]{

-wbkit-apparanc:txtfild;

}

  tl类型:用于验证输入的是否是电话格式的内容,此元素现在还没有浏览器支持

  color类型:会提供一个颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中

  

      HTML5新增表单元素2

  datalist规定输入域的选项列表。

  列表是通过datalist内的option元素创建的。

  如需把datalist绑定到输入域,请用输入域的list属性引用datalist的id:

  kygn提供一种验证用户的可靠方法。

  kygn元素是密钥对生成器(ky-pairgnrator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。

  私钥(privatky)存储于客户端,公钥(publicky)则被发送到服务器。公钥可用于之后验证用户的客户端证书(clintcrtificat)。

  目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

  output用于不同类型的输出,比如计算或脚本输出

      CSS3新增属性3

  各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀,如:

-moz-主要是firfox火狐

  -wbikt-主要是chrom谷歌,

  -o-主要是用于苹果机上的浏览器

      CSS3有如下几个新增属性

  box-shadow(阴影效果)

box-shadow:20px10px0#;

  box-shadow:20px10px0#;

使用:

bordr:10pxsolid#;

-moz-bordr-bottom-colors:######aaa#bbb#ccc;

-moz-bordr-top-colors:######aaa#bbb#ccc;

-moz-bordr-lft-colors:######aaa#bbb#ccc;

-moz-bordr-right-colors:######aaa#bbb#ccc;

说明:

颜色值数量不固定,且FF的私有写法不支持缩写:-moz-bordr-colors:###;

  bordr-colors(为边框设置多种颜色)

代码:

-moz-bordr-imag:url(xam.png)rpat;

-wbkit-bordr-imag:url(xam.png)rpat;

说明:

(1).---边框的宽度,分别对应top,right,bottom,lft边框,改变宽度可以实现不同的效果;

(2).边框图片效果(目前仅实现了两种):

rpat---边框图片会平铺,类似于背景重复;

strtch---边框图片会以拉伸的方式来铺满整个边框;

(3).必须将元素的边框厚度设置为非0非auto值.

  txt-shadow(文本阴影)

txt-shadow:[颜色水平偏移纵向偏移模糊半径]

[水平偏移纵向偏移模糊半径颜色];

说明:

(1)颜色和模糊半径是可选的,当颜色未指定时,将使用文本颜色;当模糊半径未指定时,半径值为0;

(2)shadow可以是逗号分隔的列表,如:

txt-shadow:2px2px2px#ccc,3px3px3px#ddd;

(3)阴影效果会按照shadowlist中指定的顺序应用到元素上;

(4)这些阴影效果有可能相互重叠,但不会叠加文本本身;

(5)阴影可能会跑到容器的边界之外,但不会影响容器的大小.

 

  txt-ovrflow(文本截断)

txt-ovrflow:inhrit

llipsis

clip;

 

  word-wrap(自动换行)

word-wrap:normal

brak-word;

 

  bordr-radius(圆角边框)

-moz-bordr-radius:5px;

这个值为圆角的圆的半径值

  opacity(不透明度)

opacity:0.5;

这个值设置为0-1之间的数

 

  box-sizing(控制盒模型的组成模式)

box-sizing:contnt-box

bordr-box;

说明:

1.contnt-box:

使用此值时,盒模型的组成模式是,元素宽度=contnt+padding+bordr;

2.bordr-box:

使用此值时,盒模型的组成模式是,元素宽度=contnt(即使设置了padding和bordr,元素的宽度也不会变).

原文链接:







































北京白癜风到底能治好吗
北京中科白癜风医院爱心大使



转载请注明:http://www.guyukameng.com/html/11095.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了