Home > Article > Web Front-end > HTML5 website development-specific basic template

HTML5 website development-specific basic template

伊谢尔伦Original: 2016-11-23 09:39:441605browse

Share a basic template for HTML5 page development, including two versions: Development version Annotated version

Development version

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

Annotated 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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：html5的history APINext article：html5的history API

See more

HTML5 website development-specific basic template

Related articles