關於HTML5和CSS3的幾個'新增”

HTML5新增input輸入類型，即type後面的值1

文字域

單選按鈕

複選框

下拉清單

密碼域

提交按鈕

可點選按鈕

圖像按鈕

隱藏域

重置按鈕

檔案域

  HTML5新增的input輸入類型有

• 　　email 類型：用於驗證email的格式，當提交表單時會自動驗證email域的值

  ，當提交表單時會自動驗證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 - 選取週及年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-主要是谷歌瀏覽器 CSS幾個新增屬性

　　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;

說明:支援縮寫: -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. --> 邊框的寬度, 分別對應top, right, bottom, left邊框, 改變寬度可以實現不同的效果;

(2). 邊框圖片效果(目前僅實現了兩種): 

   repeat ---邊框圖片會平鋪, 類似背景重複;

   stretch --- 邊框圖片會以拉伸的方式來鋪滿整個邊框;

(3). 必須將元素的邊框厚度設為非0非auto值.

　　text-shadow(文字陰影)

text-shadow: [<顏色><水平偏移><縱向偏移><><3 = <3值偏移半徑><縱向偏移><模糊半徑><顏色>];

說明:

(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）！