整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

ASP.NET Web Forms-HTML 页面

单的 ASP.NET 页面看上去就像普通的 HTML 页面。


Hello RUNOOB.COM

在开始学习 ASP.NET 之前,我们先来构建一个简单的 HTML 页面,该页面将在浏览器中显示 "Hello RUNOOB.COM":

Hello RUNOOB.COM!


用 HTML 编写的 Hello RUNOOB.COM

下面的代码将以 HTML 页面的形式显示实例:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想亲自尝试一下,请保存上面的代码到一个名为 "firstpage.htm" 的文件中,并创建一个到该文件的链接:firstpage.htm。


用 ASP.NET 编写的 Hello RUNOOB.COM

转换 HTML 页面为 ASP.NET 页面最简单的方法是,直接复制一个 HTML 文件,并把新文件的扩展名改成 .aspx

下面的代码将以 ASP.NET 页面的形式显示实例:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello RUNOOB.COM!</h2>

</center>

</body>

</html>

如果您想亲自尝试一下,请保存上面的代码到一个名为 "firstpage.aspx" 的文件中,并创建一个到该文件的链接:firstpage.aspx。


它是如何工作的?

从根本上讲,ASP.NET 页面与 HTML 是完全相同的。

HTML 页面的扩展名是 .htm。如果浏览器向服务器请求一个 HTML 页面,服务器可以不进行任何修改,就直接发送页面给浏览器。

ASP.NET 页面的扩展名是 .aspx。如果浏览器向服务器请求个 ASP.NET 页面,服务器在将结果发回给浏览器之前,需要先处理页面中的可执行代码。

上面的 ASP.NET 页面不包含任何可执行的代码,所以没有执行任何东西。在下面的实例中,我们将添加一些可执行的代码到页面中,以便演示静态 HTML 页面和动态 ASP 页面的不同之处。


经典 ASP

Active Server Pages (ASP) 已经流行很多年了。通过 ASP,可以在 HTML 页面中放置可执行代码。

之前的 ASP 版本(在 ASP.NET 之前)通常被称为经典 ASP。

ASP.NET 不完全兼容经典 ASP,但是只需要经过少量的修改,大部分经典 ASP 页面就可以作为 ASP.NET 页面良好地运行。

如果您想学习更多关于经典 ASP 的知识,请访问我们的 ASP 教程。


用经典 ASP 编写的动态页面

为了演示 ASP 是如何显示包含动态内容的页面,我们将向上面的实例中添加一些可执行的代码(红色字体标识):

<html>

<body bgcolor="yellow">

<center>

<h2>Hello RUNOOB.COM!</h2>

<p><%Response.Write(now())%></p>

</center>

</body>

</html>

<% --%> 标签内的代码是在服务器上执行的。

Response.Write 是用来向 HTML 输出流中写东西的 ASP 代码。

Now() 是一个返回服务器当前日期和时间的函数。

如果您想亲自尝试一下,请保存上面的代码到一个名为 "dynpage.asp" 的文件中,并创建一个到该文件的链接:dynpage.asp。


用 ASP .NET 编写的动态页面

下面的代码将以 ASP.NET 页面的形式显示实例:

<html>

<body bgcolor="yellow">

<center>

<h2>Hello RUNOOB.COM!</h2>

<p><%Response.Write(now())%></p>

</center>

</body>

</html>

如果您想亲自尝试一下,请保存上面的代码到一个名为 "dynpage.aspx" 的文件中,并创建一个到该文件的链接:dynpage.aspx。


ASP.NET 对比经典 ASP

上面的实例无法演示 ASP.NET 与经典 ASP 之间任何的不同之处。

正如最后的两个实例中,您看不出 ASP 页面和 ASP.NET 页面两者之间的不同之处。

在下一章中,您将看到服务器控件是如何让 ASP.NET 比经典 ASP 更强大的。

、定义

<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

2、作用

meta里的数据是供机器解读的,告诉机器该如何解析这个页面,还有一个用途是可以添加服务器发送到浏览器的http头部内容,例如我们为页面中添加如下meta标签:


  1. <meta http-equiv="charset" content="iso-8859-1">
  2. <meta http-equiv="expires" content="31 Dec 2008">

浏览器的头部就会包括这些:


  1. charset:iso-8859-1
  2. expires:31 Dec 2008

只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义。

3、meta的必需属性和可选属性

meta的必需属性是content,当然并不是说meta标签里一定要有content,而是当有http-equiv或name属性的时候,一定要有content属性对其进行说明。例如:

必需属性

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

这里面content里的属性就是对keywords进行的说明,所以呢也可以理解成一个键值对吧,就是{keywords:"HTML,ASP,PHP,SQL"}。

可选属性

在W3school中,对于meta的可选属性说到了三个,分别是http-equiv、name和scheme。考虑到scheme不是很常用,所以就只说下前两个属性吧。

http-equiv

