Zusammenfassung des Wissens über HTML5
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; } }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 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" />
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" />
<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" />
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>Nach dem Login kopierenSo 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:
<p><a href="mailto:tugenhua@126.com?cc=879083421@qq.com">填写抄送地址</a></p>
Nach dem Login kopierenBei 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 kopieren4. 包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现。如下代码：
<p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多个收件人、抄送、密件抄送人，用分号隔(;)开多个收件人的地址即可实现</a></p>
Nach dem Login kopieren5、包含主题，用?subject=可以填上主题。如下代码：
<p><a href="mailto:tugenhua@126.com?subject=【邀请函】">包含主题，可以填上主题</a></p>
Nach dem Login kopieren6、包含内容，用?body=可以填上内容(需要换行的话，使用%0A给文本换行)；代码如下：
<p><a href="mailto:tugenhua@126.com?body=我来测试下">包含内容，用?body=可以填上内容</a></p>
Nach dem Login kopieren7. 内容包含链接，含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 kopierenDas 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!
<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>body{font-family: "Helvetica Neue", Helvetica, sans-serif;}<a href="tel:15602512356">打电话给:15602512356</a>
<a href="sms:10010">发短信给: 10010</a>
<p><a href="mailto:tugenhua@126.com">发电子邮件</a></p>
<p><a href="mailto:tugenhua@126.com?cc=879083421@qq.com">填写抄送地址</a></p>
<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;
}<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;
}
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
