html

前端的三把利器
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>

特殊符号
&nbsp 代表空格
&gt 大于号
&lt 小于号
<a href="0415.html">大&lt;a&gt;&lt;/a&gt;师兄</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>