家好，我是小編鵬仔，本次給大家分享一個如何給自己網站頁面添加一個手機掃碼訪問教程。

很多用戶通過電腦訪問了你的網站，可能某些他想手機查看，那么剛好用的這個功能，這個鵬仔簡單寫了下，電腦端屏幕大于1198的會顯示二維碼，小于則當做移動端或ipa隱藏不顯示。

本次需要引入jq，如果你的站點未引入jq，請自行引入jq，并下載 qrcode.min.js 引入

DEMO下載iqzhan.com/post/219.html

瀏覽器支持

支持該庫的瀏覽器有：IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等。

代碼如下

首先，通過上方，大家應該已經下載了qrcode，我們需要引入，當然，大家也可直接引入鵬仔的也是可以的，如下所示

JavaScript

<script type="text/javascript" src="http://www.iqzhan.com/zb_system/script/qrcode.min.js"></script>

接著，我們將css代碼放入你的css文件，這css鵬仔簡單做了美化效果

CSS

<style>
	.tp-qrcode{
		width: 120px;
		height: 140px;
		padding: 5px;
		box-sizing: border-box;
		position: fixed;
		top: 30%;
		right: 20px;
		background: #ffffff;
		border-radius: 6px;
		box-shadow: 0 0 4px rgba(0,0,0,.35);
		text-align: center;
		transition: all .3s;
		cursor: pointer;
	}
	.tp-qrcode:hover{
		top: 28%;
		transition: all .4s;
		box-shadow: 0 0 7px rgba(0,0,0,.6);
		font-weight: bold;
	}
	.tp-qrcode span{
		color: #a33636;
		font-size: 14px;
		line-height: 20px;
	}
	@media screen and (max-width: 1198px){
		.tp-qrcode{
			display: none;
		}
	}
</style>

放好css，我們再把HTML放到需要顯示的公共地方

Markup

<div class="tp-qrcode">
	<div id="qrcode"></div>
	<span>手機掃碼訪問</span>
</div>

最后一步，把JS代碼放到引入的公共JS中即可

JavaScript

<script type="text/javascript">
	var qrcode = new QRCode(document.getElementById("qrcode"), {
	    text: window.location.href,
	    width: 110,
	    height: 110,
	    colorDark : "rgba(0,0,0,.4)",
	    colorLight : "#ffffff",
	    correctLevel : QRCode.CorrectLevel.H
	});
</script>

<!-- text參數為當前頁面網址 -->

<!-- width和height分別為二維碼的寬高 -->

<!-- colorDark 為二維碼的顏色 -->

<!-- colorLight 為二維碼的背景顏色 -->

述

html文本格式化：文章主要講解HTML文本格式化相關的一些知識點：如何使用一些HTML標簽來進行基本的格式化，

例如使用<p>標簽包裹段落，<strong>標簽加粗文本等。需要注意的是，在進行HTML文本格式化時，應遵循語義化的原則，盡可能地使用具有明確含義的標簽來描述內容，而不是僅僅為了樣式而使用標簽。

標題和段落

HTML提供了六個級別的標題，從<h1>到<h6>。

<h1>標記用于頁面上最重要的標題，而<h6>標記用于最不重要的標題。 以下是如何使用<h1>標記創建頂級標題的示例：

<h1>This is a top-level heading.</h1>

要用HTML創建一個段落，可以使用<p>標記。 段落的實際內容將被放置在開始和結束<p>標簽之間，如下所示：

<p>This is a paragraph of text.</p>

粗體和斜體

要使HTML中的文本加粗，可以使用<strong>標記或<b>標記。

這兩個標記都用于指示所包含的文本應以粗體顯示。

這兩個標簽的區別在于，<strong>用于表示文本非常重要，而<b>用于表示出于風格目的，文本只是粗體。

以下是如何使用<strong>標記將文本加粗的示例：

<p><strong>This text is bold.</strong></p>

要使HTML中的文本變為斜體，可以使用<em>標記或<i>標記。 這兩個標記都用于指示所包含的文本應以斜體顯示。

這兩個標簽之間的差異類似于<strong>和<b>之間的差異<em>用于表示文本是強調的，而<i>用于表示出于風格目的，文本只是斜體。

以下是如何使用<em>標記使文本變為斜體的示例：

<p><em>This text is italic.</em></p>

下劃線和刪除線

要在HTML中給文本加下劃線，可以使用值為underline的CSS文本裝飾屬性。下面是一個例子：

<p style="text-decoration: underline;">This text is underlined.</p>

要在HTML中創建刪除線文本，可以使用值為line-through的CSS文本裝飾屬性。下面是一個例子：

<p style="text-decoration: line-through;">This text has a strikethrough.</p>

超鏈接

您可以使用<a>標記在HTML中創建超鏈接。href屬性指定鏈接應指向的URL。以下是一個示例：

<a href="https://www.example.com">This is a hyperlink.</a>

圖像標簽

對于圖像，可以使用<img>標記。src屬性指定圖像文件的URL，alt屬性為看不到圖像的用戶提供替代文本。下面是一個例子：

<img src="path/to/image.jpg" alt="This is an image.">

列表標簽

對于列表，HTML提供了幾個標記，包括用于無序列表的<ul>和用于有序列表的<ol>。下面是一個無序列表的例子：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

下面是一個有序列表的例子：

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

表格標簽

您可以使用<table>標記。在表中，可以使用<tr>標記定義行，使用<td>標記定義每行中的單元格。下面是一個例子：

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

總結

以上就是今天要講的內容，本文簡單介紹了HTML的文本格式化知識點，更多內容可以查看THTML官方文檔

如果覺得有用，歡迎明天再來，繼續合集的下一篇文章學習
遇到問題，私信我！！~~