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

html网页制作教学

HTML网页制作需掌握标签语法、元素嵌套与属性设置，通过文本编辑器编写代码，结合浏览器调试，学习布局、链接及多媒体嵌入

HTML基础结构

HTML文档由<!DOCTYPE html>声明、<html>根标签、<head>头部和<body>主体组成，头部包含元数据（如字符集、页面标题）,主体包含可见内容。

基础模板示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">网页标题</title>
</head>
<body>
    <h1>欢迎学习HTML</h1>
    <p>这是一段正文内容。</p>
</body>
</html>

常用HTML标签与属性

标签类型 标签名 作用 示例
文本标签 <h1>~<h6> 标题（<h1>最大，<h6>最小） <h2>二级标题</h2>
<p> 段落 <p>这是一个段落。</p>
<br> 换行 这段文字后换行<br>新行开始
格式标签 <b><strong> 加粗（<strong>语义更强） <strong>重要内容</strong>
<i><em> 斜体（<em>强调语义） <em>强调文本</em>
链接与图片 <a> 超链接 <a href="https://example.com">链接</a>
<img> 图片 <img src="image.jpg" alt="描述">

表格制作（<table>）

表格由<table>定义，包含<tr>（行）、<th>（表头单元格）、<td>（数据单元格）。

示例代码：

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

表单元素（<form>）

表单用于用户输入，需设置action（提交地址）和method（GET/POST）。

元素类型 用途 示例
文本输入 <input type="text"> 单行文本 <input type="text" name="username">
密码输入 <input type="password"> 隐藏输入内容 <input type="password" name="pwd">
单选框 <input type="radio"> 多选一 <input type="radio" name="gender" value="male">男
复选框 <input type="checkbox"> 多选 <input type="checkbox" name="hobby" value="reading">阅读
提交按钮 <input type="submit"> 提交表单 <input type="submit" value="提交">

CSS基础样式

通过<style>标签或外部样式表（.css文件）定义样式。

示例：

<head>
    <style>
        body { font-family: Arial, sans-serif; }
        h1 { color: blue; }
        p { line-height: 1.8; }
    </style>
</head>

常见问题与解答

问题1：如何让图片自适应容器大小？
解答：在<img>标签中添加max-width:100%样式， 

<img src="image.jpg" style="max-width:100%;" alt="自适应图片">

问题2：表单中的单选按钮如何默认选中？
解答：在<input>标签中添加checked属性， 

<input type="radio" name="gender" value="female
0

相关文章