HTML网页制作代码大全：常用标记与实用示例详解

HTML基础组件：段落、链接与图像

HTML（超文本标记语言）是构建网页的基础。掌握常用标记是学习网页制作的第一步。以下是一些最基础的HTML组件及其用法。

创建段落

段落是网页内容的基本单位，使用 <p> 和 </p> 标签来定义。例如：

<p>这是一个段落。</p>

添加链接

超链接用于跳转到其他页面或站点，使用 <a> 标签创建，其中 href 属性指定目标URL。例如：

<a href="https://www.jb51.net">这是一个链接</a>

插入图像

图像能增强页面视觉效果，使用 <img> 标签插入，src 属性指定图片路径，alt 属性提供替代文本。例如：

<img src="image.jpg" alt="一张美丽的图片">

数据展示：表格与列表

创建表格

表格用于呈现结构化数据，由 <table>（表格）、<tr>（行）和 <td>（单元格）标签组成。示例：

<table>
  <tr>
    <td>第一行，第一列</td>
    <td>第一行，第二列</td>
  </tr>
  <tr>
    <td>第二行，第一列</td>
    <td>第二行，第二列</td>
  </tr>
</table>

创建列表

使用 <ul>（无序列表）或 <ol>（有序列表）配合 <li>（列表项）标签。示例：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

交互组件：表单与样式

创建表单

表单用于收集用户输入，使用 <form> 标签定义，配合 <input> 标签创建输入字段。示例：

<form action="submit.php" method="post">
  <label for="username">用户名：</label>
  <input type="text" name="username">
  <label for="password">密码：</label>
  <input type="password" name="password">
  <input type="submit" value="提交">
</form>

设置样式

CSS用于控制网页外观，可通过 <style> 标签嵌入样式。例如：

<style>
  body {
    background-color: #f2f2f2;
  }
  h1 {
    color: blue;
    text-align: center;
  }
</style>

以上代码片段仅是HTML的冰山一角，但足以构建基本网页结构和样式，为深入学习打下基础。

HTML5文档声明与常用标签

HTML5文档声明是网页编写的重要部分，必须放在最顶部，以避免浏览器进入怪异模式导致页面显示异常。

文档声明示例

• HTML5：<!DOCTYPE html>
• HTML 4.01：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• XHTML 1.0：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

注意：<!DOCTYPE> 不是HTML标签，而是向浏览器提供版本信息的声明。浏览器有两种解析模式：标准模式（Standards Mode）和怪异模式（Quirks Mode），后者可能导致不可预期的行为，应避免。

文件结构标签

• <HTML></HTML>：文件开头与结尾
• <HEAD></HEAD>：文头，描述性资料
• <TITLE></TITLE>：文件主题，必须放在文头内
• <BODY></BODY>：文体，文件本体

标题与区分

• <H?></H?>：标题，从1到6级
• <H? ALIGN=LEFT|CENTER|RIGHT></H?>：标题对齐
• <DIV></DIV>：区分区块
• <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>：区块对齐
• <BLOCKQUOTE></BLOCKQUOTE>：引文区块，通常内缩

文本格式化标签

• <EM></EM>：强调，斜体显示
• <STRONG></STRONG>：特别强调，加粗显示
• <CITE></CITE>：引文，斜体显示
• <CODE></CODE>：显示原始码
• <SAMP></SAMP>：样本
• <KBD></KBD>：键盘输入
• <VAR></VAR>：变数
• <DFN></DFN>：定义
• <ADDRESS></ADDRESS>：地址
• <BIG></BIG>：大字
• <SMALL></SMALL>：小字

外观相关标签

• <B></B>：加粗
• <I></I>：斜体
• <U></U>：底线（部分浏览器不支持）
• <S></S>：删除线（部分浏览器不支持）
• <SUB></SUB>：下标
• <SUP></SUP>：上标
• <TT></TT>：打字机体（单空格字型）
• <PRE></PRE>：预定格式，保留空格
• <PRE WIDTH=?></PRE>：预定格式宽度（以字符计）
• <CENTER></CENTER>：向中看齐
• <BLINK></BLINK>：闪耀（已废弃）
• <FONT SIZE=?></FONT>：字体大小（1-7）
• <FONT SIZE=+|-?></FONT>：改变字体大小
• <BASEFONT SIZE=?>：基本字体大小（默认3）
• <FONT COLOR="#$$"></FONT>：字体颜色（$$为颜色代码）

实用HTML代码速查

1. 贴图：<img src="图片地址">
2. 加入连接：<a href="所要连接的相关地址">写上你想写的字</a>
3. 在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>
4. 移动字体（走马灯）：<marquee>写上你想写的字</marquee>
5. 字体加粗：<b>写上你想写的字</b>
6. 字体斜体：<i>写上你想写的字</i>
7. 字体下划线：<u>写上你想写的字</u>
8. 字体删除线：<s>写上你想写的字</s>
9. 字体加大：<big>写上你想写的字</big>
10. 字体控制大小：<h1>写上你想写的字</h1>（h1最大，h5最小）
11. 更改字体颜色：<font color="#value">写上你想写的字</font>（value值在000000与ffffff之间）
12. 消除连接的下划线：<a href="相关地址">写上你想写的字</a>
13. 贴音乐：<embed src="音乐地址" width="宽度" height="高度" autostart=false>
14. 贴flash：<embed src="flash地址" width="宽度" height="高度">
15. 贴影视文件：<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>
16. 换行：<br>
17. 段落：<p>段落</p>
18. 原始文字样式：<pre>正文</pre>
19. 换帖子背景：<body background="背景图片地址">
20. 固定帖子背景不随滚动条滚动：<body background="背景图片地址" bodybgproperties=fixed>
21. 定制帖子背景颜色：<body bgcolor="#value">
22. 帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>
23. 贴网页：<iframe src="相关地址" width="宽度" height="高度"></iframe>

掌握这些常用HTML标记，您就能快速搭建网页框架，并在此基础上进一步探索CSS和JavaScript，创建更丰富的交互体验。