Java学习第三十七部分——Web开发（五）

最新推荐文章于 2025-07-31 19:38:27 发布

慕y274

最新推荐文章于 2025-07-31 19:38:27 发布

阅读量557

点赞数 12

CC 4.0 BY-SA版权

文章标签： java 学习前端

本文链接：https://blog.csdn.net/2503_92550335/article/details/149288820

🏗️ 八、HTML5 语义化标签（SEO + 可访问性）

📱 九、响应式设计基础（配合 CSS）

🧪 十、进阶技巧

1. 自定义数据属性

2. 嵌入第三方内容（如 YouTube）

3. 预加载资源

✅ 十一、简单示例：响应式博客页面

📚 十二、学习资源推荐

✨ 一、关键概述

HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它定义网页的结构和内容，通常与 CSS（样式）和 JavaScript（交互）一起使用。

✅ 基本模板:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个段落。</p>
</body>
</html>

🧩 二、HTML 基础结构详解

每个 HTML 页面都应包含以下基础结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="页面描述，用于SEO">
  <title>页面标题</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <!-- 页面内容 -->
</body>
</html>

🔍 说明：

标签/属性	作用说明
`<!DOCTYPE html>`	声明文档类型，告诉浏览器使用 HTML5 标准解析
`lang="zh-CN"`	指定页面语言，有助于搜索引擎和屏幕阅读器
`<meta charset>`	设置字符编码为 UTF-8，支持中文
`<meta name="viewport">`	实现响应式设计，适配手机
`<link rel="stylesheet">`	引入外部 CSS
`<script defer>`	延迟加载 JS，避免阻塞页面渲染

🧾 三、文本与排版标签详解

1. 标题与段落

<h1>一级标题（页面主标题）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是一个段落，浏览器会自动在段落前后添加空行。</p>

2. 强调与格式化

<p>这是<strong>加粗</strong>和<em>斜体</em>文本。</p>
<p>这是<mark>高亮</mark>、<del>删除线</del>和<ins>下划线</ins>。</p>
<p>这是<sub>下标</sub>和<sup>上标</sup>。</p>

3. 引用与代码

<blockquote cite="https://example.com">
  这是引用的长文本，通常用于引用名人名言。
</blockquote>

<p>下面是代码示例：</p>
<pre><code>
function sayHello() {
  console.log("Hello, world!");
}
</code></pre>

🖼️ 四、媒体标签详解

1. 图片

<img src="images/cat.jpg"
     alt="一只可爱的橘猫"
     width="300"
     height="200"
     loading="lazy">

alt：图片无法显示时的替代文本，SEO 和可访问性必需。
loading="lazy"：懒加载，提升性能。

2. 音频和视频

<!-- 音频 -->
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  您的浏览器不支持音频播放。
</audio>

<!-- 视频 -->
<video controls width="600" poster="cover.jpg">
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
</video>

📋 五、超链接与导航

1. 普通链接

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  打开新窗口访问 Example
</a>

2. 锚点跳转

<a href="#section2">跳转到第二部分</a>

<h2 id="section2">第二部分标题</h2>

3. 邮件与电话链接

<a href="mailto:contact@example.com">发送邮件</a>
<a href="tel:+123456789">拨打电话</a>

🧮 六、列表与表格

1. 列表

<!-- 无序列表 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<!-- 有序列表 -->
<ol type="I" start="3">
  <li>第一步</li>
  <li>第二步</li>
</ol>

<!-- 描述列表 -->
<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

2. 表格

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

🧾 七、表单详解（登录、注册、搜索）

<form action="/submit" method="POST">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>

  <label>
    <input type="checkbox" name="agree" required>
    我同意用户协议
  </label>

  <button type="submit">注册</button>
</form>

📫常用表单控件

类型	示例
文本输入	`<input type="text">`
密码输入	`<input type="password">`
邮箱	`<input type="email">`
日期	`<input type="date">`
文件上传	`<input type="file" accept="image/*">`
下拉菜单	`<select><option>选项1</option></select>`
文本域	`<textarea rows="4" cols="50"></textarea>`

🏗️ 八、HTML5 语义化标签（SEO + 可访问性）

<header>
  <h1>网站标题</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于我们</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>

  <aside>
    <h3>侧边栏</h3>
    <p>相关推荐...</p>
  </aside>
</main>

<footer>
  <p>&copy; 2025 我的公司</p>
</footer>

📱 九、响应式设计基础（配合 CSS）

在 HTML 中引入响应式布局的关键是设置 viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后使用 CSS 媒体查询：

/* 在 style.css 中 */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
}

🧪 十、进阶技巧

1. 自定义数据属性

<div data-user-id="123" data-role="admin">用户信息</div>

2. 嵌入第三方内容（如 YouTube）

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0" allowfullscreen>
</iframe>

3. 预加载资源

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

✅ 十一、简单示例：响应式博客页面

创建普通Java项目，添加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>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>我的博客</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>如何学习 HTML</h2>
      <p>HTML 是网页的基础...</p>
      <img src="html.jpg" alt="HTML 图示" loading="lazy">
    </article>
  </main>

  <footer>
    <p>&copy; 2025 我的博客</p>
  </footer>
</body>
</html>