Heim  >  Artikel  >  Web-Frontend  >  Spezielle Basisvorlage für die HTML5-Website-Entwicklung

Spezielle Basisvorlage für die HTML5-Website-Entwicklung

伊谢尔伦
伊谢尔伦Original
2016-11-23 09:39:441604Durchsuche

Teilen Sie eine grundlegende Vorlage für die HTML5-Seitenentwicklung, einschließlich zwei Versionen: Entwicklungsversion, kommentierte Version

Entwicklungsversion

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="">
</head>
<body>
 
<!-- 这里添加页面主要内容 -->
 
<!-- SCRIPTS:个人建议在天朝不要使用Google的CDN了,是不是你就发现你的网站功能失效了 -->
<!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>

kommentierte Version

<!DOCTYPE html>
<!--
     设置lang值来保证<html>标签的互操作性及其可访问性
   更多HTML标签全局性属性
   请阅读这里: http://www.w3.org/TR/html-markup/global-attributes.html -->
<html>
 
<head>
 
<!--
    告诉IE使用目前最新的布局引擎:
    更多信息阅读这里: https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
<!--
     针对web性能定义字符集,首选通过HTTP header来设置
   确保HTTP header和Meta标签设置一致
   更多信息阅读这里: https://developers.google.com/speed/docs/best-practices/rendering#SpecifyCharsetEarly -->
<meta charset="utf-8">
 
<!-- 指定页面标题 -->
<title></title>
 
<!-- 指定web页面描述 -->
<meta name="description" content="">
 
<!-- 指定web页面作者 -->
<meta name="author" content="">
 
<!-- 提示移动浏览器使用设备宽度和缩放比 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!-- 在页面加载前来加载CSS
     保证相关样式的及时加载
     指定对应的URI属性 -->
<link rel="stylesheet" href="">
 
<!--
     加载htmlshiv和respond.js来兼容老版本的IE浏览器
   方便使用HTML5中的新元素和media queries -->
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<!-- 指定favicon的URI -->
<link rel="shortcut icon" href="">
 
<!-- 下面注释掉的是ios/android书签图标-->
<!--
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="196x196" href="">
<link rel="apple-touch-icon" sizes="152x152" href="">
-->
 
<!--
     如果可能使用async属性来非阻断的加载脚本
   例子: <script src="" async></script> -->
</head>
<body>
 
<!-- 这里添加页面主要内容 -->
 
<!-- 如果可能使用async属性来非阻断的加载脚本 -->
<!-- SCRIPTS -->
<!-- 例子: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:HTML5-Verlaufs-APINächster Artikel:HTML5-Verlaufs-API