初识HTML，什么是HTML?

eb标准：

由于不同浏览器解析出来的网页效果可能不同，所以需要通过web标准对其进行约束使其一致，主要包括三个方面：

结构标准：

结构用于对网页元素进行整理和分类，主要指的是HTML。

表现标准：

表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

行为标准：

行为是指网页模型的定义及交互的编写，主要指的是 JavaScript。

初识HTML：

html 全称 Hyper Text Markup Language ，中文译为：“超文本标记语言” ，描述网页的一种语言。

HTML发展：

XHTML 是一个 W3C 标准，可扩展超文本标签语言（EXtensible HyperText Markup Language），更严格更纯净的 HTML 版本，作为一种 XML 应用被重新定义的 HTML。

HTML中的注释：

 <!-- 注释标签：注释的内容 -->

条件注释：

条件注释的作用是：定义只有Internet Explorer才执行条件注释中的html标签。


    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->

HTML骨架：

<!DOCTYPE html> <!-- 声明文档类型版本为html5 -->
<html lang="en"> <!-- 网页的跟标签,lang=""用来设置网页语言，其值还有zh-CN中文简体、fr法语等，设置后当系统设置语言和网页语言发生冲突时会提示是否翻译网页 -->
    <head> <!-- 网页的头部 -->
        <meta charset='UTF-8'> <!-- 声明字符编码，其值还有gbk和gb2312 -->
        <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 开启移动端视口 -->
        <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 开启ios快捷启动方式 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 设置iOS顶部通栏样式 -->
        <meta name="format-detection" content="telephone=no"> <!-- 遇到数字不转成电话号码 -->
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是针对IE浏览器做兼容的，ie=edge表示兼容edge，若后面ie=7，则表示兼容IE7 -->
        <meta name='keywords' content='This is a key words'> <!-- 网站搜索关键字 -->
        <meta name='description' content='this is description'> <!-- 描述网站的信息 -->
        <link rel="shortcut icon" type="image/x-icon" href="图片路径 "/> <!--  网站的图标，如果图标是gif图，则需要改：type="image/gif"，引入网站图标另一种方法：命名为favicon.ico文件放到网站根目录下 -->
        <link rel="stylesheet" type="text/css" href="css文件路径"/> <!-- 引用css文件 -->
        <base target="_blank"/> <!-- base标签，定义这个网页中a链接打开窗口的方式，其值还有_self -->
        <title>标题</title> <!-- 网站的标题 -->
        <style type="text/CSS">  /* 用来写CSS代码，type="text/CSS"可以省略 */
            div{width:100px; height:100px; color:white;}
        </style>
    </head>
    <body> <!-- 网页的主体 -->
        <h1>标题</h1> <!-- 标题标签，共六个级，分别为：h1~h6,大小逐级递减，h1在一个网页中只允许出现一次。 -->
        <p>段落</p> <!-- 段落标签 -->
        <hr/> <!-- 单线标签,所有单标签后面的关闭符均可以省略 -->
        <br/> <!-- 换行标签 -->
        </div></div> <!-- 无语义化标签布局用,上面的标签是语义化标签 -->
        <span>span</span> <!-- 无语义化标签分割用 -->                
        <strong>加粗</strong> <!-- 加粗标签 -->
        <b>加粗</b> <!-- 加粗标签 -->
        <i>倾斜</i> <!-- 倾斜标签 -->
        <em>倾斜</em> <!-- 倾斜标签 -->
        <s>删除线</s> <!-- 删除标签 -->
        <del>删除线</del> <!-- 删除标签 -->
        <u>下划线</u> <!-- 下划线标签 -->
        <ins>下划线</ins> <!-- 下划线标签 -->
        <img src="图片路径" alt="图片无法加载，提示文字" title="鼠标悬停，提示文体" border="2"/> <!-- 图像标签，border是边框属性，width和height属性设置图像的宽度和高度 -->
        <a href="跳转目标" target="_self">链接的命名</a> <!-- 链接标签，target属性为链接页面打开的方式，默认值_self为自身打开；_blank为新窗口打开；_new为新窗口打开，相同页面只会打开一个;_top跳出框架-->
        <ul> <!-- 无序列表 -->
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
        <ol type="A"> <!-- 有序列表,属性type可以控制li序号的样式，其属性值有：1、A、a、I、i-->
            <li>中国</li>
            <li>美国</li>
            <li>英国</li>
        </ol>
        <dl> <!-- 自定义列表 -->
            <dt>分类1</dt> <!-- 分类名称 -->
            <dd>分类1第1项</dd> <!-- 类的项 -->
            <dd>分类1第2项</dd>
            <dt>分类2</dt>
            <dd>分类2第1项</dd>
            <dd>分类2第2项</dd>
        </dl>
        <table> <!-- 定义表格，table标签实际就是一个四方块框框，里面有单元格才会显示出表格的样子 -->
        <caption>信息表</caption> <!-- 表格标题 -->
        <tr> <!-- 定义行 -->
            <th>姓名</th> <!-- 定义表头，表头文本有加粗居中效果 -->
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr> <!-- 定义行 -->
            <td>小明</td> <!-- 定义单元格，表格里面没有列-->
            <td>18</td>
            <td>男</td>
        </tr>
        </table>
    </body>
</html>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。

笔者：苦海123

其它问题可通过以下方式联系本人咨询：

QQ：810665436

微信：ConstancyMan

ue中pc端与移动端适配解决方案

0. 前言

当涉及屏幕适配方案时，我们常常被众多选择所困扰，如postcss-pxtorem、postcss-px2rem、px2rem-loader、postcss-plugin-px2rem等。然而，在实际测试中，由于不同的Vue和Webpack版本，很多这些方式已经无法使用，反而带来了更多麻烦。

为了尽快解决问题，我们应该始终以解决问题为导向，首先采用那些已经获得验证并能产生效果的方法。对于上述列举的方案，虽然没有一一测试过，但我们需要明确的是，抓住解决问题的关键。

针对移动端和PC端适配，我建议将两者进行拆分并进行工程化配置，以避免整体框架调整后在某些页面上出现轻微不协调。在某些情况下，你可能会注意到笔记本电脑上显示比例缩放后的细微差异，这可以通过插入【整体缩放自适应解决方案（阿里团队高清方案）的JS代码】来解决。

1.移动端适配方案

1.1 基础概念

viewport即视窗、视口，用于显示网页部分的区域，在PC端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视窗、视觉视窗、理想视窗。

布局视窗：在浏览器窗口css的布局区域，布局视口的宽度限制css布局的宽。为了能在移动设备上正常显示那些为pc端浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或其他值，一般都比移动端浏览器可视区域大很多，所以就有横向滚动条。
视觉视窗：终端设备显示网页的区域。
理想视窗：针对当前设备最理想的展示页面的视窗，不会出现横向滚动条，页面刚好全部展现在视窗内，理想视窗即终端屏幕的宽度。

viewport详细设置：

通过设置viewport可以设置页面大小，通过meta标签可以设置viewport信息。
viewport有以下几个属性：

width：视口的宽度，正整数或设备宽度device-width（width=device-width）
height：视口高度，正整数或device-height
initial-scale（initial-scale=1.0）：网页初始缩放值，小数缩小，反之放大（initial-scale=1.0）
maximum-scale（maximum-scale=1.0）：设置页面的最大缩放比例
minimum-scale（minimum-scale=1.0）：设置页面的最小缩放比例
user-scaleble（user-scalable=no）：用户是否可以缩放

移动端默认会缩放大尺寸的页面的，当我们把上述代码去掉之后，就会随着移动端缩放的比例走，而且还可以自由放大。

1.1.1 解决方案一viewport缩放

方案统计：

设置viewport进行缩放
PC端适配移动端可以通过html标签重meta name="viewport"调整视口比例，进行页面缩放。不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

代码原理：

根据设备屏幕的DPR（设备像素比，比如dpr=2时，表示1个CSS像素由2X2个物理像素点组成）动态设置 html 的font-size
同时根据设备DPR调整页面的缩放值，进而达到高清效果。