http-equiv属性是添加http头部内容,对一些自定义的,或者需要额外添加的http头部内容,需要发送到浏览器中,我们就可以是使用这个属性。在上面的meta作用中也有简单的说明,那么现在再举个例子。例如我们不想使用js来重定向,用http头部内容控制,那么就可以这样控制:

<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

在页面中加入这个后,5秒钟后就会跳转到指定页面啦,效果可看W3school的例子

name

第二个可选属性是name,这个属性是供浏览器进行解析,对于一些浏览器兼容性问题,name属性是最常用的,当然有个前提就是浏览器能够解析你写进去的name属性才可以,不然就是没有意义的。还是举个例子吧:

<meta name="renderer" content="webkit">

这个meta标签的意思就是告诉浏览器,用webkit内核进行解析,当然前提是浏览器有webkit内核才可以,不然就是没有意义的啦。当然看到这个你可能会有疑问,这个renderer是从哪里冒出来的,我要怎么知道呢?这个就是在对应的浏览器的开发文档里就会有表明的,例如这个renderer是在360浏览器里说明的。360浏览器内核控制Meta标签说明文档

常用meta标签大总结

接下来就是常用的meta标签大总结啦,我会尽可能的做到全

charset

charset是声明文档使用的字符编码,解决乱码问题主要用的就是它,值得一提的是,这个charset一定要写第一行,不然就可能会产生乱码了。

charset有两种写法


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

两个都是等效的。

百度禁止转码

百度会自动对网页进行转码,这个标签是禁止百度的自动转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 优化部分


  1. <!-- 页面标题<title>标签(head 头部必须) -->
  2. <title>your title</title>
  3. <!-- 页面关键词 keywords -->
  4. <meta name="keywords" content="your keywords">
  5. <!-- 页面描述内容 description -->
  6. <meta name="description" content="your description">
  7. <!-- 定义网页作者 author -->
  8. <meta name="author" content="author,email address">
  9. <!-- 定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。 -->
  10. <meta name="robots" content="index,follow">

viewport

viewport主要是影响移动端页面布局的,例如:


  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

content 参数:

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)

各浏览器平台

Microsoft Internet Explorer


  1. <!-- 优先使用最新的ie版本 -->
  2. <meta http-equiv="x-ua-compatible" content="ie=edge">
  3. <!-- 是否开启cleartype显示效果 -->
  4. <meta http-equiv="cleartype" content="on">
  5. <meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
  6. <!-- Pinned Site -->
  7. <!-- IE 10 / Windows 8 -->
  8. <meta name="msapplication-TileImage" content="pinned-tile-144.png">
  9. <meta name="msapplication-TileColor" content="#009900">
  10. <!-- IE 11 / Windows 9.1 -->
  11. <meta name="msapplication-config" content="ieconfig.xml">

Google Chrome


  1. <!-- 优先使用最新的chrome版本 -->
  2. <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  3. <!-- 禁止自动翻译 -->
  4. <meta name="google" value="notranslate">

360浏览器


  1. <!-- 选择使用的浏览器解析内核 -->
  2. <meta name="renderer" content="webkit|ie-comp|ie-stand">

UC手机浏览器

UCBrowser_U3_API

QQ手机浏览器


  1. <!-- 锁定屏幕在特定方向 -->
  2. <meta name="x5-orientation" content="landscape/portrait">
  3. <!-- 全屏显示 -->
  4. <meta name="x5-fullscreen" content="true">
  5. <!-- 页面将以应用模式显示 -->
  6. <meta name="x5-page-mode" content="app">

Apple iOS


  1. <!-- Smart App Banner -->
  2. <meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
  3. <!-- 禁止自动探测并格式化手机号码 -->
  4. <meta name="format-detection" content="telephone=no">
  5. <!-- Add to Home Screen添加到主屏 -->
  6. <!-- 是否启用 WebApp 全屏模式 -->
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <!-- 添加到主屏后的标题 -->
  11. <meta name="apple-mobile-web-app-title" content="App Title">

Google Android


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

App Links


  1. <!-- iOS -->
  2. <meta property="al:ios:url" content="applinks://docs">
  3. <meta property="al:ios:app_store_id" content="12345">
  4. <meta property="al:ios:app_name" content="App Links">
  5. <!-- Android -->
  6. <meta property="al:android:url" content="applinks://docs">
  7. <meta property="al:android:app_name" content="App Links">
  8. <meta property="al:android:package" content="org.applinks">
  9. <!-- Web Fallback -->
  10. <meta property="al:web:url" content="http://applinks.org/documentation">
  11. <!-- More info: http://applinks.org/documentation/ -->

