Résumé des connaissances sur HTML5
Cet article vous apporte un résumé des connaissances sur HTML5. Les amis qui en ont besoin peuvent s'y référer. J'espère qu'il pourra aider tout le monde. Jetons un coup d'œil avec l'éditeur ci-dessous.
1 : Points de connaissances sur le développement mobile
1. Utiliser rem comme unité
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }Définissez la taille de police de 100px pour les téléphones mobiles ; pour les téléphones mobiles de 320px, la correspondance est de 100px,
Les autres téléphones mobiles ont des proportions égales, par conséquent, s'il y a beaucoup de pixels sur le brouillon de conception, alors une fois convertis en ; rem, rem = design Les pixels du manuscrit/100 suffisent ;
2 Désactivez l'assombrissement de l'arrière-plan des étiquettes telles que a, bouton, entrée, optgroup,. select, textarea
Lors de l'utilisation de la balise a comme bouton sur le terminal mobile ou lorsque du texte est connecté, un fond "sombre" apparaîtra lorsque vous cliquerez sur le bouton, comme le code suivant : <br/></span><code><span style="font-size: 14px;"></span>
<a href="">button1</a>
<input type="button" value="提交"/>
Après avoir cliqué sur le terminal mobile, un fond "sombre" apparaîtra à ce moment. , nous devons ajouter le code suivant au CSS : <code><span style="font-size: 14px;"></span> </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>a,button,input,optgroup,select,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}</pre><div class="contentsignin">Copier après la connexion</div></div>
<span style="font-size: 14px;"></span>3. points de connaissance :
<span style="font-size: 14px;"></span>
1. La fenêtre de la page s'ajuste automatiquement à la largeur de l'appareil et il est interdit aux utilisateurs de redimensionner la page.<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
Signification de base des attributs :
content=”width=device-width :
Contrôlez la taille de la fenêtre d'affichage, la largeur de l'appareil est la largeur de l'appareil
échelle initiale - mise à l'échelle initiale
minimum-scale - L'échelle minimale sur laquelle l'utilisateur est autorisé à zoomer
maximum-scale - L'échelle maximale sur laquelle l'utilisateur est autorisé à zoomer
évolutif par l'utilisateur - si l'utilisateur peut évoluer manuellement
<span style="font-size: 14px;"></span>
2. Ignorer les numéros d'identification dans la page en tant que numéros de téléphone >3 Ignorer la reconnaissance des adresses e-mail dans la plate-forme Android<. 🎜><meta name="format-detection" content="telephone=no" />
4. Lorsqu'un site Web est ajouté au mode de lancement rapide de l'écran d'accueil, la barre d'adresse peut être masquée, uniquement pour iOS Safari
<meta name="format-detection" content="email=no" />
5. . Ajoutez le site Web à la méthode de lancement rapide de l'écran d'accueil, uniquement pour le style de la barre d'état supérieure de Safari sur iOS
<meta name="apple-mobile-web-app-capable" content="yes" />
6. icône favicon dans le répertoire racine pour empêcher les requêtes 404 (qui peuvent être surveillées à l'aide de fiddler. Vous devez ajouter un lien vers la page comme suit :
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<span style="font-size: 14px;"><link rel). ="icône de raccourci " href="/favicon.ico"></span>
Le modèle commun sur la page est donc le suivant : <span style="font-size: 14px;"><link rel="shortcut icon" href="/favicon.ico"></span>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
这里开始内容
</body>
</html>body{font-family: "Helvetica Neue", Helvetica, sans-serif;}<a href="tel:15602512356">打电话给:15602512356</a>
<a href="sms:10010">发短信给: 10010</a>
<span style="font-size: 14px;"></span>
1 Lorsque le spectateur clique sur ce lien, le navigateur appelle automatiquement le client par défaut. programme de messagerie et remplissez automatiquement la case du destinataire Sous l'adresse du destinataire<span style="font-size: 14px;"></span>
<p><a href="mailto:tugenhua@126.com">发电子邮件</a></p>
<span style="font-size: 14px;"></span>
Sous ; Téléphone mobile IOS : dans l'adresse du destinataire Commencez par ?cc=Le code suivant : <br/></span><code><span style="font-size: 14px;"></span>
<p><a href="mailto:tugenhua@126.com?cc=879083421@qq.com">填写抄送地址</a></p>
Sous téléphone android, comme suit Code : <code><span style="font-size: 14px;"></span>
<p><a href="mailto:tugenhua@126.com?879083421@qq.com">填写抄送地址</a></p>
3. Remplissez l'adresse BCC, comme suit. suit :
Sur les téléphones IOS : immédiatement après l'adresse CC, écrivez &bcc=, remplissez l'adresse BCC<br/></span><code><span style="font-size: 14px;"></span>
<a href="mailto:tugenhua@126.com?cc=879083421@qq.com&bcc=aa@qq.com">填上密件抄送地址</a>
Sous Android le code suivant : <code><span style="font-size: 14px;"></span></p><🎜><🎜>
<p><a href="mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com">填上密件抄送地址</a></p>
4. 包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现。如下代码：
<p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现</a></p>
5、包含主题，用?subject=可以填上主题。如下代码：
<p><a href="mailto:tugenhua@126.com?subject=【邀请函】">包含主题，可以填上主题</a></p>
6、包含内容，用?body=可以填上内容(需要换行的话，使用%0A给文本换行)；代码如下：
<p><a href="mailto:tugenhua@126.com?body=我来测试下">包含内容，用?body=可以填上内容</a></p>
7. 内容包含链接，含http(s)://等的文本自动转化为链接。如下代码：
<p><a href="mailto:tugenhua@126.com?body=http://www.baidu.com">内容包含链接，含http(s)://等的文本自动转化为链接</a></p>
八：webkit表单输入框placeholder的颜色值改变：
如果想要默认的颜色显示红色，代码如下： <br/></span>
input::-webkit-input-placeholder{color:red;}如果想要用户点击变为蓝色，代码如下： <br/></span>
input:focus::-webkit-input-placeholder{color:blue;}九：移动端IOS手机下清除输入框内阴影，代码如下
input,textarea {
-webkit-appearance: none;
}十：在IOS中 禁止长按链接与图片弹出菜单
a, img {
-webkit-touch-callout: none;
}二、calc基本用法
calc基本语法： <br/></span><span style="font-size: 14px;">.class {width: calc(expression);}</span>
它可以支持加，减，乘，除; 在我们做手机端的时候非常有用的一个知识点;
优点如下：
1. 支持使用 “+”,”-“,”*” 和 “/” 四则运算。
2. 可以混合使用百分比(%),px,em,rem等作为单位可进行计算。
浏览器的兼容性有如下：
IE9+，FF4.0+，Chrome19+，Safari6+
如下测试代码： <br/></span><code><span style="font-size: 14px;"></span>
<p class="calc">我是测试calc</p>
.calc{
margin-left:50px;
padding-left:2rem;
width:calc(100%-50px-2rem);
height:10rem;
}Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
