使用HTML搭建网站需掌握基本结构：以` 声明文档类型，通过 包裹整体内容， 定义元数据（标题、字符集等），`填充页面主体，结合CSS控制样式布局，JavaScript实现交互功能，最终通过FTP上传至服务器
HTML基础结构
HTML（超文本标记语言）是构建网页的核心语言，通过标签定义内容结构和样式，以下是基本框架：
| 作用 | 示例 |
<!DOCTYPE> | 声明文档类型（HTML5为<!DOCTYPE html>） | <!DOCTYPE html> |
<html> | 根元素，包含整个网页内容 | <html lang="zh-CN"> |
<head> | 头部信息（meta、标题、样式等） | <head><meta charset="UTF-8"><title>页面标题</title></head> |
<body> | （文字、图片、链接等） | <body><h1>你好，世界！</h1></body> |
文本与格式化
常用文本标签
| 作用 | 示例 |
<h1>~<h6> | 标题（h1为最高级别） | <h1>一级标题</h1> |
<p> | 段落 | <p>这是一个段落。</p> |
<br> | 换行 | 段落换行<br>新一行 |
<strong> | 加粗（语义强调） | <strong>重要内容</strong> |
<em> | 斜体（语义强调） | <em>强调内容</em> |
列表与链接
列表类型
| 作用 | 示例 |
<ul> | 无序列表 | <ul><li>项目1</li><li>项目2</li></ul> |
<ol> | 有序列表 | <ol><li>第一步</li></ol> |
<li> | 列表项 | <li>列表内容</li> |
超链接
| 属性 | 作用 | 示例 |
href | 链接地址 | <a href="https://example.com">链接</a> |
target | 打开方式（_blank新窗口） | <a href="..." target="_blank"> |
图片与表格
图片标签
| 属性 | 作用 | 示例 |
src | 图片路径 | <img src="image.jpg" alt="描述"> |
alt | 替代文本（SEO必要） | <img src="logo.png" alt="公司Logo"> |
width/height | 尺寸（可省略单位） | <img src="banner.jpg" width="100%"> |
表格结构
| 作用 | 示例 |
<table> | 表格容器 | <table border="1"><tr><th>标题</th></tr></table> |
<tr> | 表行 | <tr><td>数据</td></tr> |
<th> | 表头单元格 | <th>姓名</th> |
<td> | 表格数据单元格 | <td>张三</td> |
表单与输入
表单基础
| 作用 | 示例 |
<form> | 表单容器 | <form action="/submit" method="post"> |
<input> | 输入框 | <input type="text" name="username"> |
<textarea> | 多行文本框 | <textarea rows="5" cols="30"></textarea> |
<button> | 提交按钮 | <button type="submit">提交</button> |
样式与布局
内联样式
| 语法 | 作用 | 示例 |
style | 直接定义样式 | <div style="color: red;">红色文字</div> |
外部样式表
| 作用 | 示例 |
<link> | 引入外部CSS文件 | <link rel="stylesheet" href="style.css"> |
网站测试与发布
- 本地测试：
- 用浏览器打开HTML文件,检查链接、图片、表单是否正常。
- 使用开发者工具（F12）查看控制台错误。
- 上传至服务器：
通过FTP工具或在线平台（如GitHub Pages、Netlify）部署网站。
- 跨浏览器兼容：
确保在Chrome、Firefox、Safari等主流浏览器中显示一致。
相关问题与解答
问题1：HTML5有哪些新特性？
解答：
- 新增语义化标签（如
<header>、<footer>、<article>）。 - 支持本地存储（
localStorage）、拖拽功能（draggable）。 - 多媒体标签（
<video>、<audio>）原生支持。 - 更严格的解析规则（如自动闭合标签）。
问题2：如何优化HTML代码以提高SEO？
解答：
- 使用语义化标签（如
<h1>而非<div>）。 - 为图片添加
alt属性，描述内容。 - 确保链接可访问（避免
javascript:开头的href）。 - 压缩代码,减少冗余标签（如合并
