当前位置：首页 > 行业动态 > 正文

html知识设计自己的网站

用HTML定义页面结构，通过div等标签布局，嵌入CSS美化样式，添加交互

网站结构设计

HTML基础入门

  • 核心概念
    HTML（超文本标记语言）是网页的骨架，通过标签定义内容结构。

    • 文档类型声明：<!DOCTYPE html>
    • 基本结构：<html> → <head>（元数据） + <body>）

  • 常用标签与功能
    | 标签 | 功能 | 示例 |
    |—————|——————————|———————————|
    | <h1>~<h6> | 标题（h1为最高级别） | <h1>网站标题</h1> |
    | <p> | 段落 | <p>这是一个段落。</p> |
    | <a> | 超链接 | <a href="https://example.com">链接</a> |
    | <img> | 图片 | <img src="image.jpg" alt="描述"> |
    | <ul>/<ol> | 无序/有序列表 | <ul><li>项目1</li></ul> |
    | <table> | 表格 | <table><tr><td>内容</td></tr></table> |

页面布局与框架

  • 表格布局（不推荐）
    使用<table>标签排版，但现代开发更倾向CSS布局。 

    <table border="1">
  <tr><td>行1列1</td><td>行1列2</td></tr>
  <tr><td>行2列1</td><td>行2列2</td></tr>
</table>

  • 语义化分区
    用<header>、<nav>、<main>、<footer>等标签划分页面区域，提升可读性和SEO。

    html知识设计自己的网站 第1张

    <body>
  <header>顶部导航</header>
  <nav>菜单链接</nav>
  <main>主体内容</main>
  <footer>版权信息</footer>
</body>

表单与交互

  • 表单基础

    <form action="/submit" method="post">
  <label>用户名：<input type="text" name="username"></label>
  <button type="submit">提交</button>
</form>

  • 输入类型与属性
    | 类型 | 功能 | 属性示例 |
    |—————|——————————|——————————|
    | text | 单行文本 | placeholder="请输入" |
    | password | 密码掩码 | required="required" |
    | radio | 单选按钮 | name="group"（同名为一组） |
    | checkbox | 多选框 | checked="checked" |
    | file | 文件上传 | accept=".jpg,.png" |

多媒体与嵌入式内容

  • 音频/视频

    <audio src="music.mp3" controls></audio>
<video src="video.mp4" width="400" controls></video>

  • 嵌入第三方内容

    <iframe src="https://maps.google.com" width="500" height="300"></iframe>

样式与行为控制

  • 链接CSS

    <link rel="stylesheet" href="styles.css">

  • 内联JavaScript

    <script>
  function showAlert() {
    alert("欢迎访问！");
  }
</script>
<button onclick="showAlert()">点击我</button>

常见问题与解答

问题1：什么是语义化标签？为什么重要？

解答：
语义化标签（如<article>、<section>）明确描述内容含义，而非仅用于样式，重要性：

  1. 可读性：代码更易理解和维护。
  2. SEO优化：搜索引擎能更好抓取页面主题。
  3. 无障碍访问：屏幕阅读器可准确解析内容。

问题2：如何让表单提交后保留用户输入？

解答：
通过autocomplete属性或JavaScript实现：

  1. HTML自动完成： 
    <input type="text" name="username" autocomplete="on">
  2. JavaScript保存值： 
    const input = document.querySelector('input');
input.addEventListener('blur', () => {
  localStorage.setItem('username', input.value);
});
// 页面加载时恢复值
window.onload = () => {
  input.value = localStorage.getItem('username') || ''
HTML
0

相关文章