前端的三把利器
HTML：赤裸的一个人
CSS：华丽的衣服
JS/JavaScript：赋予这个人的行为，也就是动起来
HTML（超文本标记语言）
HTML：HTML是前端页面标签语言，用来写前端的静态页面
使用pycharm专业版可以创建一个HTML文件，在写标签时，可写出完整的标签在使用tab键补全一对标签，或者使用<标签名>后自动补齐一对标签，使用ctrl+/ 注释代码
一个标准的HTML包含了head头部和body身体的部分，像是人体的头部和躯干部分
一个标准的HTML格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
head中一般只保存style样式和title，展示内容全部放在body中
head存放的内容：
<head>
<meta charset="UTF-8">
<title>射手座</title>
<!-- rel 标明link引入的是什么类型，href 引入文件的链接-->
<link rel="shortcut icon" href="http://www.xxxx.cn/logo.jpg">
<!-- stylesheet 样式表 ，引入一个以.css后缀名结尾的文件-->
<link rel="stylesheet" href="xxx.css">
<!-- 引入样式表，一般写在单独的css文件中，但也可写在header中-->
<style></style>
<!-- 引入js文件，src属性表示引入js文件的地址，也可写在body内容的最后面-->
<script src=""></script>
</head>
主动闭合标签：标签以一对的形式出现，如<span></span>
自闭标签：只有开头标签，没有结尾标签 <meta charset="UTF-8">
h标签：一般是h1-h6,依次变小
<h1></h1> 标题标签h1 <h2></h2> 标题标签h2 <h3></h3> 标题标签h3 <h4></h4> 标题标签h4 <h5></h5> 标题标签h5 <h6></h6> 标题标签h6
<div></div>
块级标签，标签可以无内容，会占满整行HTML的标签，特点是没有任何属性（可通过浏览器-检查-右侧style中查看），可通过css装饰后成为任意一种标签,伪白板标签
<div>这是div标签</div>
<span></span>
行内标签也叫内联标签，没有任何属性，必须要有内容，作用的长度就是内容的长度，可通过css装饰器变成任意一种标签，白板标签
<span>这是span标签</span>
标签属性：写在标签内部<>之前，必须在标签名之后，使用空格分隔，如<input >
<input>
文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset
<!--placeholder提示作用，光标放在输入框文案消失-->
<input type="text" placeholder="请输入用户名">
<!--value作用，文案不会消失，需手动删除-->
<input type="text" value="请输入用户名">
<!--输入密码，不展示密码-->
<input type="password" placeholder="请输入密码">
<!--按钮，点击什么作用都没有，需要绑定js事件-->
<input type="button" value="登录">
<!--提交按钮，submit单独用没有任何效果，但和form连用，会触发事件-->
<form method="get">
<!-- onlick绑定事件，传入方法，alert表示弹窗-->
<input type="button" value="登录" onclick="alert(111)">
<input type="submit" value="注册">
<!-- file按钮，上传文件-->
<input type="file">
<!-- 重置reset,必须要和form连用，否则没有意义-->
<input type="text">
<input type="reset">
</form>
radio单选框，checkbox复选框
<!-- 单选框radio，复选框checkbox-->
<form method="get">
<!-- 当radio使用name值相同时，会发生互斥，实现只能选一个，checked="checked"表示默认选中-->
<span>男</span><input type="radio" name="sex" checked="checked">
<span>女</span><input type="radio" name="sex" checked="checked">
<!-- 使用checkbox实现多选，checked="checked"表示默认选中-->
<span>篮球</span><input type="checkbox" checked="checked">
<span>足球</span><input type="checkbox" checked="checked">
</form>
<form></form>
和后台交互：
1、form表单方式
2、异步提交，常用的一种ajax
通过form标签来包裹，通常与input标签连用，实现向后端请求数据，form 有method属性，可实现get和post请求，get请求url上挂参数，post提交body中，input中有name属性，用来拼接参数实现接口传参
<!--form实现向接口传参的一个例子-->
<!-- form可实现get和post请求，action传入接口地址-->
<form method="get" action="/login">
<!-- 每个标签都有name属性，form子层标签的name属性值会组装成k-v参数传给接口，
如http:.../login/**.html?username=tangyuliang&password=123456-->
<input type="text" name="username" value="tangyuliang">
<input type="password" name="password" value="123456">
<input type="submit" value="登录">
</form>
<!-- 文件类file，如果上传文件一定要在form中添加特殊属性enctype="multipart/form-data"，表示一点点的发给服务端-->
<form method="get" action="/index" enctype="multipart/form-data">
<input type="file" name="file">
</form>
textarea 多行文本标签
<!-- 多行文本 textarea 默认值在标签之间--> <textarea name="meno">默认值</textarea>
label 标签
<!-- label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id--> <label for="username">用户名</label> <input id="username" type="text">
a标签
<!-- a标签,target="_blank"属性 实现新窗口打开地址-->
<a href="http://www.baidu.com" target="_blank">跳转</a>
img图片标签
<!-- img 图片标签 src：图片的位置 图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字--> <a href="http://www.imdsx.cn"><img src="1.png" style="height: 200px; 200px;" alt="html" title="大师兄html"></a>
select标签，实现下拉列表
<!-- select option 设置默认选项：option上增加selected="selected" ，size属性在选择框位置显示多少个 实现多选属性：multiple-->
<select name="city" size="2" multiple="multiple">
<option value="1">黑龙江</option>
<option value="2" selected="selected">辽宁</option>
<option value="3">北京</option>
<option value="4">四川</option>
</select>
<!-- select 使用optgroup实现带分组的下拉列表--> <select name="city" id="city"> <optgroup label="黑龙江"> <option value="3">牡丹江</option> <option value="4">哈尔滨</option> </optgroup> <option value="1">北京</option> <option value="2">深圳</option> </select>
ul、ol 列表标签（不常用）
<!--带黑圆点的列表标签：ul-->
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<!--带序号的列表标签：ol-->
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
dl 带层次缩进的列表（常用）
<!--带缩进层次的列表，dt顶格第一层，dd缩进两个字符第二层-->
<dl>
<dt>黑龙江</dt>
<dd>哈尔滨</dd>
<dd>牡丹江</dd>
</dl>
table列表
table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列
<!--表格标签--> <table border="1"> <!-- thead：表头，th表头每一列的名字--> <thead> <th>ID</th> <th >请求方式</th> <th>状态</th> <!-- colspan 列合并，colspan="2"表示2个列单元格合并为1个单元格--> <th colspan="2">操作</th> </thead> <!-- tbody：表体--> <tbody> <!-- 一对tr闭合标签，表示一行数据--> <tr> <!-- td包裹每个数据--> <td>1</td> <!-- rowspan 行合并，colspan="2"表示2个行单元格合并为1个单元格--> <td rowspan="2">post</td> <td>编辑</td> <td>删除</td> <td>成功</td> </tr> <!-- 第二行数据--> <tr> <td>2</td> <td>编辑</td> <td>删除</td> <td>成功</td> </tr> </tbody> </table>
特殊字符
在实际工作中，有些时候希望在页面上展示 <input>这种不被浏览器解析成标签的内容，需要使用转义特殊符号
< -------- < 小于号
>--------- > 大于号
  ----- 空格符
<h1></h1> -------> <h1></h1>
<div>射  手  座</div>