本文详细介绍了HTML的基础知识，包括HTML的定义、基本结构、标题标签、段落标签、换行和水平线标签、字体样式、注释和特殊符号、图像标签、链接标签、列表、表格、媒体元素（video和audio）以及表单元素的使用。内容涵盖HTML的各个核心概念，是初学者学习HTML的理想资源。
## 1.定义
### 1.1什么是HTML？
```
HTML：Hyper Text Markup Language (超文本标记语言)
超文本：可以放视频、图片等。
```
### 1.2HTML的基本结构
```
基本结构：
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
通常：
<head></head> 称为网页头部
<body></body> 称为主体部分
<body></body> 等成对的标签，分别叫开始标签和结束标签，单独呈现的标签（空元素），如<hr/>;意为用/来关闭空元素。
```
## 2.基本标签
### 2.1标题标签
```
<h1>...</h1> 一级标题
<h2>...</h2> 二级标题
<h3>...</h3> 三级标题
<h4>...</h4> 四级标题
<h5>...</h5> 五级标题
<h6>...</h6> 六级标题
注：不同等级的标题标签对比，级别越高标题的字体越大。
```
### 2.2段落标签
```
<p>...</p>
```
### 2.3换行标签
```
<br/>
```
### 2.4水平线标签
```
<hr/>
```
### 2.5字体样式标签
```
加粗：<strong></strong>
斜体：<em>...</em>
```
### 2.6注释和特殊符号
| 特殊符号 | 字符实体 |
| ------------ | ------------------------ |
| 空格特殊符号 |   ;(牛逼三炮不让 用) |
| 大于号(>) | > ; |
| 小于号(<) | < ; |
| 引号(") | " ; |
| 版权符号© | © ; |
## 3.图像标签
### 3.1常见的图像格式
```
JPG GIF PNG BMP
<img src="img.jpg"/>
<img src="img.gif"/>
<img src="img.png"/>
<img src="img.bmp"/>
```
### 3.2语法
```
<img src="图像地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度"/>
```
### 3.3示例
```
<img src="img.jpg" alt="图片加载中..." title="图片" width="200px" height="200px"/>
```
## 4.链接标签
### 4.1页面间链接
#### 4.1.1语法
```
<a href="跳转链接路径" target="目标窗口位置">链接文本或图像</a>
注意：target指的是链接在哪个路径打开，默认值有_self(新网页替换本网页)和_blank（在增加一个新的标签网页，原有的网页被保存下来）
例如：
<a href="new.html" target="_self">跳转到new.html</a> （新网页替换本网页）
<a href="new.html" target="_blank">跳转到new.html</a> （在增加一个新的标签网页，原有的网页被保存下来）
```
#### 4.1.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="Demo02.html" target="_blank">跳转到Demo2页面</a>
</body>
</html>
```
### 4.2锚链接
从A页面的甲位置跳转到本页中的乙位置
从A页面的甲位置跳转到B页面中的乙位置
#### 4.2.1语法
```
创建跳转标记：
<a name="跳转名称">乙位置</a>
创建跳转链接：
<a href="#跳转名称">甲位置</a>
```
#### 4.2.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="top"></a>
9月16日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例84例。其中境外输入病例22例（云南16例，河南2例，广东2例，上海1例，浙江1例），含2例由无症状感染者转为确诊病例（浙江1例，河南1例）；本土病例62例（福建61例，其中厦门市31例、莆田市28例、泉州市1例、漳州市1例；云南1例，在德宏傣族景颇族自治州），含1例由无症状感染者转为确诊病例（在福建）。无新增死亡病例。新增疑似病例2例，均为境外输入病例（均在上海）。
<a href="#top">跳转到顶部</a>
</body>
</html>
```案列：在另一个标签里面的锚链接
本页标签：
<a href="#mark>跳转到顶部</a>
img src=“图像地址” alt=“ ” width： height：
<a name="mark>
``另外一个标签：a name=“标题标签”`跳转到本地页面
### 4.3功能性链接
#### 4.3.1语法
```
<a href="mailto:bdqnWebmaster@bdqn.cn">链接文本或图像</a>
```
## 5.列表
### 5.1无序列表
```
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
快捷键：li*个数+Tab键
```
### 5.2有序列表
```
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ol>
注：ol标签里只允许包含li标签
```
### 5.3定义列表
```
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>
<dt>:类目名
<dd>:类目列表
```
## 6.表格
### 6.1基本表格
```
<table border="表格外框的宽度">
<tr>
<th>1行1列的标题</th>
<th>1行2列的标题</th>
<th>1行3列的标题</th>
</tr>
<tr>
<td>1行1列的单元格</td>
<td>1行2列的单元格</td>
<td>1行3列的单元格</td>
</tr>
<tr>
<td>2行1列的单元格</td>
<td>2行2列的单元格</td>
<td>2行3列的单元格</td>
</tr>
</table>
<th>:单元格的标题
<td>:数据本身
```
### 6.2跨列（只能加在td里面）
```
td中属性colspan
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="2">
<tr>
<th>姓名</th>
<th>学号</th>
<th>分数</th>
</tr>
<tr>
<td colspan="2">张三</td>
<td>1001</td>
<td>80</td>
</tr>
<tr>
<td>李四</td>
<td>1002</td>
<td>56</td>
</tr>
<tr>
<td>王五</td>
<td>1003</td>
<td>75</td>
</tr>
</table>
</body>
</html>
解析：
<td colspan="列数">数据内容</td>
（跨列指的是列数<左右>单元格的合并 去掉一个td）
```
### 6.3跨行（只能加在td里面）
```
td中属性rowspan
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="2">
<tr>
<th>姓名</th>
<th>学号</th>
<th>分数</th>
</tr>
<tr>
<td>张三</td>
<td>1001</td>
<td>80</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>1002</td>
<td>56</td>
</tr>
<tr>
<td>王五</td>
<td>1003</td>
<td>75</td>
</tr>
</table>
</body>
</html>
解析：
<td rowspan="行数">数据内容</td>
（跨行指的是行数单元格<上下单元格>的合并 去掉一个td）
```
## 7.媒体元素
### 7.1video播放视频
#### 7.1.1语法
```
<video src="指定要播放的视频文件的路径" controls="controls">
注：controls是提供播放、暂停和音量的控件，""内不写的话默认是controls
```
#### 7.1.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video src="video/video.webm" controls="controls"></video>
</body>
</html>
```
### 7.2video播放多种格式视频
#### 7.2.1示例
```
防止各类浏览器无法播放视频
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video controls="controls">
<source src="video/video.webm"></source>
<source src="video/video.mp4"></source>
</video>
</body>
</html>
```
### 7.3audio播放音乐
#### 7.3.1语法
```
<audio src="指定要播放的音乐文件的路径" controls="controls">
```
#### 7.3.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio src="music/music.mp3" controls="controls">
</body>
</html>
```
### 7.4audio播放多种格式音乐
#### 7.4.1语法
```
<audio controls="controls" >
<source src="指定要播放的音乐文件的路径" type="audio/音乐文件类型"></source>
<source src="指定要播放的音乐文件的路径" type="audio/音乐文件类型"></source>
</audio>
```
#### 7.4.2示例
```
防止各类浏览器无法播放视频
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio controls="controls" >
<source src="music/music.mp3" type="audio/mp3"></source>
<source src="music/music.ogg" type="audio/ogg"></source>
</audio>
</body>
</html>
```
## 8.常用表单
### 表单语法：
```
<form method="get" action="Demo02.html">
...
</form>
method：规定如何发送表单数据，常用值是get/post
action：表示向何处发送表单数据
```
### 表单格式：
```
<input type="" name="" value=""/>
type：input元素类型
name：input元素名称（前端传入到后端，前端触发之后后端获取value值，前端里面基本看不到）
value：input元素的值
```
| 属性 | 说明 |
| --------- | ------------------------------------------------------------ |
| type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、image和button，默认为text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为radio或checkbox时，指定按钮是否被选中 |
### 8.1文本框——text
#### 8.1.1语法
```
<input type="text" name="" value="">
```
#### 8.1.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="get" action="Demo02.html">
<input type="text" name="keyword" value="请在此输入账号">
</form>
</body>
</html>
```
### 8.2密码框——password
#### 8.2.1语法
```
<input type="password" name="" />
```
#### 8.2.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<input type="text" name="a" value="请在此输入账号"><br/>
<input type="password" name="" />
</form>
</body>
</html>
```
### 8.3单选按钮——radio
#### 8.3.1语法
```
<input type="radio" name="" value="" /><br/>
```
#### 8.3.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<input type="radio" name="sex" value="1" />男<br/>
<input type="radio" name="sex" value="2" />女<br/>
</form>
</body>
</html>
```name后面的值是一样的，表示一个值使用的，运行的时候就是一个个选中
### 8.4复选框(多选按钮)——checkbox
#### 8.4.1语法
```
<input type="checkbox" name="" value="" /><br/>
```
#### 8.4.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<input type="checkbox" name="likes" value="1" />足球<br/>
<input type="checkbox" name="likes" value="2" />篮球<br/>
<input type="checkbox" name="likes" value="3" />排球<br/>
</form>
</body>
</html>
```
### 8.5列表框——select、option
#### 8.5.1语法
```
<select name="">
<option value=""></option>
</select>
```
#### 8.5.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<select name="city">
<option value="1">南京</option>
<option value="2">北京</option>
<option value="3">上海</option>
<option value="4">深圳</option>
</select>
</form>
</body>
</html>
```
option后面的value=“ 12”>南京 12后面加“ selected
是默认选中项也是预选值 还有disbale禁用”
### 8.6按钮——reset（重置）、submit（提交）、button
#### 8.6.1语法
```
<input type="reset" value="重置" />
<input type="submit" value="提交" /> 后端可以获取
<input type="button" value="提交2" οnclick="事件"/> 后端无法获取
onclick：给某个元素添加事件
```
#### 8.6.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<input type="text" name="keyword" value="请在此输入账号"><br/>
<input type="password" name="" /><br/>
<input type="radio" name="sex" value="1" />男<br/>
<input type="radio" name="sex" value="2" />女<br/>
<input type="checkbox" name="likes" value="1" />足球<br/>
<input type="checkbox" name="likes" value="2" />篮球<br/>
<input type="checkbox" name="likes" value="3" />排球<br/>
<select name="city">
<option value="1">南京</option>
<option value="2">北京</option>
<option value="3">上海</option>
<option value="4">深圳</option>
</select><br/>
<input type="reset" value="重置" />
<input type="submit" value="提交" />
<input type="button" value="提交2" οnclick=""/>
</form>
</body>
```
### 8.7默认元素——checked / selected
#### 8.7.1示例
```
一般情况下：
<select></select>类型中使用selected
其它类型中使用checked
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<input type="text" name="keyword" value="请在此输入账号"><br/>
<input type="password" name="" /><br/>
<input type="radio" name="sex" value="1" />男<br/>
<input type="radio" name="sex" value="2" checked=""/>女<br/>
<select name="city">
<option value="1">南京</option>
<option value="2" selected="" >北京</option>
<option value="3">上海</option>
<option value="4">深圳</option>
</select><br/>
<input type="reset" value="重置" />
</form>
</body>
</html>
```
### 8.8多行文本框—— textarea
#### 8.1.1语法
```
<textarea rows="行像素值" cols="列像素值"></textarea>
```
#### 8.1.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<textarea rows="10" cols="30"></textarea><br/>
</body>
</html>
```
### 8.9文件域——file
8.9.1语法
```
<input type="file" name="" accept="限制文件类型"/>
accept：不写默认所有文件都可以
```
8.9.2示例
```
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="file" name="photo" accept="image/jpeg"/>
</body>
</html>
```
## 9.表单高级应用
### 9.1隐藏域——hidden
#### 9.1.1语法
```
<input type="hidden" name="" value="">
```
#### 9.1.2示例
```
<input type="hidden" name="id" value="3">
```
### 9.2只读——readonly
#### 9.2.1语法
```
<input type="text" name="" value="" readonly="readonly">
```
#### 9.2.2示例
```
<input type="text" name="keyword" value="123" readonly="readonly">
```
### 9.3禁用——disabled
#### 9.3.1语法
```
<input type="text" name="" value="" disabled=""><br/>
```
#### 9.3.2示例
```
<input type="text" name="keyword" value="123" disabled=""><br/>
```
## 10.表单初级验证
### 10.1 placeholder
#### 10.1.1语法
```
<input type="text" name="" placeholder="">
```
#### 10.1.2示例
```
<input type="text" name="keyword" placeholder="请输入账号">
```
### 10.2 required
#### 10.2.1语法
```
<input type="text" name="" required="">
```
#### 10.2.2示例
```
<input type="text" name="keyword" required=""><br/>
```
### 10.3 pattern
#### 10.3.1语法
```
<input type="text" name="" pattern="[输入范围]{字符长度}">
```
#### 10.3.2示例
```
<input type="text" name="keyword" required="" pattern="[A-z]{8}">
```
扫一扫
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
