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

html制作的网页

HTML网页由文本文件构成，包含DOCTYPE声明、html标签及head、body部分，Head定义元数据与样式，Body展示内容，常用标签有标题-、段落、链接

HTML 网页制作指南

HTML 基本结构

HTML 文档由 <!DOCTYPE html> 声明开头，定义文档类型为 HTML5，基本结构包括 <html> 根元素，包含 <head>（头部）和 <body>（主体）两部分。

元素 作用 示例
<!DOCTYPE html> 声明 HTML5 文档类型 <!DOCTYPE html>
<html> 根元素，包裹所有内容 <html>...</html>
<head> 包含元数据（如标题、样式链接） <head><title>页面标题</title></head>
<body> 网页可见内容区域 <body>...</body>

常用 HTML 标签

文本标签

功能 示例
<h1>~<h6> 标题（<h1> 最大，<h6> 最小） <h1>一级标题</h1>
<p> 段落 <p>这是一个段落。</p>
<br> 换行 这段文字<br>换行显示
<hr> 水平线 <hr>

文本格式标签

功能 示例
<b> / <strong> 粗体（<strong> 语义更强） <b>加粗</b>
<i> / <em> 斜体（<em> 强调语义） <i>斜体</i>
<mark> 高亮标记 <mark>标记文本</mark>

链接与图片

功能 示例
<a> 超链接 <a href="https://example.com">链接</a>
<img> 图片 <img src="image.jpg" alt="描述">

表格制作

基本结构

<table border="1">
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
</table>
元素 作用
<table> 表格容器
<thead> 表头区域
<tbody> 表体区域
<tr> 表格行
<th> 表头单元格
<td> 数据单元格

表单元素

常见表单标签

功能 示例
<form> 表单容器（需指定 action 和 method） <form action="/submit" method="post">
<input> 输入框（通过 type 属性定义类型） <input type="text" placeholder="请输入">
<textarea> 多行文本输入 <textarea rows="5" cols="30">默认文本</textarea>
<button> 按钮（可配合 type="submit"） <button type="submit">提交</button>

样式与链接

内联样式

<p style="color: red; font-size: 16px;">红色文字</p>

外部样式表

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

内部样式表

<style>
  body { background-color: #f0f0f0; }
</style>

相关问题与解答

问题 1：HTML5 新增了哪些常用标签？

解答：
HTML5 引入了 <header>、<footer>、<nav>、<section>、<article> 等语义化标签，用于更清晰地划分网页结构。 

<header>页眉</header>
<nav>导航菜单</nav>
<article>文章内容</article>
<footer>页脚</footer>

问题 2：如何嵌入外部 CSS 文件？

解答：
在 <head> 中使用 <link> 标签，指定 rel="stylesheet" 和 href 属性指向 CSS 文件路径。 

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

若 CSS 文件与 HTML 文件不在同一目录，需使用相对路径（如 `../css/styles

0

相关文章