<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">示例页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">lt;/a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<p>欢迎访问我的网站！</p>
</section>
<section id="about">
<h2>关于我们</h2>
<p>这是一个示例网站。</p>
</section>
</main>
<footer>
<p>© 2023 示例公司</p>
</footer>
<script src="script.js"></script>
</body>
</html>
核心标签与功能分类
| 标签类别 |
常用标签 |
功能说明 |
| 结构标签 |
<html>、<head>、<body>、<header>、<footer>、<main>、<section> |
定义页面整体结构和内容分区 |
| 文本标签 |
<h1>~<h6>、<p>、<strong>、<em> |
层级、段落、粗体、斜体等文本样式 |
| 链接与导航 |
<a>、<nav>、<ul>、<li> |
创建超链接、导航菜单和列表 |
| 多媒体标签 |
<img>、<video>、<audio> |
嵌入图片、视频、音频等多媒体内容 |
| 表单标签 |
<form>、<input>、<button>、<textarea> |
创建交互式表单（输入框、按钮、文本域等） |
| 语义化标签 |
<article>、<aside>、<figure>、<figcaption> |
语义，提升可读性和SEO效果 |
关键属性详解
| 常用属性 |
说明 |
<a> |
href、target（_blank表示新窗口打开） |
定义链接地址和打开方式 |
<img> |
src、alt、width、height |
指定图片路径、替代文本、尺寸 |
<input> |
type（如text、password）、value、placeholder |
定义输入类型、默认值、提示文本 |
<meta> |
charset、name="viewport"、http-equiv |
设置字符编码、视口适配、浏览器兼容性 |
<link> |
rel（如stylesheet）、href |
引入外部CSS文件 |
<script> |
src、defer、async |
加载外部JS文件，控制执行顺序 |
常见问题与解决方案
如何解决中文乱码问题？
- 原因：未正确设置字符编码。
- 解决：在
<head>中添加 <meta charset="UTF-8">，并确保文件保存为UTF-8格式。
如何在手机端实现响应式布局？
- 方法：
- 添加视口元标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 使用CSS媒体查询：
@media (max-width: 768px) {
body { font-size: 14px; }
nav ul { display: flex; flex-direction: column; }
}
- 结合弹性布局（
flex）或网格布局（grid）调整元素排列。
相关问题与解答
问题1：HTML5中的<main>标签有什么作用？
- 解答：
<main>标签用于标识页面的主体内容，通常包含文章、产品信息等核心内容，它有助于搜索引擎和辅助技术（如屏幕阅读器）快速定位关键信息，同时避免将导航、广告等非主体内容误判为页面主内容。
问题2：如何在网页中嵌入YouTube视频？
- 解答：
- 获取视频的分享链接（如
https://youtu.be/ABCD1234）。
- 使用
<iframe>标签嵌入：
<iframe width="560" height="315" src="https://www.youtube.com/embed/ABCD1234"
frameborder="0" allowfullscreen></iframe>
- 调整
width和height属性控制视频尺寸，allowfullscreen允许全屏
九八云安全
