基础结构
HTML文档由<!DOCTYPE html>声明、<html>根元素、<head>头部和<body>主体组成。
基本模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">网页标题</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-页面内容 –>
</body>
</html>
页面结构设计
| 组件 |
用途 |
| 头部导航 |
<nav> |
定义导航栏，包含链接（<a>）和列表（<ul>/<li>）。 |
| 侧边栏 |
<aside> |
，如广告、相关文章链接。 |
| 底部版权 |
<footer> |
页脚信息，如版权、联系方式。 |
处理
| 功能 |
示例 |
<h1>–<h6> |
标题层级（<h1>为最高级别） |
<h1>网站主标题</h1> |
<p> |
段落文本 |
<p>这是一个段落。</p> |
<strong> |
加粗文本 |
<strong>重要内容</strong> |
<em> |
斜体文本 |
<em>强调内容</em> |
<br> |
换行 |
段落内换行<br>继续内容 |
<hr> |
水平分割线 |
<hr> |
链接与图片
| 类型 |
标签与属性 |
示例 |
| 外部链接 |
<a href="URL" target="_blank"> |
<a href="https://example.com" target="_blank">访问示例</a> |
| 内部链接 |
<a href="#section"> |
<a href="#about">跳转到关于我们</a> |
| 邮件链接 |
<a href="mailto:email@example.com"> |
<a href="mailto:test@example.com">发送邮件</a> |
| 图片 |
<img src="image.jpg" alt="描述" /> |
<img src="logo.png" alt="公司标志" style="width:100px;"> |
| 响应式图片 |
<picture>+<source>+<img> |
“`html |
<picture>
<source srcset="image-small.jpg" media="(max-width:600px)">
<img src="image-large.jpg" alt="示例图片">
</picture>
``` |
列表与表格
列表
| 类型 |
示例 |
| 无序列表 |
<ul> + <li> |
<ul><li>项目1</li><li>项目2</li></ul> |
| 有序列表 |
<ol> + li> |
<ol><li>第一步</li><li>第二步</li></ol> |
| 嵌套列表 |
列表内嵌套新列表 |
<ul><li>主项<ol><li>子项1</li></ol></li></ul> |
表格
| 功能 |
示例 |
<table> |
表格容器 |
<table><tr><th>标题</th><td>内容</td></tr></table> |
<tr> |
表格行 |
<tr><td>数据</td></tr> |
<th> |
表头单元格（加粗） |
<th>姓名</th> |
<td> |
数据单元格 |
<td>张三</td> |
colspan |
合并列 |
<td colspan="2">跨两列</td> |
rowspan |
合并行 |
<td rowspan="2">跨两行</td> |
多媒体与嵌入内容
| 功能 |
标签与属性 |
示例 |
| 嵌入视频 |
<video src="video.mp4" controls></video> |
“`html |
<video src="video.mp4" controls autoplay></video>
``` |
| 嵌入音频 | <audio src="audio.mp3" controls></audio> | <audio src="music.mp3" loop></audio> |
| 嵌入网页 | <iframe src="URL" width="400" height="300"></iframe> | <iframe src="https://maps.google.com" style="border:0;"></iframe> |
样式与布局
内联样式与外部CSS
| 方式 |
示例 |
说明 |
| 内联样式 |
<div style="color:red;">红色文字</div> |
直接在标签中定义样式，优先级高但不易维护。 |
| 内部样式表 |
<style>body{background:#f0f0f0;}</style> |
在<head>中定义，仅作用于当前页面。 |
| 外部样式表 |
<link rel="stylesheet" href="style.css"> |
与样式，适合多页面复用。 |
常用CSS属性
| 属性 |
功能 |
示例 |
color |
文本颜色 |
color: #333; |
background-color |
背景颜色 |
background-color: #fff; |
font-size |
字体大小 |
font-size: 16px; |
margin |
外边距 |
margin: 20px auto; |
padding |
内边距 |
padding: 10px; |
响应式设计
- 视口设置：在
<head>中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，确保手机适配。
- 媒体查询：通过CSS检测屏幕宽度调整样式。
@media (max-width: 768px) {
body { font-size: 14px; }
.nav { display: block; }
}
- Flexbox布局：使用
display: flex;实现自适应排列。
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
</div>
网站构建流程
- ：确定页面结构（导航、内容区、侧边栏等）。
- 设计草图：绘制页面布局图，标注各区域功能。
- 创建文件：按模块编写HTML文件，并链接CSS。
- 测试兼容性：在不同浏览器（Chrome/Firefox/Safari）中预览。
- 发布上线：上传文件至服务器（如GitHub Pages、FTP或云存储）。
相关问题与解答
问题1：如何选择HTML5或旧版HTML？
解答：优先使用HTML5（<!DOCTYPE html>），它支持新标签（如<nav>、<section>）、多媒体原生嵌入和更严格的语义化，旧版HTML（如XHTML）需严格闭合标签且语法限制多，已逐渐淘汰。
@media (max-width: 600px) {
.sidebar { display: none; } / 隐藏侧边栏 /
.main { width: 100%; } / 主内容占满全屏 /
九八云安全
