在前端书写网页时，常见的逻辑结构和书写顺序有助于维护代码的可读性和可维护性。以下是一个典型的网页结构及其书写顺序和命名形式：
1. 文档类型声明（Doctype）
```html
<!DOCTYPE html>
```
这是HTML文档的第一行，告诉浏览器页面使用的HTML版本。
2. HTML 根元素
```html
<html lang="zh-CN">
```
`lang` 属性指定了页面的语言，有助于搜索引擎优化和屏幕阅读器。
# 3. 头部（Head）
```html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
<!-- CSS 样式表 -->
<link rel="stylesheet" href="styles.css">
<!-- JavaScript 文件 -->
<script src="script.js" defer></script>
</head>
```
- `<meta charset="UTF-8">` 指定字符编码。
- `<meta name="viewport">` 控制页面的缩放和尺寸。
- `<title>` 定义了页面的标题。
- `<link>` 引入CSS文件。
- `<script>` 引入JavaScript文件，`defer` 属性表示脚本将在文档完全呈现后再执行。
4. 身体（Body）
```html
<body>
<!-- 页眉 -->
<header>
<nav>
<!-- 导航链接 -->
</nav>
</header>
<!-- 主要内容 -->
<main>
<article>
<!-- 文章内容 -->
</article>
<aside>
<!-- 侧边栏内容 -->
</aside>
</main>
<!-- 页脚 -->
<footer>
<!-- 联系信息、版权声明等 -->
</footer>
</body>
```
- `<header>` 包含页面的导航链接和徽标。
- `<nav>` 定义导航链接。
- `<main>` 包含页面主要内容。
- `<article>` 用于独立的内容块，如博客文章。
- `<aside>` 包含与页面内容相关但可以独立于内容的边栏。
- `<footer>` 包含页面的页脚内容，如版权信息、联系信息等。
命名形式
- 使用小写字母。
- 使用连字符（-）分隔单词，例如 `main-content`、`nav-menu`。
- 保持命名简洁但具有描述性，避免过长的名字。
- 避免使用通用的名字，如 `class="button"`，而是使用更具体的名字，如 `class="checkout-button"`。
示例：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>示例页面</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<header class="site-header">
<nav class="main-nav">
<!-- 导航链接 -->
</nav>
</header>
<main class="site-main">
<article class="post">
<!-- 文章内容 -->
</article>
<aside class="sidebar">
<!-- 侧边栏内容 -->
</aside>
</main>
<footer class="site-footer">
<!-- 页脚内容 -->
</footer>
</body>
</html>
```
遵循上述结构和命名约定可以帮助创建清晰、一致且易于维护的HTML文档。
850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
