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

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

テキストフィールド

ラジオボタン

チェックボックス< ;input type="checkbox">

ドロップダウン リスト <選択> <オプション>

パスワード フィールド

送信ボタンクリック可能なボタン

画像ボタン

隠しフィールド

リセットボタン

ファイル フィールド

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

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

• ログイン後にコピー
  日付と時刻のタイプ:

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

Month - 月、年を選択します

Week - 週と年を選択します

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

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

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

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

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

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

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

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

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

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

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

-moz- 主に firefox Firefox

-webikt- 主に chrome Google、

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

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

 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: [ < ;水平オフセット> <垂直オフセット> <ぼかし半径> ;] || [ <水平オフセット> <垂直オフセット> <ぼかし半径> <カラー> ];

説明:

(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中文网（m.sbmmt.com）！