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

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

文本域 <input type="text">

单选按钮 <input type="radio">

复选框 <input type="checkbox">

下拉列表 <select><option>

密码域 <input type="password">

提交按钮 <input type="submit">

可单击按钮 <input type="button">

图像按钮 <input type="image">

隐藏域 <input type="hidden">

重置按钮 <input type="reset">

文件域 <input type="file">

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;
} 

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; 

以上就是关于HTML5和CSS3的几个“新增”的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

查看更多关于关于HTML5和CSS3的几个“新增”的详细内容...