@stkevintan
2015-12-17T15:30:04.000000Z
字数 4467
阅读 524
Web
前端
Meta
前端学习并不推荐书籍
1. 因为前端新陈代谢比较快,书籍一般比较滞后。
2. 网络前端资源很多,这门技术比较大众,开发。每一个网页都有可能能成为你的教材。
前端需要良好的英文阅读水平
前端知识繁多,需要积累,整理
常见html5页面形式
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="ACM,Online Judge,ZJNU,浙江师范大学" />
<meta name="description" content="浙江师范大学在线评测系统" />
<meta name="author" content="Kevin Tan" />
<title>ZJNU OJ</title>
<!-- twitter bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- site styles -->
<link href="assets/css/index.css" rel="stylesheet" />
</head>
<body>
<!-- Begin Content -->
...
<!-- End Bontent -->
<!-- jquery lib -->
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- twitter bootstrap -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- site scripts -->
<script src="assets/js/index.js"></script>
</body>
</html>
HTML 4
中使用<html lang='zh-cn'>
HTML 5
中应该使用<html lang='zh-cmn-hans'>
zh
表示宏语言(Macrolanguage)cmn
表示普通话(其他:yue-粤语、wuu-吴语、etc)hans
表示简体中文(hant
-繁体中文)<html lang='en'>
页面关键词
<meta name="keywords" content="ACM,Online Judge,ZJNU,浙江师范大学" />
页面描述
<meta name="description" content="浙江师范大学在线评测系统" />
页面标题
<title>ZJNU OJ</title>
作者
<meta name="author" content="Kevin Tan" />
搜索引擎索引方式 (robot协议)
<meta name="robots" content="index,follow" />
<!--
all:文件将被检索,且页面上的链接可以被查询;
none:文件将不被检索,且页面上的链接不可以被查询;
index:文件将被检索;
follow:页面上的链接可以被查询;
noindex:文件将不被检索;
nofollow:页面上的链接不可以被查询。
-->
文档编码
<meta charset="utf-8"><!-- HTML5 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- HTML4 or 5 -->
移动设备的视图
<meta name="viewport" content="width=device-width, initial-scale=1" />
浏览器内核
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于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 -->
<!-- 360,QQ,搜狗等浏览器切换极速模式打开 -->
<meta name="renderer" content="webkit">
自动跳转
<meta http-equiv="refresh" content="5;url=hello.html">
更多:http://www.w3school.com.cn/tags/tag_meta.asp#meta_prop_http-equiv
@*Layout.cshtml*@
@helper DisplayItem(string name){
if(name=='首页'){
@: 主页
}else{
@name
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content('~/Content/Site.css')" rel="stylesheet" type="text/css" />
@RenderSection("custom_styles",required:false)
</head>
<body>
<nav class="nav-bar">
<ul>
<li>@DisplayItem("首页")</li>
@foreach(var item in new string[]{"item1","item2","item3"}){
<li>@item</li>
}
<li>@Html.ActionLink("关于","MyAction","MyController",new{from="Home"},new{@class="plain",id="mark",data_val="vdsa"})</li>
<li><a href="@Url.Action("MyAction","MyController",new{from="Home"})" class="plain" id="mark">关于</a></li>
</ul>
</nav>
<section id="main">
@RenderBody()
@RenderSection("custom_scripts",required:false)
</section>
</body>
</html>
@*index.cshtml*@
@{
Layout = "~/Views/Shared/Layout.cshtml";
}
@section custom_styles{
<link href="@Url.Content(~/Assets/minimal/minimal.css") rel="stylesheet" />
<style>
body{
margin:0;
}
</style>
}
<h3>这是网页正文</h3>
@Url.Raw(Model.Content)
@using(Html.BeginForm("mAction","mController",Method.Post,new{@class="form-horizonal",role="form"}){
@Html.DisplayNameFor(m=>m.UserName)
@Html.LabelFor(m=>m.UserName,new{@class="form-label"})
@Html.TextBoxFor(m=>m.UserName,new{@class="form-control"})
}
一般放在Layout文件中,用于引用子页面。
一般放入Layout文件中,用于引用子页面中相对应的区域。
自定义显示函数