“`html，简答生成简答。，
HTML 网站格式详解
HTML 基本结构
HTML 文档基本结构如下：
| 代码部分 | 说明 |
| –| –|
| <!DOCTYPE html> | 声明文档类型，告知浏览器遵循 HTML 标准解析 |
| <html> | HTML 文档根元素，包含整个网页内容 |
| <head> | 头部，包含元数据（如标题、字符集声明、链接样式表等） |
| <meta charset="UTF-8"> | 设置网页字符编码为 UTF-8，保证中文等字符正常显示 |网页标题| 定义网页标题，显示在浏览器标签栏 | | | 链接外部 CSS 样式表，用于美化网页样式 | || 主体部分，包含网页可见内容（文本、图像、链接等） | |` | 关闭 HTML 文档标签 |
HTML 头部元素
| 元素 | 功能 | 示例 |
<meta> | 提供网页元信息，如关键词、描述、viewport 设置等 | <meta name="description" content="这是一个示例网页"> |
<link> | 链接外部资源，常用于样式表 | <link rel="icon" href="favicon.ico">（链接网站图标） |
<style> | 内嵌 CSS 样式，直接在 HTML 文件里写样式 | <style>body { background-color: #f0f0f0; }</style> |
HTML 主体结构
（一）文本标签
| 用途 | 示例 |
<h1> <h6> | 标题标签，<h1>等级最高，依次递减 | <h1>一级标题</h1> |
<p> | 段落标签 | <p>这是一个段落。</p> |
<strong> | 加粗文本，强调重要内容 | <strong>重点内容</strong> |
<em> | 斜体文本，表示强调或语气 | <em>注意！</em> |
（二）列表
| 类型 | 示例 |
| 无序列表 | <ul><li>条目 1</li><li>条目 2</li></ul> | 显示为圆点列表 |
| 有序列表 | <ol><li>第一步</li><li>第二步</li></ol> | 显示为数字列表 |
（三）超链接
| 属性 | 示例 |
<a> | href指定链接地址 | <a href="https://www.example.com">访问示例网站</a> |
（四）图片
| 属性 | 示例 |
<img> | src图片路径，alt替代文本 | <img src="image.jpg" alt="示例图片"> |
（五）表格
| 用途 | 示例 |
<table> | 定义表格 | <table><tr><th>表头 1</th><th>表头 2</th></tr><tr><td>数据 1</td><td>数据 2</td></tr></table> |
<tr> | 表格行 |
<th> | 表头单元格 |
<td> | 表格数据单元格 |
（六）表单
| 功能 | 示例 |
<form> | 表单容器，action提交地址，method提交方式（get/post） | <form action="/submit" method="post"><input type="text" name="username"><input type="submit" value="提交"></form> |
<input> | 输入框，type多样（文本、密码、单选等） | <input type="password" name="password"> |
HTML5 新特性
（一）语义化标签
| 用途 | 示例 |
<header> | 页眉，常含导航、logo | <header>网站导航</header> |
<nav> | 导航栏 | <nav><a href="#home">首页</a></nav> |
<article> | 独立块 | <article>这是一篇文章。</article> |
<section> | 文档节区块，有标题 | <section><h2>章节标题</h2>内容...</section> |
<footer> | 页脚，版权等信息 | <footer>© 2024 公司名称</footer> |
（二）多媒体支持
| 功能 | 示例 |
<video> | 嵌入视频，可控制播放等 | <video src="movie.mp4" controls></video> |
<audio> | 嵌入音频，设置播放控件等 | <audio src="music.mp3" controls loop></audio> |
（三）本地存储
| 类型 | 说明 | 示例（JavaScript 调用） |
| localStorage | 长期存储，浏览器关闭数据仍在，容量较大 | localStorage.setItem('key', 'value'); |
| sessionStorage | 会话存储，页面关闭数据消失，同源同窗口有效 | sessionStorage.setItem('key', 'value'); |
问题与解答
问题 1：HTML 中如何让图片自适应容器大小？
解答：可以通过 CSS 设置图片的宽度和高度，将图片宽度设置为百分比，使其随容器变化：<img src="image.jpg" style="width: 100%; height: auto;" alt="自适应图片">。width: 100%使图片宽度占满容器，height: auto保持宽高比，防止图片变形，也可在 CSS 样式表中定义类似样式类，应用到图片标签。
问题 2：表单提交方式 get 和 post 有什么区别？
解答：get方式将表单数据附加在 URL 后面，通过网址传输，数据在请求 URL 中可见，适合传输少量非敏感数据，如查询条件，优点是简单快捷，可收藏书签。post方式将数据放在请求体中，不在 URL 显示，更安全可靠，适合传输大量或敏感数据，如登录密码，但相对 get，post请求稍复杂，服务器处理成本可能略高
