如何使用HTML样板:指南

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.

什么是HTML样板?

+$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.

另请注意,本文档中的所有链接都是相对的,因此如果您开始在文件夹中嵌套网页,则可能需要将它们更改为根相对或绝对链接。

如果对HTML进行任何重大更改,您可以添加注释,以便稍后提醒自己。

CSS编辑

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响应式网页设计并打印。

这里的一切都是公平的更新游戏,尽管仔细考虑是否应该这样做。为作者的自定义样式(即您的自定义样式)留出了一个区域,或者您可以创建一个完全独立的CSS文档并将其附加到HTML。

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

先进的锅炉板

HTML boilerplate: Initializr

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

一旦获得经验,就值得考虑使用自定义构建Initializr保留你需要的组件,放弃你不需要的组件。此外,如果您正在创建WordPress网站,请浏览特定于WordPress的空白主题,例如HTML5空白

这些下载和服务都是免费的,因此您可以在闲暇时查看并试用它们。

不过,无论你做什么,现在做一点工作和调查都应该为你节省很多时间,之后你只需要拿出你的样板来破解新网站。

相关文章:



翻译字数超限