上一篇
html简单网页代码
示例你好，世界
<!DOCTYPE html>
简单网页示例
HTML基本结构
| 代码结构 | 说明 |
|---|---|
<!DOCTYPE html> | 声明文档类型，包裹所有HTML内容 |
<head>...</head> | 包含元数据（编码、标题、样式） |
<body>...</body> | 网页可见内容区域 |
常用文本标签
层级（最大到最小）
| 功能 | 示例 | |
|---|---|---|
| <h1>~<h6> | <h1>一级标题</h1> | |
| <p> | 段落 | <p>这是一个段落</p> |
| <br/> | 换行 | 段落1<br/>段落2 |
列表与链接
| 类型 | 代码示例 | 效果 |
|---|---|---|
| 无序列表 | <ul><li>项目</li>...</ul> | • 项目符号 |
| 有序列表 | <ol><li>...</ol> | 数字排序 |
| 超链接 | <a href="地址">链接文字</a> | 点击跳转指定地址 |
图片与表格
| 元素 | 属性 | 说明 |
|---|---|---|
| <img> | src、alt、width/height | 显示图片，必填alt属性 |
| <table> | border、cellpadding | 创建表格结构 |
基础样式控制
| 方式 | 代码示例 | 作用 |
|---|---|---|
| 内联样式 | style="color:red;font-size:20px" | 直接设置单个元素样式 |
| 内部样式表 | <style>p{color:blue;}</style> | 统一设置同类元素样式 |
相关问题与解答
| 问题 | 答案 |
|---|---|
| Q1：如何让图片自适应容器大小？ | A：添加style="max-width:100%;height:auto;"，或使用<img src="..." style="width:100%" /> |
| Q2：为什么有的超链接点击没反应？ | A：常见原因：①href属性为空或地址错误 ②文件路径不正确 ③目标网站不存在 |
