一、什么是HTML
HTML(HyperText Markup Language)：超文本标记语言
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息还可以定义图片，音频，视频等。
- 标记语言：由标签构成的语言
- HTML语言都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
二、HTML基础语法
HTML基本结构
<html><head><title>标题</title></head><body> 填写内容</body>
</html>- HTML标签不区分大小写
- HTML标签属性值单双引号都可以
- HTML语法松散
图片标签：<img src="..." width="-" height="-">
- src：指定图像的url（绝对路径 / 相对路径）
- width：图像的宽度（像素 / 相对于父元素的百分比）
- height：图像的高度（像素 / 相对于父元素的百分比）
<html><head><title>HTML 快速入门</title></head><body><h1>Hello HTML</h1><img src="1.jpg"/> <!-- 等价于<img src="1.jpg></img> --></body>
</html>标题标签：<h1> - <h6>
<h1>111111111111</h1>
<h2>111111111111</h2>
<h3>111111111111</h3>
<h4>111111111111</h4>
<h5>111111111111</h5>
<h6>111111111111</h6>h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。
水平线标签：<hr>
布局标签：<span>
一个在开发网页时大量用到没有语义的布局标签。
超链接标签：<a href="..." target="..."></a>
- href指定资源访问的url
- target：指定在何处打开资源链接
- _self：默认值，在当前页面打开
- _blank：在新的空白页面处打开
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>document</title>
</head>
<body><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a><hr>
</body>
</html>视频标签：<vedio src="..." controls="..." width="..." height="...">
- src：视频的url
- controls：显示播放控件
- width：播放器的宽度
- height：播放器的高度
音频标签：<audio>
- src：音频的url
- controls：显示播放控件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>document</title>
</head>
<body><!-- 正文 --><!-- 视频 --><video src="video/1.mp4" controls width="950px"></video><!-- 音频 --><audio src="audio/1.mp3" controls></audio><hr>
</body>
</html>段落标签：<p>
换行标签：<br>
文本加粗标签：<b>/<strong>
表格标签：
- <table>：定义表格整体，可以包裹多个<tr>
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing：规定单元之间的空间
- <tr>：表格的行，可以包裹多个<td>
- <td>：表格单元格(普通)，可以包裹内容，如果是表头单元格可以替换为<th>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表格</title><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0" width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="img/huawei.jpg" width="100px"> </td><td>华为</td><td>华为技术有限公司</td></tr><tr><td>2</td><td> <img src="img/alibaba.jpg" width="100px"> </td><td>阿里</td><td>阿里巴巴集团控股有限公司</td></tr></table></body>
</html>表单标签：<form>在网页中主要负责数据采集功能，如注册、登录等数据采集。
- 表单项：不同类型的input元素、下拉列表、文本域等
- <input>：定义表单项，通过type属性控制输入形式
- <select>：定义下拉列表
- <textarea>：定义文本域
- 属性：
- action：规定当提交表单时向何处发送表单数据,URL
- method：规定用于发送表单数据的方式，GET、POST等
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.--> <form action="" method="get">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>表单输入类型：
| type取值 | 描述 |
| text | 默认值，定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| date / time / datetime-local | 定义日期/时间/日期时间 |
| number | 定义数字输入框 |
| 定义邮件输入框 | |
| hidden | 定义隐藏域 |
| submit / reset / button | 定义提交按钮/充值按钮/可点击按钮 |
<body><!-- value: 表单项提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image"> <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select> <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交"> <br>
</form></body>
