Maison >interface Web >Tutoriel H5 >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 texte23efcc05e98690ceeb219581933e4231
Bouton radio< ;input type="radio">
case à cocher2213c9627c391f00ef101b1592023bcb
liste déroulante0d604a8d49c15d662edadd39f02212055a07473c87748fb1bf73f23d45547ab8
Champ de mot de passe< ;input type="password">
Bouton Soumettre54b28e0e73a12e4a8ed487872a6fb5b8
Bouton cliquable8e03557d3950bf880a2e4583affa2fab bouton0b8441e4390851031b18beb35bf01222
Champ masqué10a0c4c6fe334f1dd2642c4aa224944a
Bouton de réinitialisation7beb8c0274df7c48b92a2c4dbca28ca8
Champ de fichier3525558f8f338d4ea90ebf22e5cde2bc
Les nouveaux types d'entrée en HTML5 sont
<input type="number" name="num1" min="1" max="100" step="5" />
<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 : [24864c5449f228a950f333c68afb83703a6b7f9b1636a2992c3b1ea4316efbd3e9bee92a82a65519061abd649805f50cc67559f9433e1731ed8996149166e905] || [3a6b7f9b1636a2992c3b1ea4316efbd3e9bee92a82a65519061abd649805f50cc67559f9433e1731ed8996149166e9055c240a3df3c71155c3a7f60bdae70068和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)!