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.
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.
Andere Mobiltelefone haben die gleichen Proportionen rem, rem = design Die Pixel des Manuskripts/100 reichen aus;
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 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:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
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
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
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" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</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:
<!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
body{font-family: "Helvetica Neue", Helvetica, sans-serif;} 5: Einen Anruf auf Android oder IOS tätigen. Der Code lautet wie folgt:
<a href="tel:15602512356">打电话给:15602512356</a>
<a href="sms:10010">发短信给: 10010</a>
<p><a href="mailto:tugenhua@126.com">发电子邮件</a></p>
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>
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>
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>
Unter Android: <code><span style="font-size: 14px;"></span>
<🎜><🎜><🎜><p><a href="mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com">填上密件抄送地址</a></p>
<p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现</a></p>
<p><a href="mailto:tugenhua@126.com?subject=【邀请函】">包含主题，可以填上主题</a></p>
<p><a href="mailto:tugenhua@126.com?body=我来测试下">包含内容，用?body=可以填上内容</a></p>
<p><a href="mailto:tugenhua@126.com?body=http://www.baidu.com">内容包含链接，含http(s)://等的文本自动转化为链接</a></p>
如果想要默认的颜色显示红色，代码如下：
input::-webkit-input-placeholder{color:red;}如果想要用户点击变为蓝色，代码如下：
input:focus::-webkit-input-placeholder{color:blue;}input,textarea {
-webkit-appearance: none;
}a, img {
-webkit-touch-callout: none;
}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;
}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!
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
Verwendung des Zahlenformats
So registrieren Sie ein Bitcoin-Wallet
So lösen Sie das Problem der langsamen Übertragung von Serverdomänennamen
So fügen Sie HTML einen CSS-Stil hinzu
Wie zeichnet man ein Pert-Diagramm?
Der Unterschied zwischen null und NULL in der C-Sprache
