登录  /  注册
首页 > web前端 > H5教程 > 正文

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

黄舟
发布: 2017-02-07 14:04:22
原创
1399人浏览过

html5新增input输入类型,即type后面的值1

文本域

单选按钮

复选框

下拉列表

密码域

提交按钮

可单击按钮

图像按钮

隐藏域

重置按钮

文件域

  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: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>];

说明:

(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色; 当<模糊半径>未指定时, 半径值为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)!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号