Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung des Wissens über HTML5

Zusammenfassung des Wissens über HTML5

零到壹度
零到壹度Original
2018-03-21 14:10:051498Durchsuche

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. <br>

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

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

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 : <br><code><span style="font-size: 14px;"></span>

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

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

a,button,input,optgroup,select,textarea{ 
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
}

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

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

<br><br>Grundlegende Bedeutung von Attributen: <br> content=“width=device-width: <br> Steuern Sie die Größe des Ansichtsfensters. Gerätebreite ist die Breite des Geräts <br> initial-scale – anfängliche Skalierung <br> Mindestmaßstab – Der Mindestmaßstab, auf den der Benutzer zoomen darf Maximum-Scale – Der maximale Maßstab, auf den der Benutzer zoomen darf <br> 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" />

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

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

<br>

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

d1fcfb8f9523b994e6045370532a9389

<span style="font-size: 14px;">952758b7fa4d92e9c83c26d54e90e4a9</span>Die allgemeine Vorlage auf der Seite lautet also wie folgt: <br><br><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>

So definieren Sie die Schriftfamilie auf dem mobilen Endgerät<br>

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

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

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

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

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

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>

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: <br><br><code><span style="font-size: 14px;"></span>

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

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

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

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

<br>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>
Code>

<br>Unter Android: <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; 
}

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!

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