Maison > Article > interface Web > 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. <br>
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, <br>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 ;<br>
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><code><span style="font-size: 14px;"></span>
<a href="">button1</a> <input type="button" value="提交"/>
<br>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>
a,button,input,optgroup,select,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
<span style="font-size: 14px;"></span>3. points de connaissance : <br>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
<br><br>Signification de base des attributs : <br> content=”width=device-width : <br> Contrôlez la taille de la fenêtre d'affichage, la largeur de l'appareil est la largeur de l'appareil <br> échelle initiale - mise à l'échelle initiale <br> minimum-scale - L'échelle minimale sur laquelle l'utilisateur est autorisé à zoomer maximum-scale - L'échelle maximale sur laquelle l'utilisateur est autorisé à zoomer <br> évolutif par l'utilisateur - si l'utilisateur peut évoluer manuellement
<meta name="format-detection" content="telephone=no" />
<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 <br>
<meta name="apple-mobile-web-app-capable" content="yes" />
<br>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;">619d8a9abd4fa482f3c3e7782166df8f</span>
Le modèle commun sur la page est donc le suivant : <span style="font-size: 14px;">952758b7fa4d92e9c83c26d54e90e4a9</span>
<br><span style="font-size: 14px;"><br></span>
<code><span style="font-size: 14px;"></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>4. Comment définir la famille de polices sur le terminal mobile
<br>
body{font-family: "Helvetica Neue", Helvetica, sans-serif;}5 : Passer un appel sur Android ou IOS Le code est le suivant :
<br>
<a href="tel:15602512356">打电话给:15602512356</a>Six : Envoyer un SMS (le système Winphone n'est pas valide)
<a href="sms:10010">发短信给: 10010</a>Sept : Appeler le système de téléphonie mobile Fonction de messagerie intégrée
<p><a href="mailto:tugenhua@126.com">发电子邮件</a></p>2. Remplissez l'adresse en copie carbone
Le code suivant : <br><br>
<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 : <br><code><span style="font-size: 14px;"></span>
<p><a href="mailto:tugenhua@126.com?879083421@qq.com">填写抄送地址</a></p>
Sur les téléphones IOS : immédiatement après l'adresse CC, écrivez &bcc=, remplissez l'adresse BCC<br><code><span style="font-size: 14px;"></span>
<a href="mailto:tugenhua@126.com?cc=879083421@qq.com&bcc=aa@qq.com">填上密件抄送地址</a>
<br>Sous Android le code suivant : <code><span style="font-size: 14px;"></span>
<p><a href="mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com">填上密件抄送地址</a></p>
<p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多个收件人、抄送、密件抄送人,用分号隔(;)开多个收件人的地址即可实现</a></p>
<p><a href="mailto:tugenhua@126.com?subject=【邀请函】">包含主题,可以填上主题</a></p>
<p><a href="mailto:tugenhua@126.com?body=我来测试下">包含内容,用?body=可以填上内容</a></p>
<p><a href="mailto:tugenhua@126.com?body=http://www.baidu.com">内容包含链接,含http(s)://等的文本自动转化为链接</a></p>
如果想要默认的颜色显示红色,代码如下: <br>
input::-webkit-input-placeholder{color:red;}
如果想要用户点击变为蓝色,代码如下: <br>
input:focus::-webkit-input-placeholder{color:blue;}
input,textarea { -webkit-appearance: none; }
a, img { -webkit-touch-callout: none; }
calc基本语法: <br><span style="font-size: 14px;">.class {width: calc(expression);}</span>
<br>它可以支持加,减,乘,除; 在我们做手机端的时候非常有用的一个知识点; <br>优点如下: <br>1. 支持使用 “+”,”-“,”*” 和 “/” 四则运算。 <br>2. 可以混合使用百分比(%),px,em,rem等作为单位可进行计算。 <br>浏览器的兼容性有如下: <br>IE9+,FF4.0+,Chrome19+,Safari6+ <br>如下测试代码: <br><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!