关于HTML5和CSS3的几个“新增”

HTML5新增input输入类型，即type后面的值1

文本域 e67338802192d7bd5294b2aa965c9bc5

单选按钮 5531b4c9ceb3f990b641fa70a3e40caa

复选框 514d05be645eb7d51e331036aaf6fa36

下拉列表 221f08282418e2996498697df914ce4e5a07473c87748fb1bf73f23d45547ab8

密码域 ce75dd0c000c13b714121a0931ccd91b

提交按钮 b374d97eedc1ba0e17e06a9fd6f01874

可单击按钮 6e63ca93929ae453ed909631d485d875

图像按钮 00c8abc5a5c84b433bb1127721dd9557

隐藏域 6bfea39e2880ed1f176d4faec8788f49

重置按钮 7f241aeda2c1f982b89651aa5e22f137

文件域 a2dc5349fb8bb852eaec4b6390c03b14

  HTML5新增的input输入类型有

• 　　email 类型：用于验证email的格式，当提交表单时会自动验证email域的值

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

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

<input type="number" name="num1" min="1" max="100" step="5" />

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

<input type="range" name="range1" min="1" max="50" />

　　日期和时间类型：

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

　　date - 选取日、月、年

　　month - 选取月、年

　　week - 选取周和年

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

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

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

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

<input type="search" name="search1" />
input[type="search"]{
-webkit-appearance:textfield;
}

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

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

　　

   HTML5新增表单元素2

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

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

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

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

　　keygen 元素是密钥对生成器(key-pair generator)。当提交表单时，会生成两个键，一个是私钥，一个公钥。

　　私钥(private key)存储于客户端，公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

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

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

   CSS3新增属性3

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

       -moz- 主要是firefox火狐

　　-webikt-主要是chrome谷歌,

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

  CSS3有如下几个新增属性

　　box-shadow(阴影效果)

box-shadow: 20px 10px 0 #000;

　　box-shadow: 20px 10px 0 #000;

使用:

border: 10px solid #000;
   -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

说明: 

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

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

代码：

-moz-border-image: url(exam.png) 20 20 20 20 repeat;
   -webkit-border-image: url(exam.png) 20 20 20 20 repeat;

说明:

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

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

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

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

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

　　text-shadow(文本阴影)

text-shadow: [6a51c234445238b1086bb6cd01116418844c8f24c3ed4a141300513e07de4c8d50408fca1a3c73bd8fbd57db26ff838f8f3d16f2bf69c5a8100b90360c3df507] || [844c8f24c3ed4a141300513e07de4c8d50408fca1a3c73bd8fbd57db26ff838f8f3d16f2bf69c5a8100b90360c3df5076a51c234445238b1086bb6cd01116418];

说明:

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

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

   text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;

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

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

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

　

　　text-overflow(文本截断)

  text-overflow: inherit | ellipsis | clip ;

　　word-wrap(自动换行)

word-wrap: normal | break-word;

　　border-radius(圆角边框)

-moz-border-radius: 5px;

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

　　opacity(不透明度)

opacity: 0.5;

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

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

   box-sizing: content-box | border-box;

   说明:

   1. content-box: 

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

   2. border-box: 

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

以上就是关于HTML5和CSS3的几个“新增”的内容，更多相关内容请关注PHP中文网（www.php.cn）！