目录
1 HTML是什么？
- HTML是HyperText Markup Language的简写，表示超文本标记语言
- HTML并不是一个种编程语言，而是一种标签语言
- HTML的文档也叫web页面
- HTML使用标记标签来描述网页
2 HTML的结构
2.1 HTML的层次结构
示例：
<html >
<head>
<title>第一个页面</title>
</head>
<body>
hello world
</body>
</html>运行结果：
- html标签是整个html文档的最顶层标签/根标签
- head标签则是写这个html文档的属性的标签
- title标签则是显示这个文档的标题标签
- body标签中的内容则是需要显示在页面上的内容
（1）父子关系
在上述代码中html标签就是所有标签的父标签，head标签是title标签的父标签
（2）兄弟关系
head标签和body标签就是兄弟关系。
----->快速生成代码框架 Shift + ! + Enter
细节解释:
- <!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件。
- <html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译)。
- <meta charset="UTF-8"> 描述页面的字符编码方式. 没有这一行可能会导致中文乱码。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域，content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些)。
3 HTML常见标签
3.1 注释标签
Ctrl+/可以快速生成注释和取消注释
3.2 标题标签 h1-h6
共有6个，数字越大，则字体越小。
示例：
<!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>
</head>
<body>
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
</body>
</html>运行结果：
3.3 段落标签 <p> </p>
- 输入换行只会生成一个空格，不会真正换行。
- 输入多个空格，网页上只显示一个空格。
（1）如果一段很长的文字没有分段，网页上会全部连在一起，导致可读性差。
使用 `<p></p>` 标签可以将内容分成段落。每个段落之间会自动产生较大的空隙，用于区分段落。
3.4 换行标签 <br>
- br是break的缩写，表示换行。
- <br>是一个单标签。
使用<br>换行之后，不会像段落标签那样产生很大的空隙。
3.5 格式化标签
- 加粗 strong 标签 和 b 标签
- 倾斜 em 标签 和 i 标签
- 删除线 del 标签 和 s 标签
- 下划线 ins 标签 和 u 标签
示例：
<body>
<Strong>加粗</Strong>
<b>加粗</b> <br>
<em>倾斜</em>
<i>倾斜</i> <br>
<del>删除线</del>
<s>删除线</s> <br>
<ins>下划线</ins>
<u>下划线</u>
</body>运行结果：
3.6 图片标签
<img> 标签必须带有 src 属性，用于指定图片的路径，
<img src="/static/images/p1_logo.png" alt="描述文字">
<body>
<!-- 相对路径 -->
<img src="/static//images/p1_logo.png" width="200px" height="200px" > <p></p>
<!-- 绝对路径 -->
<img src="C:\Users\Administrator\Desktop\html\static\images\p1_logo.png" width="200px" height="200px"><p></p>
<!-- 网络上的图片 -->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" title="这是百度的图片">
</body>3.7 音频标签
<audio controls>：定义音频播放器，并显示播放、暂停等控制按钮。src="/audios/bgm.mp3"：指定音频文件的路径（bgm.mp3）。无法播放：回退文本，如果浏览器无法播放音频，会显示这段文字。<source>：提供了多个音频资源。如果第一个音频（sound1.mp3）不可用，浏览器会尝试播放第二个音频（sound2.mp3）。type="audio/mpeg"：指定音频文件格式为MPEG。
<audio controls src="/audios/bgm.mp3">无法播放</audio>
<audio controls>
<source src="/audios/sound1.mp3" type="audio/mpeg">
<source src="/audios/sound2.mp3" type="audio/mpeg">
</audio>3.8 视频标签
<video>标签：嵌入视频。controls：显示播放控制按钮。<source>：定义视频资源（video1.mp4和video2.mp4）。- 回退文本：如果浏览器不支持视频播放，显示提示信息。
<video controls width="800">
<source src="/videos/video1.mp4"
type="video/mp4">
<source src="/videos/video2.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>3.9 超链接标签 a
（1） href是必须要有的，表示点击后跳转到那个页面。
<a href="https://www.baidu.com">点击进入百度</a>（2） target表示用新的标签页打开。如果上述的默认，则是在当前标签页打开。
<a href="https://www.baidu.com" target="_blank">点击进入百度</a>3.9.1 外部链接
<a href="https://www.baidu.com" target="_blank">点击进入百度</a>3.9.2 内部链接
<a href="/Test.html">内部链接跳转</a>3.9.3 空链接
使用#在href中占位
<a href="#">空链接</a>3.9.4 下载链接
在 <a> 标签的 href 中指定文件路径，并使用 download 属性，用户点击时浏览器会自动下载文件，如 ZIP 文件（download可用可不用）。
<a href="/test01.drawio" download>通过链接下载文件</a>3.9.5 网页元素链接
可以给图片等任何元素添加链接，当我们点击这个图片时，就会跳转到我们href中所写的地址上去。
<a href="https://www.baidu.com" target="_blank">
<img src="/static/images/p1_logo.png" title="点击跳转到百度">
</a>3.9.6 描点链接
我们可以给标签给具体的id值，然后在href中填入对应的id的值，就可以进行描点链接跳转。
<body>
<a href="#1">跳转到1</a>
<a href="#2">跳转到2</a>
<p id="1">
abc <br>
def <br>
</p>
<p id="2">
hhh <br>
mooo <br>
</p>
</body>3.10 表格标签
3.10.1 标准表格
- table 标签: 表示整个表格
- tr: 表示表格的一行
- td: 表示一个单元格
- th: 表示表头单元格. 会居中加粗
- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
- tbody: 表格得到主体区域.
table 包含 tr , tr 包含 td。
<body>
<table border="1" width ="400px" hight="200px">
<thead> <!-- 表头标签-->
<th>姓名</th> <!-- 表头的单元格 会居中加粗-->
<th>年龄</th>
<th>性别</th>
</thead>
<tbody> <!-- 表格的主体区域-->
<tr> <!-- 表示表格的每一行-->
<td>张三</td> <!-- 表示表格每个单元格-->
<td>18</td>
<td>男</td>
</tr>
<tr> <!-- 表示表格的每一行-->
<td>李四</td> <!-- 表示表格每个单元格-->
<td>19</td>
<td>男</td>
</tr>
<tr> <!-- 表示表格的每一行-->
<td>王五</td> <!-- 表示表格每个单元格-->
<td>20</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>3.10.2 合并合并单元格
（1） 跨行合并
<table border="1" width ="400px" hight="200px">
<thead> <!-- 表头标签-->
<th>姓名</th> <!-- 表头的单元格 会居中加粗-->
<th>年龄</th>
<th>性别</th>
</thead>
<tbody> <!-- 表格的主体区域-->
<tr> <!-- 表示表格的每一行-->
<td>张三</td> <!-- 表示表格每个单元格-->
<td>18</td>
<td>男</td>
</tr>
<tr> <!-- 表示表格的每一行-->
<td>李四</td> <!-- 表示表格每个单元格-->
<td rowspan="2">19</td>
<td>男</td>
</tr>
<tr> <!-- 表示表格的每一行-->
<td>王五</td> <!-- 表示表格每个单元格-->
<td>男</td>
</tr>
</tbody>
</table>（2）跨例合并
<table border="1" width ="400px" hight="200px">
<thead> <!-- 表头标签-->
<th>姓名</th> <!-- 表头的单元格 会居中加粗-->
<th>年龄</th>
<th>性别</th>
</thead>
<tbody> <!-- 表格的主体区域-->
<tr> <!-- 表示表格的每一行-->
<td colspan="2">张三</td> <!-- 表示表格每个单元格--> <!-- 跨列合并-->
<td>男</td>
</tr>
<tr> <!-- 表示表格的每一行-->
<td>李四</td> <!-- 表示表格每个单元格-->
<td rowspan="2">19</td> <!-- 跨行合并-->
<td>男</td>
</tr>
<tr> <!-- 表示表格的每一行-->
<td>王五</td> <!-- 表示表格每个单元格-->
<td>男</td>
</tr>
</tbody>
</table>3.11 列表标签
- 无序列表 ul li
- 有序列表 ol li
- 自定义列表 dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题
3.11.1 无序列表
示例：
<ul>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
</ul>运行结果：
3.11.2 有序列表
示例：
<ol>
<li>星期一</li>
<li>星期二</li>
<li>星期三</li>
</ol>运行结果：
3.11.3 自定义列表
示例：
<dl>
<dt>第一周</dt>
<dd>星期一</dd>
<dd>星期二</dd>
<dd>星期三</dd>
</dl>运行结果：
3.12 表单标签
- 表单是让用户输入信息的重要途径.
- 分成两个部分:
- 表单域: 包含表单元素的区域. form 标签。
- 表单控件: 输入框, 提交按钮等. input 标签。
3.12.1 form标签
描述了把数据以怎样的方式提交到那个地方。
<form action="https://www.baidu.com" method="get">
<!-- form 中的数据-->
</form>3.12.2 input标签
示例：
<form action="https://www.baidu.com" method="get">
<!-- form 中的数据-->
姓名：<input type="text"><br> <!-- 文本框-->
密码：<input type="password"><br> <!-- 密码框-->
性别：<input type="radio" name="sex" value="男">男 <!-- 单选框-->
<input type="radio" name="sex" value="女">女
<input type="radio" name="sex" value="第三性别">第三性别<br>
爱好：<input type="checkbox">听音乐 <!-- 复选框-->
<input type="checkbox">看电视
<input type="checkbox">打篮球 <br>
头像：<input type="file"> <br> <!-- 选择文件标签-->
日期：<input type="date"> <!-- 日期-->
颜色：<input type="color"> <!--颜色-->
提交：<input type="submit"> <!-- 提交按钮-->
</form>运行结果：
3.12.2 select标签
示例：
大学：<select> <!-- 下拉菜单标签-->
<option>北京大学</option> <!-- 第一个就是默认选项-->
<option>清华大学</option>
<option>陇南大学</option>
<option>兰州大学</option>
</select> <br>运行结果：
3.12.3 textarea 标签
示例：
备注：<textarea cols="50" rows="5"></textarea><br> 运行结果：
3.13 无语义标签 div span
就是两个盒子. 用于网页布局
- div 是独占一行的, 是一个大盒子
- span 不独占一行, 是一个小盒子
示例：
<div>
<span>天暗星</span>
<span>天暗星</span>
<span>天暗星</span>
</div>
<div>
<span>天罡星</span>
<span>天罡星</span>
<span>天罡星</span>
</div>
<div>
<span>天罪星</span>
<span>天罪星</span>
<span>天罪星</span>
</div>运行结果：
扫一扫
843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
