Zusammenfassung des Wissens über HTML5

零到壹度
Freigeben: 2018-03-21 14:10:05
Original
1485 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Zusammenfassung des Wissens über HTML5. Freunde, die es benötigen, können darauf zurückgreifen. Schauen wir uns das unten mit dem Herausgeber an.

1: Wissenspunkte für die mobile Entwicklung

1. Verwenden Sie rem als Einheit

  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; } }
Nach dem Login kopieren

Stellen Sie die Schriftgröße für Mobiltelefone auf 100 Pixel ein. Für Mobiltelefone mit 320 Pixeln beträgt die Übereinstimmung 100 Pixel.
Andere Mobiltelefone haben die gleichen Proportionen rem, rem = design Die Pixel des Manuskripts/100 reichen aus;

2 Deaktivieren Sie die Abdunkelung des Hintergrunds von Beschriftungen wie a, button, input, optgroup, select, textarea

Bei Verwendung des a-Tags als Schaltfläche auf dem mobilen Endgerät oder wenn Text verbunden ist, wird beim Klicken auf die Schaltfläche ein „dunkler“ Hintergrund angezeigt, z. B. der folgende Code :
<code><span style="font-size: 14px;"></span>

<a href="">button1</a> 
    <input type="button" value="提交"/>
Nach dem Login kopieren


Nach dem Klicken auf das mobile Endgerät erscheint zu diesem Zeitpunkt ein „dunkler“ Hintergrund , müssen wir den folgenden Code zum CSS hinzufügen:
<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">Nach dem Login kopieren</div></div>

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

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

1. Das Seitenfenster passt sich automatisch an die Gerätebreite an und Benutzern ist die Skalierung der Seite untersagt.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
Nach dem Login kopieren



Grundlegende Bedeutung von Attributen:
content=“width=device-width:
Steuern Sie die Größe des Ansichtsfensters. Gerätebreite ist die Breite des Geräts
initial-scale – anfängliche Skalierung
Mindestmaßstab – Der Mindestmaßstab, auf den der Benutzer zoomen darf
Maximum-Scale – Der maximale Maßstab, auf den der Benutzer zoomen darf
Vom Benutzer skalierbar – ob der Benutzer manuell skalieren kann

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

2. Ignorieren Sie identifizierende Nummern auf der Seite als Telefonnummern >3 Ignorieren Sie die Erkennung von E-Mail-Adressen in der Android-Plattform
<meta name="format-detection" content="telephone=no" />
Nach dem Login kopieren

<span style="font-size: 14px;"></span>4. Wenn eine Website zum Schnellstartmodus des Startbildschirms hinzugefügt wird, kann die Adressleiste ausgeblendet werden, nur für iOS Safari

<meta name="format-detection" content="email=no" />
Nach dem Login kopieren


5 . Fügen Sie die Website zur Schnellstart-Methode hinzu, nur für den Stil der oberen Statusleiste von Safari unter iOS

<meta name="apple-mobile-web-app-capable" content="yes" />
Nach dem Login kopieren


6 Muss auf der Website gespeichert werden Favicon-Symbol im Stammverzeichnis, um 404-Anfragen zu verhindern (die mit Fiddler überwacht werden können) Sie müssen der Seite wie folgt einen Link hinzufügen:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Nach dem Login kopieren

</span><link rel ="Verknüpfungssymbol " href="/favicon.ico"></h3>

<span style="font-size: 14px;"><link rel="shortcut icon" href="/favicon.ico"></span>Die allgemeine Vorlage auf der Seite lautet also wie folgt:

<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>
Nach dem Login kopieren

So definieren Sie die Schriftfamilie auf dem mobilen Endgerät

body{font-family: "Helvetica Neue", Helvetica, sans-serif;}
Nach dem Login kopieren

5: Einen Anruf auf Android oder IOS tätigen. Der Code lautet wie folgt:

<a href="tel:15602512356">打电话给:15602512356</a>
Nach dem Login kopieren

Sechs: SMS senden (Winphone-System ist ungültig) <span style="font-size: 14px;"></span>

<a href="sms:10010">发短信给: 10010</a>
Nach dem Login kopieren

Sieben: Rufen Sie das Mobiltelefonsystem auf. Integrierte E-Mail-Funktion <span style="font-size: 14px;"></span>

1. Wenn der Besucher auf diesen Link klickt, ruft der Browser automatisch den Standard-Client auf E-Mail-Programm und füllen Sie das Empfängerfeld automatisch aus. Unter der Adresse des Empfängers <span style="font-size: 14px;"></span>

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

2. Geben Sie die Durchschriftadresse <span style="font-size: 14px;"></span>

ein IOS-Handy: in der Adresse des Empfängers Beginnen Sie mit ?cc=; Der folgende Code:

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

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

Bei Android-Telefonen wie folgt Code:
<code><span style="font-size: 14px;"></span>

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

<span style="font-size: 14px;"></span>3 Geben Sie die BCC-Adresse ein folgt:


Auf IOS-Telefonen: Schreiben Sie direkt nach der CC-Adresse &bcc= und geben Sie die BCC-Adresse ein
<code><span style="font-size: 14px;"></span>

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


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

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

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

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

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

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

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

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

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

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

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

如果想要默认的颜色显示红色,代码如下:

input::-webkit-input-placeholder{color:red;}
Nach dem Login kopieren

如果想要用户点击变为蓝色,代码如下:

input:focus::-webkit-input-placeholder{color:blue;}
Nach dem Login kopieren

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

input,textarea { 

   -webkit-appearance: none; 
}
Nach dem Login kopieren

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

a, img { 

   -webkit-touch-callout: none;  
}
Nach dem Login kopieren

二、calc基本用法

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

Das obige ist der detaillierte Inhalt vonZusammenfassung des Wissens über HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage