初識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小時內與您取得聯系。

整合營銷服務商