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

html简单网页框架

admin
行业动态
2025-04-27
3472

HTML简单网页框架包含DOCTYPE声明、标签包裹（含和）及内容区，构成

HTML简单网页框架说明

基本结构

HTML文档由<!DOCTYPE html>声明、<html>标签、<head>头部和<body>主体组成：

html简单网页框架第1张

代码片段	功能说明
`<!DOCTYPE html>`	声明HTML5文档类型
`<html>`…`</html>`	包裹整个HTML文档
`<head>`…`</head>`	包含元数据（如编码、标题）
`<body>`…`</body>`	展示网页可见内容

头部(`<head>`)核心元素

元素	作用	示例
`<meta charset="UTF-8">`	设置字符编码	确保中文正常显示
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	响应式布局适配	适配移动设备宽度
`<link rel="stylesheet" href="style.css">`	引入外部CSS	分离样式与结构
`<script src="script.js"></script>`	引入外部JS	实现交互功能

主体(`<body>`)常用元素

功能	示例效果
`<h1>-<h6>`	标题层级
`<p>`	段落文本	普通段落内容
`<strong>`	加粗文本	加粗显示
`<em>`	斜体文本	斜体显示
`<br/>`	换行	强制换行新行

列表结构

类型	代码示例	呈现效果
无序列表	`<ul><li>项目1</li></ul>`	• 项目1
有序列表	`<ol><li>步骤1</li></ol>`	步骤1
定义列表	`<dl><dt>术语</dt><dd>解释</dd></dl>`	术语解释

超链接与图片

元素	属性说明	代码示例
`<a>`	`href`指定链接地址	`<a href="https://example.com">链接</a>`
`<img>`	`src`图片路径，`alt`替代文本	`<img src="image.jpg" alt="示例图"/>`

表格结构

功能	示例代码
`<table>`	表格容器	`<table border="1"><tr><th>表头</th></tr></table>`
`<tr>`	表格行	单行数据容器
`<td>`	数据单元格	普通单元格内容
`<th>`	表头单元格	通常加粗显示

表单元素

输入类型	用途	代码示例
`text`	单行文本输入	`<input type="text" placeholder="姓名"/>`
`password`	密码输入	`<input type="password"/>`
`radio`	单选按钮	`<input type="radio" name="group"/>`
`checkbox`	复选框	`<input type="checkbox"/>`
`submit`	提交按钮	`<button type="submit">提交</button>`

完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">简易网页示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>欢迎学习HTML</h1>
    <p>这是一个<strong>基础网页框架</strong>的演示页面。</p>
    <ul>
        <li>无序列表项1</li>
        <li>无序列表项2</li>
    </ul>
    <a href="https://www.w3schools.com">访问W3Schools</a>
    <img src="https://via.placeholder.com/150" alt="占位图片"/>
</body>
</html>