//  仅在移动端时候生效，或者浏览器手机模式
//  整体缩放自适应解决方案（阿里团队高清方案） 淘宝m端使用的解决方案
! function (e) {
    function t(a) {
      if (i[a]) return i[a].exports;
      var n = i[a] = {
        exports: {},
        id: a,
        loaded: !1
      };
      return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
    }
    var i = {};
    return t.m = e, t.c = i, t.p = "", t(0)
  }([function (e, t) {
    "use strict";
    Object.defineProperty(t, "__esModule", {
      value: !0
    });
    var i = window;
    t["default"] = i.flex = function (e, t) {
      var a = e || 100,
        n = t || 1,
        r = i.document,
        o = navigator.userAgent,
        d = o.match(/Android[\S\s]+AppleWebkit/(\d{3})/i),
        l = o.match(/U3/((\d+|.){5,})/i),
        c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
        p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
        s = i.devicePixelRatio || 1;
      p || d && d[1] > 534 || c || (s = 1);
      var u = 1 / s,
        m = r.querySelector('meta[name="viewport"]');
      m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m
        .setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" +
          u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
    }, e.exports = t["default"]
  }]);
  flex(100, 1);

//  高清方案默认1rem=100px,那么 btn的宽度就设置为:)
.btn {
    width:0.8rem
    height:1.2rem
}

根据设备屏幕的DPR,自动设置最合适的高清缩放。保证了不同设备下视觉体验的一致性。旧方案，屏幕越大，元素也越大，新方案，屏幕越大，看到的越多看得越多的理解：比如，一篇很长的文章在ip4上，一屏盛不了那么多内容，而在ip6plus上，可以全部看清楚，这是因为，新方案会根据dpr来缩放视口，大屏小屏的手机上，显示的字体大小都是一致的，当然在大屏上看到的东西就多咯～
有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）

【7】移动端开发自适应解决方案（阿里团队高清方案）

1.1.2 解决方案二—两套页面

同时兼任pc和移动适配

通过配置两套不同路由和判断是否是移动端实现

核心代码：router.addRoute(isMobile() ? mobileRoutes[1] : pcRoutes[1])；（区分路由）

1.1.3 解决方案三—postcss-pxtorem、amfe-flexible

搭配工程化，可以参考第二章【PC端适配方案】

npm i postcss-pxtorem --save-dev

//使用postcss-pxtorem
module.exports = {
    lintOnSave:true,
    css:{
        loaderOptions:{
            postcss:[
                require('postcss-pxtorem')({
                    rootValue:16,//根元素字体大小
                    unitPrecision:5, //允许rem单位增长的十进制数字
                    replace:true, //替换包含rems的规则，而不添加后备
                    mediaQuery:false, //允许在媒体查询中转换px
                    minPixelValue:0, //设置要替换的最小像素值
                    selectorBlackList:[], //忽略转换正则匹配项
                    propList:['*'], //可以从px转换为rem的属性，匹配正则
                    exclude:/node_modules/i  要忽略并保留为px的文件路径
                }),
            ]
        }
    }
}

2.PC端适配方案

vue项目使用element-ui框架Rem适配（postcss-pxtorem、amfe-flexible），自动转换px为rem，解决响应式问题

1366 * 768 ：普通液晶显示器 1920 * 1080：高清液晶显示器 2560 * 1440： 2K高清显示器 4096 * 2160： 4K高清显示器 1280 * 720：笔记本（1920*1080分辨率下系统默认推荐150%缩放比产生的尺寸）

大屏数据可视化项目通常用于放在电视或广告屏上展示用，而不允许出现滚动条

2.1. 适配痛点难点

设计稿按照1920*1080的分辨率，16:9的比例设计，实际开发中，document窗口不足16:9（高度减掉顶部tab及导航栏，地址栏等）不同分辨率：实际应用场景中，显示场景不同，不能固定写死px单位不同比例：不同的显示器宽高比与设计稿不一致

2.2. 什么是rem

rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。但是，项目中常见尺寸绘制采用的均是px，要改用rem一时半会缓不过来，而且可能还要换算转换，所以使用rem还是比较麻烦的，但是，我们可以通过插件，能够将项目中的px转换为rem，还可以自定义基数。

2.3. 安装依赖

