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

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

テキストフィールド

ラジオボタン

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

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

パスワード フィールド

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

画像ボタン

隠しフィールド

リセットボタン

ファイル フィールド

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

説明:

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