[关闭]
@stkevintan 2015-12-17T07:30:04.000000Z 字数 4467 阅读 575

前端培训（一）前言以及Razor表达式

Web 前端 Meta

如何自学

前端学习并不推荐书籍
1. 因为前端新陈代谢比较快，书籍一般比较滞后。
2. 网络前端资源很多，这门技术比较大众，开发。每一个网页都有可能能成为你的教材。

前端需要良好的英文阅读水平
前端知识繁多，需要积累，整理

资源推荐

  1. 入门：W3CSchool
  2. 进阶 (H5,CSS3)：W3CPlus
  3. 百科全书：MDN
  4. 演练场：CodePen
  5. 中文Jquery文档JQuery API

前端规范

常见html5页面形式

  1. <!DOCTYPE html>
  2. <html lang="zh-cmn-Hans">
  3. <head>
  4.     <meta charset='utf-8' />
  5.     <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  7.     <meta name="keywords" content="ACM,Online Judge,ZJNU,浙江师范大学" />
  8.     <meta name="description" content="浙江师范大学在线评测系统" />
  9.     <meta name="author" content="Kevin Tan" />
  10.     <title>ZJNU OJ</title>
  11.     <!-- twitter bootstrap -->
  12.     <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
  13.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  14.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  15.     <!--[if lt IE 9]>
  16.       <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  17.       <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  18.     <![endif]-->
  19.     <!-- site styles -->
  20.     <link href="assets/css/index.css" rel="stylesheet" />
  21. </head>
  22. <body>
  24.     <!-- Begin Content -->
  25.     ...
  26.     <!-- End Bontent -->
  29.      <!-- jquery lib -->
  30.     <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  31.     <!-- twitter bootstrap -->
  32.     <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  33.     <!-- site scripts -->
  34.     <script src="assets/js/index.js"></script>
  35. </body>
  36. </html>

html language code[1]

head内的标签

SEO优化

页面关键词

  1. <meta name="keywords" content="ACM,Online Judge,ZJNU,浙江师范大学" />

页面描述

  1. <meta name="description" content="浙江师范大学在线评测系统" />

页面标题

  1. <title>ZJNU OJ</title>

作者

  1.  <meta name="author" content="Kevin Tan" />

搜索引擎索引方式 （robot协议）

  1. <meta name="robots" content="index,follow" />
  2. <!--
  3.     all：文件将被检索，且页面上的链接可以被查询；
  4.     none：文件将不被检索，且页面上的链接不可以被查询；
  5.     index：文件将被检索；
  6.     follow：页面上的链接可以被查询；
  7.     noindex：文件将不被检索；
  8.     nofollow：页面上的链接不可以被查询。
  9.  -->

功能标签

文档编码

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

移动设备的视图

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

浏览器内核

  1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  2. <!-- 关于X-UA-Compatible -->
  3. <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
  4. <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
  5. <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
  6. <!-- 360，QQ，搜狗等浏览器切换极速模式打开 -->
  7. <meta name="renderer" content="webkit">

自动跳转

  1. <meta http-equiv="refresh" content="5;url=hello.html">

更多：http://www.w3school.com.cn/tags/tag_meta.asp#meta_prop_http-equiv

常见Razor表达式

  1. @*Layout.cshtml*@
  2. @helper DisplayItem(string name){
  3.     if(name=='首页'）{
  4.         @: 主页
  5.     }else{
  6.         @name
  7.     }
  8. }
  9. <!DOCTYPE html>
  10. <html>
  11. <head>
  12. <meta charset="utf-8" />
  13. <title>@ViewBag.Title</title>
  14. <link href="@Url.Content('~/Content/Site.css')" rel="stylesheet" type="text/css" />
  15. @RenderSection("custom_styles",required:false)
  16. </head>
  17. <body>
  18.     <nav class="nav-bar">
  19.         <ul>
  20.             <li>@DisplayItem("首页")</li>
  21.             @foreach(var item in new string[]{"item1","item2","item3"}){
  22.                 <li>@item</li>
  23.             }
  24.             <li>@Html.ActionLink("关于","MyAction","MyController",new{from="Home"},new{@class="plain",id="mark",data_val="vdsa"})</li>
  25.             <li><a href="@Url.Action("MyAction","MyController",new{from="Home"})" class="plain" id="mark">关于</a></li>
  26.         </ul>
  27.     </nav>
  28.     <section id="main">
  29.     @RenderBody()
  30.     @RenderSection("custom_scripts",required:false)
  31. </section>
  32. </body>
  33. </html>
  1. @*index.cshtml*@
  2. @{
  3.     Layout = "~/Views/Shared/Layout.cshtml";
  4. }
  5. @section custom_styles{
  6.        <link href="@Url.Content(~/Assets/minimal/minimal.css") rel="stylesheet" /> 
  7.        <style>
  8.             body{
  9.                 margin:0;
  10.             }
  11.        </style>
  12. }
  13. <h3>这是网页正文</h3>
  14. @Url.Raw(Model.Content)
  15. @using(Html.BeginForm("mAction","mController",Method.Post,new{@class="form-horizonal",role="form"}){
  16.     @Html.DisplayNameFor(m=>m.UserName)
  17.     @Html.LabelFor(m=>m.UserName，new{@class="form-label"})
  18.     @Html.TextBoxFor(m=>m.UserName,new{@class="form-control"})
  19. }

Renderbody

一般放在Layout文件中，用于引用子页面。

RenderSection

一般放入Layout文件中，用于引用子页面中相对应的区域。

HTML Helpers

自定义Helper

自定义显示函数

[1] http://www.zhihu.com/question/20797118?utm_source=weibo&utm_medium=weibo_share&utm_content=share_question&utm_campaign=share_sidebar ↩
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注