Bembew Programming
Home Topics Guides
Bembew Programming
Home Topics Guides

HTML Basics Learning Guide

HTML Basics Learning Guide
    • A Comprehensive Guide to HTML Tags
    • Configuring the head in VuePress
    • Controlling Access with the `meta` Attribute in Advanced Vue Router Scenarios
    • Distributed IDs
    • Text Tags: Title, Paragraph, Link
    • Image Tags: img and Image Attributes
    • List Tags: Unordered Lists and Ordered Lists
    • Table Tags: Tables, Rows, and Cells
    • Form Labels: Input Fields, Text Areas, and Buttons
    • The Role of the Tag</a></li> <li><a href="/en/article/content-inside-the-body-tag.html?guide-code=html" class="sidebar-article-link">Content Inside the <body> Tag</a></li> <li><a href="/en/article/using-the-header-tag.html?guide-code=html" class="sidebar-article-link">Using the <header> Tag</a></li> <li><a href="/en/article/using-the-nav-tag.html?guide-code=html" class="sidebar-article-link">Using the <nav> Tag</a></li> <li><a href="/en/article/using-the-main-tag.html?guide-code=html" class="sidebar-article-link">Using the <main> Tag</a></li> <li><a href="/en/article/using-the-article-tag.html?guide-code=html" class="sidebar-article-link">Using the <article> Tag</a></li> <li><a href="/en/article/using-the-aside-tag.html?guide-code=html" class="sidebar-article-link">Using the <aside> Tag</a></li> <li><a href="/en/article/using-the-footer-tag.html?guide-code=html" class="sidebar-article-link">Using the <footer> Tag</a></li> <li><a href="/en/article/using-the-class-attribute-in-html.html?guide-code=html" class="sidebar-article-link">Using the class Attribute in HTML</a></li> <li><a href="/en/article/using-the-style-attribute-in-css.html?guide-code=html" class="sidebar-article-link">Using the style Attribute in CSS</a></li> <li><a href="/en/article/using-the-src-attribute.html?guide-code=html" class="sidebar-article-link">Using the src Attribute</a></li> <li><a href="/en/article/using-the-href-attribute.html?guide-code=html" class="sidebar-article-link">Using the href Attribute</a></li> <li><a href="/en/article/secure-usage-of-the-html5-canvas-element.html?guide-code=html" class="sidebar-article-link">Secure Usage of the HTML5 Canvas Element</a></li> <li><a href="/en/article/css-selectors.html?guide-code=html" class="sidebar-article-link">CSS Selectors</a></li> <li><a href="/en/article/mobile-adaptation.html?guide-code=html" class="sidebar-article-link">Mobile Adaptation</a></li> <li><a href="/en/article/image-optimization.html?guide-code=html" class="sidebar-article-link">Image Optimization</a></li> <li><a href="/en/article/installing-and-configuring-node-js-for-nuxt-js-vue-react-next-js-rust-mongodb-sql-vuex.html?guide-code=html" class="sidebar-article-link">Installing and Configuring Node.js for Nuxt.js, Vue, React, Next.js, Rust, MongoDB, SQL, Vuex</a></li> <li><a href="/en/article/html5-overview.html?guide-code=html" class="sidebar-article-link">HTML5 Overview</a></li> <li><a href="/en/article/semantic-html5-tags.html?guide-code=html" class="sidebar-article-link">Semantic HTML5 Tags</a></li> <li><a href="/en/article/form-elements-input-textarea-select.html?guide-code=html" class="sidebar-article-link">Form Elements (Input, Textarea, Select)</a></li> <li><a href="/en/article/multimedia-elements-audio-and-video.html?guide-code=html" class="sidebar-article-link">Multimedia Elements (Audio and Video)</a></li> <li><a href="/en/article/html5-form-structure.html?guide-code=html" class="sidebar-article-link">HTML5 Form Structure</a></li> <li><a href="/en/article/form-validation-required-minlength-maxlength.html?guide-code=html" class="sidebar-article-link">Form Validation (required, minlength, maxlength)</a></li> <li><a href="/en/article/custom-form-validation.html?guide-code=html" class="sidebar-article-link">Custom Form Validation</a></li> <li><a href="/en/article/client-side-and-server-side-validation.html?guide-code=html" class="sidebar-article-link">Client-Side and Server-Side Validation</a></li> <li><a href="/en/article/using-audio-and-video-tags.html?guide-code=html" class="sidebar-article-link">Using Audio and Video Tags</a></li> <li><a href="/en/article/controlling-the-video-player.html?guide-code=html" class="sidebar-article-link">Controlling the Video Player</a></li> <li><a href="/en/article/html5-animation-with-canvas-api.html?guide-code=html" class="sidebar-article-link">HTML5 Animation with Canvas API</a></li> <li><a href="/en/article/overview-of-responsive-design.html?guide-code=html" class="sidebar-article-link">Overview of Responsive Design</a></li> <li><a href="/en/article/the-viewport-tag-in-html.html?guide-code=html" class="sidebar-article-link">The Viewport Tag in HTML</a></li> <li><a href="/en/article/media-queries.html?guide-code=html" class="sidebar-article-link">Media Queries</a></li> <li><a href="/en/article/responsive-design.html?guide-code=html" class="sidebar-article-link">Responsive Design</a></li> <li><a href="/en/article/ui-design-principles.html?guide-code=html" class="sidebar-article-link">UI Design Principles</a></li> <li><a href="/en/article/combining-html-and-css.html?guide-code=html" class="sidebar-article-link">Combining HTML and CSS</a></li> <li><a href="/en/article/essential-web-design-techniques.html?guide-code=html" class="sidebar-article-link">Essential Web Design Techniques</a></li> <li><a href="/en/article/canvas-api.html?guide-code=html" class="sidebar-article-link">Canvas API</a></li> <li><a href="/en/article/svg-graphics.html?guide-code=html" class="sidebar-article-link">SVG Graphics</a></li> <li><a href="/en/article/accessibility-testing.html?guide-code=html" class="sidebar-article-link">Accessibility Testing</a></li> </ul> </li> </ul> </div> </div> </aside> <main class="main-content sidebar-content toc-content"> <div class="article-content"> <nav class="breadcrumb-nav" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/en/guide/index.html">Guides</a></li> <li class="breadcrumb-item"><a href="/en/guide/html.html">HTML Basics Learning Guide</a></li> <li class="breadcrumb-item active">Configuring the head in VuePress</li> </ol> </nav> <h1>Configuring the head in VuePress</h1> <div class="article-body"><p>In the VuePress build system, <code>head</code> is a critical configuration item that allows users to inject custom HTML header elements for each page or the entire site. This goes beyond simple metadata insertion; it serves as a key mechanism for achieving SEO optimization, dynamic resource loading, and cross-browser compatibility control. Through <code>head</code>, developers can precisely define tags such as <code><meta></code>, <code><link></code>, and <code><script></code>, thereby directly generating HTML structures that comply with modern web standards during the rendering phase.<br>The VuePress <code>head</code> configuration is typically located in the <code>.vuepress/config.js</code> file. Its core logic maps an array of strings to the <code>$head</code> attribute of a Vue instance. This means each element within the array will ultimately be rendered as an independent HTML tag.</p> <pre><code class="language-javascript">// .vuepress/config.js module.exports = { head: [ // Global header configuration, applicable to all pages ['meta', { name: 'description', content: 'This is my VuePress documentation site' }], // Custom CSS link ['link', { rel: 'stylesheet', href: '/custom.css' }], // Preload critical fonts ['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }], // Page-level header configuration (requires usage with pageData) ['script', { type: 'text/javascript', innerHTML: `console.log('Hello World');` }] ] } </code></pre> <p>When using this, developers must pay attention to the order of array elements. Since HTML rendering executes sequentially, certain tags (such as <code><link></code> or <code><meta></code>) must appear before others; otherwise, it may lead to resource loading failures or issues where styles do not take effect. Furthermore, all configuration items must strictly adhere to DOM specifications, ensuring that attribute names and values are accurate and error-free.</p> <h2 id="implementing-dynamic-page-header-injection">Implementing Dynamic Page Header Injection</h2> <p>While <code>head</code> supports global configurations, a more powerful scenario involves injecting different header information for specific pages. VuePress provides the <code>pageData</code> mechanism to achieve this goal. By accessing the data object of the current page, we can conditionally generate different HTML structures.</p> <pre><code class="language-javascript">// .vuepress/config.js module.exports = { head: [ // Global default configuration ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }], // Dynamic page header logic ['script', { type: 'text/javascript', innerHTML: ` (function() { const pageData = window.__VUEPRESS_DATA__; if (pageData && pageData.title) { document.head.appendChild(document.createElement('meta')); document.head.lastElementChild.setAttribute('name', 'title'); document.head.lastElementChild.setAttribute('content', pageData.title); } })(); `] ] } </code></pre> <p>The code above demonstrates how to dynamically modify the DOM during the build process using JavaScript. <code>window.__VUEPRESS_DATA__</code> is a page data object automatically injected by VuePress, containing information such as the current page's title and path. This method allows us to adjust meta tags in real-time based on page content without altering the template structure.</p> <h2 id="advanced-application-scenarios-and-best-practices">Advanced Application Scenarios and Best Practices</h2> <p>In practical development, the application scenarios for <code>head</code> configuration extend far beyond simple SEO descriptions. Here are some common advanced uses:</p> <ul> <li><strong>Preloading Critical Resources</strong>: Using <code><link rel="preload"></code> tags allows downloading a website's most critical resources (such as primary fonts or key CSS) in advance, significantly reducing first-paint rendering time.</li> <li><strong>PWA Support</strong>: Configuring <code>manifest</code> links and <code>service-worker</code> registration scripts enables static sites to offer an app-like experience.</li> <li><strong>SEO Structured Data</strong>: Injecting Schema.org data in JSON-LD format helps search engines better understand document content.</li> </ul> <pre><code class="language-javascript">// Example: Preloading critical fonts ['link', { rel: 'preload', as: 'font', type: 'font/woff2', href: '/fonts/main.woff2' }] </code></pre> <p>When writing <code>head</code> configurations, strictly adhere to the following best practices:</p> <ol> <li><strong>Performance First</strong>: Avoid injecting large scripts or styles into the header; these resources can block page parsing.</li> <li><strong>Order Sensitivity</strong>: Always place <code><link></code> and <code><meta></code> tags before other elements.</li> <li><strong>Content Validation</strong>: Ensure all attribute values comply with HTML5 specifications to prevent build failures due to syntax errors.</li> </ol> <h2 id="summary-and-outlook">Summary and Outlook</h2> <p><code>head</code> configuration is the cornerstone of VuePress in achieving highly customized front-end experiences. It empowers developers with direct control over HTML structure at the rendering layer, making SEO optimization, performance tuning, and dynamic content injection efficient and controllable. As web technology continues to evolve, <code>head</code> configuration capabilities will also continuously expand to support more modern web standard features. Mastering this mechanism is an essential skill for building high-performance, highly available static documentation sites.</p> </div> </div> </main> <aside class="toc-sidebar" id="tocSidebar"> <div class="toc-sidebar-inner"> <div class="toc-title">On This Page</div> <nav class="toc-nav"> <ul> <li class="toc-level-2"><a href="#implementing-dynamic-page-header-injection">Implementing Dynamic Page Header Injection</a> </li> <li class="toc-level-2"><a href="#advanced-application-scenarios-and-best-practices">Advanced Application Scenarios and Best Practices</a> </li> <li class="toc-level-2"><a href="#summary-and-outlook">Summary and Outlook</a> </li> </ul> </nav> </div> </aside> </div> <footer class="site-footer"> <div class="footer-sites"> <span class="footer-sites-label">Recommended Sites</span> <a href="https://math.bembew.com/en/index.html" target="_blank" rel="noopener">Mathematics</a> <span class="footer-sep">·</span> <a href="https://physics.bembew.com/en/index.html" target="_blank" rel="noopener">Physics</a> <span class="footer-sep">·</span> <a href="https://economics.bembew.com/en/index.html" target="_blank" rel="noopener">Economics</a> <span class="footer-sep">·</span> <a href="https://chemistry.bembew.com/en/index.html" target="_blank" rel="noopener">Chemistry</a> <span class="footer-sep">·</span> <a href="https://biology.bembew.com/en/index.html" target="_blank" rel="noopener">Biology</a> </div> <div class="footer-meta"> <a href="/en/info/about-website.html">About This Site</a> <span class="footer-sep">·</span> <a href="/en/info/privacy.html">Privacy Policy</a> <span class="footer-sep">·</span> <span>© 2025-2026 Bembew - All rights reserved</span> </div> </footer> <div id="cookieConsent" class="cookie-consent" role="region" aria-label="Cookie notice" style="display:none"> <div class="cookie-consent-inner"> <p class="cookie-consent-text">This website uses strictly necessary cookies to keep it secure and functioning (e.g., access control and bot protection), and collects limited anonymous technical data via our CDN. We do not use advertising or tracking cookies. See our <a href="/en/info/privacy.html">Privacy Policy</a>.</p> <button id="cookieConsentAccept" class="cookie-consent-btn" type="button">OK</button> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.9/katex.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { if (typeof renderMathInElement === 'function') { renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\(', right: '\\)', display: false}, {left: '\[', right: '\]', display: true} ], throwOnError: false, strict: false, trust: true }); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { var headings = document.querySelectorAll('.article-body h1[id], .article-body h2[id], .article-body h3[id], .article-body h4[id], .article-body h5[id], .article-body h6[id]'); var tocLinks = document.querySelectorAll('.toc-nav a'); if (headings.length === 0 || tocLinks.length === 0) return; // Highlight current heading on scroll using IntersectionObserver if ('IntersectionObserver' in window) { var observer = new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { var id = entry.target.getAttribute('id'); tocLinks.forEach(function(link) { var isActive = link.getAttribute('href') === '#' + id; link.classList.toggle('active', isActive); }); } }); }, { rootMargin: '-80px 0px -70% 0px', threshold: 0 }); headings.forEach(function(h) { observer.observe(h); }); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { // Close language dropdown and mobile menu when clicking outside document.addEventListener('click', function(e) { var langMenu = document.getElementById('langMenu'); var langToggle = document.querySelector('.lang-dropdown-toggle'); if (langMenu && langMenu.classList.contains('show') && !langMenu.contains(e.target) && !langToggle.contains(e.target)) { langMenu.classList.remove('show'); } var mobileMenu = document.getElementById('mobileMenu'); var menuTrigger = document.getElementById('menuTrigger'); if (mobileMenu && mobileMenu.classList.contains('active') && !mobileMenu.contains(e.target) && !menuTrigger.contains(e.target)) { mobileMenu.classList.remove('active'); } }); // Close mobile menu when clicking a link inside it var mobileMenu = document.getElementById('mobileMenu'); if (mobileMenu) { mobileMenu.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function() { mobileMenu.classList.remove('active'); }); }); } // Close TOC overlay when clicking a link inside it (mobile) var tocSidebar = document.getElementById('tocSidebar'); if (tocSidebar) { tocSidebar.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function() { closeToc(); }); }); } // Close sidebar overlay when clicking a link inside it (mobile) var articleSidebar = document.getElementById('articleSidebar'); if (articleSidebar) { articleSidebar.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', function() { closeSidebar(); }); }); } // Topic 详情页 Tab 切换(介绍 / 指南) var topicTabs = document.querySelector('.topic-tabs'); if (topicTabs) { var topicTabButtons = topicTabs.querySelectorAll('.topic-tab'); var topicTabPanels = topicTabs.querySelectorAll('.topic-tab-panel'); topicTabButtons.forEach(function(tab) { tab.addEventListener('click', function() { var key = tab.getAttribute('data-tab'); topicTabButtons.forEach(function(btn) { var on = btn === tab; btn.classList.toggle('active', on); btn.setAttribute('aria-selected', on ? 'true' : 'false'); }); topicTabPanels.forEach(function(panel) { panel.classList.toggle('active', panel.getAttribute('data-panel') === key); }); }); }); } }); // Mobile sidebar toggle (article page) function toggleSidebar() { var sidebar = document.getElementById('articleSidebar'); var overlay = document.getElementById('sidebarOverlay'); if (sidebar) sidebar.classList.toggle('open'); if (overlay) overlay.classList.toggle('show'); } function closeSidebar() { var sidebar = document.getElementById('articleSidebar'); var overlay = document.getElementById('sidebarOverlay'); if (sidebar) sidebar.classList.remove('open'); if (overlay) overlay.classList.remove('show'); } // Mobile TOC toggle function toggleToc() { var toc = document.getElementById('tocSidebar'); var overlay = document.getElementById('tocOverlay'); if (toc) toc.classList.toggle('open'); if (overlay) overlay.classList.toggle('show'); } function closeToc() { var toc = document.getElementById('tocSidebar'); var overlay = document.getElementById('tocOverlay'); if (toc) toc.classList.remove('open'); if (overlay) overlay.classList.remove('show'); } </script> <script> (function() { try { if (localStorage.getItem('cookie_consent')) return; var el = document.getElementById('cookieConsent'); var btn = document.getElementById('cookieConsentAccept'); if (!el || !btn) return; el.style.display = 'block'; btn.addEventListener('click', function() { try { localStorage.setItem('cookie_consent', 'v1'); } catch (e) {} el.style.display = 'none'; }); } catch (e) {} })(); </script> <script> !function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"KNg95ReuAl9m0Oxc",ck:"KNg95ReuAl9m0Oxc"}); </script> </body> </html>