关键词：
https://segmentfault.com/a/1190000006709967
上篇我们将 body 标签主体部分进行了简单总览，下面看看最后的脚本部门。
页面结尾部分（Javascripts 脚本文件）
我们来看看代码最后的代码，摘取如下：
<!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
</body>我们发现，所有脚本都在 </body> 之前，而且，源码结尾也没有</html> 标签，这主要是因为以下一些原因：
-
为什么放在最后
HTML 文件的加载都是从上往下执行的，我们一般习惯将一些对显示效果影响不大的脚本文件放到页面的最后进行加载。这样可以减少页面的加载时间。
-
为什么放在
</body>之前
只所以脚本放在 </body> 之前，而不是之后，主要是因为：基于规则 %html.content "HEAD|BODY"，HTML 标签的子元素只能是 HEAD BODY，如果在 </body> 后再出现 <script> 或任何元素的开始标签，都是 parse error。当然，浏览器一般均有容错机制。错误嵌套的标签、以及位置放置错误的标签都会在paser HTML 过程中尝试修复。修复后得到合法的HTML后在由布局引擎建立相应的DOM对象。在<script>标签放置于</body>标签之后时，源码被所有浏览器【泛指PC上常见的】修复为正常形式，即<script></script></body>。
-
为什么没有
</html>标签
这个我也忘了哈，好像为了被别的文件包含时，避免出现把文件闭合了这种情况。一下子找不到这方面的说明了，如果哪位大侠知道，麻烦告知。
当然，html5 是支持不闭合标签的。
这儿貌似有一点点说明：http://blog.teamtreehouse.com...
Metronic 所用到的插件和资源
Metronic 用了几十个插件和扩展资源，这才使得这个模板显得尤为强大。具体这些插件的描述我就不一一列述了，大家可以逐一点下下面表格的链接了解了解。
| Name | Description | URL |
|---|---|---|
| jQuery | Core Javascript library | http://www.jquery.com |
| Twitter Bootstrap | Sleek, intuitive, and powerful front-end framework for faster and easier web development | http://getbootstrap.com |
| Select2 | Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results | http://ivaynberg.github.io/se... |
| Bootstrap Confirmation | Socicon Social Icons. | http://mistic100.github.io/Bo... |
| Socicon | Bootstrap plugin for on-place confirm boxes using Popover. | http://www.socicon.com/ |
| Bootstrap Tagsinput | Bootstrap Tags Input is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. | https://github.com/timschlech... |
| Flow Chart | Bootstrap plugin for on-place confirm boxes using Popover. | http://adrai.github.io/flowch... |
| Autosize | A small, stand-alone script to automatically adjust textarea height. | http://www.jacklmoore.com/aut... |
| Bootstrap Summernote | Super Simple WYSIWYG Editor for Bootstrap 3. Summernote is a javascript program that helps you to create WYSIWYG Editor on web. | http://hackerwins.github.io/s... |
| Bootstrap Hover Dropdown Plugin | A simple plugin to enable twitter bootstrap dropdowns to activate on hover and provide a nice user experience. | https://github.com/CWSpear/bo... |
| Twitter Typeahead | A fast and fully-featured autocomplete library. | http://twitter.github.io/type... |
| amCharts | Charting library & maps. Where all data goes visual. | http://www.amcharts.com/ |
| iCheck | SUPER CUSTOMIZED CHECKBOXES AND RADIO BUTTONS FOR JQUERY & ZEPTO. | http://fronteed.com/iCheck/ |
| Bootstrap Select | A custom select for @twitter Bootstrap using button dropdown. | http://silviomoreto.github.io... |
| jQuery Notific8 | jQuery Notific8 is a notification plug-in that was inspired by the notification style introduced in Windows 8. | http://willsteinmetz.net/jque... |
| jQuery jsTree | A tree view plugin for jQuery. | http://www.jstree.com/ |
| Bootstrap Maxlength | This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text. This plugin uses the HTML5 attribute "maxlength" to work. | http://mimo84.github.com/boot... |
| Bootstrap Session Timeout | After a set amount of time, a dialog is shown to the user with the option to either log out now, or stay connected. If log out now is selected, the page is redirected to a logout URL. If stay connected is selected, a keep-alive URL is requested through AJAX. If no options is selected after another set amount of time, the page is automatically redirected to a timeout URL. | https://github.com/travishorn... |
| jQuery Idle Timeout | This script allows you to detect when a user becomes idle (detection provided by Paul Irish‘s idletimer plugin) and notify the user his/her session is about to expire. Similar to the technique seen on Mint.com. Polling requests are automatically sent to the server at a configurable interval, maintaining the users session while s/he is using your application for long periods of time. | http://www.erichynds.com/exam... |
| Bootstrap TouchSpin | A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys. | http://www.virtuosoft.eu/code... |
| Bootstrap Date Paginator | A jQuery plugin which takes Twitter Bootstrap‘s already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application. | http://www.jonathandanielmile... |
| Bootbox.js | Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. | http://bootboxjs.com/ |
| Bootstrap Markdown | Markdown editing for Bootstrap. | http://toopay.github.com/boot... |
| Bootstrap FuelUX Input Spinner | Bootstrap FuelUX Input Spinner For App. | http://exacttarget.github.io/... |
| Bootstrap Context Menu | Context menu plugin for Twitter‘s Bootstrap framework | https://github.com/sydcanem/b... |
| jQuery noUiSlider | noUiSlider is a super tiny jQuery plugin that allows you to create range sliders. It fully supports touch, and it is way(!) less bloated than the jQueryUI library. | http://refreshless.com/nouisl... |
| jQuery IonRange Slider | Beautiful, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings and can be completely modified with CSS. | http://ionden.com/a/plugins/i... |
| Bootstrap Toastr Notifications | Toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. | http://codeseven.github.io/to... |
| Bootstrap Switch | Use Radio Buttons as switches. | http://www.larentis.eu/switch/ |
| jQuery jCrop | Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. | http://github.com/tapmodo/Jcrop |
| Bootstrap X-editable | In-place editing with Twitter Bootstrap. | http://vitalets.github.io/x-e... |
| Bootstrap Extended Modals | Responsive, Stackable, AJAX and more. | http://jschr.github.com/boots... |
| jQuery Multi Select | This plugin is a drop-in replacement for the standard select element with multiple attribute activated. | http://loudev.com/ |
| jQuery Sparklines | This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. | http://omnipotent.net/jquery.... |
| jQuery Input Mask | jQuery Input Mask is a jquery plugin which create an input mask. An inputmask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers. | http://github.com/RobinHerbot... |
| jQuery Easy Pie Chart | Lightweight jQuery plugin to render and animate nice pie charts with the HTML5 canvas element | http://rendro.github.io/easy-... |
| jQuery Input IP Address Control | During user input field, this plugin controls the format of IPv4 or IPv6 addresses. | https://code.google.com/p/jqu... |
| jQuery UI Sortable | jQuery UI Sortable | http://jqueryui.com/sortable/ |
| Pace - Page Progress Bar | n automatic web page progress bar. Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress. For more info check the plugin documentation. | http://github.hubspot.com/pace |
| jQuery BlockUI | The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser | http://jquery.malsup.com/block/ |
| jQuery Cookie | A simple, lightweight jQuery plugin for reading, writing and deleting cookies. | https://github.com/carhartl/j... |
| jQuery Pulsate | jQuery Pulsate provides animated pulsating effect that‘s useful for focussing attention to a certain part of your webpage in a subtle way. | http://kilianvalkhof.com/jque... |
| Respond | A fast & lightweight polyfill for min/max-width and CSS3 Media Queries (for IE 6-8, and more) | https://github.com/scottjehl/... |
| Excanvas | Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages | http://excanvas.sourceforge.net/ |
| jQuery Backstretch | A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. | http://srobbin.com/jquery-plu... |
| jQuery Countdown | A jQuery plugin that sets a div or span to show a countdown to a given time. | http://keith-wood.name/countd... |
| jQuery Bootpad for Bootstrap | Dynamic pagination jQuery plugin. Works well with twitter bootstrap or standalone. | http://botmonster.com/jquery-... |
| Colorpicker for Bootstrap | Add color picker to field or to any other element | http://www.eyecon.ro/bootstra... |
| Datepicker for Bootstrap | Add datepicker picker to field or to any other element | https://github.com/eternicode... |
| Bootstrap Datetimepicker | This project is a fork of bootstrap-datetimepicker project which doesn‘t include Time part. Some others parts has been improved as for example the load process which now accepts the ISO-8601 format. | http://www.malot.fr/bootstrap... |
| Date Range Picker for Bootstrap | This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates | https://github.com/dangrossma... |
| Bootstrap Timepicker | Easily select a time for a text input using your mouse or keyboards arrow keys. | http://jdewit.github.com/boot... |
| Clockface Timepicker | Clockface is a simple timepicker for Twitter Bootstrap | http://vitalets.github.com/cl... |
| Bootstrap Growl | Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications. | https://github.com/ifightcrim... |
| Bootstrap Tabdrop | Very usefull script when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit. | http://www.eyecon.ro/bootstra... |
| Bootstrap Select Splitter | Transforms SELECT containing one or more OPTGROUP in two chained SELECT. | https://github.com/xavierfauc... |
| jQuery MiniColors | A tiny color picker built on jQuery | https://github.com/claviska/j... |
| jQuery Tags Input | Magically convert a simple text input into a cool tag list with this jQuery plugin | https://github.com/xoxco/jQue... |
| Bootstrap WYSIWYG5 | Simple WYSIWYG Editor for Bootstrap | http://jhollingworth.github.c... |
| CKEditor | CKEditor is a ready-for-use HTML text editor designed to simplify web content creation | http://ckeditor.com/ |
| DataTables | DataTables for Twitter Bootstrap | http://www.datatables.net/ |
| Bootstrap File Input | The file upload plugin allows you to create a visually appealing file or image upload widgets | http://jasny.github.io/bootst... |
| FancyBox | FancyBox is a tool for displaying images, html content and multi-media | http://fancybox.net/ |
| Flot | Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. | http://www.flotcharts.org/ |
| gmaps.js | gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code | http://hpneo.github.com/gmaps/ |
| FullCalendar | FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar | http://arshaw.com/fullcalendar/ |
| jQuery slimScroll | slimScroll is a small (3.7KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar | http://rocha.la/jQuery-slimSc... |
| JQVMAP | JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9. Legacy support for older versions of Internet Explorer 6-8 is provided via VML. | http://jqvmap.com/ |
| jQuery File Upload | File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery | http://blueimp.github.com/jQu... |
| DropzoneJS | DropzoneJS is an open source library that provides drag‘n‘drop file uploads with image previews. | http://www.dropzonejs.com/ |
| jQuery UI Touch Punch | jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. | http://touchpunch.furf.com/ |
| Bootstrap Form Wizard | This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. | https://github.com/VinceG/twi... |
| Nestable | Drag & drop hierarchical list with mouse and touch compatibility. | https://github.com/dbushell/N... |
| jQuery Validation Plugin | The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy | http://bassistance.de/jquery-... |
| FontAwesome | The iconic font designed for use with Twitter Bootstrap | http://fortawesome.github.com... |
| Simple Line Icons | Simple Line Icons is 162 simple stroke icons that are great for mobile applications, websites, user interfaces, etc. All icons were converted from the same beautiful simple line icon sets released previously on GraphicBurger. | http://graphicburger.com/simp... |
| Open Sans | Metornic uses Open Sans web font from google fonts:http://fonts.googleapis.com/c... | http://www.google.com/webfonts |
bootstrap之metronic模板的学习之路-源码分析之body部分
body的组成结构body部分包含了HEADER、CONTAINER、FOOTER，其中CONTAINER部分又包含了SIDEBAR、CONTENT、QUICKSIDEBAR几个部分。body部分源码折叠后截图如下：Header页面顶部Headercontainsoflogoandtopmenubaranditusedinallpages.页面顶部（或头部）应用于所... 查看详情
metronic5.0.5bootstrap后台管理模板
演示地址：http://keenthemes.com/preview/metronic/ 下载DashboardTable 查看详情
metronic学习之路
简介1.Metronic 是一个基于Bootstrap3.*设计的自适应、多用途的管理后台模板。2.HTML页面开头都有着下面一段代码来检测ie浏览器的版本，并根据不同版本应用特定的类到显示页面。<!--[ifIE8]><htmllang="en"class="ie8no-js"><![en... 查看详情
metronic4.7.5html5ui框架
Metronic是一套精美的响应式后台管理模板，基于强大的TwitterBootstrap3.3.4框架实现。Metronic拥有简洁优雅的MetroUI风格界面，6种颜色可选，76个模板页面，包括图表、表格、地图、消息中心、监控面板等后台管理项目所需的各种组件... 查看详情
django之视图与模板以及在模板中使用bootstrap
从url中也可以传递参数给后台进行处理。比如http://127.0.0.1:8001/add/?a=4&b=5。这个链接传入a=4,b=5.后台将进行a+b的处理新增处理函数defadd(request): a=request.GET[‘a‘] b=request.GET[‘b‘] re 查看详情
metronic-v4.6使用经验
1、弹框居中显示上下居中需要上下居中引用 bootstrap-modalmanager.js左右居中修改 bootstrap-modal.js中 this.$element.css(‘margin-left‘, ‘‘); 改为 this.$element.css(‘margin-left‘, 0 查看详情
前端之bootstrap框架(代码片段)
一Bootstrap简介在搭建前端页面时我们可以借用一些好的模板，为了让这些模板更好的让开发者使用，我们借助Bootstrap来实现一些常用的模板例如在看到上面这么好的模板，同学们是不是就想立刻收藏了呢？二css全局样式布局容器... 查看详情
基于metronic的bootstrap开发框架经验总结--实现web页面内容的打印预览和保存操作(代码片段)
在前面介绍了很多篇相关的《Bootstrap开发框架》的系列文章，这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容，总体来说基本达到了一个稳定的状态，随着时间的推移可以会引入一些更好更新的内容进行完善，... 查看详情
abp+zero+metronic+redis的完美结合快速启动模板（超级代码详细注释版本）
微信扫一扫并支付成功，联系QQ:770628656获取所有源码（超级代码详细注释版本） 查看详情
使用vue.js制作仿metronic高级表格静态设计
...层是Datatables，本教程将主要使用Vue实现交互部分，使用Bootstrap做样式库，jQuery做部分用户交互（弹窗）。使用到的库：Vue2.0，Bootstrap3、jQuery2、font-awesome4，均可在CDN下载需要注意的是，Vue最好使用开发版本一、需求和原型设计&#... 查看详情
bootstrap之表格checkbox复选框全选[转]
转自:http://blog.csdn.net/shangmingchao/article/details/49761315效果图：HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了： [html]viewplaincopy<table class="table table-bordered table-hover"&g 查看详情
metronic5.1mdatatable插入记录和编辑记录后的跳转简单实现
插入记录：datatable.reload();$(‘.m_datatable.m-datatable__pager-nav.m-datatable__pager-link--last‘)[0].click();编辑记录：varcurrentPage=datatable.getCurrentPage();datatable.reload();$(‘.m_datatable.m-datatable_ 查看详情
rails and metronic - 资产预编译：SassC 错误，空间不足
...时间】：2019-07-1101:32:26【问题描述】：我开发了一个基于bootstrap的rails应用程序。现在我正在使用Metronic来改进样式，但是虽然我在开发模式下没有任何问题，但尝试在生产模式下编译资产，我得到了这 查看详情
metronic5.1导航菜单状态在切换页面时的适时调整(代码片段)
无论是Metronic5.1、gentelella、admilte等等bootstrap框架中左侧菜单，如果是静态页面，那么菜单状态都是设置好的。以下以Metronic5.1为例：<liclass="m-menu__itemm-menu__item--submenum-menu__item--openm-menu__item--expanded"aria-haspopup="true"dat 查看详情
[转]laravel与bootstrap-editable实现table的行内编辑
【转】Laravel与bootstrap-editable实现table的行内编辑准备需要的库bootstrap3.0下载bootstrap-table下载x-editable-develop下载前端处理引入库要使用插件，首先要在blade模板（或者说html）里引入对应的js文件和css文件bootstrap引入<linkhref="bootstra... 查看详情
《转》unity3d研究院编辑器之创建lua脚本模板
Unity里能创建c#脚本模板，但是如果我想创建Lua脚本模板怎么办呢？拓展一下编辑器吧。设置一下Lua脚本的模板地址： Assets/Editor/Lua/Template/lua.lua usingUnityEngine;usingUnityEditor;usingSystem;usingSystem.IO;usingSystem.Text;usingUnityEditor 查看详情
flask从入门到精通之flask-bootstrap的使用
Bootstrap（http://getbootstrap.com/）是Twitter开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代Web浏览器。 要想在程序中集成Bootstrap，显然要对模板做所有必要... 查看详情
bootstrap模板
一、bootstrap基本介绍 1、什么是bootstrap? bootstrap就是个前端快速开发的工具，该工具是个简单、直观、强悍的前端开发框架，让web开发更加迅速简单 2、bootstrap安装方法 不同的应用场景安装方式不同，请大... 查看详情