2017年html的超简代码模版
来源：才华咖 阅读：4.17K 次
千里之行始于足下，万事都要从第一步开始。写页面的第一步是什么呢？这还用说当然是html中的<head>标签了。但是<head>标签中还有很多元素，在开发中不可能全部都涉及到，写出符合自己实际需要的就可以了。怎么写最简单，还能比较实用，我们就这里和大家分享一下。
<meta/>：种有很多涉及页面的原信息
<title>：用来定义文档的标题
<script>和<link/>：是用来引入js和css文件的标签，而<script >也可以在闭合的标签中直接写入js代码。
这篇文章我们着重介绍几个常用的<meta/>元素。
1申明编码：
<meta charset="UTF-8"/>
这个你要写吧？要申明编码，不然刷新后中文就全是乱码了。
2页面关键词：
<meta name="keywords" content="关键词1,关键词2，关键词3,关键词4,……"/>
比如你的网页主题是"范冰冰"，如果你的关键词只有"范冰冰"，那当用户搜索"范爷"的时候就无法搜到你的网页了。
举个例子：
<meta name="keywords" content="范冰冰,范爷,大黑牛,李晨"/>
如果搜索这些关键词之后，都会搜到你的网页。当然如果是百度搜索引擎的话，只能是自然排名，想排第一的话，就给百度钱吧。
3页面描述：
<meta name="description" content="150 words"/>
网页的描述，是给搜索引擎看的，搜索引擎根据这个描述进行收录排名，一般是网页内的关键字。
页面关键词和页面描述，当然是为了用户能更快的在偌大的互联网中找到你，互联网营销的课题我们最好也考虑一下，不然怎么能获得提升呢？
4移动端设置：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
如果你要写手机端页面这个就大有用处了，而且还是必须要写的！
这些词都是什么意思呢
width：应用程序的`宽度和屏幕的宽度是一样的
height：应用程序的宽度和屏幕的宽度是一样的
initial-scale：应用程序启动时候的缩放尺度（1.0表示不缩放）
minimum-scale：应用程序启动时候的缩放尺度（1.0表示不缩放）
maximum-scale：用户可以放大到的最大尺度（1.0表示不缩放）
user-scalable：手势缩放 (no,yes)
html简单的模版<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 如果是pc端页面，不要写下面这一行 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="keywords" content="……" />
<meta name="description" content="……" />
<title>标题</title>
<!-- 下面两行是引入js文件和css文件 -->
<script type="text/javascript" src="……"></script>
<link rel="stylesheet" href="……"/>
</head>
<body>
<!— 在这里开始写代码吧 —>
</body>
</html>
热门内容
大家都在看
最近更新