前端的三把利器
HTML：将页面展示出来，比做赤裸的一个人
CSS：修饰html标签，让html更好看，华丽的衣服
JS/JavaScript：也就是能够让页面动起来，赋予这个人的行为
HTML(超文本标记语言)
html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。html代码就是一大长串字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面
html学什么？
能够被浏览器所识别的标签规则，浏览器是html标签的解释器
HTML本质就是一大坨由标签组成的字符串，在pycharm右键新建一个HTML File，可以看到head、charset和body，head中的内容是不被展示的，是规则也是规范，除了一个标签就是title，所有页面展示的都要在body里写
学习每个标签的具体含义，<p></p> 尖括号包含的就是标签
自闭合标签 单身狗
<meta><link><input>
主动闭合标签 有对象
<p></p><div></div>
段落标签：<p></p>
换行标签，自闭合标签：<br/>
标题标签：<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>，直接写标签之间的内容，点击tab键，直接把标签展示出来，如写h1，点击tab键，直接出来<h1></h1>，别的标签不适用
1、块级标签(无论自己有多大，都占用整行)
h1-h6，<div></div>
2、内连标签也叫行内标签(有多少占多少)
span标签是内连标签，白板标签
<div></div>，伪白板标签，什么都没有，一切都需要通过css进行装饰，通过css装饰后可以变成任意标签
<div style="height: 100px; 100px;border: red 1px solid"></div>
右键检查可以看到
<span></span>真正的白板标签，什么css样式都没有，通过css装饰后可以变成任意标签，右键检查什么都看不到
文本框标签包含多个属性，text，password，button，checkbox，radio，file，submit，reset，写在标签内部的<>之间的，标签名之后的
两种方式展示出文本框，并且里面有文字
文本框
<input type="text" value="请输入用户名"> # value属性是input的默认值，比如可以把用户名默认写进去
<input type="text" placeholder="请输入用户名"> # placeholder是提示信息
密码类型
<input type="password"> # 密文显示
多选框
<input type="checkbox">
默认勾选 checked属性
<input type="checkbox" checked="checked"> # checked="checked"，在浏览器里自动就勾选上了
单选框，名字相同互斥，只能选中一个
<input type="radio" name="r1">
<input type="radio" name="r1">
按钮，value为按钮上的值
button只是一个单纯的按钮，如果想要提交数据，就需要和js连用，点击confirm按钮不跳转，必须要绑定事件，添加属性onclick="alert(111)"，这样点击就会弹出111
<input type="button" value="confirm">
如果submit和form连用，直接请求form对应action的目标url
<input type="submit" value="login">
form比作一张白纸，input输入进来的东西就是写在白纸上的字，通过form提交给服务端
action 提交的url路径
method 请求方式
reset重置标签 与form表单连用时，重置到初始化样式
<form action="http://www.imdsx.cn" method="get">
<input type="text" value="ssj">
<input type="text" placeholder="请输入密码">
<input type="submit" value="登录"> # 点击登录按钮直接跳转到大师兄的博客，如果submit改成button，点击登录按钮不跳转
<input type="reset"> # 在文本框里输入内容，点击重置按钮，重置到初始化样式(之前文本框里是什么就是什么)
</form>
<form method="get" action="/login/"> # 假接口，点击登录按钮报404
<!-- name和后端进行交互，与后端接口文档上的参数一致，向后端请求的时候username和password
就是请求的key,value就是value，如果不写value文本框里输入的是value-->
<input type="text" name="username" value="sunshujiang">
<input type="password" name="password" value="123456">
<input type="submit" name="登录">
<input type="reset">
</form>
<label></label>
label 通过for和input的id进行连用，增大input获取焦点的范围，点击文字就映射到input的id，id在整个html页面是唯一的
<label for="i1">用户名</label><input id="i1">
textarea多行文本
textarea的文本内容需要写在两个标签之间，没有value属性
<textarea name="">哈哈哈</textarea>
下拉框
select属性中，size代表展示多少个option，multiple代表多选，点击Ctrl可以把所有的option都选中
<select size="4" multiple="multiple">
<option selected="selected">福利</option> # 默认选中福利
<option>庆安</option>
<option>永安</option>
<option>双鸭山</option>
</select>
分组select
<select>
<optgroup label="黑龙江省">
<option>哈尔滨</option>
<option>齐齐哈尔</option>
<option>牡丹江</option>
<option>佳木斯</option>
</optgroup>
<optgroup label="北京市">
<option>朝阳区</option>
<option>海淀区</option>
<option>东城区</option>
<option>西城区</option>
</optgroup>
</select>
超链接标签(a标签)
href="http://www.imdsx.cn" # 链接的地址
target="_blank" # 新建标签页面打开
style="text-decoration: none" # 去掉下划线
<a href="http://www.imdsx.cn" target="_blank" style="text-decoration: none">大师兄</a>
a标签可以当作锚点(url里有#)使用，例子 回到顶部
<div style="height: 10000px" id="i1"></div>
<a href="#" style="text-decoration: none">回到顶部</a>
特殊符号
  代表空格
> 大于号
< 小于号
<a href="0415.html">大<a></a>师兄</a> # 在浏览器里显示大<a></a>师兄
图片标签
alt属性 当图片加载失败(图片的路径错误)时提示的文案
<img src="logo2.jpg" alt="小孩骑狗">
title 鼠标悬浮上去显示文案，图片路径正确时把鼠标放在图片上显示光龙抱狗
<img src="logo.jpg" alt="小孩骑狗" title="光龙抱狗">
列表标签 点的(不重要)
<ul>
<li>123</li>
<li>234</li>
</ul>
列表标签 数字的(不重要)
<ol>
<li>123</li>
<li>234</li>
</ol>
分组列表(不重要)
<dl>
<dt>黑龙江省</dt>
<dd>哈尔滨市</dd>
<dd>双鸭山市</dd>
</dl>
table 表格标签
外层还有个table标签
thead 表头
tr是行
th是列
tbody 内容
tr是行
td是列
<table border="1"> # border="1"加上边框的作用
<thead>
<tr>
<th>ID</th>
<th>课程</th>
<th>姓名</th>
<th>年龄</th>
<th colspan="2">操作</th> # 操作占两列
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td rowspan="3">计算机</td> # 课程占三行
<td>阿西</td>
<td rowspan="3">18</td>
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>02</td>
<!--<td>计算机</td>-->
<td>阿下</td>
<!--<td>18</td>-->
<td>编辑</td>
<td>删除</td>
</tr>
<tr>
<td>03</td>
<!--<td>计算机</td>-->
<td>春河</td>
<!--<td>18</td>-->
<td>编辑</td>
<td>删除</td>
</tr>
</tbody>
</table>