Heim > Artikel > Web-Frontend > Zusammenfassung des Wissens über HTML5
Zusammenfassung des Wissens über HTML5
- 零到壹度Original
- 2018-03-21 14:10:051434Durchsuche
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" />
<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!