最后——移动端常用的meta


  1. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  2. <meta name="apple-mobile-web-app-capable" content="yes" />
  3. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  4. <meta name="format-detection"content="telephone=no, email=no" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  6. <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
  8. <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
  9. <!-- 启用360浏览器的极速模式(webkit) -->
  10. <meta name="renderer" content="webkit">
  11. <!-- 避免IE使用兼容模式 -->
  12. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  13. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
  14. <meta name="HandheldFriendly" content="true">
  15. <!-- 微软的老式浏览器 -->
  16. <meta name="MobileOptimized" content="320">
  17. <!-- uc强制竖屏 -->
  18. <meta name="screen-orientation" content="portrait">
  19. <!-- QQ强制竖屏 -->
  20. <meta name="x5-orientation" content="portrait">
  21. <!-- UC强制全屏 -->
  22. <meta name="full-screen" content="yes">
  23. <!-- QQ强制全屏 -->
  24. <meta name="x5-fullscreen" content="true">
  25. <!-- UC应用模式 -->
  26. <meta name="browsermode" content="application">
  27. <!-- QQ应用模式 -->
  28. <meta name="x5-page-mode" content="app">
  29. <!-- windows phone 点击无高光 -->
  30. <meta name="msapplication-tap-highlight" content="no">
  31. <!-- 适应移动端end -->

天查Html手册时,又有了新的发现。也就这机会,好好总结下HTML中Meta的使用。

  HTML <meta> 标签,所有浏览器都支持 <meta> 标签。它提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),对搜索引擎和更新频度的描述和关键词,或其他 web 服务。

  <meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

  在 HTML 中,<meta> 标签没有结束标签,在 XHTML 中,<meta> 标签必须被正确地关闭。

必要属性

属性值描述contentsome text定义与http-equiv或name属性相关的元信息

可选属性

属性值描述http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称。contentsome text定义用于翻译 content 属性值的格式。

  • SEO优化

    关键词:类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助.使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短,则搜索引擎可能不会认为这些内容相关,标记不应超过 874 个字符。

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

    页面描述,每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签

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

    搜索引擎索引方式,robotterms是一组使用逗号(,)分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。确保正确使用nofollow和noindex属性值。

  

<meta name="robots" content="index,follow" />
<!--
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索;
nofollow:页面上的链接不可以被查询。
-->

  页面重定向和刷新:content内的数字代表时间(秒),既多少时间后刷新。如果加url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。

  <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /><!--5秒钟后跳转到http://www.w3school.com.cn-->

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

  • 移动设备

   viewport:能优化移动浏览器的显示。如果不是响应式网站,不要使用initial-scale或者禁用缩放。大部分4.7-5寸设备的viewport宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。很多人使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。

      content 参数:

        width viewport 宽度(数值/device-width)
        height viewport 高度(数值/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` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 -->

  

  各浏览器平台


  Microsoft Internet Explorer

<!-- 优先使用最新的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">

<!-- 关于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

<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 禁止自动翻译 -->
<meta name="google" value="notranslate"> 

  360浏览器

  <!-- 选择使用的浏览器解析内核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

  UC手机浏览器

  <!-- 将屏幕锁定在特定的方向 -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- 全屏显示页面 -->
<meta name="full-screen" content="yes">
<!-- 强制图片显示,即使是"text mode" -->
<meta name="imagemode" content="force">
<!-- 应用模式,默认将全屏,禁止长按菜单,禁止手势,标准排版,强制图片显示。 -->
<meta name="browsermode" content="application">
<!-- 禁止夜间模式显示 -->
<meta name="nightmode" content="disable">
<!-- 使用适屏模式显示 -->
<meta name="layoutmode" content="fitscreen">
<!-- 当页面有太多文字时禁止缩放 -->
<meta name="wap-font-scale" content="no">

  QQ手机浏览器

<!-- 锁定屏幕在特定方向 -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- 全屏显示 -->
<meta name="x5-fullscreen" content="true">
<!-- 页面将以应用模式显示 -->
<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">
<!-- 禁止自动探测并格式化手机号码 -->
<meta name="format-detection" content="telephone=no">
<!-- Add to Home Screen添加到主屏 -->
<!-- 是否启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 添加到主屏后的标题 -->
<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" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->

  • 网页相关

  网页编码:以下两种charset定义方式均可


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

  禁止缓存:禁止浏览器从本地机的缓存中调阅页面内容,网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览

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

  网页过期:指定网页在缓存中的过期时间,一旦网页过期,必须到服务器上重新调阅。注意:必须使用GMT的时间格式,或直接设为0(数字表示多少时间后过期)

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

  Cookie设置:注意:必须使用GMT的时间格式

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

  显示窗口的设定:强制页面在当前窗口以独立页面显示,这个属性是用来防止别人在框架里调用你的页面。Content选项:_blank、_top、_self、_parent.

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

  进入与退出:这个是页面被载入和调出时的一些特效。这个有好多特效,可以查询Page-Exit去了解更多。

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

  • 安全相关

  内容安全策略CSP(Content-Security-Policy),可以参考https://blog.csdn.net/u014465934/article/details/84199171

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



喜欢小编的可以点个赞关注小编哦,小编每天都会给大家分享文章。

我自己是一名从事了多年的前端老程序员,小编为大家准备了新出的前端编程学习资料,免费分享给大家!

如果你也想学习前端,可以观看【置顶】文章。也可以私信【1】拿