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; } }

Copier après la connexion

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 : <code>

<a href="">button1</a> 
    <input type="button" value="提交"/>

Copier après la connexion

Après avoir cliqué sur le terminal mobile, un fond "sombre" apparaîtra à ce moment. , nous devons ajouter le code suivant au CSS : <code><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>

3. points de connaissance :

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" />

Copier après la connexion

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

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" />

Copier après la connexion

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" />

Copier après la connexion

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" />

Copier après la connexion

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" />

Copier après la connexion

`<link rel). ="icône de raccourci " href="/favicon.ico">`

Le modèle commun sur la page est donc le suivant : <link rel="shortcut icon" href="/favicon.ico">
<code>

<!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>

Copier après la connexion

4. Comment définir la famille de polices sur le terminal mobile

body{font-family: "Helvetica Neue", Helvetica, sans-serif;}

Copier après la connexion

5 : Passer un appel sur Android ou IOS Le code est le suivant :

<a href="tel:15602512356">打电话给:15602512356</a>

Copier après la connexion

Six : Envoyer un SMS (le système Winphone n'est pas valide)

<a href="sms:10010">发短信给: 10010</a>

Copier après la connexion

Sept : Appeler le système de téléphonie mobile Fonction de messagerie intégrée

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

<p><a href="mailto:tugenhua@126.com">发电子邮件</a></p>

Copier après la connexion

2. Remplissez l'adresse en copie carbone

Sous ; Téléphone mobile IOS : dans l'adresse du destinataire Commencez par ?cc=

Le code suivant :
 <code>

<p><a href="mailto:tugenhua@126.com?cc=879083421@qq.com">填写抄送地址</a></p>

Copier après la connexion

Sous téléphone android, comme suit Code :
<code>

<p><a href="mailto:tugenhua@126.com?879083421@qq.com">填写抄送地址</a></p>

Copier après la connexion

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 <code>

<a href="mailto:tugenhua@126.com?cc=879083421@qq.com&bcc=aa@qq.com">填上密件抄送地址</a>

Copier après la connexion

Sous Android le code suivant : <code><🎜><🎜>

<p><a href="mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com">填上密件抄送地址</a></p>

Copier après la connexion

4. 包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现。如下代码：

<p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现</a></p>

Copier après la connexion

5、包含主题，用?subject=可以填上主题。如下代码：

<p><a href="mailto:tugenhua@126.com?subject=【邀请函】">包含主题，可以填上主题</a></p>

Copier après la connexion

6、包含内容，用?body=可以填上内容(需要换行的话，使用%0A给文本换行)；代码如下：

<p><a href="mailto:tugenhua@126.com?body=我来测试下">包含内容，用?body=可以填上内容</a></p>

Copier après la connexion

7. 内容包含链接，含http(s)://等的文本自动转化为链接。如下代码：

<p><a href="mailto:tugenhua@126.com?body=http://www.baidu.com">内容包含链接，含http(s)://等的文本自动转化为链接</a></p>

Copier après la connexion

八：webkit表单输入框placeholder的颜色值改变：

如果想要默认的颜色显示红色，代码如下：

input::-webkit-input-placeholder{color:red;}

Copier après la connexion

如果想要用户点击变为蓝色，代码如下：

input:focus::-webkit-input-placeholder{color:blue;}

Copier après la connexion

九：移动端IOS手机下清除输入框内阴影，代码如下

input,textarea { 

   -webkit-appearance: none; 
}

Copier après la connexion

十：在IOS中禁止长按链接与图片弹出菜单

a, img { 

   -webkit-touch-callout: none;  
}

Copier après la connexion

二、calc基本用法

calc基本语法： .class {width: calc(expression);}
它可以支持加，减，乘，除; 在我们做手机端的时候非常有用的一个知识点;
优点如下：
1. 支持使用 “+”,”-“,”*” 和 “/” 四则运算。
2. 可以混合使用百分比(%),px,em,rem等作为单位可进行计算。
浏览器的兼容性有如下：
IE9+，FF4.0+，Chrome19+，Safari6+
如下测试代码： <code>

<p class="calc">我是测试calc</p>
 
.calc{ 

    margin-left:50px; 

    padding-left:2rem; 

    width:calc(100%-50px-2rem); 

    height:10rem; 
}

Copier après la connexion

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!

Résumé des connaissances sur HTML5

1 : Points de connaissances sur le développement mobile

1. Utiliser rem comme unité

2 Désactivez l'assombrissement de l'arrière-plan des étiquettes telles que a, bouton, entrée, optgroup,. select, textarea

<span style="font-size: 14px;"></span>

<span style="font-size: 14px;"></span>

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

`<span style="font-size: 14px;"><link rel). ="icône de raccourci " href="/favicon.ico"></span>`

<span style="font-size: 14px;"></span>

<span style="font-size: 14px;"></span>

<span style="font-size: 14px;"></span>

3. Remplissez l'adresse BCC, comme suit. suit :

4. 包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现。如下代码：

5、包含主题，用?subject=可以填上主题。如下代码：

6、包含内容，用?body=可以填上内容(需要换行的话，使用%0A给文本换行)；代码如下：

7. 内容包含链接，含http(s)://等的文本自动转化为链接。如下代码：

八：webkit表单输入框placeholder的颜色值改变：

九：移动端IOS手机下清除输入框内阴影，代码如下

十：在IOS中禁止长按链接与图片弹出菜单

二、calc基本用法

Résumé des connaissances sur HTML5

1 : Points de connaissances sur le développement mobile

1. Utiliser rem comme unité

2 Désactivez l'assombrissement de l'arrière-plan des étiquettes telles que a, bouton, entrée, optgroup,. select, textarea

<span style="font-size: 14px;"></span>

<span style="font-size: 14px;"></span>

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

<span style="font-size: 14px;"><link rel). ="icône de raccourci " href="/favicon.ico"></span>

<span style="font-size: 14px;"></span>

<span style="font-size: 14px;"></span>

<span style="font-size: 14px;"></span>

3. Remplissez l'adresse BCC, comme suit. suit :

4. 包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现。如下代码：

5、包含主题，用?subject=可以填上主题。如下代码：

6、包含内容，用?body=可以填上内容(需要换行的话，使用%0A给文本换行)；代码如下：

7. 内容包含链接，含http(s)://等的文本自动转化为链接。如下代码：

八：webkit表单输入框placeholder的颜色值改变：

九：移动端IOS手机下清除输入框内阴影，代码如下

十：在IOS中 禁止长按链接与图片弹出菜单

二、calc基本用法

`<span style="font-size: 14px;"><link rel). ="icône de raccourci " href="/favicon.ico"></span>`

十：在IOS中禁止长按链接与图片弹出菜单