HTML5 と CSS3 に関するいくつかの「新しい」点

HTML5 には新しい入力 input タイプ、つまり type の後に値 1 が追加されました

テキストフィールド23efcc05e98690ceeb219581933e4231

ラジオボタンd11dad02a1f3abd212da65221b2dc681

チェックボックス7cdfc0c313ef525f3185487b9f9c7eeb

ドロップダウン リストd82a93561b8c925cdf17e3db74fa0b6f2b52f88be5a846aadc9f13f612d08417

パスワード フィールド794332e4da1b97221ff0ba8bc66903c4

送信ボタン54b28e0e73a12e4a8ed487872a6fb5b8クリック可能なボタン8e03557d3950bf880a2e4583affa2fab

画像ボタン0b8441e4390851031b18beb35bf01222

隠しフィールド10a0c4c6fe334f1dd2642c4aa224944a

リセットボタン4977d701ec40ee8a25c769a9e6575005

ファイル フィールド3525558f8f338d4ea90ebf22e5cde2bc

HTML5 の新しい入力タイプは次のとおりです

電子メール タイプ: フォーム送信時に電子メールの形式を確認するために使用されます 電子メール フィールドの値は自動的にフォーム送信時に検証されます
URL タイプ: URL アドレスの形式を検証するために使用されます
数値タイプ: に基づいて数値が選択されます。設定関数では、min 属性は最小値を設定し、max 属性は最大値を設定し、value 属性は現在の値を設定し、step 属性は毎回増加する値 (つまり、一部のブラウザではステップ値) を設定します。範囲タイプはまだサポートされていません。特定の範囲内の数値を含む必要がある入力フィールドに使用されます。min 属性は最小値を設定し、max 属性は最大値を設定します。 value 属性は現在の値を設定します。設定されていない場合は、そのデフォルト値が設定されます。範囲は 1-100 です

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

  日付と時刻のタイプ:

HTML5 には、日付と時刻を選択するための複数の新しい入力タイプがあります:

Date - 日、月、年を選択します

Month - 月、年を選択します

Week - 週と年を選択します

time - 時間（時間と分）を選択します

datetime - 時間、日、月、年を選択します(UTC 時間)

datetime-local - 時間、日、月、年 (現地時間) を選択します

検索タイプ: results="s" を追加した場合、サイト検索や Google 検索などの検索ドメインに使用されます。属性を付けると、検索ボックスの前に検索アイコンが追加されます

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

電話番号の種類: 使用します 入力内容が電話形式であるかどうかを確認するために、この要素はまだブラウザーでサポートされていません

色の種類: Aユーザーが色を選択するためにカラーピッカーが提供され、ユーザーが選択した色がこの要素に埋め込まれます

HTML5の新しいフォーム要素2

datalistは入力フィールドのオプションリストを指定します。

リストはdatalist内のoption要素を通じて作成されます。

データリストを入力フィールドにバインドする必要がある場合は、入力フィールドの list 属性を使用してデータリストの ID を参照してください:

keygen はユーザーを認証するための信頼できる方法を提供します。

keygen要素はキーペアジェネレーターです。フォームが送信されると、秘密キーと公開キーの 2 つのキーが生成されます。

秘密鍵はクライアントに保存され、公開鍵はサーバーに送信されます。公開キーは、後でユーザーのクライアント証明書を検証するために使用できます。

現在、ブラウザーによるこの要素のサポートは、セキュリティ標準として有用であるほど不十分です。

output は、計算やスクリプト出力など、さまざまな種類の出力に使用されます

CSS3 新しい属性 3

さまざまなコアのブラウザには、属性を混同しないように独自の標準があります。標準の前に次のようなプレフィックスが追加されます:

-moz- 主に firefox Firefox

-webikt- 主に chrome Google、

-o- 主に Apple コンピュータのブラウザで使用されます

CSS3いくつかの新しい属性

box-shadow (影効果)

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

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

Usage:

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

Description:

カラー値の数は固定されておらず、 FFのプライベートな書き込み方法はサポートされていません(1)。 20 20 20 20 - --> 境界線の幅は、それぞれ上、右、下、左の境界線に対応します。

(2)。現在、2 つのタイプのみが実装されています):

繰り返し -- - 背景の繰り返しと同様に、境界線の画像が並べて表示されます。

ストレッチ --- 境界線の画像が境界線全体をカバーするように引き伸ばされます

(3)。要素の境界線の太さは、0 以外および自動以外の値に設定する必要があります。

text-shadow(text-shadow)

text-shadow: [b10fb37415d019cfffa8c4d7366c607f126d373bd4fdc47f14c756d6371a621e和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）！