知识库

Appearance

Return to top
On this page

HTML与其他技术集成

HTML作为Web开发的核心技术，需要与其他技术（CSS、JavaScript、后端技术等）集成才能创建功能完整的Web应用。

HTML与CSS集成

内联样式

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML与CSS集成</title>
</head>
<body>
  <!-- 内联样式 - 适用于特定元素的样式 -->
  <div style="color: blue; font-size: 16px; margin: 10px;">
    内联样式示例
  </div>
  
  <!-- 内联样式在动态样式场景中的应用 -->
  <div id="dynamic-style" style="background-color: #f0f0f0; padding: 20px;">
    动态样式内容
  </div>
</body>
</html>

内部样式表

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>内部样式表</title>
  <style>
    /* 关键渲染路径CSS - 优先级高 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    
    .highlight {
      background-color: yellow;
      padding: 5px;
    }
    
    /* 响应式设计 */
    @media (max-width: 600px) {
      .container {
        padding: 10px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="highlight">标题高亮</h1>
    <p>这是内容段落</p>
  </div>
</body>
</html>

外部样式表

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外部样式表</title>
  
  <!-- 预加载关键CSS -->
  <link rel="preload" href="critical.css" as="style">
  
  <!-- 主样式表 -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- 条件样式表 -->
  <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
  <link rel="stylesheet" href="print.css" media="print">
  
  <!-- 替代样式表 -->
  <link rel="alternate stylesheet" href="high-contrast.css" title="高对比度">
</head>
<body>
  <div class="page-content">
    <h1>外部样式表示例</h1>
    <p>内容将使用外部CSS样式</p>
  </div>
</body>
</html>

CSS现代特性集成

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS现代特性</title>
  <style>
    /* CSS自定义属性（变量） */
    :root {
      --primary-color: #007bff;
      --secondary-color: #6c757d;
      --font-size-base: 16px;
    }
    
    .button {
      background-color: var(--primary-color);
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      font-size: var(--font-size-base);
    }
    
    /* CSS Grid布局 */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }
    
    /* Flexbox布局 */
    .flex-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    /* 容器查询（现代浏览器） */
    @container (min-width: 400px) {
      .card {
        display: flex;
      }
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="card">
      <h3>卡片标题</h3>
      <p>卡片内容</p>
      <button class="button">按钮</button>
    </div>
    <div class="card">
      <h3>另一个卡片</h3>
      <p>更多内容</p>
      <button class="button">按钮</button>
    </div>
  </div>
</body>
</html>

HTML与JavaScript集成

内联脚本

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>内联脚本</title>
</head>
<body>
  <button onclick="alert('按钮被点击了!')">点击我</button>
  
  <div id="content">原始内容</div>
  
  <script>
    // DOM操作示例
    document.addEventListener('DOMContentLoaded', function() {
      const contentDiv = document.getElementById('content');
      contentDiv.innerHTML = '<p>内容已通过JavaScript更新</p>';
    });
    
    // 事件处理
    function handleClick() {
      console.log('按钮被点击');
    }
  </script>
</body>
</html>

外部脚本

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外部脚本</title>
</head>
<body>
  <div id="app">
    <h1>应用内容</h1>
    <button id="load-data">加载数据</button>
    <div id="data-container"></div>
  </div>
  
  <!-- 脚本加载策略 -->
  <script src="utils.js"></script> <!-- 普通加载 -->
  <script src="app.js" defer></script> <!-- DOM解析后执行 -->
  <script src="analytics.js" async></script> <!-- 异步加载 -->
</body>
</html>

模块化JavaScript

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JavaScript模块</title>
</head>
<body>
  <div id="counter-app">
    <h2>计数器应用</h2>
    <p>计数: <span id="count">0</span></p>
    <button id="increment">增加</button>
    <button id="decrement">减少</button>
  </div>
  
  <script type="module">
    // 导入模块
    import { Counter } from './counter.js';
    
    // 初始化应用
    const counter = new Counter(document.getElementById('count'));
    
    // 事件监听
    document.getElementById('increment').addEventListener('click', () => {
      counter.increment();
    });
    
    document.getElementById('decrement').addEventListener('click', () => {
      counter.decrement();
    });
  </script>
  
  <!-- 非模块环境的回退 -->
  <script nomodule src="counter-legacy.js"></script>
</body>
</html>

Web Components集成

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Web Components</title>
</head>
<body>
  <!-- 自定义元素 -->
  <user-profile name="张三" email="zhang@example.com"></user-profile>
  <data-table id="my-table"></data-table>
  
  <script>
    // 定义自定义元素
    class UserProfile extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
      }
      
      connectedCallback() {
        const name = this.getAttribute('name');
        const email = this.getAttribute('email');
        
        this.shadowRoot.innerHTML = `
          <style>
            .profile {
              border: 1px solid #ddd;
              padding: 15px;
              margin: 10px 0;
              border-radius: 5px;
            }
            .name { font-weight: bold; }
            .email { color: #666; }
          </style>
          <div class="profile">
            <div class="name">${name}</div>
            <div class="email">${email}</div>
          </div>
        `;
      }
    }
    
    // 注册自定义元素
    customElements.define('user-profile', UserProfile);
    
    // 数据表格组件
    class DataTable extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
      }
      
      connectedCallback() {
        this.render([]);
      }
      
      render(data) {
        this.shadowRoot.innerHTML = `
          <style>
            table { border-collapse: collapse; width: 100%; }
            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
            th { background-color: #f2f2f2; }
          </style>
          <table>
            <thead>
              <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>城市</th>
              </tr>
            </thead>
            <tbody>
              ${data.map(row => `
                <tr>
                  <td>${row.name}</td>
                  <td>${row.age}</td>
                  <td>${row.city}</td>
                </tr>
              `).join('')}
            </tbody>
          </table>
        `;
      }
      
      set tableData(data) {
        this.render(data);
      }
    }
    
    customElements.define('data-table', DataTable);
    
    // 使用组件
    document.addEventListener('DOMContentLoaded', function() {
      const table = document.getElementById('my-table');
      table.tableData = [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' }
      ];
    });
  </script>
