Maison >interface Web >tutoriel HTML >Résumé des connaissances sur HTML5
Résumé des connaissances sur HTML5
- 零到壹度original
- 2018-03-21 14:10:051523parcourir
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>
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, <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>
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><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>
<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" />
<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
<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 <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
<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>2. Remplissez l'adresse en copie carbone
<span style="font-size: 14px;"></span>
Sous ; Téléphone mobile IOS : dans l'adresse du destinataire Commencez par ?cc=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>
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><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>
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>
input::-webkit-input-placeholder{color:red;}如果想要用户点击变为蓝色，代码如下： <br>
input:focus::-webkit-input-placeholder{color:blue;}九：移动端IOS手机下清除输入框内阴影，代码如下
input,textarea {
-webkit-appearance: none;
}十：在IOS中 禁止长按链接与图片弹出菜单
a, img {
-webkit-touch-callout: none;
}二、calc基本用法
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!