Mehrere „Neue“ Dinge zu HTML5 und CSS3

HTML5 hat einen neuen Eingabeeingabetyp, d. h. den Wert 1 nach Typ

Textfeld23efcc05e98690ceeb219581933e4231

Optionsfeld< ;input type="radio">

Kontrollkästchen2213c9627c391f00ef101b1592023bcb

Dropdown-Liste221f08282418e2996498697df914ce4e5a07473c87748fb1bf73f23d45547ab8

Passwortfeld< ;input type="password">

Senden-Schaltfläche54b28e0e73a12e4a8ed487872a6fb5b8

Anklickbare Schaltfläche8e03557d3950bf880a2e4583affa2fab

Bild button0b8441e4390851031b18beb35bf01222

Ausgeblendetes Feld10a0c4c6fe334f1dd2642c4aa224944a

Reset-Button7beb8c0274df7c48b92a2c4dbca28ca8

Dateifeld3525558f8f338d4ea90ebf22e5cde2bc

Die neuen Eingabetypen in HTML5 sind

• E-Mail-Typ: Wird verwendet, um das Format der E-Mail zu überprüfen des E-Mail-Feldes wird beim Absenden des Formulars automatisch überprüft

• URL-Typ: Wird zur Überprüfung des Formats der URL-Adresse verwendet. Der Wert wird beim Absenden des Formulars automatisch überprüft. Der Wert des URL-Felds

• Zahlentyp: Bietet die Funktion, Zahlen gemäß Ihren Einstellungen auszuwählen. Das Min-Attribut legt den Mindestwert fest, das Max-Attribut legt den Maximalwert fest. Das Wertattribut legt den aktuellen Wert fest und das Schrittattribut legt den Wert für jede Erhöhung fest (d. h. den Schrittwert). Einige Browser unterstützen den Bereichstyp „

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

“ nicht Das sollte numerische Werte innerhalb eines bestimmten Bereichs enthalten, der in Form eines Schiebereglers angezeigt wird. Das Attribut „min“ legt den Mindestwert fest, das Attribut „max“ legt den Höchstwert fest und das Attribut „value“ legt den aktuellen Wert fest nicht festgelegt, der Standardwertbereich ist 1-100

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

Datums- und Uhrzeittypen:

HTML5 verfügt über mehrere neue Eingabetypen für die Auswahl von Datums- und Uhrzeitangaben:

Datum – Tag, Monat, Jahr auswählen

Monat – Monat und Jahr auswählen

Woche – Woche und Jahr auswählen

Zeit – Uhrzeit auswählen (Stunden und Minuten)

datetime – wählen Sie Uhrzeit und Tag, Monat, Jahr (UTC-Zeit)

datetime-local – wählen Sie Uhrzeit, Tag, Monat, Jahr (Ortszeit)

Suchtyp: Wird für Suchfelder verwendet, z. B. für die Website-Suche oder die Google-Suche. Fügen Sie das Attribut „results="s" hinzu. Vor dem Suchfeld wird ein Suchsymbol hinzugefügt

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

Tel-Typ: Wird verwendet, um zu überprüfen, ob die Eingabe im Telefonformat vorliegt. Dieses Element wird jetzt nicht vom Browser unterstützt.

Farbtyp: Dem Benutzer wird ein Farbwähler zur Verfügung gestellt, mit dem er eine Farbe auswählen kann. Die ausgewählte Farbe wird in dieses Element eingefüllt

HTML5 Neues Formularelement 2

Datalist gibt die Optionsliste des Eingabefelds an.

Die Liste wird über das Optionselement in datalist erstellt.

Wenn Sie die Datenliste an das Eingabefeld binden müssen, verwenden Sie bitte das Listenattribut des Eingabefelds, um auf die ID der Datenliste zu verweisen:

Keygen bietet eine Möglichkeit zur Authentifizierung von Benutzern. Zuverlässige Methode.

Das keygen-Element ist ein Schlüsselpaargenerator. Beim Absenden des Formulars werden zwei Schlüssel generiert, einer ist der private Schlüssel und der andere ist der öffentliche Schlüssel.

Der private Schlüssel wird auf dem Client gespeichert und der öffentliche Schlüssel wird an den Server gesendet. Der öffentliche Schlüssel kann später zur Überprüfung des Client-Zertifikats des Benutzers verwendet werden.

Derzeit ist die Browserunterstützung für dieses Element schlecht genug, um es zu einem nützlichen Sicherheitsstandard zu machen.

Ausgabe wird für verschiedene Arten der Ausgabe verwendet, wie z. B. Berechnungen oder Skriptausgaben

CSS3 neues Attribut 3

Durchsuchen verschiedener Kernel Jeder Browser hat seine eigenen Standards, um die Attribute nicht zu verwechseln, jedes Unternehmen fügt vor seinen eigenen Standards ein Präfix hinzu, wie zum Beispiel:

-moz- hauptsächlich Firefox

-webikt-hauptsächlich Es ist chrome Google,

　 -o- Wird hauptsächlich für Browser auf Macs verwendet

CSS3 hat die folgenden neuen Attribute

　box-shadow (shadow Effekt)

Box-Shadow: 20px 10px 0 #000;

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

Verwendung:

border: 10px solid #000;
   -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
   -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Anweisungen:

Die Anzahl der Farben Werte sind nicht festgelegt und die private Schreibmethode von FF unterstützt keine Abkürzungen: -moz-border-colors: #333 #444 #555;

Border-colors (mehrere Farben für den Rand festlegen)

Code:

-moz-border-image: url(exam.png) 20 20 20 20 repeat;
   -webkit-border-image: url(exam.png) 20 20 20 20 repeat;

Erklärung:

(1). 20 20 20 20 ---> , linker Rand, durch Ändern der Breite können unterschiedliche Effekte erzielt werden (derzeit sind nur zwei Typen implementiert):

Wiederholen --- Das Randbild wird angezeigt gekachelt, ähnlich dem Hintergrund Wiederholen;

strecken --- das Randbild wird gestreckt, um den gesamten Rand abzudecken

(3) Die Randstärke des Elements muss eingestellt werden ein nicht automatischer Wert ungleich Null

text-shadow (Textschatten)

Textschatten: [cb8807ba8e9216f584f01e80c3172415f81aa2397b281277ccf3832e982222ead8cb4fcec596c27d1a3c85e2ef35649545defc73b5f40c423b90a0282c3b0f91] ||. ];

Beschreibung:

(1) 6a51c234445238b1086bb6cd01116418和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）！