</body>
</html>

HTML与后端技术集成

表单提交

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单与后端集成</title>
</head>
<body>
  <form action="/api/users" method="post" enctype="multipart/form-data">
    <!-- 基本表单字段 -->
    <div>
      <label for="username">用户名:</label>
      <input type="text" id="username" name="username" required>
    </div>
    
    <div>
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" required>
    </div>
    
    <div>
      <label for="avatar">头像:</label>
      <input type="file" id="avatar" name="avatar" accept="image/*">
    </div>
    
    <div>
      <label for="bio">个人简介:</label>
      <textarea id="bio" name="bio" rows="4" cols="50"></textarea>
    </div>
    
    <div>
      <input type="checkbox" id="newsletter" name="newsletter" value="true">
      <label for="newsletter">订阅邮件</label>
    </div>
    
    <button type="submit">提交</button>
  </form>
  
  <!-- AJAX表单提交 -->
  <form id="ajax-form">
    <input type="text" name="name" placeholder="姓名">
    <input type="email" name="email" placeholder="邮箱">
    <button type="submit">AJAX提交</button>
  </form>
  
  <div id="response"></div>
  
  <script>
    document.getElementById('ajax-form').addEventListener('submit', async function(e) {
      e.preventDefault();
      
      const formData = new FormData(this);
      
      try {
        const response = await fetch('/api/users', {
          method: 'POST',
          body: formData
        });
        
        const result = await response.json();
        document.getElementById('response').innerHTML = 
          `<p>提交成功: ${JSON.stringify(result)}</p>`;
      } catch (error) {
        document.getElementById('response').innerHTML = 
          `<p>提交失败: ${error.message}</p>`;
      }
    });
  </script>
</body>
</html>

API集成

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>API集成</title>
</head>
<body>
  <div id="app">
    <h1>用户列表</h1>
    <button id="load-users">加载用户</button>
    <div id="user-list"></div>
  </div>
  
  <script>
    class APIIntegration {
      constructor() {
        this.baseURL = '/api';
      }
      
      async fetchUsers() {
        try {
          const response = await fetch(`${this.baseURL}/users`);
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          return await response.json();
        } catch (error) {
          console.error('获取用户失败:', error);
          throw error;
        }
      }
      
      async createUser(userData) {
        try {
          const response = await fetch(`${this.baseURL}/users`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(userData)
          });
          return await response.json();
        } catch (error) {
          console.error('创建用户失败:', error);
          throw error;
        }
      }
      
      async updateUser(id, userData) {
        try {
          const response = await fetch(`${this.baseURL}/users/${id}`, {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(userData)
          });
          return await response.json();
        } catch (error) {
          console.error('更新用户失败:', error);
          throw error;
        }
      }
      
      async deleteUser(id) {
        try {
          const response = await fetch(`${this.baseURL}/users/${id}`, {
            method: 'DELETE'
          });
          return response.ok;
        } catch (error) {
          console.error('删除用户失败:', error);
          throw error;
        }
      }
    }
    
    // 使用API集成
    document.addEventListener('DOMContentLoaded', function() {
      const api = new APIIntegration();
      
      document.getElementById('load-users').addEventListener('click', async function() {
        try {
          const users = await api.fetchUsers();
          const userList = document.getElementById('user-list');
          userList.innerHTML = users.map(user => `
            <div class="user-card">
              <h3>${user.name}</h3>
              <p>邮箱: ${user.email}</p>
              <p>ID: ${user.id}</p>
            </div>
          `).join('');
        } catch (error) {
          console.error('加载用户失败:', error);
        }
      });
    });
  </script>
