九八云安全页面基础结构
HTML网页由<!DOCTYPE html>声明开头，包含<html>根元素，内部分为<head>和<body>两部分：
<head><body>基础模板示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">我的网页</title>
<style>
/ 内联样式 /
body { font-family: Arial, sans-serif; }
</style>
</head>
<body>
<h1>欢迎访问我的网站</h1>
<p>这是一个简单布局的演示页面。</p>
</body>
</html>
常用标签与布局元素
标题标签 <h1>~<h6>
- 定义页面层级结构,
<h1>为最高级别标题 - 示例：
<h2>副标题</h2>
段落与文本
<p>：定义段落，自动换行<strong>/<em>：加粗/斜体文本 ：空格占位符
超链接 <a>
- 语法：
<a href="链接地址">点击文本</a> - 示例：
<a href="https://example.com">访问示例网站</a>
图片 <img>
- 语法：
<img src="图片路径" alt="描述文本" /> alt属性必填，用于替代文本和SEO优化
列表
- 无序列表：
<ul><li>项目1</li></ul> - 有序列表：
<ol><li>第一项</li></ol>
布局技巧与样式控制
分区布局（<div>）
- 用法：
<div>作为容器划分页面区域 - 示例：
<div style="border:1px solid #000; padding:10px;"> <h3>内容区块</h3> <p>此处为独立内容区域。</p> </div>
文本对齐
| 属性 | 效果 | 示例代码 |
|---|---|---|
text-align |
水平对齐 | <div style="text-align:center;">居中文本</div> |
vertical-align |
垂直对齐（需配合line-height） |
<span style="line-height:200px;display:inline-block;vertical-align:middle;">垂直居中</span> |
图片排版
- 左浮动：
<img style="float:left;" src="image.jpg" /> - 右浮动：
<img style="float:right;" src="image.jpg" /> - 清除浮动：在后续元素添加
<div style="clear:both;"></div>
表格布局（基础）
简单表格结构
<table border="1">
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
| 作用 | |
|---|---|
<table> |
定义表格 |
<tr> |
定义行 |
<th> |
表头单元格（加粗） |
<td> |
普通单元格 |
合并单元格
- 跨行合并：
<th rowspan="2">合并两行</th> - 跨列合并：
<td colspan="3">合并三列</td>
响应式基础（可选）
- 添加视口 meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 使用百分比宽度：
<img src="image.jpg" style="width:100%;" /> - 媒体查询示例：
@media (max-width: 768px) { body { font-size:14px; } }
相关问题与解答
问题1：如何让网页内容在浏览器中垂直居中？
解答：
可通过以下两种方式实现：
html, body { height:100%; margin:0; }
body { display:flex; align-items:center; justify-content:center; }
<table style="width:100%; height:100vh;"><tr><td>居中内容</td></tr></table>
问题2：图片如何自适应容器大小且保持比例？
解答：
设置图片宽度为百分比，高度自动调整：
<img src="image.jpg" style="width:100%; height:auto;" />
或使用CSS类：
.responsive-img { max-width:100%; height:auto; }
