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

html制作网站代码

HTML网站代码需包含基本结构标签（html/head/body），使用语义化元素（h1-6, p, a等），正确嵌套并引用外部资源（CSS/JS）。

HTML网站代码制作指南

HTML基础结构

HTML文档由基础骨架和内容组成,基本结构如下：

html制作网站代码 第1张

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">网页标题</title>
    <style>
        / 内联样式 /
        body {font-family: Arial, sans-serif;}
    </style>
</head>
<body>
    <h1>欢迎访问我的网站</h1>
    <p>这是第一个段落内容</p>
</body>
</html>

核心标签说明

标签名称 功能描述 必选属性
<!DOCTYPE> 声明文档类型 无
<html> 根元素 lang属性
<head> 元数据区域 无
<meta> 字符编码设置 charset
<style> 内部CSS样式表 无
<body> 页面可见内容区域 无

常用文本标签

标题标签

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

文本格式标签

效果 示例代码
<b> 粗体 <b>重要内容</b>
<i> 斜体 <i>强调内容</i>
<u> 下划线 <u>划线内容</u>
<sup> 上标 x<sup>2</sup>
<sub> 下标 H<sub>2</sub>O
<small> 小号字体 ©2023 <small>公司名称</small>

图片与链接处理

图片标签

<img src="image.jpg" alt="描述文字" width="300" height="200">
属性 功能说明
src 图片路径
alt 替代文本（SEO重要）
width/height 尺寸控制（建议只设其一）
loading 加载策略（lazy延迟加载）

超链接

<a href="https://example.com" target="_blank">访问示例网站</a>
属性 功能说明
href 跳转地址
target 打开方式（_blank新窗口）
download 触发下载而非预览

表格制作规范

<table border="1" cellpadding="5" cellspacing="0">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

表格结构要素

功能定位
<table> 表格容器
<thead> 表头区域
<tbody> 区域
<th> 表头单元格
<td> 数据单元格
<colgroup> 列属性统一设置

列表展示方式

无序列表

<ul type="circle">
    <li>项目一</li>
    <li>项目二</li>
</ul>

有序列表

<ol start="3" type="A">
    <li>第一项</li>
    <li>第二项</li>
</ol>

定义列表

<dl>
    <dt>术语名称</dt>
    <dd>术语解释内容</dd>
</dl>

表单元素组合

<form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="user" required><br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="pass" minlength="6"><br>
    <input type="submit" value="登录">
    <input type="reset" value="重置">
</form>

输入类型扩展

类型 功能说明
text 单行文本输入
password 密码输入（隐藏字符）
email 邮箱格式验证
number 数值输入（可限定范围）
date 日期选择器
file 文件上传

多媒体嵌入方法

音频播放

<audio controls autoplay loop>
    <source src="music.mp3" type="audio/mpeg">
    您的浏览器不支持音频播放
</audio>

视频嵌入

<video width="400" controls poster="poster.jpg">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    浏览器不支持视频播放
</video>

头部信息优化

<head>
    <!-移动端适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-SEO设置 -->
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="description" content="学习HTML基础结构和标签用法">
    <!-图标设置 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-外部资源引用 -->
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>

页面架构规划建议

<body>
    <header>网站头部导航栏</header>
    <nav>导航菜单区域</nav>
    <main>主体内容区域</main>
    <aside>侧边栏补充内容</aside>
    <footer>页脚版权信息</footer>
</body>

常见问题与解答

Q1：忘记关闭HTML标签会怎样？
A：浏览器会尝试自动补全标签，但可能导致布局错乱，建议使用代码编辑器开启标签匹配功能，养成及时闭合的习惯，推荐使用VSCode等开发工具,未闭合标签会显示波浪线提示。

Q2：如何让图片自适应容器大小？
A：方法一：在<img>标签添加max-width:100%样式；方法二：使用<picture>元素结合srcset实现响应式图片，示例代码： 

<img src="image.jpg" alt="示例图" style="max-width:100%; height:auto;
0

相关文章