家好，我是小编鹏仔，本次给大家分享一个如何给自己网站页面添加一个手机扫码访问教程。

很多用户通过电脑访问了你的网站，可能某些他想手机查看，那么刚好用的这个功能，这个鹏仔简单写了下，电脑端屏幕大于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官方文档

如果觉得有用，欢迎明天再来，继续合集的下一篇文章学习
遇到问题，私信我！！~~