HTML 全面入门教程：从基础到高级
目录
- 一、基本结构和标签
-
- 1. HTML 文档结构
- 2. 常用标签
- 二、表单和输入元素
-
- 1. 表单标签（`
- 2. 输入元素
- 3.实例
- 三、样式和布局
-
- 1. 内联样式
- 2. 内部样式表
- 3. 外部样式表
- 四、多媒体和嵌入内容
-
- 1. 图像
- 2. 音频和视频
- 3. 嵌入内容
- 五、语义化标签
-
- 语义化标签
HTML（Hypertext Markup Language）是用于创建网页的标记语言。它定义了网页的结构和内容，是前端开发的基础。
一、基本结构和标签
1. HTML 文档结构
DOCTYPE html>
<html>
<head>
<title>网页标题title>
head>
<body>
<h1>HTML 全面入门教程：从基础到高级h1>
body>
html>
代码中，展示了一个简单的 HTML 文档结构，其中包含 声明、html 元素、head 元素、 body 元素和 h1 元素。
2. 常用标签
- 标题标签（
-）：用于定义标题级别：标题一
- 段落标签（
）：用于定义段落文本：这是一个段落。
- 链接标签（
）：用于创建链接：点击这里 - 图像标签（
- 列表标签（
）：用于创建无序列表和有序列表：
<ul>
<li>列表项一li>
<li>列表项二li>
ul>
- 表格标签（
、
、 ）：用于创建表格： <table> <tr> <td>单元格一td> <td>单元格二td> tr> table>二、表单和输入元素
1. 表单标签（
）<form> form>表单标签用于创建用户输入表单，包含了用户交互的各种元素。
2. 输入元素
- 文本输入框（
）：用于接收文本输入： - 密码输入框（
）：用于接收密码输入： - 单选框（
）
<input type="radio" name="gender" value="male"> 男性 <input type="radio" name="gender" value="female"> 女性- 复选框（
）
<input type="checkbox" name="hobby" value="reading"> 阅读 <input type="checkbox" name="hobby" value="sports"> 运动- 下拉列表（
、）
<select name="city"> <option value="beijing">北京option> <option value="shanghai">上海option> select>3.实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML 入门教程：注册实例</title> </head> <body> <h1 align="center">HTML 入门教程：注册实例</h1> <form action="#" method="post"> <table border="1" align="center" width="500"> <tr> <td><label for="username">用户名</label> </td> <td><input type="text" name="username" id="username"> </td> </tr> <tr> <td><label for="password">密码</label> </td> <td><input type="password" name="password" id="password"> </td> </tr> <tr> <td><label for="email">邮箱</label> </td> <td><input type="email" name="email" id="email"> </td> </tr> <tr> <td><label for="name">姓名</label> </td> <td><input type="text" name="name" id="name"> </td> </tr> <tr> <td><label for="tel">手机号</label> </td> <td><input type="text" name="tel" id="tel"> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="gender" value="male"> 男性 <input type="radio" name="gender" value="female"> 女性 </td> </tr> <tr> <td>兴趣爱好</td> <td> <input type="checkbox" name="hobby" value="reading"> 阅读 <input type="checkbox" name="hobby" value="sports"> 运动 <input type="checkbox" name="hobby" value="music"> 音乐 </td> </tr> <tr> <td>城市</td> <td> <select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="tianjin">天津</option> <option value="chongqing">重庆</option> </select> </td> </tr> <tr> <td><label for="birthday">出生日期</label> </td> <td><input type="date" name="birthday" id="birthday"> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="注册"> </td> </tr> </table> </form> </body> </html>
三、样式和布局
1. 内联样式
在元素内部使用
style属性来指定内联样式：<p style="color: red; font-size: 16px;">这是一个红色的段落。p>2. 内部样式表
在
元素内部使用 - 文本输入框（