当前位置：首页 > 行业动态 > 正文

html格式成品网页

admin
行业动态
2025-04-30
2390

HTML网页由基础标签构成，包含文档类型声明、头部（head）定义元数据，主体（body）承载可见内容，通过标签组合实现页面布局与交互功能。

HTML网页基本结构

HTML文件由<!DOCTYPE html>声明开头，包含<html>根元素，内部分为<head>和<body>两部分：

html格式成品网页第1张

区域	功能说明
`<head>`	存放元数据（如字符集、页面标题、链接的CSS/JS文件）
`<body>`	存放可见内容（文本、图片、表格、链接等）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">网页标题</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎访问我的网页</h1>
    <p>这是一个基础HTML结构示例</p>
</body>
</html>

常用HTML标签汇总

文本标签

功能	示例效果
`<h1>~<h6>`	标题层级（h1最高）
`<p>`	段落	普通文本段落
`<strong>`	加粗文本	加粗效果
`<em>`	斜体文本	斜体效果

链接与图片

功能	属性说明
`<a>`	超链接	`href`指定跳转地址
`<img>`	图片	`src`指定图片路径，`alt`为替代文本

<a href="https://example.com">点击访问示例网站</a>
<img src="image.jpg" alt="描述性文本">

样式与脚本集成方式

类型	实现方式
内联样式	直接在标签中定义`style`属性（如：`<div style="color:red;">`）
内部样式表	在`<head>`中通过`<style>`标签定义CSS
外部样式表	使用`<link>`标签引入独立CSS文件（推荐分离内容与样式）

<!-内部样式示例 -->
<style>
    body { background-color: #f0f0f0; }
</style>
<!-外部脚本示例 -->
<script src="script.js"></script>

表格与表单基础

表格结构

功能	示例
`<table>`	表格容器	包裹整个表格结构
`<tr>`	表格行	单行数据
`<td>`	数据单元格	行内具体数据
`<th>`	表头单元格	通常用于首行列标题

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
    </tr>
</table>

表单元素

功能	常用属性
`<form>`	表单容器	`action`提交地址，`method`提交方式
`<input>`	输入框	`type`定义输入类型（text/password等）
`<button>`	提交按钮	`type="submit"`