</body>
</html>

HTML与现代前端框架集成

与React集成

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>React集成</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="react-root"></div>
  
  <script type="text/babel">
    function UserCard({ user }) {
      return (
        <div style={{ border: '1px solid #ccc', margin: '10px', padding: '15px' }}>
          <h3>{user.name}</h3>
          <p>邮箱: {user.email}</p>
          <p>年龄: {user.age}</p>
        </div>
      );
    }
    
    function App() {
      const [users, setUsers] = React.useState([
        { id: 1, name: '张三', email: 'zhang@example.com', age: 25 },
        { id: 2, name: '李四', email: 'li@example.com', age: 30 }
      ]);
      
      return (
        <div>
          <h1>用户列表</h1>
          {users.map(user => (
            <UserCard key={user.id} user={user} />
          ))}
        </div>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('react-root'));
    root.render(<App />);
  </script>
</body>
</html>

与Vue集成

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue集成</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="vue-app">
    <h1>{{ title }}</h1>
    <input v-model="newUser.name" placeholder="姓名">
    <input v-model="newUser.email" placeholder="邮箱">
    <button @click="addUser">添加用户</button>
    
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
        <button @click="removeUser(user.id)">删除</button>
      </li>
    </ul>
  </div>
  
  <script>
    const { createApp, ref } = Vue;
    
    createApp({
      setup() {
        const title = ref('Vue应用');
        const users = ref([
          { id: 1, name: '张三', email: 'zhang@example.com' },
          { id: 2, name: '李四', email: 'li@example.com' }
        ]);
        const newUser = ref({ name: '', email: '' });
        
        const addUser = () => {
          if (newUser.value.name && newUser.value.email) {
            users.value.push({
              id: Date.now(),
              name: newUser.value.name,
              email: newUser.value.email
            });
            newUser.value = { name: '', email: '' };
          }
        };
        
        const removeUser = (id) => {
          users.value = users.value.filter(user => user.id !== id);
        };
        
        return {
          title,
          users,
          newUser,
          addUser,
          removeUser
        };
      }
    }).mount('#vue-app');
  </script>
</body>
</html>

HTML与数据库集成

本地存储集成

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>本地存储集成</title>
</head>
<body>
  <div id="storage-app">
    <h1>本地存储应用</h1>
    <input type="text" id="task-input" placeholder="输入任务">
    <button onclick="addTask()">添加任务</button>
    <button onclick="clearTasks()">清空任务</button>
    
    <ul id="task-list"></ul>
  </div>
  
  <script>
    class StorageManager {
      constructor() {
        this.storageKey = 'tasks';
      }
      
      // localStorage操作
      saveTasks(tasks) {
        localStorage.setItem(this.storageKey, JSON.stringify(tasks));
      }
      
      loadTasks() {
        const tasks = localStorage.getItem(this.storageKey);
        return tasks ? JSON.parse(tasks) : [];
      }
      
      addTask(task) {
        const tasks = this.loadTasks();
        tasks.push({
          id: Date.now(),
          text: task,
          completed: false,
          createdAt: new Date().toISOString()
        });
        this.saveTasks(tasks);
        return tasks;
      }
      
      removeTask(id) {
        const tasks = this.loadTasks().filter(task => task.id !== id);
        this.saveTasks(tasks);
        return tasks;
      }
      
      toggleTask(id) {
        const tasks = this.loadTasks().map(task => {
          if (task.id === id) {
            return { ...task, completed: !task.completed };
          }
          return task;
        });
        this.saveTasks(tasks);
        return tasks;
      }
    }
    
    const storage = new StorageManager();
    
    function addTask() {
      const input = document.getElementById('task-input');
      const text = input.value.trim();
      
      if (text) {
        storage.addTask(text);
        input.value = '';
        renderTasks();
      }
    }
    
    function clearTasks() {
      localStorage.removeItem('tasks');
      renderTasks();
    }
    
    function renderTasks() {
      const tasks = storage.loadTasks();
      const list = document.getElementById('task-list');
      
      list.innerHTML = tasks.map(task => `
        <li style="text-decoration: ${task.completed ? 'line-through' : 'none'}">
          <span onclick="toggleTask(${task.id})">${task.text}</span>
          <button onclick="removeTask(${task.id})" style="margin-left: 10px;">删除</button>
        </li>
      `).join('');
    }
    
    function removeTask(id) {
      storage.removeTask(id);
      renderTasks();
    }
    
    function toggleTask(id) {
      storage.toggleTask(id);
      renderTasks();
    }
    
    // 页面加载时渲染任务
    document.addEventListener('DOMContentLoaded', renderTasks);
  </script>
</body>
</html>

响应式设计集成

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式设计集成</title>
  <style>
    /* 基础样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      line-height: 1.6;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    /* 响应式网格 */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
    
    .card {
      background: #f9f9f9;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* 移动端优先的媒体查询 */
    .nav {
      display: flex;
      flex-direction: column;
    }
    
    @media (min-width: 768px) {
      .nav {
        flex-direction: row;
        justify-content: space-between;
      }
      
      .grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    
    @media (min-width: 1024px) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    
    /* 打印样式 */
    @media print {
      .no-print {
        display: none;
      }
      
      body {
        font-size: 12pt;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <nav class="nav">
      <a href="#home">首页</a>
      <a href="#about">关于</a>
      <a href="#contact">联系</a>
    </nav>
    
    <main>
      <h1>响应式设计示例</h1>
      <div class="grid">
        <div class="card">
          <h3>卡片1</h3>
          <p>响应式内容，会在不同屏幕尺寸下自动调整布局</p>
        </div>
        <div class="card">
          <h3>卡片2</h3>
          <p>响应式内容，会在不同屏幕尺寸下自动调整布局</p>
        </div>
        <div class="card">
          <h3>卡片3</h3>
          <p>响应式内容，会在不同屏幕尺寸下自动调整布局</p>
        </div>
        <div class="card no-print">
          <h3>卡片4</h3>
          <p>此卡片在打印时会被隐藏</p>
        </div>
      </div>
    </main>
  </div>
  
  <script>
    // 响应式JavaScript
    function handleResize() {
      const width = window.innerWidth;
      const grid = document.querySelector('.grid');
      
      if (width < 768) {
        grid.style.gridTemplateColumns = '1fr';
      } else if (width < 1024) {
        grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
      }
      // 更大的屏幕使用CSS媒体查询
    }
    
    // 监听窗口大小变化
    window.addEventListener('resize', handleResize);
    
    // 初始化
    handleResize();
  </script>
</body>
</html>

安全集成

CSP集成

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>安全集成</title>
  
  <!-- 内容安全策略 -->
  <meta http-equiv="Content-Security-Policy" 
        content="default-src 'self'; 
                 script-src 'self' 'unsafe-inline' https://trusted-cdn.com; 
                 style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; 
                 img-src 'self' data: https:; 
                 font-src 'self' https://fonts.gstatic.com; 
                 connect-src 'self' https://api.example.com;">
</head>
<body>
  <h1>安全集成示例</h1>
  
  <!-- 安全的外部资源 -->
  <link rel="stylesheet" href="https://trusted-cdn.com/styles.css">
  
  <!-- 安全的内联脚本（开发时使用，生产环境应分离） -->
  <script>
    // 安全的数据处理
    function safeDisplayContent(content) {
      // 使用textContent而不是innerHTML防止XSS
      const container = document.getElementById('content');
      container.textContent = content;
    }
    
    // 安全的URL处理
    function isValidUrl(url) {
      try {
        const parsed = new URL(url);
        return parsed.protocol === 'https:';
      } catch (e) {
        return false;
      }
    }
  </script>
  
  <div id="content">安全内容显示区域</div>
</body>
</html>

HTML与其他技术的集成是构建现代Web应用的关键。通过合理集成CSS、JavaScript、后端API等技术，可以创建功能丰富、性能优异、安全可靠的Web应用。