整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          ASP.NET MVC知識(shí)盤點(diǎn):視圖

          ASP.NET MVC知識(shí)盤點(diǎn):視圖

          Razon語法

          使用@符號(hào)后接C#或VB.NET語句的方式。

          基本規(guī)則

          1)變量

          @后直接變量即可

          2)代碼塊

          為使用表達(dá)式或多行代碼,@后跟大括號(hào)將多行代碼包括在大括號(hào)中

          3)“+”

          對(duì)于加號(hào)連接的兩個(gè)字符串變量或?qū)傩裕褂眯±ㄌ?hào)將他們括起來

          4)插入HTML或文字

          每一行前面加上“@:”

          5)使用注釋

          使用@*和*@將要注釋的部分包起來

          6)用@@在頁面上顯示@

          @using

          在一個(gè)View中引入此頁所需程序集的命名空間。

          還可以在web.config中配置命名空間,不過將對(duì)所有的View起作用。

          <system.web.webPages.razor>
           <pages pageBaseType="System.Web.Mvc.WebViewPage">
           <namespaces >
           <add namespace="System.Web.Mvc"/>
           <add namespace="WebApplication.Models"/>
           </namespaces>
           </pages>
          </system.web.webPages.razor>
          

          @model

          指定頁面所用模型的類型。

          @help

          使用自定義函數(shù)。這種方法有可能將一部分?jǐn)?shù)據(jù)處理邏輯放到了頁面中,所以盡量不用。

          例子:

          定義函數(shù)

          @helper CheckHelp(int i1,int i2)
           {
           if (i1 > i2)
           {
           @i1
           }
           else
           {
           @i2 
           }
          	}
          

          使用函數(shù)

          <h3>@CheckHelp(10,1111)</h3>
          

          @functions

          定義一個(gè)方法供當(dāng)前頁使用,若使用IHtmlString作為方法的返回值,則可將其回傳給當(dāng)前頁。

          例子:

          定義函數(shù)

          @functions 
           {
           public int CheckFunc(int i1, int i2)
           {
           if (i1 > i2)
           {
           return i1;
           }
           else
           {
           return i2;
           }
           }
          	}
          

          使用函數(shù)

          <h3>@CheckFunc(10, 12111)</h3>
          

          2 HTML輔助方法

          使用方式為@后跟輔助方法,注意沒有“;”,否則分號(hào)也會(huì)顯示在頁面上。

          2.1輸出超鏈接

          ActionLink

          有幾個(gè)重載方法,選參數(shù)最多的一個(gè)

          public static MvcHtmlString ActionLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string protocol, string hostName, string fragment, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes);

          linkText:超連接名稱

          actionName:操作名稱

          controllerName:控制器名稱

          protocol:URL 協(xié)議,如“http”或“https”。

          hostName:URL 的主機(jī)名

          fragment:URL 片段名稱(定位點(diǎn)名稱)

          routeValues:路由參數(shù)

          htmlAttributes:HTML 特性

          例:

          @Html.ActionLink("一個(gè)連接", "About")
          

          對(duì)應(yīng)的html代碼

          <a href="/MVCPointApp/Home/About">一個(gè)連接</a>
          

          RouteLink

          有幾個(gè)重載方法,選參數(shù)最多的一個(gè)

          public static MvcHtmlString RouteLink(this HtmlHelper htmlHelper, string linkText, string routeName, string protocol, string hostName, string fragment, RouteValueDictionary routeValues, IDictionary<string, object> htmlAttributes);

          routeName:路由名稱

          其他參數(shù)同ActionLink

          2.2輸出表單

          還可以使用強(qiáng)類型的輔助方法,一般是以For結(jié)尾。

          例子

          1)顯示屬性驗(yàn)證信息

          控制器

          public ActionResult TestViewData(ModelF mf)
           {
           ViewData.Model=new ModelF { Field=mf.Field, Field2=mf.Field2 };
           return View("Index");
           }
          

          模型

          public class ModelF
           {
           public string Field { get; set; }
           [Range(typeof(DateTime), "1/1/2018", "1/1/2019")]
           public DateTime Field2 { get; set; }
          	}
          

          視圖Index.cshtml

          @using (Html.BeginForm("TestViewData", "Home"))
           {
           @Html.ValidationSummary()
           <input id="filed" name="Field2" type="text" placeholder="請(qǐng)輸入" value="" />
           <input type="submit" value="提交" />
          	}
          

          測(cè)試,輸入1/1/2020,執(zhí)行結(jié)果為:

          為了能顯示字段的中文名稱使用DisplayName

          public class ModelF
           {
           public string Field { get; set; }
           [Range(typeof(DateTime), "1/1/2018", "1/1/2019")]
           [DisplayName("[這個(gè)字段]")]
           public DateTime Field2 { get; set; }
          	}
          

          執(zhí)行結(jié)果為

          2)設(shè)置標(biāo)簽特性值

          由于class是C#保留關(guān)鍵字,因此設(shè)置class特性時(shí)要使用@

          @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class="loginForm" }))
          { }
          

          HTML輔助方法會(huì)將下劃線渲染為連字符,因此要表達(dá)含有連字符的特性,那么使用下劃線

          Html.BeginForm("Login", "Account", FormMethod.Post, new { vla_input=true})
          

          2.3加載分部視圖

          3 Url輔助方法

          返回URI字符串

          4 視圖定位

          · 視圖放在Views文件夾下

          · Views文件夾的子文件夾名稱為控制器名稱

          · 視圖名稱可以是控制器操作方法名稱也可以不是,若不是控制器操作方法名稱,控制器返回視圖時(shí)要指定視圖名。

          · Views文件夾下的Shared保存多個(gè)控制器共享的視圖

          視圖定位規(guī)則是,先在Views文件夾中找對(duì)應(yīng)控制器及控制器方法的視圖,沒有找到就到Shared文件夾下找。

          5頁面布局

          · Views文件夾下_ViewStart.cshtml文件指定默認(rèn)的模板,這個(gè)視圖先于任何試圖運(yùn)行。

          · 使用WebPageBase.Layout加載布局模板

          · 使用@Html.Partial幫助方法加載部分視圖

          · 使用@section定義指定內(nèi)容的節(jié),然后使用WebPageBase.RenderSection加載指定的節(jié),使用public HelperResult RenderSection(string name, bool required);required=true,那么節(jié)必須已經(jīng)定義,否則拋異常。

          · @Styles.Render和@Scripts.Render捆綁和壓縮css、js

          捆綁和壓縮css與js

          App_Start文件夾下BundleConfig類中

          public static void RegisterBundles(BundleCollection bundles)
          {
          //多個(gè)文件用逗號(hào)分隔
          bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
           "~/Scripts/jquery.cookie.js",
           "~/Scripts/jquery.hoverDelay.js",
           "~/Scripts/jquery.pagination.js",
           "~/Scripts/jquery.form.js",
           "~/Scripts/json2.js",
           "~/Scripts/hydss.js",
          	 "~/Scripts/hydss.utility.js"));
          	
          bundles.Add(new StyleBundle("~/Content/css/base").Include(
           "~/Content/css/common.css",
           "~/Content/css/dev.css"));
          }
          

          頁面中使用已經(jīng)捆綁并壓縮的css和js,使用規(guī)則是:css文件置頂、js文件置地

          @Styles.Render("~/Content/css/base")
          @Scripts.Render("~/bundles/jqueryval")
          

          覆蓋默認(rèn)布局模板

          使用WebPageBase.Layout加載模板覆蓋_ViewStart.cshtml文件指定默認(rèn)的模板

          例如:

          _ViewStart.cshtml文件如下

          @{
           Layout="~/Views/Shared/_Layout.cshtml";
          }
          

          Index.cshtml文件如下

          @{
           ViewBag.Title="Home Page";
           Layout="~/Views/Shared/_LayoutOther.cshtml";
          }
          <div class="jumbotron">
          	@*具體內(nèi)容*@
          </div>
          

          如果沒有Layout="~/Views/Shared/_LayoutOther.cshtml";這行代碼,那么此視圖文件將使用_ViewStart.cshtml中的_Layout.cshtml這個(gè)模板,但這里Index.cshtml文件使用的是另一個(gè)模板_LayoutOther.cshtml

          使用實(shí)例

          實(shí)際項(xiàng)目中可能會(huì)有不止一種布局,針對(duì)多種布局,既能滿足這種需求要能盡可能地代碼復(fù)用。

          創(chuàng)建父模板_Layout.cshtml

          <!DOCTYPE html>
          <html>
          <head>
           <title>@ViewBag.Title</title>
           <link rel="icon" href="~/favicon.ico" />
           <link rel="shortcut Icon" href="~/favicon.ico" />
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
           <meta http-equiv="imagetoolbar" content="no" />
           <meta name="apple-mobile-web-app-capable" content="yes" />
           <meta name="keywords" content="詞1 詞2" />
           <meta name="description" content="網(wǎng)站的主題" />
           @Styles.Render("~/Content/css/base")
          	@Scripts.Render("~/bundles/jquery")
          	@*加載HeaderSection節(jié)*@
           @RenderSection("HeaderSection", false)
          </head>
          <body>
           @*加載主體*@
           @RenderBody()
           <img id="loading" style="display:none;position:fixed;top:50%;left:50%;" src="@Url.Content("~/Content/images/loading.gif")" title="加載中..." alt="加載中..." />
           <a href="javascript:void(0);" id="backToTop" title="回到頂部"></a>
           @*加載腳本*@
           @Scripts.Render("~/bundles/jqueryval")
           @*加載FooterSection節(jié)*@
          	@RenderSection("FooterSection", false)
          </body>
          </html>
          

          創(chuàng)建子模板_LayoutOther.cshtml

          @{
           Layout="~/Views/Shared/_Layout.cshtml";
          }
          @*定義HeaderSection節(jié)*@
          @section HeaderSection{
           @RenderSection("HeaderSection", false)
          }
          @*加載頁頭*@
          @Html.Partial("_header")
          @*加載主體*@
          @RenderBody()
          @*加載頁腳*@
          @Html.Partial("_footer")
          @*定義FooterSection節(jié)*@
          @section FooterSection{
           @RenderSection("FooterSection", false)
          }
          

          分析

          _LayoutOther.cshtml視圖使用了_Layout.cshtml視圖文件,_Layout.cshtml中@RenderSection來加載FooterSection和HeaderSection節(jié),而這個(gè)節(jié)定義在_LayoutOther.cshtml中,不過沒有具體內(nèi)容;_LayoutOther.cshtml中定義的FooterSection和HeaderSection又各自加載其他也面定義的FooterSection和HeaderSection節(jié),所以可以在使用_LayoutOther.cshtml中靈活定義FooterSection和HeaderSection節(jié),可以想象這樣一個(gè)場(chǎng)景,每個(gè)頁面都需要加載js文件,而他們既有共用的js文件,又有非共用的js文件,那么可以在使用_LayoutOther.cshtml的視圖中定義section 節(jié)來加載只有此頁面使用的js文件,而把公共的js文件放在_Layout.cshtml視圖文件中

          例如Index.cshtml定義@section FooterSection{

          @Scripts.Render("~/bundles/index")

          }

          這個(gè)節(jié)加載只供Index.cshtml這個(gè)頁面實(shí)用的js,這樣其他不需要這個(gè)js的頁面就不必加載這個(gè)js,從而達(dá)到減少頁面加載文件的目的進(jìn)而優(yōu)化了頁面。

          6加載分部視圖

          1)控制器返回分部視圖

          配合@Html.Action方法使用控制器操作返回分部視圖

          視圖中使用@Html.Action("TestPy"),控制器如下

          public ActionResult TestFrom()
           {
           return PartialView("TestPy");
           }
          

          或者在視圖中使用@{Html.RenderAction("TestPy");},注意這種內(nèi)聯(lián)視圖和Html.Action使用的區(qū)別。

          2)使用html幫助方法

          使用Html.Partial直接調(diào)用部分視圖而不是通過控制器操作方法。

          @Html.Partial("_header")
          

          7視圖向控制器傳遞數(shù)據(jù)

          1)使用表單向控制器傳遞數(shù)據(jù)

          視圖代碼

          @using (Html.BeginForm("TestFrom", "Home"))
           {
           <input id="UserName" name="UserName" type="text" placeholder="請(qǐng)輸入用戶名" value="" />
           <input id="Password" name="Password" type="password" placeholder="請(qǐng)輸入密碼" value="" />
           <input type="submit" value="提交"/>
          	}
          

          控制器代碼

          public ActionResult TestFrom(FormCollection c)
           {
           var un=c["UserName"];
           var pw=c["Password"];
           ViewBag.Un=un;
           ViewBag.Pw=pw;
           return PartialView("TestPy");
           }
          

          8自定義html輔助方法

          返回值類型為IHtmlString,IHtmlString 是一個(gè)接口

           public static IHtmlString HYSubString(this HtmlHelper helper, string param)
           {
          	//字符串
          	String ret=......
           return helper.Raw(ret);
           }
          

          參考:

          1. Jess Chadwick/Todd Snyder/Hrusikesh Panda,徐雷/徐揚(yáng)

          譯。ASP.NET MVC4 Web編程

          2. Jon Galloway/Phil Haack/Brad Wilson/K. Scott Allen,孫遠(yuǎn)帥/鄒權(quán)譯 ASP.NET MVC4 高級(jí)編程(第四版)

          3. ASP.NET MVC4開發(fā)指南,黃保翕

          4. ASP.NET MVC4框架揭秘,蔣金楠

          5. https://www.asp.net/mvc

          置頂王》是圖加軟件提供的免費(fèi)桌面工具!通過它可輕松將各種 Windows 窗體(包括無標(biāo)題欄窗體)置頂或取消置頂。

          使用方法

          【一鍵置頂當(dāng)前窗體】(視頻教程)

          在當(dāng)前窗體的標(biāo)題欄單擊右鍵,在鼠標(biāo)指針左邊會(huì)出現(xiàn)一個(gè)“皇冠”圖標(biāo);

          將鼠標(biāo)指針移入“皇冠”圖標(biāo)內(nèi),即可置頂當(dāng)前窗體。

          【一鍵取消置頂當(dāng)前窗體】

          在當(dāng)前窗體的標(biāo)題欄單擊右鍵,在鼠標(biāo)指針左邊會(huì)出現(xiàn)一個(gè)“皇冠”圖標(biāo);

          將鼠標(biāo)指針移入“皇冠”圖標(biāo)內(nèi),即可取消置頂當(dāng)前窗體。

          來源:http://www.3h3.com/soft/257678.html

          天查Html手冊(cè)時(shí),又有了新的發(fā)現(xiàn)。也就這機(jī)會(huì),好好總結(jié)下HTML中Meta的使用。

            HTML <meta> 標(biāo)簽,所有瀏覽器都支持 <meta> 標(biāo)簽。它提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁面上,但是對(duì)于機(jī)器是可讀的。它可用于瀏覽器(如何顯示內(nèi)容或重新加載頁面),對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞,或其他 web 服務(wù)。

            <meta> 標(biāo)簽位于文檔的頭部,不包含任何內(nèi)容。<meta> 標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)。

            在 HTML 中,<meta> 標(biāo)簽沒有結(jié)束標(biāo)簽,在 XHTML 中,<meta> 標(biāo)簽必須被正確地關(guān)閉。

          必要屬性

          屬性值描述contentsome text定義與http-equiv或name屬性相關(guān)的元信息

          可選屬性

          屬性值描述http-equivcontent-type / expire / refresh / set-cookie把content屬性關(guān)聯(lián)到HTTP頭部。nameauthor / description / keywords / generator / revised / others把 content 屬性關(guān)聯(lián)到一個(gè)名稱。contentsome text定義用于翻譯 content 屬性值的格式。

          • SEO優(yōu)化

              關(guān)鍵詞:類似這樣的 meta 標(biāo)簽可能對(duì)于進(jìn)入搜索引擎的索引有幫助.使用人們可能會(huì)搜索,并準(zhǔn)確描述網(wǎng)頁上所提供信息的描述性和代表性關(guān)鍵字及短語。標(biāo)記內(nèi)容太短,則搜索引擎可能不會(huì)認(rèn)為這些內(nèi)容相關(guān),標(biāo)記不應(yīng)超過 874 個(gè)字符。

              <meta name="keywords" content="HTML,ASP,PHP,SQL">

              頁面描述,每個(gè)網(wǎng)頁都應(yīng)有一個(gè)不超過 150 個(gè)字符且能準(zhǔn)確反映網(wǎng)頁內(nèi)容的描述標(biāo)簽

            <meta name="description" content="your description">

              搜索引擎索引方式,robotterms是一組使用逗號(hào)(,)分割的值,通常有如下幾種取值:none,noindex,nofollow,all,index和follow。確保正確使用nofollow和noindex屬性值。

            

          <meta name="robots" content="index,follow" />
          <!--
          all:文件將被檢索,且頁面上的鏈接可以被查詢;
          none:文件將不被檢索,且頁面上的鏈接不可以被查詢;
          index:文件將被檢索;
          follow:頁面上的鏈接可以被查詢;
          noindex:文件將不被檢索;
          nofollow:頁面上的鏈接不可以被查詢。
          -->

            頁面重定向和刷新:content內(nèi)的數(shù)字代表時(shí)間(秒),既多少時(shí)間后刷新。如果加url,則會(huì)重定向到指定網(wǎng)頁(搜索引擎能夠自動(dòng)檢測(cè),也很容易被引擎視作誤導(dǎo)而受到懲罰)。

            <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /><!--5秒鐘后跳轉(zhuǎn)到http://www.w3school.com.cn-->

            <meta http-equiv="Refresh" content="5;" /><!--每5秒鐘刷新一下頁面-->

          • 移動(dòng)設(shè)備

             viewport:能優(yōu)化移動(dòng)瀏覽器的顯示。如果不是響應(yīng)式網(wǎng)站,不要使用initial-scale或者禁用縮放。大部分4.7-5寸設(shè)備的viewport寬設(shè)為360px;5.5寸設(shè)備設(shè)為400px;iphone6設(shè)為375px;ipone6 plus設(shè)為414px。很多人使用initial-scale=1到非響應(yīng)式網(wǎng)站上,這會(huì)讓網(wǎng)站以100%寬度渲染,用戶需要手動(dòng)移動(dòng)頁面或者縮放。如果和initial-scale=1同時(shí)使用user-scalable=no或maximum-scale=1,則用戶將不能放大/縮小網(wǎng)頁來看到全部的內(nèi)容。

                content 參數(shù):

                  width viewport 寬度(數(shù)值/device-width)
                  height viewport 高度(數(shù)值/device-height)
                  initial-scale 初始縮放比例
                  maximum-scale 最大縮放比例
                  minimum-scale 最小縮放比例
                  user-scalable 是否允許用戶縮放(yes/no)

            

          <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
          <!-- `width=device-width` 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開頁面時(shí)出現(xiàn)黑邊 -->

            

            各瀏覽器平臺(tái)


            Microsoft Internet Explorer

          <!-- 優(yōu)先使用最新的ie版本 -->
          <meta http-equiv="x-ua-compatible" content="ie=edge">
          <!-- 是否開啟cleartype顯示效果 -->
          <meta http-equiv="cleartype" content="on">
          <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

          <!-- 關(guān)于X-UA-Compatible -->
          <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
          <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
          <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

          <!-- Pinned Site -->
          <!-- IE 10 / Windows 8 -->
          <meta name="msapplication-TileImage" content="pinned-tile-144.png">
          <meta name="msapplication-TileColor" content="#009900">
          <!-- IE 11 / Windows 9.1 -->
          <meta name="msapplication-config" content="ieconfig.xml">  

            Google Chrome

          <!-- 優(yōu)先使用最新的chrome版本 -->
          <meta http-equiv="X-UA-Compatible" content="chrome=1" />
          <!-- 禁止自動(dòng)翻譯 -->
          <meta name="google" value="notranslate"> 

            360瀏覽器

            <!-- 選擇使用的瀏覽器解析內(nèi)核 -->
          <meta name="renderer" content="webkit|ie-comp|ie-stand">

            UC手機(jī)瀏覽器

            <!-- 將屏幕鎖定在特定的方向 -->
          <meta name="screen-orientation" content="landscape/portrait">
          <!-- 全屏顯示頁面 -->
          <meta name="full-screen" content="yes">
          <!-- 強(qiáng)制圖片顯示,即使是"text mode" -->
          <meta name="imagemode" content="force">
          <!-- 應(yīng)用模式,默認(rèn)將全屏,禁止長(zhǎng)按菜單,禁止手勢(shì),標(biāo)準(zhǔn)排版,強(qiáng)制圖片顯示。 -->
          <meta name="browsermode" content="application">
          <!-- 禁止夜間模式顯示 -->
          <meta name="nightmode" content="disable">
          <!-- 使用適屏模式顯示 -->
          <meta name="layoutmode" content="fitscreen">
          <!-- 當(dāng)頁面有太多文字時(shí)禁止縮放 -->
          <meta name="wap-font-scale" content="no">

            QQ手機(jī)瀏覽器

          <!-- 鎖定屏幕在特定方向 -->
          <meta name="x5-orientation" content="landscape/portrait">
          <!-- 全屏顯示 -->
          <meta name="x5-fullscreen" content="true">
          <!-- 頁面將以應(yīng)用模式顯示 -->
          <meta name="x5-page-mode" content="app">

            Apple iOS

          <!-- Smart App Banner -->
          <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
          <!-- 禁止自動(dòng)探測(cè)并格式化手機(jī)號(hào)碼 -->
          <meta name="format-detection" content="telephone=no">
          <!-- Add to Home Screen添加到主屏 -->
          <!-- 是否啟用 WebApp 全屏模式 -->
          <meta name="apple-mobile-web-app-capable" content="yes">
          <!-- 設(shè)置狀態(tài)欄的背景顏色,只有在 “apple-mobile-web-app-capable” content=”yes” 時(shí)生效 -->
          <meta name="apple-mobile-web-app-status-bar-style" content="black">
          <!-- 添加到主屏后的標(biāo)題 -->
          <meta name="apple-mobile-web-app-title" content="App Title">

            Google Android

          <meta name="theme-color" content="#E64545">
          <!-- 添加到主屏 -->
          <meta name="mobile-web-app-capable" content="yes">
          <!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
          App Links

          <!-- iOS -->
          <meta property="al:ios:url" content="applinks://docs">
          <meta property="al:ios:app_store_id" content="12345">
          <meta property="al:ios:app_name" content="App Links">
          <!-- Android -->
          <meta property="al:android:url" content="applinks://docs">
          <meta property="al:android:app_name" content="App Links">
          <meta property="al:android:package" content="org.applinks">
          <!-- Web Fallback -->
          <meta property="al:web:url" content="http://applinks.org/documentation">
          <!-- More info: http://applinks.org/documentation/ -->

            其它常用的meta

          <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <meta name="apple-mobile-web-app-status-bar-style" content="black" />
          <meta name="format-detection"content="telephone=no, email=no" />
          <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
          <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認(rèn)的工具欄和菜單欄 -->
          <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設(shè)置蘋果工具欄顏色 -->
          <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數(shù)字識(shí)別為電話,忽略email識(shí)別 -->
          <!-- 啟用360瀏覽器的極速模式(webkit) -->
          <meta name="renderer" content="webkit">
          <!-- 避免IE使用兼容模式 -->
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <!-- 針對(duì)手持設(shè)備優(yōu)化,主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器,比如黑莓 -->
          <meta name="HandheldFriendly" content="true">
          <!-- 微軟的老式瀏覽器 -->
          <meta name="MobileOptimized" content="320">
          <!-- uc強(qiáng)制豎屏 -->
          <meta name="screen-orientation" content="portrait">
          <!-- QQ強(qiáng)制豎屏 -->
          <meta name="x5-orientation" content="portrait">
          <!-- UC強(qiáng)制全屏 -->
          <meta name="full-screen" content="yes">
          <!-- QQ強(qiáng)制全屏 -->
          <meta name="x5-fullscreen" content="true">
          <!-- UC應(yīng)用模式 -->
          <meta name="browsermode" content="application">
          <!-- QQ應(yīng)用模式 -->
          <meta name="x5-page-mode" content="app">
          <!-- windows phone 點(diǎn)擊無高光 -->
          <meta name="msapplication-tap-highlight" content="no">
          <!-- 適應(yīng)移動(dòng)端end -->

          • 網(wǎng)頁相關(guān)

            網(wǎng)頁編碼:以下兩種charset定義方式均可


          <meta charset="utf-8">
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

            禁止緩存:禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁面內(nèi)容,網(wǎng)頁不保存在緩存中,每次訪問都刷新頁面。這樣設(shè)定,訪問者將無法脫機(jī)瀏覽

          <meta http-equiv="Pragma" content="no-cache">

            網(wǎng)頁過期:指定網(wǎng)頁在緩存中的過期時(shí)間,一旦網(wǎng)頁過期,必須到服務(wù)器上重新調(diào)閱。注意:必須使用GMT的時(shí)間格式,或直接設(shè)為0(數(shù)字表示多少時(shí)間后過期)

          <Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">

            Cookie設(shè)置:注意:必須使用GMT的時(shí)間格式

          <Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/">

            顯示窗口的設(shè)定:強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示,這個(gè)屬性是用來防止別人在框架里調(diào)用你的頁面。Content選項(xiàng):_blank、_top、_self、_parent.

          <Meta http-equiv="Widow-target" Content="_top">

            進(jìn)入與退出:這個(gè)是頁面被載入和調(diào)出時(shí)的一些特效。這個(gè)有好多特效,可以查詢Page-Exit去了解更多。

            <Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

          • 安全相關(guān)

            內(nèi)容安全策略CSP(Content-Security-Policy),可以參考https://blog.csdn.net/u014465934/article/details/84199171

          <meta http-equiv="Content-Security-Policy" content="script-src 'self'">



          喜歡小編的可以點(diǎn)個(gè)贊關(guān)注小編哦,小編每天都會(huì)給大家分享文章。

          我自己是一名從事了多年的前端老程序員,小編為大家準(zhǔn)備了新出的前端編程學(xué)習(xí)資料,免費(fèi)分享給大家!

          如果你也想學(xué)習(xí)前端,可以觀看【置頂】文章。也可以私信【1】拿


          主站蜘蛛池模板: 国产综合精品一区二区| 久久se精品一区精品二区| 国产成人无码aa精品一区| 亚洲人成人一区二区三区| 免费在线视频一区| 亚洲午夜精品一区二区麻豆| 国产在线精品一区二区在线观看| 国产伦精品一区二区三区精品| 少妇一夜三次一区二区| 色狠狠色狠狠综合一区| 男女久久久国产一区二区三区| 国产亚洲日韩一区二区三区| 国产成人精品无人区一区| 高清无码一区二区在线观看吞精| 日美欧韩一区二去三区| 中文字幕日韩欧美一区二区三区 | 国产精品福利一区二区| 精品无码一区二区三区爱欲 | 无码精品不卡一区二区三区 | 大香伊人久久精品一区二区 | 精品国产一区二区三区久久久狼| 亚洲AV无码一区东京热| 亚洲AV无一区二区三区久久| 日本在线不卡一区| 亚洲av不卡一区二区三区| 无码毛片视频一区二区本码| 无码人妻AⅤ一区二区三区| 亚洲国产一区二区a毛片| 精品无码一区二区三区爱欲九九| 一区二区三区在线|欧| 日韩精品视频一区二区三区 | 无码人妻精品一区二区三区99不卡| 内射少妇一区27P| 亚洲欧洲一区二区三区| 91久久精一区二区三区大全| 综合久久久久久中文字幕亚洲国产国产综合一区首 | 一区二区免费视频| 乱码精品一区二区三区| 日本一区二区视频| 鲁丝丝国产一区二区| 一区二区三区四区视频在线|