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

html做网页实例

admin
行业动态
2025-05-10
8

HTML网页基础实例通常包含声明、根标签及头部（含meta/title）与主体部分，通过h1-h6定义标题层级，p创建段落，img插入图片，a设置超链接，配合div布局实现页面结构，最终

基础网页结构搭建

使用HTML标签构建网页骨架,包含头部、导航栏、主体内容和页脚。

代码片段	功能说明
`<!DOCTYPE html>`	声明文档类型为HTML5
`<html lang="zh">`	定义网页语言为中文
`<head>`	包含元数据（如标题、字符集）
`<meta charset="UTF-8">`	设置字符编码为UTF-8
`<body>`	网页主体内容区域

文本与段落排版

通过<h1>~<h6>层级，<p>表示段落，<strong>和<em>分别强调文本。

代码	效果
`<h1>欢迎访问我的主页</h1>`	（最大字体）
`<p>这是一个<strong>简单</strong>的<em>HTML</em>示例。</p>`	段落中加粗和斜体混合

列表与超链接

无序列表（<ul>）和有序列表（<ol>）展示条目，<a>创建链接。

html做网页实例第1张

代码	功能
`<ul><li>项目1</li><li>项目2</li></ul>`	圆点无序列表
`<ol><li>第一步</li></ol>`	数字排序列表
`<a href="https://example.com">跳转链接</a>`	外部链接（需添加`target="_blank"`在新标签页打开）

图片与表格

插入图片使用<img>，表格通过<table>定义。

代码	说明
`<img src="image.jpg" alt="描述" width="200">`	指定图片路径、替代文本和宽度
`<table border="1"><tr><td>数据</td></tr></table>`	带边框的表格（需用`<tr>`定义行，`<td>`定义单元格）

样式与布局（CSS）

通过内联样式或<style>标签添加CSS，控制字体、颜色、布局等。

代码	效果
`<style>body {font-family: Arial;}</style>`	全局设置字体为Arial
`<div style="text-align:center;">居中文本</div>`	行内样式实现文本居中

示例：简易个人简历网页

结构代码

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  个人简历</title>  
    <style>  
        body {font-family: "微软雅黑"; line-height: 1.6;}  
        .container {width: 80%; margin: auto;}  
        h1 {text-align: center;}  
        table {border-collapse: collapse; width: 100%;}  
        th, td {border: 1px solid #ccc; padding: 8px;}  
    </style>  
</head>  
<body>  
    <div class="container">  
        <h1>张三的简历</h1>  
        <table>  
            <tr><th>姓名</th><td>张三</td></tr>  
            <tr><th>年龄</th><td>25岁</td></tr>  
            <tr><th>技能</th><td>HTML/CSS/JS</td></tr>  
        </table>  
    </div>  
</body>  
</html>

JavaScript交互功能

添加按钮点击事件,动态修改页面内容。

代码	功能
`<button onclick="alert('欢迎访问！')">点击我</button>`	弹出提示框
`<script>document.getElementById('btn').innerText = '已点击';</script>`	修改按钮文字