Plusieurs 'nouveautés' concernant HTML5 et CSS3

HTML5 a un nouveau type d'entrée, c'est-à-dire la valeur 1 après le type

Champ de texte

Bouton radio< ;input type="radio">

case à cocher

liste déroulante

Champ de mot de passe< ;input type="password">

Bouton Soumettre

Bouton cliquable bouton

Champ masqué

Bouton de réinitialisation

Champ de fichier

Les nouveaux types d'entrée en HTML5 sont

Type d'e-mail : utilisé pour vérifier le format de l'e-mail. du champ email sera automatiquement vérifié lors de la soumission du formulaire
Type d'URL : utilisé pour vérifier le format de l'adresse URL La valeur sera automatiquement vérifiée lors de la soumission du formulaire. La valeur du champ url
Type de numéro : Il fournira la fonction de sélection des nombres en fonction de vos paramètres. L'attribut min définit la valeur minimale, l'attribut max définit la valeur maximale, l'attribut value définit la valeur actuelle et l'attribut step définit la valeur pour chaque augmentation (c'est-à-dire la valeur de pas). Certains navigateurs ne prennent pas en charge

Type de plage : utilisé pour la saisie. qui doit contenir des valeurs numériques dans une certaine plage Domaine, qui sera affiché sous la forme d'un curseur. L'attribut min définit la valeur minimale, l'attribut max définit la valeur maximale et l'attribut value définit la valeur actuelle. non définie, la plage de valeurs par défaut est 1-100

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

Types de date et d'heure :

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

HTML5 propose plusieurs nouveaux types d'entrée pour sélectionner les dates et les heures :

date - sélectionnez le jour, le mois, l'année

mois - sélectionnez le mois et l'année

semaine - sélectionnez la semaine et l'année

heure - sélectionnez l'heure (heures et minutes)

datetime - sélectionnez l'heure et le jour, le mois, l'année (heure UTC)

datetime-local - sélectionnez l'heure, le jour, le mois, l'année (heure locale)

type de recherche : utilisé pour les champs de recherche, tels que la recherche sur site ou la recherche Google, ajoutez-y l'attribut results="s", une icône de recherche sera ajoutée devant le champ de recherche

type de téléphone : utilisé pour vérifier si l'entrée est au format de téléphone. Cet élément est désormais Aucun navigateur ne prend en charge

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

type de couleur : un sélecteur de couleur sera fourni pour que l'utilisateur sélectionne une couleur, et l'utilisateur- la couleur sélectionnée sera remplie dans cet élément

HTML5 Nouvel élément de formulaire 2

Datalist spécifie la liste d'options du champ de saisie.

La liste est créée via l'élément option dans datalist.

Si vous devez lier la liste de données au champ de saisie, veuillez utiliser l'attribut list du champ de saisie pour référencer l'identifiant de la liste de données :

Keygen fournit un moyen d'authentifier les utilisateurs. Méthode fiable.

L'élément keygen est un générateur de paires de clés. Lorsque le formulaire est soumis, deux clés sont générées, l'une est la clé privée et l'autre est la clé publique.

La clé privée est stockée sur le client, et la clé publique est envoyée au serveur. La clé publique peut être utilisée ultérieurement pour vérifier le certificat client de l'utilisateur.

Actuellement, la prise en charge par les navigateurs de cet élément est suffisamment médiocre pour en faire une norme de sécurité utile.

La sortie est utilisée pour différents types de sortie, tels que la sortie de calcul ou de script

Nouvel attribut CSS3 3

Navigation dans divers noyaux Chaque navigateur a ses propres standards Afin de ne pas confondre les attributs, chaque entreprise ajoute un préfixe avant ses propres standards, tel que :

-moz- principalement firefox

-webikt-mainly C'est. chrome Google,

　-o- Principalement utilisé pour les navigateurs sur Mac

CSS3 a les nouveaux attributs suivants

　box-shadow (shadow effet)

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

Utilisation :

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

Instructions :

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;

Le nombre de couleur les valeurs ne sont pas fixes et la méthode d'écriture privée de FF ne prend pas en charge les abréviations : -moz-border-colors : #333 #444 #555;

Border-colors (définir plusieurs couleurs pour la bordure)

Code :

Explication :

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

(1 20 20 20 20 ---> , bordure gauche respectivement, changer la largeur peut obtenir différents effets ;

(2). Effets d'image de bordure (actuellement, seuls deux types sont implémentés) :

répéter --- l'image de bordure sera en mosaïque, similaire à l'arrière-plan Répéter ;

étirer --- l'image de la bordure sera étirée pour couvrir toute la bordure

(3). une valeur non automatique non nulle

text-shadow (ombre de texte)

<. 🎜>text-shadow : [] || [ ];

Description :

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