ホームページ > 記事 > ウェブフロントエンド > HTML5 と CSS3 に関するいくつかの「新しい」点
HTML5 と CSS3 に関するいくつかの「新しい」点
- 黄舟オリジナル
- 2017-02-07 14:04:221554ブラウズ
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 には、日付と時刻を選択するための複数の新しい入力タイプがあります:
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 つのキーが生成されます。
秘密鍵はクライアントに保存され、公開鍵はサーバーに送信されます。公開キーは、後でユーザーのクライアント証明書を検証するために使用できます。
-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）！