HTML boilerplate

+$Although websites are all unique from a content and design perspective, the underlying foundations of the vast majority of sites are very similar. Using an HTML boilerplate for the initial work is a great way to save time and effort, and here we'll show you how you can use one to kick-start your website projects.

+$Typically, site designers and developers want to deal with the quirks of individual browsers, stripping out any proprietary styling that such software might add to specific网站布局+$elements. Additionally, they may use scripts to deal with the shortcomings of older browsers, and drop in basic default styles for horizontal rules and elements that are supposed to be hidden.

+$Doing this again and again for every project is a massive waste of time and energy. Not only will you mostly be repeating yourself, you might also make unique errors during every attempt to start afresh. An HTML boilerplate gives you something ready-made to work with, thus avoiding the horror of staring at a blank document and trying to figure out where to begin.


+$Boilerplates are similar to templates, but more helpful, in that they often contain text and graphics to start you off rather than just layouts that include these elements. An HTML boilerplate is a set of downloadable files that provide a foundation for any website you might want to create. Typically, they have been built by industry professionals but freely released to the community. Adapting them for your own projects helps speed things up and ensure the basics of your site are sound.

请注意,术语“HTML样板文件”并不意味着您只需获取HTML文档甚至一堆HTML文档。 Boilerplates可能包含一系列文件类型,包括HTML文档,还可以添加CSS,JavaScript,占位符图像以及有关如何使用刚下载的文档的文档。

HTML5 Boilerplate+$is a good place to start. The self-described "web's most popular frontend template", is a sleek and simple HTML5 template that's the result of the pooled knowledge of hundreds of developers. It provides the basic scaffolding or framework for building an entire website.

+$We're on version 7 at the moment, but you can get a gist of how this works by watching the introductory video designed for v5. The latest version is mobile-friendly, with an optimised谷歌分析+$snippet and minified versions of jQuery and Modernizr included.

+$Another popular option to explore is引导+$. This calls itself a 'frontend component library', and offers more comprehensive options than the HTML5 Boilerplate framework. Some argue that the industry's reliance on Bootstrap has led to increasing homogeneity in web design over recent years.

+$Whether you opt for a simple HTML5 boilerplate, or something that offers more control, will depend on your level of ability, confidence and needs.

使用HTML5 Boilerplate

+$When downloaded, this free, open-source boilerplate provides you with documentation and licensing information, some CSS, placeholder images in various aspect ratios, two HTML files, some JavaScript, and some server config files.

HTML5 Boilerplate


+$On downloading the archive, it's a good idea to make a copy and keep it clean and untouched. It can then serve as reference for any changes you make.

+$For your new site, first replace the+$favicon.ico的icon.png+$files with your logo – these will appear as your site's favicon and the icon when your site is saved to someone's iOS homescreen.在线发电机可以帮助您创建新的图像。

+$In the HTML, there might be some things that you're not familiar with. The majority of these additions deal with issues relating to legacy browsers. The final script element is for Google Analytics and can be removed entirely if you don't use that. Leave the other script elements that are found towards the end of the file, because they load jQuery.

+$Add content to the body of the document after the 'Add your site or application content here' comment. You'll also need to give the page a title and fill the+$'content'价值在+$'description'+$meta Tag.




HTML5 Boilerplate

HTML5 Boilerplate是一种在创建新网站时节省时间的好方法

+$Of the two CSS documents included with HTML5 Boilerplate, there's no need to touchNormalize.css+$. This is the reset document that ensures all browsers start on a level playing field when it comes to your website. By contrast,的main.css+$includes what the document terms "opinionated defaults", including some basic styles for selections, horizontal rules, images, and forms, helpers for item visibility, and@媒体+$rules For响应式网页设计并打印。


无论您的选择是什么,请注意您将如何处理HTML5 Boilerplate本身的后续更新。如果您编辑任何默认的main.css样式,则在未来版本的HTML5 Boilerplate中进行的更改(可以通过替换文件或替换部分文件来添加)不一定会发生在您的网站上,或者会覆盖您的自己的编辑。因此,再次对任何更改使用注释,从而使以后的比较更容易。


HTML boilerplate: Initializr

基于HTLM5 Boilerplate,Initializr为您生成一个干净的可自定义模板