九八云安全HTML简单网站框架说明
基础结构
HTML文档由<!DOCTYPE html>声明开头，定义文档类型为HTML5，接着用<html>标签包裹整个内容，并通过<head>和<body>划分头部信息和主体内容。
<!DOCTYPE html><!DOCTYPE html><html><html lang="zh-CN">（添加lang属性指定语言）<head><head>...</head><body><body>...</body>头部元素（<head>）
头部包含页面配置信息,如字符编码、标题、样式表和脚本。
| 作用 | 示例 | |
|---|---|---|
<meta charset="UTF-8"> |
设置字符编码（推荐UTF-8） | <meta charset="UTF-8"> |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
适配移动设备（响应式设计） | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link rel="stylesheet" href="style.css"> |
引入外部CSS样式表 | <link rel="stylesheet" href="style.css"> |
<script src="script.js"></script> |
引入外部JavaScript文件 | <script src="script.js"></script> |
主体结构（<body>）
主体部分使用语义化标签组织内容,提升可读性和SEO优化。
<header><header><h1>网站名称</h1></header><nav><nav><ul><li><a href="#home">首页</a></li></ul></nav><section><section><h2>关于我们</h2><p>介绍内容...</p></section><article><article><h3>文章标题</h3><p>正文...</p></article><footer><footer>© 2023 公司名</footer>常用标签示例
| 作用 | 示例 | |
|---|---|---|
<h1>~<h6> |
标题（<h1>权重最高） |
<h1>主标题</h1> |
<p> |
段落文本 | <p>这是一个段落。</p> |
<a> |
超链接 | <a href="https://example.com">链接文本</a> |
<img> |
图片 | <img src="image.jpg" alt="描述文字"> |
<ul>/<ol> |
无序/有序列表 | <ul><li>项目1</li><li>项目2</li></ul> |
<table> |
表格 | <table><tr><th>表头</th><td>内容</td></tr></table> |
注意事项
- 标签闭合：多数标签需闭合（如
<div>必须对应</div>），否则可能引发布局错误。 - 属性引号：属性值必须用引号包裹（如
href="link"）。 - 路径问题：外部资源（CSS/JS）路径需正确，相对路径（如
href="style.css"）或绝对路径（如href="/css/style.css"）。 - 语义化：优先使用语义化标签（如
<header>代替<div>），利于SEO和可访问性。
相关问题与解答
问题1：如何设置网页的标题？
解答：在<head>部分使用<title>标签，
<head>我的网页标题</title> </head> ``` 会显示在浏览器标签栏，且影响SEO。 --- # 问题2：如何引入外部CSS样式表？ 解答：在`<head>`中使用`<link>`标签，设置`rel="stylesheet"`和`href`指向CSS文件路径， ```html <head> <link rel="stylesheet" href="styles.css"> </head>
确保CSS文件路径正确,且与HTML文件在同一服务器
