创建index.php并设置HTML5结构，包含DOCTYPE、html、head和body标签；2. 在body中嵌入<?php echo "Welcome to my site"; ?>并使用include引入模块化头部；3. 创建header.php文件并通过PHP包含到页面顶部以实现统一导航；4. 在PHP中定义$siteTitle等变量并在HTML中动态输出标题；5. 使用mysqli连接MySQL数据库并查询最新文章，通过循环展示内容；6. 利用PHP动态设置CSS类名，如根据$currentPage变量高亮当前页，同时引入外部样式表美化界面。
1. Set Up the Basic HTML Structure
Every PHP website begins with a proper HTML foundation. This structure ensures that the page renders correctly in browsers and allows PHP code to be embedded seamlessly. It's important to include the DOCTYPE, html, head, and body tags.
- Create a new file named index.php
- Add the standard HTML5 doctype declaration: <!DOCTYPE html>
- Enclose the entire content within <html> tags
- Include <head> for metadata and <body> for visible content
2. Embed PHP Code in the HTML
PHP is embedded within HTML using <?php ?> tags. This allows dynamic content generation directly on the server before sending the page to the user’s browser. You can use PHP to display current dates, include files, or conditionally show content.
- Insert <?php echo "Welcome to my site"; ?> inside the <body> section
- Use <?php include('header.php'); ?> to modularize common elements
- Ensure the file is saved with a .php extension so the server processes it
3. Create a Dynamic Header and Navigation
A consistent header and navigation improve usability. Using PHP, you can define a single header file and reuse it across multiple pages, making maintenance easier. This reduces redundancy and supports scalable design.
- Create a file called header.php containing logo and menu items
- Use <?php include('header.php'); ?> at the top of index.php
- Style navigation links with CSS for hover effects and alignment
4. Display Dynamic Content from Variables
Using PHP variables allows you to manage content centrally. For example, site titles, slogans, or promotional messages can be defined once and displayed dynamically, enabling quick updates without changing multiple files.
立即学习“PHP免费学习笔记（深入）”；
- Define variables at the top of index.php like: <?php $siteTitle = "My Homepage"; ?>
- Output them in the HTML with: <h1><?php echo $siteTitle; ?></h1>
- Use variables for meta descriptions to improve SEO consistency
5. Connect to a Database for Dynamic Data
To make your homepage interactive, connect it to a database such as MySQL. This enables features like showing recent blog posts, user comments, or product highlights directly on the front page.
- Use mysqli or PDO to establish a connection: <?php $conn = new mysqli("localhost", "user", "password", "database"); ?>
- Run a query to fetch data: $result = $conn->query("SELECT title, content FROM posts LIMIT 3")
- Loop through results and display them using a while loop inside HTML
- Always sanitize output with htmlspecialchars() to prevent XSS attacks
6. Apply CSS Styling Through PHP-Generated Classes
You can enhance visual presentation by dynamically assigning CSS classes via PHP. This technique is useful for highlighting active menu items, alternating row colors, or applying themes based on user preferences.
- Set a variable like $currentPage = "home";
- In the navigation, use: <li class="<?php echo ($currentPage == 'home') ? 'active' : ''; ?>">Home</li>
- Link an external stylesheet using standard <link rel="stylesheet" href="style.css">
