Summary of knowledge about HTML5

This article brings you a summary of knowledge about HTML5. Friends who need it can refer to it. I hope it can help everyone. Let’s take a look with the editor below.

1: Mobile development knowledge points

1. Use rem as the unit

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

Set the font size of 100px for mobile phones; for 320px mobile phones, the matching is 100px,
Other mobile phones are matched proportionally; therefore, if there are many pixels on the design draft, then when converted to rem, rem = design draft Pixel/100 is enough;

##2. Disable a, button, input, optgroup, select, textarea and other label backgrounds to darken<span style="font-size: 14px;"></span>

When using the a tag as a button or text connection on the mobile terminal, a "dark" background will appear when clicking the button, such as the following code:
<span style="font-size: 14px;"></span>##<pre class='brush:php;toolbar:false;'>&lt;a href=&quot;&quot;&gt;button1&lt;/a&gt; &lt;input type=&quot;button&quot; value=&quot;提交&quot;/&gt;</pre>

After clicking on the mobile terminal, a "dark" background will appear. At this time, we need to add the following code to the css:

<span style="font-size: 14px;"></span><pre class='brush:php;toolbar:false;'>a,button,input,optgroup,select,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); }</pre>

3. Meta basic knowledge points: <span style="font-size: 14px;"></span>

1. The page window automatically adjusts to the device width, and disables users from scaling the page.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />

Basic meaning of attributes:

content=”width=device-width： Control the size of the viewport, device-width is the width of the device
initial-scale - initial scaling
minimum-scale - The minimum scale the user is allowed to zoom to
maximum-scale - the maximum scale the user is allowed to zoom to
user-scalable - whether the user can manually scale

2. Ignore identifying numbers in the page as phone numbers

<meta name="format-detection" content="telephone=no" />

3 .Ignore the recognition of email addresses in the Android platform

<meta name="format-detection" content="email=no" />

4. When a website is added to the home screen quick launch mode, the address bar can be hidden, only for ios safari

<meta name="apple-mobile-web-app-capable" content="yes" />

5. Add the website to the home screen quick start mode, only for the style of the top status bar of Safari on iOS

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

6. The favicon icon needs to be stored in the root directory of the website. To prevent 404 requests (which can be monitored using fiddler), you need to add the following link to the page:

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

##

<span style="font-size: 14px;"></span>So the common template on the page is as follows:

##<pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta content=&quot;width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no&quot; name=&quot;viewport&quot;&gt; &lt;meta content=&quot;yes&quot; name=&quot;apple-mobile-web-app-capable&quot;&gt; &lt;meta content=&quot;black&quot; name=&quot;apple-mobile-web-app-status-bar-style&quot;&gt; &lt;meta content=&quot;telephone=no&quot; name=&quot;format-detection&quot;&gt; &lt;meta content=&quot;email=no&quot; name=&quot;format-detection&quot;&gt; &lt;title&gt;标题&lt;/title&gt; &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot;&gt; &lt;/head&gt; &lt;body&gt; 这里开始内容 &lt;/body&gt; &lt;/html&gt;</pre><span style="font-size: 14px;"></span>4. How to define font-family on the mobile terminal

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

5: The code to make a call under Android or IOS is as follows:

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

Six: Send text messages (winphone system is invalid)

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

Seven: Call the email function that comes with the mobile phone system

##1 . When the viewer clicks this link, the browser will automatically call the default client email program and automatically fill in the recipient's address in the recipient box <span style="font-size: 14px;"></span>

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

2. Fill in the carbon copy address; <span style="font-size: 14px;"></span>

Under IOS mobile phone: start with ?cc= after the recipient address; The following code:

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

<span style="font-size: 14px;">In android phone, the following code: </span>

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

<span style="font-size: 14px;">3. Fill in the blind carbon copy address, the following code: </span>

Under IOS mobile phone: immediately after the carbon copy address, write &bcc=, fill in Upload the BCC address <span style="font-size: 14px;"></span>

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

<span style="font-size: 14px;"> under Android; the following code: </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的颜色值改变：

如果想要默认的颜色显示红色，代码如下：

input::-webkit-input-placeholder{color:red;}

如果想要用户点击变为蓝色，代码如下：

input:focus::-webkit-input-placeholder{color:blue;}

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

input,textarea { 

   -webkit-appearance: none; 
}

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

a, img { 

   -webkit-touch-callout: none;  
}

二、calc基本用法

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

The above is the detailed content of Summary of knowledge about HTML5. For more information, please follow other related articles on the PHP Chinese website!