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

html制作网页

HTML通过结构化标签构建网页，核心包括` 声明、 根标签及 （元数据）与）分区，基础元素如 ~）、 （段落）、`（超链接）配合属性（如href）实现功能，结合CSS可美化布局，最终通过浏览器解析呈现

HTML网页制作指南

HTML基础结构

HTML文档由<!DOCTYPE html>声明开始，包含<html>根元素，内部分为<head>和<body>两部分。<head>存放元数据（如标题、字符集），<body>展示可见内容。

基础模板示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">网页标题</title>
</head>
<body>
    <h1>欢迎学习HTML</h1>
    <p>这是第一个段落</p>
</body>
</html>

常用HTML标签

| 标签类型 | 用途 | 示例 |
|———|——|——|标签 | 定义六级标题 | <h1>主标题</h1> |
| 段落标签 | 文本段落 | <p>内容</p> |
| 换行标签 | 强制换行 | <br> |
| 格式标签 | 加粗/斜体 | <b>, <i> |
| 链接标签 | 超链接 | <a href="url">链接文字</a> |
| 图片标签 | 嵌入图像 | <img src="path" alt="描述"> |

表格制作

使用<table>创建表格，包含<thead>表头、<tbody>主体、<tfoot>页脚，典型结构：

html制作网页 第1张

<table border="1">
  <thead>
    <tr><th>姓名</th><th>年龄</th></thead>
  <tbody>
    <tr><td>张三</td><td>20</td></tr>
    <tr><td>李四</td><td>22</td></tr>
  </tbody>
</table>

列表类型

列表类型 特点
无序列表 <ul> 圆点符号
有序列表 <ol> 数字编号
定义列表 <dl> 术语+解释

嵌套列表示例

<ul>
  <li>水果
    <ol>
      <li>苹果</li>
      <li>香蕉</li>
    </ol>
  </li>
</ul>

表单元素

核心标签包括：

  • <form>：表单容器
  • <input>：文本框/单选框/复选框
  • <textarea>：多行文本域
  • <button>：提交按钮
  • <select>：下拉选择框

完整表单示例

<form action="submit.php" method="post">
  用户名：<input type="text" name="username"><br>
  密码：<input type="password" name="password"><br>
  <input type="submit" value="登录">
</form>

CSS样式集成

通过<style>标签添加内部样式：

<head>
  <style>
    body {font-family: Arial;}
    h1 {color: blue;}
  </style>
</head>

或使用<link>引入外部样式表：

<head>
  <link rel="stylesheet" href="styles.css">
</head>

JavaScript交互

在<script>标签中编写JS代码：

<body>
  <button onclick="alert('Hello!')">点击我</button>
  <script>
    document.write("当前时间：" + new Date());
  </script>
</body>

常见问题解答

Q1：如何让图片自适应容器大小？
A1：在<img>标签添加max-width:"100%"样式，或使用CSS规则： 

img {
  max-width: 100%;
  height: auto;
}

Q2：表格单元格如何垂直居中？
A2：通过CSS设置vertical-align: middle;属性： 

<td style="vertical-align:middle;">垂直居中内容
0

相关文章