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

Posted 2020-08-06 一抹橄榄

html5和css3分别是目前最新的web前端编程的标准，加入了新的标准和要求。

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

文本域 <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;
  }

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

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

 2、HTML5新增表单元素

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

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

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

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

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

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

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

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

  <output id="result" onforminput="resCalc()"></output>

•  

3、CSS3新增属性 

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

如：-moz-  主要是firefox火狐

      -webikt-主要是chrome谷歌,

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

CSS3有如下几个新增属性：

•  box-shadow(阴影效果)

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

 

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

  使用:
     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;

 

• boder-image(图片边框)

  代码：
   -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, 元素的宽度也不会变).

示例代码