目录
一：概述
HTML，超文本标记语言（Hyper Text Markup Language）
HTML的全称为超文本标记语言，是一种标记语言（也可以理解为编程语言，说法不一·）。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
学习目的：精通网页布局，也是前端人员的必备技能，为后面学习JavaScript打下坚实基础。
二：基础知识（基本常识）
网页：
最简单的一个网页：（学习的第一个网页）
电脑桌面鼠标右键新建文本文档，输入<img src=”某图片名称”>
保存后，把文本文档的文件后缀名由.txt改为.html ，然后在浏览器中查看，得到
所谓超文本，有2层含义：
- 它可以加入图片，声音，动画，多媒体等内容（超越了文本的限制）。
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
网页的形成：前端人员开发代码--->浏览器显示代码（解析，渲染）--->生成最后的web页面。
web标准：
web标准：结构（structure），表现（presentation），行为（behavior）.
分别对应：HTML，CSS，Javascript 。
VScode 好用的插件
常用的快捷键
三：HTML语法规范//基本标签
- Html由许多的标签构成，标签大多数是成双成对出现的，比如<html></html> (双标签，开始标签和结束标签)，如<br />(单标签)
- 双标签关系可以分为两类：包含关系和并列关系。
文档类型声明标签
GB2312是简体中文，BIG5是繁体中文，但是一般都用UTF-8字符集，不然会出现乱码的情况。
标题标签
演示：
段落标签
在body的需要分段的文字两侧，加上<p>和</p>，即可进行分段，如：
换行标签
换行标签：<br /> 单标签，强制换行
（斜杠可以不打，只是人为习惯，表示单标签）
文本格式化标签
演示如下：
<div>和<span>标签
图像标签（路径）
图片必须要放到和html同一个文件夹中。
图像标签的其他属性：
这样用： <img src="qwe副本.png" alt="我是皮卡丘，图像看不到了" title="发现你了">
<img src="qwe副本.png" width="500" border="15">记住：
1.中间，属性与属性之间不用加逗号。
2.一般宽度和高度只设置其中的一个即可，另外一个系统会自动等比例缩放。
3.用Border来改换图片边框不建议用，因为已经有了更为先进的方法，border处在被弃用的边缘。
目录文件夹--根目录（两个重要概念） //根目录是对外面的隐藏
图片的位置：相对路径和绝对路径
相对路径指的是，图片相对于所要插入HTML文件的位置
绝对路径指的是，这个图片在电脑中实际的位置，直达位置，通常是从盘符开始的。
比如这便是一个绝对路径：
<img src="qwe副本.png">也可以用绝对路径写成：
<img src="C:\Users\lenovo\Desktop\HTML5学习\qwe副本.png">但是一定要注意是绝对路径+反斜杠“\”+图片文件名称
也可以直接<img src="图片在网络中的地址">
超链接标签（重点）
超链接标签！！！
- href =后面跟的是点击之后要跳转到页面的地址（也就是链接地址），如果是内部链接，直接在“”中加URL（可以在复制网页中的那个url，也可以直接写html中的文件名，比如：35.html）即可，如果是外部链接，其地址是有规定的，是有语法要求的，必须有“http://”+URL（比如http://www.baidu.com）。（href为必写属性）
- target= 后面加目标窗口的弹出方式，“——self”就是把当前这个页面覆盖了（不太好），
“——blank”就是新建一个标签页来显示内容。（target为选写属性）
3.最后就是在a标签中写入onclick字符（可以理解为超级链接的关键字吗？也许吧），也就是点击这个字符，才会发生跳转。
演示：
<p>想看帅哥吗！！</p>
<a href="35.html" target="_blank"> 请点击这里哦</a>
而35.html里面的关键代码为：
<h1>帅哥在这里！！</h1>
<img src="tjc.jpg" title="没错，我就是帅哥" height="600">点击关键字符所弹出对应的页面如下：
4.空链接
当我们还没有确定链接的目标时，我们可以用 href=”#”来表示，这是一个空链接，在开发网页的时候经常用到。
5.下载链接
如果href里面地址是一个文件或者(压缩包)的话（一般为.exe或者是.zip）,点击之后会下载这个文件(压缩包)。
<a href="sg.zip" target="_blank"> 请点击这里哦</a>点击之后直接就开始下载了
6.网页元素链接
在网页中的各种网页元素，如文本，图像，表格，音频，视频等都是可以添加超链接的，比如：
<a href="xxzy.mp4"><img src="tjc.jpg" title="没错，我就是帅哥" height="600"></a>先完成图片的编写，然后再给图片上一层超链接标签，由里到外。
这就是链接到了一个视频上，到时候只要点击图片，就会弹出视频。
7.锚点链接
点击一个链接之后，不会再出现一个新的窗口，而是会实现在同一个标签页中的跳转功能。
语法如何？
a.第一步，在需要超链接的地方<a>标签，使href=”#[随便的名字]” 需要注意的是：#是必须加的！
b.第二步，在被传送到的字样，（一般为h标签），在标签中加一个”id=”[刚刚上面输入的随便的名字]” ”。
注释标签
表格标签（重点）
嗯，是的，表格是用来展示数据的！
注意：html表格（table）中有行（tr）的概念，但是没有列的概念，只有单元格（td）的概念。三者是逐层嵌套的关系。
爷爷：<table></table>
爸爸：<tr></tr>
儿子：<td></td>
接下来用VS Code来演示相关内容：
<body>
<table>
<tr><td>姓名</td><td>性别</td><td>国籍</td></tr>
<tr><td>杨过</td><td>男的</td><td>中国</td></tr>
<tr><td>林俊</td><td>男的</td><td>新加</td></tr>
<tr><td>张国</td><td>男的</td><td>英国</td></tr>
</table>
</body>反映在网页中的内容为：
表头单元格：<th></th>,是和<td></td>同一属性的标签，只不过是<th>会突出重要性，其中的文字会加粗居中显示，常用于表格第一行。
表格属性：（一般来说，网页开发人员会用CSS去写，这里只做简单了解即可）
注意：表格属性是要写在<table>标签里的，还是和前面一样：属性=“属性值”。
其中的cellpadding是表格中文字与单元格的距离，cellspacing是单元格与单元格之间的距离，width和height比较简单，不做解释。
对上面的表格修改属性
<table align="center" cellpadding="10" cellspacing="0" border="1">表格变为这样：（达到了目的）
综合实例演示：
<body>
<table align="center" border="1" cellpadding="10" cellspacing="0" >
<tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>
<tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>1</td><td>a</td><td><a href="http://www.baidu.com">百度</a></td></tr>
<tr><td>2</td><td>盗墓笔记</td><td><img src="down.jpg"></td><td>2</td><td>b</td><td><a href="http://www.baidu.com">百度</a></td></tr>
<tr><td>3</td><td>西游记</td><td><img src="up.jpg"></td><td>3</td><td>c</td><td><a href="http://www.baidu.com">百度</a></td></tr>
<tr><td>4</td><td>东游记</td><td><img src="up.jpg"></td><td>4</td><td>d</td><td><a href="http://www.baidu.com">百度</a></td></tr>
<tr><td>5</td><td>甄嬛传</td><td><img src="down.jpg"></td><td>5</td><td>e</td><td><a href="http://www.baidu.com">百度</a></td></tr>
<tr><td>6</td><td>水浒传</td><td><img src="up.jpg"></td><td>6</td><td>f</td><td><a href="http://www.baidu.com">百度</a></td></tr>
<tr><td>7</td><td>三国演义</td><td><img src="up.jpg"></td><td>7</td><td>g</td><td><a href="http://www.baidu.com">百度</a></td></tr>
</table>
</body>所对应页面为：
感觉不太协调，原因是图片的像素本来就是那样，表格必须兼容，但是无所谓。
表格结构标签
实际上是可有可无的一个标签，只不过用上的话，会更直观明了一些，即把表划分为<thead>区域和<tbody>区域，只需要把写好的表头部放在<thead></thead>里，然后把其余部分放在<tbody></tbody>里面。
合并单元格
跨行合并：rowspan
跨列合并：colspan
需要找到目标单元格（上下找上，左右找左）
注意：一定要删除多余的单元格（一般这个单元格为最远离目标单元格的那一个单元格，如果是合并>2个单元格，那就是都删除！）
3*3的表格演示跨行合并和跨列合并(和上图对应)：
跨行合并：
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <td></td> --> <!-- 也可以注释掉，也可以删除掉 -->
<td></td>
<td></td>
</tr>跨列合并：
<tr>
<td></td>
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>列表标签
可以分为三大类：无序列表（重点），有序列表，自定义列表。
一：无序列表
也是嵌套的关系（二级嵌套）
爸爸：<ul><ul>
儿子：<li><li> (每个<li>是独占一行的)
演示：
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul> 
小黑点是自带的，不用管，后面是可以用CSS调节的。
二：有序列表
和无序列表极为相似，也是有着嵌套关系的一组标签，但最终输出到页面时
，是有次序的。
<ol>
<li>***</li>
<li>***</li>
<li>***</li>
</ol>三：自定义列表
如下图所示即为自定义列表应用场景（大哥带一群小弟做事，小弟围绕大哥做解释说明）
自定义列表的语法规范：
需要注意的是：<dt>和<dd>是并列关系而不是包含关系。
<ul>/<ol>/<dl>里面只能放对应的下一级嵌套标签<li>/<li>/<dt>，但是在<li><dt>中却可以自由的使用其他的标签或者是文字。
表单标签
目的：收集用户信息，与用户多一些交互。
一：表单域
1.表单域就是一个包含了很多表单元素的区域，当点提交的时候，就会把这个区域之内的数据信息提交给后台。
2.用<form></form>标签去定义表单域
现阶段还没学习后台，先不用管action,method,name
二：表单元素（表单控件）
- input输入表单元素
不同的type属性：
用VS Code做相关的演示：
<form action="" method="" name="">
用户名是啥呢 <input type="text"><br />
密码仔细点噢 <input type="password"><br />
</form>对应页面如下：
（type）单选按钮和复选框----演示：
<form action="" method="" name="">
性别： 男<input type="radio"> 女<input type="radio">
<br />
你最喜欢的铠甲是：
刑天<input type="checkbox">
金刚<input type="checkbox">
飞影<input type="checkbox">
</form>
表单元素除type属性之外，还有其他属性，在实际操作过程中，表单元素要有相同的属性值“name”才可以真正实现应有的，正常的功能，如radio（单选，而不是像上面一样是复选），checkbox做复选框。
性别： 男<input type="radio" name="gender"> 女<input type="radio" name="gender">这样就会变为真正的单选框了。
输入value值后（比如是text属性的），前端就可以直接看到
<input type="checkbox" checked="checked">
我同意<a href="http://www.baidu.com" target="_blank">注册条款</a>
和<a href="www.qq.com" target="_blank">会员加入标准</a><br /> 
可以看到这是默认选中的一个效果。
还有值为submit的type，当然可以通过修改value值，更改“提交”二字为其他文字，当我们点击提交之后，我们表单域中的表单元素就会将相关的数据提交到后台服务器。
还有值为reset的type，是具有重置功能的。
还有值为button的type，是普通按钮，一般结合着js脚本用，同样可以修改value值改变它的前端的名字。
还有值为file的type，可以上传文件。
<label>标签
双标签，且for（label标签，里面是被点击的内容）属性值和id（光标跳转或是按钮跳转）属性值要相等。（实际就是简化操作，光标快速定位的一个标签）
2.Select下拉表单元素
使用场景：避免占用网页空间，节约地方
3.Textarea文本域元素
使用场景：做一些网页最后的留言板或者是收集反馈信息，建议意见，需要输入大量文字。
需要用到<textarea></textarea>标签
四：HTML综合案例演示
<!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>
<h2>219兄弟们😀！填写个人信息，领取大奖刻晴👇！</h2>
<img src="kq.png" width="130">
<br />
<h2>注意！此页面为猪猪侠官方认证！</h2>
<img src="zz.jpg" title="妈了个巴子，我叫bond" width="200">
<form action="" method="" name="">
性别 <input type="radio" name="gender" id="male"><label for="male">男</label>
<input type="radio" name="gender" id="female"><label for="female">女</label>
<br />
姓名 <input type="text">
<br />
生日
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option selected="selected">--</option>
</select>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option selected="selected">--</option>
</select>
<select>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option selected="selected">--</option>
</select>
<br />
所在地区 <input type="text">
<br />
身份证号 <input type="text" maxlength="14">
<br />
婚姻状况 <input type="radio" name="si">未婚
<input type="radio" name="si">已婚
<br />
<!-- 学历 <input type="text" maxlength="10"> -->
<br />
<!-- 喜欢的类型
<input type="checkbox" name="lx">妩媚的
<input type="checkbox" name="lx">可爱的
<input type="checkbox" name="lx">小鲜肉
<input type="checkbox" name="lx">老腊肉
<input type="checkbox" name="lx">都喜欢
<br /> -->
<!--
自我介绍
<textarea rows="10" cols="20">自我介绍
</textarea> -->
<!-- <br /> -->
<!-- <input type="submit" value="免费注册"> -->
<!-- <br /> -->
<input type="checkbox" checked="checked">
我同意<a href="#">原神领奖条款</a>和<a href="#">勾八用户消费标准</a>
<br /><br />
<input type="submit" value="点击领取大奖！">
<!-- <h4>
<a href="http://www.tencent.com" target="_blank">
我是会员，立即登录
</a> -->
</h4>
<!-- <br /> -->
<h2>我承诺</h2>
<ul>
<li>年满18周岁，且深爱原神</li>
<li>自愿参与本次抽奖活动</li>
<li>活动最终解释权归我所有</li>
</ul>
<br />
<!-- <input type="submit" value="点击领取大奖！"> -->
</form>
</body>
</html>对应页面：
over！
欢迎大佬小佬批评指正！
871
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
