If you paste the above code into a .html file, you will have a web page! This basic HTML5 template contains some of the elements listed in the next section, as well as a simple title element that will be displayed in your web browser. <\/p>\n
Let's take a closer look at its structure. <\/p>\n
Structure of HTML5 template<\/strong><\/p>\n
HTML templates usually contain the following parts: <\/p>
\n
Document type declaration (or doctype)<\/li>\n
<\/code>Element<\/li>\n
Character encoding<\/li>\n
Viewport element<\/li>\n
<\/code>, description and author<\/li>\n<li>Open Graph element for social cards<\/li>\n<li>Favicon and touch icons<\/li>\n<li>CSS Stylesheet Link<\/li>\n<li>JavaScript file link<\/li>\n<\/ol>\n<p>In addition to document type declarations and <code><html><\/code> elements, most of the elements listed above are located in the <code><head><\/code> section of the HTML template. <\/p>\n<p><strong>HTML5 Document Type Statement<\/strong><\/p>\n<p>Your HTML5 template needs to start with a document type declaration or <em>doctype<\/em>. doctype is just one way to tell the browser or any other parser what type of document it is looking at. For HTML files, this means a specific version and type of HTML. doctype should always be the first item at the top of any HTML file. Many years ago, the doctype declaration was an ugly and hard to remember confusion, usually designated as \"XHTML Strict\" or \"HTML Transitional\". <\/p>\n<p> With the advent of HTML5, those unintelligible annoying things disappeared, and now you only need this: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>
<h1><a href="http://m.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p>Simple and clear. \"5\" disappeared clearly from the statement. Although the current version of the web tag is called \"HTML5\", it is really just an evolution of previous HTML standards—the future specifications will be just the development we have today. There will never be \"HTML6\", so the web tag of the current state is usually simply called \"HTML\". <\/p>\n<p>Because the browser needs to support old content on the web, it does not rely on doctype to tell the browser what features should be supported in a given document. In other words, just doctype doesn't make your page compliant with modern HTML features. In fact, regardless of the doctype used, the browser will determine the feature support case by case. In fact, you can use the old doctype with the new HTML5 element on the page and the page renders the same way as when using the new doctype. <\/p>\n<p><strong><code><html><\/code>Element<\/strong><\/p>\nThe <p><code><html><\/code> element is the top level element in an HTML file—which means it contains everything except doctype in the document. The <code><html><\/code> element is divided into two parts—<code><head><\/code> and <code><body><\/code> parts. All other content in the webpage file will be placed in or inside the <code><html><\/code> element. The following code shows the <code><html><\/code> element, which is located after the doctype declaration and contains the <code><html><\/code> and <code><head><\/code> elements: <code><body><\/code>\n<\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre><p>How to use tags in HTML<strong><\/strong>\nThe <\/p><p> section contains important information about the document, which is not displayed to the end user - such as character encoding and links to CSS files, and possibly JavaScript files. This information is used by machines such as browsers, search engines, and screen readers: <code><head><\/code>\n<\/p>\nAll elements contained between the <pre class='brush:php;toolbar:false;'><html lang=\"en\">\n <head>\n <\/head>\n <body>\n <\/body>\n<\/html><\/pre>…<p> tags above are important, but end users don't see it - except for the <code><head><\/code> text, it will appear in online search and browser tags. <code><\/head><\/code><p><strong>How to use tags in HTML<\/strong><\/p>\nThe <p><code><body><\/code> section contains everything displayed in the browser - such as text, images, etc. If you want to show something to the end user, make sure to place it between the on and off <code><body><\/code>…<code><\/body><\/code> tags: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173897581228837.jpg\" alt=\"HTML5 Template: A Base Starter HTML Boilerplate for Any Project \" \/><\/p>\n<p><strong><code>lang<\/code>What are the attributes? <\/strong><\/p>\nThe <p><code><html><\/code> element should ideally contain the <code>lang<\/code> attribute, as shown in the above code (<code><html lang=\"en\"><\/code>). Its main purpose is to tell assistive technologies such as screen readers how to pronounce them when reading aloud. (This property is not required for page validation, but most validators will issue warnings if you do not include it.) <\/p>\n<p>The value of the <code>lang<\/code> attribute shown above is <code>en<\/code>, which specifies that the document is written in English. All other spoken languages ??have values, such as <code>fr<\/code> in French, <code>de<\/code> in German, <code>hi<\/code> in Hindi, etc. (You can find a complete list of language codes on Wikipedia.) <\/p>\n<p><strong>HTML document character encoding<\/strong><\/p>\nThe first line in the <p>HTML document <code><head><\/code> section is the line that defines the character encoding of the document. The letters and symbols we read on web pages are defined as a series of numbers, and some characters (such as letters) are encoded in many ways. Therefore, it is useful to tell your computer which encoding your web page should refer to. Indicator character encoding is an optional feature that does not cause any warnings in the validator, but for most HTML pages it is recommended: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p><em> Note: To ensure that some older browsers read character encoding correctly, the entire character encoding declaration must be included somewhere in the first 512 characters of the document. It should also appear before any content-based element (like the <code><title><\/code> element that appears later in our example). <\/em><\/p>\n<h3>Why use UTF-8 character encoding in HTML5 templates? <\/h3>\n<p>The above character encoding example uses the UTF-8 character set. In almost all cases, <code>utf-8<\/code> is the value you should use in your document. This encoding covers various characters not included in other encodings. You may have encountered strange characters on the web - for example - which is obviously a bug. This is usually because the browser cannot find the expected characters in the character set specified in the document. <\/p>\n<p>UTF-8 covers a variety of characters, including many characters in various languages ??around the world, as well as many useful symbols. As the World Wide Web Alliance explains: <\/p>\n<blockquote>\n<p>Unicode-based encodings (such as UTF-8) can support multiple languages ??and can be adapted to any language mixed pages and forms. Its use can also eliminate server-side logic, thereby individually determining the character encoding for each service page or for each incoming form submission. This greatly reduces the complexity of handling multilingual websites or applications. <\/p><\/blockquote>\n<p> The full explanation of character encoding is beyond the scope of this article, but if you want to dig deeper, you can read about character encoding in the HTML specification. <\/p>\nWhat does <p><strong><code>X-UA-Compatible<\/code> mean? <\/strong><\/p>\n<p>You sometimes see this line in <code><head><\/code> of your HTML document: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p>This meta tag allows web authors to select the version of Internet Explorer that should render the page. Now that Internet Explorer is largely just a bad memory, you can safely remove this line from your code. (We've removed it from the HTML5 template.) If you're sure your page might be viewed in an older version of IE, it might be worth including it. You can read more about this meta tag on the Microsoft website. <\/p>\n<p><strong>Viewport element<\/strong><\/p>\n<p>Viewport element is a feature you will see in almost every HTML5 template. It is very important for responsive web design and mobile-first design: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p>This <code><meta><\/code> element contains two properties that work together as a name\/value set. In this case, the name is set to <code>viewport<\/code> and the value is <code>width=device-width, initial-scale=1<\/code>. This is for mobile devices only. You will notice that there are two parts of the value: <\/p>\n<ul>\n<li><code>width=device-width<\/code>: The pixel width of the viewport you want the website to present. <\/li>\n<li><code>initial-scale<\/code>: This should be a positive number between 0.0 and 10.0. The value of \"1\" indicates a 1:1 ratio between the device width and the viewport size. <\/li>\n<\/ul>\n<p> You can read more about these meta-element properties on MDN, but now you just need to know that in most cases, this meta-element and its settings are best for mobile-first responsive websites. <\/p>\n<p><strong><code><title><\/code>, description and author<\/strong><\/p>\n<p>The next part of the HTML base template contains the following three lines: <\/p>\n<pre class='brush:php;toolbar:false;'><html lang=\"en\">\n <head>\n <\/head>\n <body>\n <\/body>\n<\/html><\/pre>\n<p><code><title><\/code> is what is displayed in the browser's title bar (for example, when you hover over the browser tab), which is also displayed in the search results. This element is the only required element in the <code><head><\/code> section. Description and author metaelements are optional, but they do provide important information for search engines. In the search results, the title and description in the above code example will be shown below. <\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173897581334276.jpg\" alt=\"HTML5 Template: A Base Starter HTML Boilerplate for Any Project \" \/><\/p>\n<p>You can place any number of valid element elements in <code><head><\/code>. <\/p>\n<p><strong>Open Graph element for social cards<\/strong><\/p>\n<p>As mentioned above, all meta elements are optional, but many are good for SEO and social media marketing. The next part of the HTML5 template contains some of these meta-element options: <\/p>\n<pre class='brush:php;toolbar:false;'><head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n <??> \n<\/head><\/pre>\n<p>These <code><meta><\/code> elements utilize the so-called Open Graph protocol, and there are many other elements you can use. These are the elements you use most frequently. You can view a complete list of available Open Graph meta options on the Open Graph website. <\/p><p> Those elements included here will enhance the appearance of the webpage when linked to social media posts. For example, the five <code><meta><\/code> elements included here will appear in a social card embedded with the following data: <\/p>\n<ul>\n<li>Title of content<\/li>\n<li>Provided content types<\/li>\n<li>Content specification URL<\/li>\n<li>Description of content<\/li>\n<li>Image associated with content<\/li>\n<\/ul>\n<p>When you see posts shared on social media, you will usually see these bits of data are automatically added to social media posts. For example, if you include a link to the GitHub homepage, the following will be displayed in the tweet. <\/p>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/173897581532472.jpg\" alt=\"HTML5 Template: A Base Starter HTML Boilerplate for Any Project \" \/><\/p>\n<p><strong>Favicon and Touch icons<\/strong><\/p>\n<p>The next part of the HTML5 template contains <code><link><\/code> elements that indicate the resources to contain as favicon and Apple touch icons: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>\n<p>Favicon will appear in the browser tab when someone checks your website. <code>favicon.ico<\/code> Files are used in older browsers and do not have to be included in the code. As long as your <code>favicon.ico<\/code> file is included in the root directory of the project, the browser will automatically find it. <code>favicon.svg<\/code> Files are used in modern browsers that support SVG icons. You can also use .png files instead. <\/p>\n<p>The last element references the icon used on Apple devices when adding the page to the user's home screen. <\/p>\n<p> You can include additional options here, including web application manifest files that reference other icons. For the full discussion, we recommend that you read Andrey Sitnik's article on this topic. But those included here are enough for simple HTML beginner templates. <\/p>\n<p><strong>Contains CSS stylesheets and JavaScript files<\/strong><\/p>\n<p>The last two important parts of the HTML Getting Started Template are references to one or more stylesheets and possibly JavaScript files. Of course, both are optional, although few sites don't have at least some CSS styles. <\/p>\n<h3>Include CSS stylesheet in HTML template<\/h3>\n<p>Stylesheets can be included anywhere in the document, but you will usually see it in the <code><head><\/code> section: <\/p>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\nThe <p><code><link><\/code> element points the web browser to an external stylesheet so that it can apply these CSS styles to the page. The <code><link><\/code> element requires the <code>rel<\/code> attribute to be <code>stylesheet<\/code>. In the past, there was usually also a <code>type<\/code> attribute, but it was never really needed, so if you find the old code that contains it on the web, just delete it. <\/p>\n<p> Note that we added the <code>?v=1.0<\/code> query string at the end of the CSS link. This is completely optional. This is a handy trick when you update the stylesheet to update this query string (for example, update to 1.1 or 2.0), because doing so ensures that the browser will discard any old, cached copy of CSS files and load the new one version. <\/p><p>It is worth noting that you do not have to use the <code><link><\/code> element to include CSS on the webpage, as you can instead put all styles inside the <code><style><\/code>…<code><\/style><\/code> tag of the page itself, located in the <code><head><\/code> section . This is very convenient when experimenting with layouts, but it is not generally recommended to do so on active sites, as these styles will be inaccessible on other pages, resulting in inefficient and\/or duplicate code. <\/p>\n<h3>Include JavaScript files in HTML templates<\/h3>\n<p>JavaScript code usually passes <code><\/pre>\n ?\n <p> \n<\/body><\/code><code><\/p><\/code>\n<pre class='brush:php;toolbar:false;'><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>HTML5 Boilerplate<\/title>\n <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n <h1>Page Title<\/h1>\n <??>\n<\/body>\n<\/html><\/pre>Embed the script in the <p> tag: <strong>\n<\/strong>\n<\/p><p>Instructions on old browsers and new elements<code><article><\/code><code><aside><\/code>\n<code><recipe><\/code>When HTML5 was introduced, it contained many new elements such as <code><ziggy><\/code> and <\/aside>. You might think that support for unidentified elements is a major issue for older browsers – but that’s not the case! Most browsers don't actually care what tags you use. If you have an HTML document that contains an <\/article> element (or even a <\/ziggy> element), and your CSS attaches certain styles to that element, almost every browser will handle it like this is totally normal, without Apply your style complaintly. <\/recipe><\/p><p><\/p><p>\n<\/p> Of course, such assumptions do not verify and there may be accessibility issues, but it will render correctly in almost all browsers – the exception is an older version of Internet Explorer (IE). Prior to version 9, IE blocked unrecognized elements from receiving styles. The rendering engine treats these mysterious elements as \"unknown elements\", so you can't change their appearance or behavior. This includes not only the elements we imagined, but also any elements that were not defined at the time of developing these browser versions, including new HTML5 elements. <p>\n<em>Luckily, older browsers that do not support the new element style are hardly present nowadays, so you can safely use any new HTML element in almost any project without worrying about it. <\/em>\n<\/p> That is, if you really need to support old browsers, you can still use the reliable HTML5 Shiv, a simple JavaScript snippet originally developed by John Resig. It was inspired by Sjoerd Visscher's work, which made new HTML5 elements styleable in older versions of IE. Actually, this is not necessary today, though. As caniuse.com shows, HTML5 elements are supported in all browsers in use. <p>\n<strong><\/strong>Complete HTML5 template<\/p><p>\n<\/p>This is our final HTML5 template – a simple template that you can use for any project: <pre class='brush:php;toolbar:false;'><!DOCTYPE html><\/pre>\n<p>\n<code><body><\/code>You can put this simple and easy-to-use HTML5 template code into any project today! On this basis, you can add whatever you want between the <code><\/body><\/code> and <\/p> tags. <p>\n<strong><\/strong>Conclusion<\/p>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://m.miracleart.cn/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Community" class="head_nava head_nava-template1">Community</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://m.miracleart.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a>
<a href="http://m.miracleart.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/course.html" title="Course" class="languagechoosea on">Course</a>
<a href="http://m.miracleart.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a>
<a href="http://m.miracleart.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a>
<a href="http://m.miracleart.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a>
<a href="http://m.miracleart.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a>
<a href="http://m.miracleart.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a>
<a href="http://m.miracleart.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://m.miracleart.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://m.miracleart.cn/game" title="Game Download" class="languagechoosea on">Game Download</a>
<a href="http://m.miracleart.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">English<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:;" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1L">
<div id="377j5v51b" class="Article_Details_main1Lmain" id="Article_Details_main1Lmain">
<div id="377j5v51b" class="Article_Details_main1L1">Table of Contents</div>
<div id="377j5v51b" class="Article_Details_main1L2" id="Article_Details_main1L2">
<!-- 左側(cè)懸浮，文章定位標(biāo)題1 id="Article_Details_main1L2s_1"-->
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Why-use-UTF-character-encoding-in-HTML-templates" title="Why use UTF-8 character encoding in HTML5 templates? " >Why use UTF-8 character encoding in HTML5 templates? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Include-CSS-stylesheet-in-HTML-template" title="Include CSS stylesheet in HTML template" >Include CSS stylesheet in HTML template</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Include-JavaScript-files-in-HTML-templates" title="Include JavaScript files in HTML templates" >Include JavaScript files in HTML templates</a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#What-is-the-HTML-template-used-for" title="What is the HTML5 template used for? " >What is the HTML5 template used for? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#What-is-the-template-example" title="What is the template example? " >What is the template example? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#What-is-the-starting-code-for-HTML" title="What is the starting code for HTML? " >What is the starting code for HTML? </a>
</div>
<div id="377j5v51b" class="Article_Details_main1L2s ">
<a href="#Does-every-HTML-file-require-a-template" title="Does every HTML file require a template? " >Does every HTML file require a template? </a>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://m.miracleart.cn/" title="Home"
class="phpgenera_Details_mainL1a">Home</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/web-designer.html"
class="phpgenera_Details_mainL1a">Web Front-end</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://m.miracleart.cn/css-tutorial.html"
class="phpgenera_Details_mainL1a">CSS Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>HTML5 Template: A Base Starter HTML Boilerplate for Any Project</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">HTML5 Template: A Base Starter HTML Boilerplate for Any Project</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://m.miracleart.cn/member/1468495.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea810373f2f131.png" src="/static/imghw/default1.png" alt="Joseph Gordon-Levitt">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://m.miracleart.cn/member/1468495.html" class="author_name">Joseph Gordon-Levitt</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Feb 08, 2025 am 08:50 AM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p>Build your own HTML5 template: a concise guide </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581160448.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project "></p>
<p>This article will guide you on how to create your own HTML5 template. We will step by step explaining the key elements of the HTML basic template, and finally providing a simple template that you can use and further build. </p>
<p>After reading this article, you will have your own HTML5 template. If you want to get the HTML template code now, read this article later, here is our final HTML5 template. </p>
<p><strong>Key Points</strong></p>
<ul>
<li>HTML5 templates, as reusable templates, contain the necessary HTML elements, help avoid repeated code writing at the beginning of each project. </li>
<li>A basic HTML5 template should contain document type declarations, <code></code> elements with language attributes, character encoding via <code><meta charset="utf-8"></code>, and viewport settings for responsive design. </li>
The key elements of the <li>HTML5 template <code></code> section usually contain metadata for SEO, links to CSS stylesheets, and optional JavaScript files. </li>
<li>For social media optimization, adding Open Graph meta tags can enhance the display effect of content when shared on social platforms. </li>
<li>Including favicon and Apple touch icons in the template helps to build brand identity and improve user experience across devices. </li>
<li>Putting JavaScript files before closed <code></code> tags can improve page loading speeds because it allows browsers to render pages faster by delaying the loading script. </li>
</ul>
<p><strong>What is an HTML template? </strong></p>
<p>Each website is different, but from one website to another, many things are basically the same. Instead of writing the same code over and over, create your own "template". A template is a template that you use every time you start a project, which can prevent you from starting from scratch. </p>
<p> Wikipedia describes the template as: </p>
<blockquote>
<p> Code snippets appear repeatedly in multiple places, with little change. </p>
</blockquote>
<p>As you learn HTML5 and add new technologies to your toolbox, you may want to build an HTML template for yourself to start all future projects. It's definitely worth doing, and there are plenty of starting points online that can help you build your own HTML5 templates. </p>
<p><strong>A very simple example of HTML5 template</strong></p>
<p>The complete template provided at the end of this article contains a lot of content. But you don’t have to do it that fancy – especially when you’re just starting to learn. Here is a very simple "beginner" HTML5 template, which is probably the only thing you need: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<p>If you paste the above code into a .html file, you will have a web page! This basic HTML5 template contains some of the elements listed in the next section, as well as a simple title element that will be displayed in your web browser. </p>
<p>Let's take a closer look at its structure. </p>
<p><strong>Structure of HTML5 template</strong></p>
<p>HTML templates usually contain the following parts: </p><ol>
<li>Document type declaration (or doctype)</li>
<li><code><html></code>Element</li>
<li>Character encoding</li>
<li>Viewport element</li>
<li><code><title></code>, description and author</li>
<li>Open Graph element for social cards</li>
<li>Favicon and touch icons</li>
<li>CSS Stylesheet Link</li>
<li>JavaScript file link</li>
</ol>
<p>In addition to document type declarations and <code><html></code> elements, most of the elements listed above are located in the <code><head></code> section of the HTML template. </p>
<p><strong>HTML5 Document Type Statement</strong></p>
<p>Your HTML5 template needs to start with a document type declaration or <em>doctype</em>. doctype is just one way to tell the browser or any other parser what type of document it is looking at. For HTML files, this means a specific version and type of HTML. doctype should always be the first item at the top of any HTML file. Many years ago, the doctype declaration was an ugly and hard to remember confusion, usually designated as "XHTML Strict" or "HTML Transitional". </p>
<p> With the advent of HTML5, those unintelligible annoying things disappeared, and now you only need this: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<p>Simple and clear. "5" disappeared clearly from the statement. Although the current version of the web tag is called "HTML5", it is really just an evolution of previous HTML standards—the future specifications will be just the development we have today. There will never be "HTML6", so the web tag of the current state is usually simply called "HTML". </p>
<p>Because the browser needs to support old content on the web, it does not rely on doctype to tell the browser what features should be supported in a given document. In other words, just doctype doesn't make your page compliant with modern HTML features. In fact, regardless of the doctype used, the browser will determine the feature support case by case. In fact, you can use the old doctype with the new HTML5 element on the page and the page renders the same way as when using the new doctype. </p>
<p><strong><code><html></code>Element</strong></p>
The <p><code><html></code> element is the top level element in an HTML file—which means it contains everything except doctype in the document. The <code><html></code> element is divided into two parts—<code><head></code> and <code><body></code> parts. All other content in the webpage file will be placed in or inside the <code><html></code> element. The following code shows the <code><html></code> element, which is located after the doctype declaration and contains the <code><html></code> and <code><head></code> elements: <code><body></code>
</p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre><p>How to use tags in HTML<strong></strong>
The </p><p> section contains important information about the document, which is not displayed to the end user - such as character encoding and links to CSS files, and possibly JavaScript files. This information is used by machines such as browsers, search engines, and screen readers: <code><head></code>
</p>
All elements contained between the <pre class='brush:php;toolbar:false;'><html lang="en">
<head>
</head>
<body>
</body>
</html></pre>…<p> tags above are important, but end users don't see it - except for the <code><head></code> text, it will appear in online search and browser tags. <code></head></code><p><strong>How to use tags in HTML</strong></p>
The <p><code><body></code> section contains everything displayed in the browser - such as text, images, etc. If you want to show something to the end user, make sure to place it between the on and off <code><body></code>…<code></body></code> tags: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581228837.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project " /></p>
<p><strong><code>lang</code>What are the attributes? </strong></p>
The <p><code><html></code> element should ideally contain the <code>lang</code> attribute, as shown in the above code (<code><html lang="en"></code>). Its main purpose is to tell assistive technologies such as screen readers how to pronounce them when reading aloud. (This property is not required for page validation, but most validators will issue warnings if you do not include it.) </p>
<p>The value of the <code>lang</code> attribute shown above is <code>en</code>, which specifies that the document is written in English. All other spoken languages ??have values, such as <code>fr</code> in French, <code>de</code> in German, <code>hi</code> in Hindi, etc. (You can find a complete list of language codes on Wikipedia.) </p>
<p><strong>HTML document character encoding</strong></p>
The first line in the <p>HTML document <code><head></code> section is the line that defines the character encoding of the document. The letters and symbols we read on web pages are defined as a series of numbers, and some characters (such as letters) are encoded in many ways. Therefore, it is useful to tell your computer which encoding your web page should refer to. Indicator character encoding is an optional feature that does not cause any warnings in the validator, but for most HTML pages it is recommended: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre>
<p><em> Note: To ensure that some older browsers read character encoding correctly, the entire character encoding declaration must be included somewhere in the first 512 characters of the document. It should also appear before any content-based element (like the <code><title></code> element that appears later in our example). </em></p>
<h3 id="Why-use-UTF-character-encoding-in-HTML-templates">Why use UTF-8 character encoding in HTML5 templates? </h3>
<p>The above character encoding example uses the UTF-8 character set. In almost all cases, <code>utf-8</code> is the value you should use in your document. This encoding covers various characters not included in other encodings. You may have encountered strange characters on the web - for example - which is obviously a bug. This is usually because the browser cannot find the expected characters in the character set specified in the document. </p>
<p>UTF-8 covers a variety of characters, including many characters in various languages ??around the world, as well as many useful symbols. As the World Wide Web Alliance explains: </p>
<blockquote>
<p>Unicode-based encodings (such as UTF-8) can support multiple languages ??and can be adapted to any language mixed pages and forms. Its use can also eliminate server-side logic, thereby individually determining the character encoding for each service page or for each incoming form submission. This greatly reduces the complexity of handling multilingual websites or applications. </p></blockquote>
<p> The full explanation of character encoding is beyond the scope of this article, but if you want to dig deeper, you can read about character encoding in the HTML specification. </p>
What does <p><strong><code>X-UA-Compatible</code> mean? </strong></p>
<p>You sometimes see this line in <code><head></code> of your HTML document: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<p>This meta tag allows web authors to select the version of Internet Explorer that should render the page. Now that Internet Explorer is largely just a bad memory, you can safely remove this line from your code. (We've removed it from the HTML5 template.) If you're sure your page might be viewed in an older version of IE, it might be worth including it. You can read more about this meta tag on the Microsoft website. </p>
<p><strong>Viewport element</strong></p>
<p>Viewport element is a feature you will see in almost every HTML5 template. It is very important for responsive web design and mobile-first design: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre>
<p>This <code><meta></code> element contains two properties that work together as a name/value set. In this case, the name is set to <code>viewport</code> and the value is <code>width=device-width, initial-scale=1</code>. This is for mobile devices only. You will notice that there are two parts of the value: </p>
<ul>
<li><code>width=device-width</code>: The pixel width of the viewport you want the website to present. </li>
<li><code>initial-scale</code>: This should be a positive number between 0.0 and 10.0. The value of "1" indicates a 1:1 ratio between the device width and the viewport size. </li>
</ul>
<p> You can read more about these meta-element properties on MDN, but now you just need to know that in most cases, this meta-element and its settings are best for mobile-first responsive websites. </p>
<p><strong><code><title></code>, description and author</strong></p>
<p>The next part of the HTML base template contains the following three lines: </p>
<pre class='brush:php;toolbar:false;'><html lang="en">
<head>
</head>
<body>
</body>
</html></pre>
<p><code><title></code> is what is displayed in the browser's title bar (for example, when you hover over the browser tab), which is also displayed in the search results. This element is the only required element in the <code><head></code> section. Description and author metaelements are optional, but they do provide important information for search engines. In the search results, the title and description in the above code example will be shown below. </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581334276.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project " /></p>
<p>You can place any number of valid element elements in <code><head></code>. </p>
<p><strong>Open Graph element for social cards</strong></p>
<p>As mentioned above, all meta elements are optional, but many are good for SEO and social media marketing. The next part of the HTML5 template contains some of these meta-element options: </p>
<pre class='brush:php;toolbar:false;'><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
<??>
</head></pre>
<p>These <code><meta></code> elements utilize the so-called Open Graph protocol, and there are many other elements you can use. These are the elements you use most frequently. You can view a complete list of available Open Graph meta options on the Open Graph website. </p><p> Those elements included here will enhance the appearance of the webpage when linked to social media posts. For example, the five <code><meta></code> elements included here will appear in a social card embedded with the following data: </p>
<ul>
<li>Title of content</li>
<li>Provided content types</li>
<li>Content specification URL</li>
<li>Description of content</li>
<li>Image associated with content</li>
</ul>
<p>When you see posts shared on social media, you will usually see these bits of data are automatically added to social media posts. For example, if you include a link to the GitHub homepage, the following will be displayed in the tweet. </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173897581532472.jpg" class="lazy" alt="HTML5 Template: A Base Starter HTML Boilerplate for Any Project " /></p>
<p><strong>Favicon and Touch icons</strong></p>
<p>The next part of the HTML5 template contains <code><link></code> elements that indicate the resources to contain as favicon and Apple touch icons: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<p>Favicon will appear in the browser tab when someone checks your website. <code>favicon.ico</code> Files are used in older browsers and do not have to be included in the code. As long as your <code>favicon.ico</code> file is included in the root directory of the project, the browser will automatically find it. <code>favicon.svg</code> Files are used in modern browsers that support SVG icons. You can also use .png files instead. </p>
<p>The last element references the icon used on Apple devices when adding the page to the user's home screen. </p>
<p> You can include additional options here, including web application manifest files that reference other icons. For the full discussion, we recommend that you read Andrey Sitnik's article on this topic. But those included here are enough for simple HTML beginner templates. </p>
<p><strong>Contains CSS stylesheets and JavaScript files</strong></p>
<p>The last two important parts of the HTML Getting Started Template are references to one or more stylesheets and possibly JavaScript files. Of course, both are optional, although few sites don't have at least some CSS styles. </p>
<h3 id="Include-CSS-stylesheet-in-HTML-template">Include CSS stylesheet in HTML template</h3>
<p>Stylesheets can be included anywhere in the document, but you will usually see it in the <code><head></code> section: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre>
The <p><code><link></code> element points the web browser to an external stylesheet so that it can apply these CSS styles to the page. The <code><link></code> element requires the <code>rel</code> attribute to be <code>stylesheet</code>. In the past, there was usually also a <code>type</code> attribute, but it was never really needed, so if you find the old code that contains it on the web, just delete it. </p>
<p> Note that we added the <code>?v=1.0</code> query string at the end of the CSS link. This is completely optional. This is a handy trick when you update the stylesheet to update this query string (for example, update to 1.1 or 2.0), because doing so ensures that the browser will discard any old, cached copy of CSS files and load the new one version. </p><p>It is worth noting that you do not have to use the <code><link></code> element to include CSS on the webpage, as you can instead put all styles inside the <code><style></code>…<code></style></code> tag of the page itself, located in the <code><head></code> section . This is very convenient when experimenting with layouts, but it is not generally recommended to do so on active sites, as these styles will be inaccessible on other pages, resulting in inefficient and/or duplicate code. </p>
<h3 id="Include-JavaScript-files-in-HTML-templates">Include JavaScript files in HTML templates</h3>
<p>JavaScript code usually passes <code></pre>
?
<p>
</body></code><code></p></code>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>Embed the script in the <p> tag: <strong>
</strong>
</p><p>Instructions on old browsers and new elements<code><article></code><code><aside></code>
<code><recipe></code>When HTML5 was introduced, it contained many new elements such as <code><ziggy></code> and </aside>. You might think that support for unidentified elements is a major issue for older browsers – but that’s not the case! Most browsers don't actually care what tags you use. If you have an HTML document that contains an </article> element (or even a </ziggy> element), and your CSS attaches certain styles to that element, almost every browser will handle it like this is totally normal, without Apply your style complaintly. </recipe></p><p></p><p>
</p> Of course, such assumptions do not verify and there may be accessibility issues, but it will render correctly in almost all browsers – the exception is an older version of Internet Explorer (IE). Prior to version 9, IE blocked unrecognized elements from receiving styles. The rendering engine treats these mysterious elements as "unknown elements", so you can't change their appearance or behavior. This includes not only the elements we imagined, but also any elements that were not defined at the time of developing these browser versions, including new HTML5 elements. <p>
<em>Luckily, older browsers that do not support the new element style are hardly present nowadays, so you can safely use any new HTML element in almost any project without worrying about it. </em>
</p> That is, if you really need to support old browsers, you can still use the reliable HTML5 Shiv, a simple JavaScript snippet originally developed by John Resig. It was inspired by Sjoerd Visscher's work, which made new HTML5 elements styleable in older versions of IE. Actually, this is not necessary today, though. As caniuse.com shows, HTML5 elements are supported in all browsers in use. <p>
<strong></strong>Complete HTML5 template</p><p>
</p>This is our final HTML5 template – a simple template that you can use for any project: <pre class='brush:php;toolbar:false;'><!DOCTYPE html></pre>
<p>
<code><body></code>You can put this simple and easy-to-use HTML5 template code into any project today! On this basis, you can add whatever you want between the <code></body></code> and </p> tags. <p>
<strong></strong>Conclusion</p><p>There are many HTML beginner templates and frameworks online, with ready-made CSS and JavaScript files and many pre-write content that you can use and modify as you like. This is not our goal. The basic templates we provide here contain everything you might need when designing any web page so you don't have to start from scratch every time. </p>
<p> Feel free to copy the basic HTML page templates we show at the beginning, or the full templates we show above and use them in your project. Over time, you may find that there are contents you don't need often, and some of the things we haven't mentioned here that you use frequently, so you can update your templates to suit your workflow. </p>
<p><strong>Next steps</strong></p>
<p>A good way to take your web layout to the next level is to use Beautiful Web Design Principles, Fourth Edition. This book will teach you design principles and <em> and </em> to show you how to implement them on the web. It was completely rewritten in September 2020 and contains cutting-edge technology you haven't read anywhere else. </p>
<p>To hone your CSS knowledge, our modern CSS project courses will help you master the latest advanced versions of CSS3. </p>
<p>Apart from that, you can take your website or web application development to the next level with interactive and programmatic, reactive UI. For example, look at SitePoint's vast resources on JavaScript and React. And learn how to start a new project faster using our guide on the best scaffolding web tools and libraries. Or, if you want to build a web experience without learning coding, read our starter guide on codeless movement. The latest codeless tool is a game-changer. For the first time they have enough power to provide a powerful alternative to coding in many cases. </p>
<p><strong>HTML5 Template FAQ</strong>
</p> Finally, we will answer frequently asked questions about HTML5 template code. <p>
</p>What are templates in HTML? <h3>
</h3>Template is an HTML page template that is used every time you start a project, thus avoiding starting from scratch. It includes common elements such as document type declarations and basic HTML elements that appear on each web page. <p>
</p>Is a template a template? <h3>
</h3>Yes. A template is a very simple HTML beginner template that contains links to basic elements that appear on any web page, such as character encoding, <p> and <code><head></code> elements, and CSS and JavaScript files. <code><body></code>
</p>How to create a template in HTML? <h3>
</h3>One way to create your own HTML template is to get any web page, copy its source code, and then delete everything except the most basic elements that appear on each web page. Or you can get our ready-made HTML5 template and paste it into the .html file and you're ready to go! <p><h3 id="What-is-the-HTML-template-used-for">What is the HTML5 template used for? </h3>
<p>When designing a web page, there is nothing worse than having to write all the boring code from scratch starting with a blank .html page. Our HTML5 templates provide you with all the HTML template code you need to get started running so that you can start working on your unique designs and content right away. </p>
<h3 id="What-is-the-template-example">What is the template example? </h3>
<p>There are many examples of HTML5 templates on the Internet. Over time, you may create your own templates based on the way you write HTML yourself. Our HTML5 template example provides all the basic elements you need on most web pages. </p>
<p>As a very simple start, you can just use this: </p>
<pre class='brush:php;toolbar:false;'><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Boilerplate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Page Title</h1>
<??>
</body>
</html></pre>
<h3 id="What-is-the-starting-code-for-HTML">What is the starting code for HTML? </h3>
<p>HTML documents always start with a document type declaration: <code><!DOCTYPE html></code>. Then there is the <code></code> tag, which contains all the other content on the web page. The two child elements of <code></code> are the <code></code> and <code></code> elements. Our HTML5 template contains all the basic starting code required for any web page. </p>
<h3 id="Does-every-HTML-file-require-a-template">Does every HTML file require a template? </h3>
<p>Ideally, yes. HTML templates provide the minimum amount of code for HTML pages to perform any useful actions in a web browser. You can use HTML template code on every page of your website. Typically, the common elements of the template will be injected into your page from a single source, such as a framework or include file, so that you can update the templates for all pages at once. Our HTML5 template provides all the HTML template code you need to get started. </p><p>The above is the detailed content of HTML5 Template: A Base Starter HTML Boilerplate for Any Project. For more information, please follow other related articles on the PHP Chinese website!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" class="bzsmdiv_sp">Statement of this Website</div>
<div>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</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/article.html">Show More</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot AI Tools</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Undress images for free</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>AI-powered app for creating realistic nude photos</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Online AI tool for removing clothes from photos.</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ai">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Article</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/article.html">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Hot Tools</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Easy-to-use and free code editor</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Chinese version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Chinese version</h3>
</a>
<p>Chinese version, very easy to use</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Zend Studio 13.0.1" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Zend Studio 13.0.1</h3>
</a>
<p>Powerful PHP integrated development environment</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Visual web development tools</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://m.miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac version" />
</a>
<div id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://m.miracleart.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac version</h3>
</a>
<p>God-level code editing software (SublimeText3)</p>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/ai">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Hot Topics</h2>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8637</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1783</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1728</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1577</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://m.miracleart.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1442</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://m.miracleart.cn/faq/zt">Show More</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796823628.html" title="What is 'render-blocking CSS'?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is 'render-blocking CSS'?" />
</a>
<a href="http://m.miracleart.cn/faq/1796823628.html" title="What is 'render-blocking CSS'?" class="phphistorical_Version2_mids_title">What is 'render-blocking CSS'?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796822133.html" title="External vs. Internal CSS: What's the Best Approach?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="External vs. Internal CSS: What's the Best Approach?" />
</a>
<a href="http://m.miracleart.cn/faq/1796822133.html" title="External vs. Internal CSS: What's the Best Approach?" class="phphistorical_Version2_mids_title">External vs. Internal CSS: What's the Best Approach?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span>
<p class="Articlelist_txts_p">ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796821588.html" title="Does my CSS must be on lower case?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Does my CSS must be on lower case?" />
</a>
<a href="http://m.miracleart.cn/faq/1796821588.html" title="Does my CSS must be on lower case?" class="phphistorical_Version2_mids_title">Does my CSS must be on lower case?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span>
<p class="Articlelist_txts_p">No,CSSdoesnothavetobeinlowercase.However,usinglowercaseisrecommendedfor:1)Consistencyandreadability,2)Avoidingerrorsinrelatedtechnologies,3)Potentialperformancebenefits,and4)Improvedcollaborationwithinteams.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796821998.html" title="CSS Case Sensitivity: Understanding What Matters" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS Case Sensitivity: Understanding What Matters" />
</a>
<a href="http://m.miracleart.cn/faq/1796821998.html" title="CSS Case Sensitivity: Understanding What Matters" class="phphistorical_Version2_mids_title">CSS Case Sensitivity: Understanding What Matters</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">CSSismostlycase-insensitive,butURLsandfontfamilynamesarecase-sensitive.1)Propertiesandvalueslikecolor:red;arenotcase-sensitive.2)URLsmustmatchtheserver'scase,e.g.,/images/Logo.png.3)Fontfamilynameslike'OpenSans'mustbeexact.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796828180.html" title="What is Autoprefixer and how does it work?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is Autoprefixer and how does it work?" />
</a>
<a href="http://m.miracleart.cn/faq/1796828180.html" title="What is Autoprefixer and how does it work?" class="phphistorical_Version2_mids_title">What is Autoprefixer and how does it work?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796821606.html" title="What are CSS counters?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What are CSS counters?" />
</a>
<a href="http://m.miracleart.cn/faq/1796821606.html" title="What are CSS counters?" class="phphistorical_Version2_mids_title">What are CSS counters?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span>
<p class="Articlelist_txts_p">CSScounterscanautomaticallynumbersectionsandlists.1)Usecounter-resettoinitialize,counter-incrementtoincrease,andcounter()orcounters()todisplayvalues.2)CombinewithJavaScriptfordynamiccontenttoensureaccurateupdates.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796821580.html" title="CSS: When Does Case Matter (and When Doesn't)?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS: When Does Case Matter (and When Doesn't)?" />
</a>
<a href="http://m.miracleart.cn/faq/1796821580.html" title="CSS: When Does Case Matter (and When Doesn't)?" class="phphistorical_Version2_mids_title">CSS: When Does Case Matter (and When Doesn't)?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">In CSS, selector and attribute names are case-sensitive, while values, named colors, URLs, and custom attributes are case-sensitive. 1. The selector and attribute names are case-insensitive, such as background-color and background-Color are the same. 2. The hexadecimal color in the value is case-sensitive, but the named color is case-sensitive, such as red and Red is invalid. 3. URLs are case sensitive and may cause file loading problems. 4. Custom properties (variables) are case sensitive, and you need to pay attention to the consistency of case when using them.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://m.miracleart.cn/faq/1796827610.html" title="What is the conic-gradient() function?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175130377175874.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is the conic-gradient() function?" />
</a>
<a href="http://m.miracleart.cn/faq/1796827610.html" title="What is the conic-gradient() function?" class="phphistorical_Version2_mids_title">What is the conic-gradient() function?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:16 AM</span>
<p class="Articlelist_txts_p">Theconic-gradient()functioninCSScreatescirculargradientsthatrotatecolorstopsaroundacentralpoint.1.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin</p>
</div>
</div>
<a href="http://m.miracleart.cn/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://m.miracleart.cn/about/us.html">About us</a>
<a href="http://m.miracleart.cn/about/disclaimer.html">Disclaimer</a>
<a href="http://m.miracleart.cn/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://m.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="b0wf4" class="pl_css_ganrao" style="display: none;"><dfn id="b0wf4"><th id="b0wf4"><dl id="b0wf4"></dl></th></dfn><nobr id="b0wf4"><listing id="b0wf4"><div id="b0wf4"><button id="b0wf4"></button></div></listing></nobr><b id="b0wf4"></b><menuitem id="b0wf4"></menuitem><ol id="b0wf4"><strike id="b0wf4"></strike></ol><dl id="b0wf4"></dl><th id="b0wf4"><output id="b0wf4"><style id="b0wf4"><small id="b0wf4"></small></style></output></th><form id="b0wf4"></form><tbody id="b0wf4"><ol id="b0wf4"><dl id="b0wf4"></dl></ol></tbody><dd id="b0wf4"><form id="b0wf4"><track id="b0wf4"></track></form></dd><mark id="b0wf4"><video id="b0wf4"><track id="b0wf4"></track></video></mark><xmp id="b0wf4"><ul id="b0wf4"><kbd id="b0wf4"></kbd></ul></xmp><rp id="b0wf4"><legend id="b0wf4"><dfn id="b0wf4"></dfn></legend></rp><dfn id="b0wf4"></dfn><form id="b0wf4"></form><abbr id="b0wf4"></abbr><video id="b0wf4"></video><strong id="b0wf4"><dl id="b0wf4"><tr id="b0wf4"></tr></dl></strong><th id="b0wf4"><nobr id="b0wf4"></nobr></th><video id="b0wf4"></video><pre id="b0wf4"></pre><table id="b0wf4"><nobr id="b0wf4"><s id="b0wf4"></s></nobr></table><dfn id="b0wf4"></dfn><center id="b0wf4"></center><meter id="b0wf4"><samp id="b0wf4"><nobr id="b0wf4"></nobr></samp></meter><del id="b0wf4"></del><div id="b0wf4"></div><blockquote id="b0wf4"></blockquote><form id="b0wf4"></form><input id="b0wf4"><div id="b0wf4"><big id="b0wf4"><option id="b0wf4"></option></big></div></input><button id="b0wf4"></button><dfn id="b0wf4"></dfn><center id="b0wf4"></center><label id="b0wf4"><center id="b0wf4"></center></label><meter id="b0wf4"></meter><dfn id="b0wf4"></dfn><em id="b0wf4"></em><pre id="b0wf4"></pre><tr id="b0wf4"></tr><sub id="b0wf4"></sub><del id="b0wf4"><ul id="b0wf4"></ul></del><rp id="b0wf4"></rp><li id="b0wf4"></li><big id="b0wf4"></big><em id="b0wf4"></em><pre id="b0wf4"></pre><ruby id="b0wf4"><center id="b0wf4"></center></ruby><optgroup id="b0wf4"></optgroup><xmp id="b0wf4"></xmp></div>
</html>