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

html开发教程

admin
行业动态
2025-05-04
1

HTML开发需掌握基础标签、属性及文档结构，结合CSS样式与JavaScript交互，多实践并参考官方文档

HTML开发教程

HTML基础

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言，它通过一系列标签来定义网页的结构和内容,浏览器负责解析这些标签并呈现相应的页面效果。

（一）HTML文档基本结构

作用
`<!DOCTYPE html>`	声明文档类型，告知浏览器使用HTML5标准解析
`<html>`	根元素，包含整个网页内容
`<head>`	头部区域，包含元数据（如编码、标题、链接样式表等）
`<meta charset="UTF-8">`	设置字符编码，确保中文显示正常
`<body>`	主体区域，放置网页可见内容（文本、图片、链接等）

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一段正文内容。</p>
</body>
</html>

常用HTML标签

（一）文本标签

作用	示例效果
`<h1> <h6>`	标题标签，`<h1>`字体最大，`<h6>`最小	`<h1>一级标题</h1>`
`<p>`	段落标签	`<p>这是一个段落。</p>`
`<strong>`	加粗文本	`<strong>重要内容</strong>`
`<em>`	斜体文本	`<em>强调内容</em>`
`<br/>`	换行	文本换行显示

（二）链接标签

<a>标签用于创建超链接，属性href指定链接地址。
示例代码：

<a href="https://www.example.com">访问示例网站</a>
<a href="mailto:test@example.com">发送邮件</a>
<a href="tel:123456789">拨打电话</a>

（三）图片标签

<img>标签插入图片，必须设置src属性（图片路径），alt属性用于替代文本。
示例代码：

<img src="image.jpg" alt="描述图片内容" width="300" height="200"/>

（四）列表标签

作用
`<ul>`	无序列表，子项用`<li>`
`<ol>`	有序列表（数字/字母排序）
`<li>`	列表项

示例代码：

<ul>
    <li>苹果</li>
    <li>香蕉</li>
</ul>
<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>

表单元素

<form>标签用于创建表单,常见输入类型如下：

类型	作用
文本	`<input type="text">`	输入单行文本
密码	`<input type="password">`	隐藏输入内容
提交	`<input type="submit">`	提交表单数据
单选框	`<input type="radio">`	多选项中单选
复选框	`<input type="checkbox">`	多选项可多选

示例代码：

<form action="/submit" method="post">
    用户名: <input type="text" name="username"/><br/>
    密码: <input type="password" name="password"/><br/>
    <input type="submit" value="登录"/>
</form>

表格标签

<table>用于创建表格,常用子标签包括：

<thead>：表头区域
<tbody>：表体区域
<tr>：表格行
<td>：数据单元格
<th>：表头单元格（文字加粗）

示例代码：

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

HTML5语义化标签

HTML5新增了多个语义化标签,用于更清晰地描述内容结构：

<header>：页眉区域
<nav>：导航栏
<article>：独立文章内容
<section>：章节区域
<footer>：页脚区域
<aside>：侧边栏内容

示例代码：

<header>
    <h1>网站名称</h1>
    <nav>
        <a href="#home">首页</a> | 
        <a href="#about">lt;/a>
    </nav>
</header>
<section>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
    </article>
</section>
<footer>© 2023 版权所有</footer>