npm install amfe-flexible // CSS单位自适应转换插件 负责更改根font-size
npm install postcss-pxtorem@^5.1.1 // 如果版本过高可以降版本下载5.1.1版本 负责将px转成rem

// 用途：echarts字体适配
/**
 * echarts字体自适应
 * @param {*} font 字号大小
 */
export function echartGetFontSize(font) {
    let docEl = document.documentElement,
      clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = clientWidth / 1920;
    return font * fontSize;
}

2.3. 引入amfe-flexible

由于 viewport 单位得到众多浏览器的兼容，lib-flexible 这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用 viewport 来替代此方。（待考证？）

amfe-flexible是lib-flexible的升级版

flexible就是根据不同的屏幕算出html的font-size，通过js来动态写meta标签

实上他做了这几样事情：

动态改写<meta>标签
给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
给<html>元素添加font-size属性，并且动态改写font-size的值

在main.js中引入amfe-flexible

import "amfe-flexible"

amfe-flexible 等价代码

// import '@/utils/rem.js'

// 在utils文件夹下创建rem.js
// 设置 rem 函数
function setRem() {
    // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
    const screenWidth = 1920
    const scale = screenWidth / 16
    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    // 得到html的Dom元素
    const htmlDom = document.getElementsByTagName('html')[0]
    // 设置根元素字体大小
    htmlDom.style.fontSize = htmlWidth / scale + 'px'
  }
  // 初始化
  setRem()
  // 改变窗口大小时重新设置 rem
  window.onresize = function() {
    setRem()
  }

2.4. 配置vue.config.js

配置postcss-pxtorem ,可在vue.config.js、postcsssrc.js、postcss.config.js、其中之一配置，权重从左到右降低，没有则新建文件，只需要设置其中一个即可.

/***
注意点：
（1）rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为1920，即rootValue设为192；
（2）propList是设置需要转换的属性，这边*为所有都进行转换。
***/
module.exports=function(){
    devServer:{
        port:3000,
        open:true
    },
    //rem配置
    css: {
        loaderOptions: {
         postcss: {
            plugins: [
              require('postcss-pxtorem')({
                  rootValue: 192, //根元素字体大小
                  propList: ['*'], //可以从px转换为rem的属性，匹配正则
                  // unitPrecision:5, //允许rem单位增长的十进制数字
                  // replace:true, //替换包含rems的规则，而不添加后备
                  // mediaQuery:false, //允许在媒体查询中转换px
                  // minPixelValue:0, //设置要替换的最小像素值
                  // selectorBlackList:[], //忽略转换正则匹配项
                  // exclude:/node_modules/i  要忽略并保留为px的文件路径
              })
            ]
         }
       }
    },
}

// 效果展示 在html上增加根font-size
<html lang="en” style="font-size: 192px;class="light-themes">

2.5. 总结

2.5.1 注意事项：

1. 不能使用行内样式

对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。

暂未找到可以转行内rem的插件，可根据下面地址的方式自己实现（未验证是否可行）。blog.csdn.net/weixin_3961…

2. 字号不使用rem

我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸，所以字体最好是用PX（大写）来表示，至于适应，我们可以写媒体查询。

.item {
    border-bottom: 1PX #8d8d8d dashed;
    font-size: 12PX;
    line-height: 16PX;
    @media screen and (min-width: 576PX) {
        font-size: 14PX;
        line-height: 18PX;
    }
    @media screen and (min-width: 768PX) {
        font-size: 16PX;
        line-height: 28PX;
    }
    @media screen and (min-width: 992PX) {
        font-size: 16PX;
        line-height: 32PX;
    }
    @media screen and (min-width: 1200PX) {
        font-size: 18PX;
        line-height: 64PX;
    }
}

PC端响应式媒体断点：

```css
   @media (min-width: 1024px){
    body{font-size: 18px}
   } /*>=1024的设备*/

   @media (min-width: 1100px) {
    body{font-size: 20px}
   } /*>=1100的设备*/
   @media (min-width: 1280px) {
    body{font-size: 22px;}
   } /*>=1280的设备*/

   @media (min-width: 1366px) {
    body{font-size: 24px;}
   }  

   @media (min-width: 1440px) {
     body{font-size: 25px !important;}
   } 

   @media (min-width: 1680px) {
    body{font-size: 28px;}
   } 
   @media (min-width: 1920px) {
    body{font-size: 33px;}
   } 
```

