html网页制作代码大全 (html常用标记)

lichongyang

2 天前

下面是一份可直接收藏 / 学习 / 教学使用的《HTML 网页制作代码大全（HTML 常用标记）》，覆盖最常用、最核心的 HTML 标签，并配有简要说明与示例，适合初学者到进阶。

HTML 网页制作代码大全（HTML 常用标记）

HTML（HyperText Markup Language）是网页的基础语言，通过各种**标记（标签 / Tag）**来描述网页结构和内容。

一、HTML 文档基础结构

&lt;!DOCTYPE html>
&lt;html lang="zh-CN">
&lt;head>
  &lt;meta charset="UTF-8">
  &lt;title>My First HTML Page&lt;/title>
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
&lt;/head>
&lt;body>

  页面内容写在这里

&lt;/body>
&lt;/html>

常用说明

<!DOCTYPE html>：声明 HTML5 文档
<html>：HTML 根元素
<head>：页面配置信息
<body>：页面可见内容

二、文本与排版标签（最常用）

标题标签

&lt;h1>一级标题&lt;/h1>
&lt;h2>二级标题&lt;/h2>
&lt;h3>三级标题&lt;/h3>
&lt;h4>四级标题&lt;/h4>
&lt;h5>五级标题&lt;/h5>
&lt;h6>六级标题&lt;/h6>

段落与换行

&lt;p>这是一个段落&lt;/p>
&lt;br>
&lt;hr>

文本强调

&lt;strong>加粗（语义）&lt;/strong>
&lt;b>加粗（样式）&lt;/b>

&lt;em>斜体（语义）&lt;/em>
&lt;i>斜体（样式）&lt;/i>

&lt;u>下划线&lt;/u>
&lt;mark>高亮文本&lt;/mark>
&lt;small>小号文字&lt;/small>

三、链接与图片

超链接

&lt;a href="https://www.example.com" target="_blank">
  访问网站
&lt;/a>

常用属性：

href：链接地址
target="_blank"：新窗口打开

图片

&lt;img src="image.jpg" alt="图片说明" width="300">

常用属性：

src：图片路径
alt：图片描述（SEO 必须）
width / height：尺寸

四、列表标签

无序列表

&lt;ul>
  &lt;li>苹果&lt;/li>
  &lt;li>香蕉&lt;/li>
  &lt;li>橘子&lt;/li>
&lt;/ul>

有序列表

&lt;ol>
  &lt;li>第一步&lt;/li>
  &lt;li>第二步&lt;/li>
  &lt;li>第三步&lt;/li>
&lt;/ol>

自定义列表

&lt;dl>
  &lt;dt>HTML&lt;/dt>
  &lt;dd>网页结构语言&lt;/dd>
&lt;/dl>

五、表格标签

&lt;table border="1">
  &lt;tr>
    &lt;th>姓名&lt;/th>
    &lt;th>年龄&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>张三&lt;/td>
    &lt;td>20&lt;/td>
  &lt;/tr>
&lt;/table>

常用标签：

<table> 表格
<tr> 行
<th> 表头
<td> 单元格

六、表单标签（非常重要）

&lt;form action="/submit" method="post">

  &lt;input type="text" placeholder="用户名">
  &lt;input type="password" placeholder="密码">

  &lt;input type="radio" name="gender"> 男
  &lt;input type="radio" name="gender"> 女

  &lt;input type="checkbox"> 同意协议

  &lt;select>
    &lt;option>北京&lt;/option>
    &lt;option>上海&lt;/option>
  &lt;/select>

  &lt;textarea rows="4">&lt;/textarea>

  &lt;button type="submit">提交&lt;/button>

&lt;/form>

常用表单控件：

input（text / password / radio / checkbox / file）
select / option
textarea
button

七、HTML5 新增语义标签（推荐）

&lt;header>头部&lt;/header>
&lt;nav>导航&lt;/nav>
&lt;main>主体内容&lt;/main>
&lt;section>区块&lt;/section>
&lt;article>文章&lt;/article>
&lt;aside>侧边栏&lt;/aside>
&lt;footer>底部&lt;/footer>

👉 有利于 SEO 和结构清晰化。

八、多媒体标签

音频

&lt;audio controls>
  &lt;source src="music.mp3" type="audio/mpeg">
&lt;/audio>

视频

&lt;video controls width="400">
  &lt;source src="video.mp4" type="video/mp4">
&lt;/video>

九、常用 HTML 属性速查

属性	说明
id	唯一标识
class	类名
style	行内样式
title	鼠标提示
hidden	隐藏元素
data-*	自定义数据

十、HTML 学习建议

HTML 负责结构
CSS 负责样式
JavaScript 负责交互

三者缺一不可。

十一、总结

这份《HTML 网页制作代码大全（HTML 常用标记）》覆盖了网页开发中 90% 以上的常用标签，适合：

HTML 初学者
教学 / 培训资料
速查手册 / Cheat Sheet