HTML5 には新しい入力 input タイプ、つまり type の後に値 1 が追加されました
テキストフィールド
ラジオボタン
チェックボックス< ;input type="checkbox">
ドロップダウン リスト <選択> <オプション>オプション> 選択>
パスワード フィールド
送信ボタンクリック可能なボタン
画像ボタン
隠しフィールド
リセットボタン
ファイル フィールド
HTML5 の新しい入力タイプは次のとおりです
HTML5 には、日付と時刻を選択するための複数の新しい入力タイプがあります:
Month - 月、年を選択します
Week - 週と年を選択します
time - 時間(時間と分)を選択します
datetime - 時間、日、月、年を選択します(UTC 時間)
datetime-local - 時間、日、月、年 (現地時間) を選択します
検索タイプ: results="s" を追加した場合、サイト検索や Google 検索などの検索ドメインに使用されます。属性を付けると、検索ボックスの前に検索アイコンが追加されます
電話番号の種類: 使用します 入力内容が電話形式であるかどうかを確認するために、この要素はまだブラウザーでサポートされていません
色の種類: 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"]{ -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: [
説明:
(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)!