2.5.2 测试反馈：

已测试屏幕尺寸：1920*1080 、1366 * 768

问题：屏幕缩小，网页缩放，效果与原1920*1080不一致

//  仅在移动端时候生效，或者浏览器手机模式
//  整体缩放自适应解决方案（阿里团队高清方案）
! function (e) {
    function t(a) {
      if (i[a]) return i[a].exports;
      var n = i[a] = {
        exports: {},
        id: a,
        loaded: !1
      };
      return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
    }
    var i = {};
    return t.m = e, t.c = i, t.p = "", t(0)
  }([function (e, t) {
    "use strict";
    Object.defineProperty(t, "__esModule", {
      value: !0
    });
    var i = window;
    t["default"] = i.flex = function (e, t) {
      var a = e || 100,
        n = t || 1,
        r = i.document,
        o = navigator.userAgent,
        d = o.match(/Android[\S\s]+AppleWebkit/(\d{3})/i),
        l = o.match(/U3/((\d+|.){5,})/i),
        c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
        p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
        s = i.devicePixelRatio || 1;
      p || d && d[1] > 534 || c || (s = 1);
      var u = 1 / s,
        m = r.querySelector('meta[name="viewport"]');
      m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m
        .setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" +
          u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px"
    }, e.exports = t["default"]
  }]);
  flex(100, 1);

2.5.3其他问题：

如果没效果，查看根元素是否添加上了fongt-size，为添加的话查看css预处理器，如果是sass改成node-sass；我这边使用的版本为：

“node-sass”: “^4.9.0”,
“sass-loader”: “^7.1.0”

大屏改进方案：
限制rem的最大值
通过媒体查询，限制内容最大宽度

作者：幸运_
链接：https://juejin.cn/post/7278646930174165050

说明

最近在项目上有个移动端（uni-app）的需求，就是要在移动端APP上的vue页面中通过web-view组件来调用html页面，并且要实现在html页面中可以点击一个元素来调用vue页面中uni的API（扫码接口），同时也可以在vue页面中也可以调用html页面中的js函数并进行传参。

使用环境

1. HBuilderX版本：2.8.11.20200907

2. V3编译器

html页面调用vue页面中uni的API

引用依赖的文件

在 web-view 加载的 HTML 中调用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK

<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

注意：这些 JS 文件是在 web-view 加载的那个 HTML 文件中引用的，而不是 uni-app 项目中的文件。

监听 web-view 的 message 事件

监听 web-view 组件的 message 事件，然后在事件回调的 event.detail.data 中接收传递过来的消息。

<template>  

    <view>  

        <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  

    </view>  

</template>  

<script>  

    export default {  

        methods: {  

            handleMessage(evt) {  

                console.log('接收到的消息：' + JSON.stringify(evt.detail.data));  

            }  

        }  

    }  

</script>

调用的时机

在引入上面的依赖文件后，需要在HTML中监听UniAppJSBridgeReady，事件触发后，

才能安全调用uni的API。

<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

<script>

    document.querySelector('.btn-list').addEventListener('click', function(evt) {  

        var target = evt.target;  

        if (target.tagName === 'BUTTON') {  

            var action = target.getAttribute('data-action');  

            if(action === 'navigateTo') {  

				uni.postMessage({  

					data: {  

						action: 'postMessage'  

					}  

				});   

            }  

        }  

    }); 

</script>

上面代码的意思就是在html页面中点击按钮列表中的某个按钮，

触发了uni.postMessage接口，进而调用了vue页面methods中的handleMessage方法，

并将参数data传给了vue页面。

在vue页面中调用html页面的js函数

示例代码：

var currentWebview = this.$mp.page.$getAppWebview().children()[0];
currentWebview.evalJS("htmljsfuc('"+res.result+"')");

其中的htmljsfuc就是要在html页面中定义的js函数。

完整代码示例：

在线咨询

上一篇：如何快速找到平行网页内容的互译页面
下一篇：php下如何简单快捷的实现邮件发送

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商