前端的三把利器：
HTML：一个人
CSS：这个人的衣服
JS：这个人的行为
HTML（超文本标记语言）
html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。html代码就是一大长串字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面。
后端与前端交互方式
1、后端通过直接返回浏览器能够识别的html代码
2、后端返回数据，前端替换html种的指定数据
HTML标签
1 <!DOCTYPE html> <!--标准的html规则，类似于Python的解释器--> 2 <html lang="en"> <!--html标签(只能一个)，指定语言en--> 3 <head> <!-- html head标签的开始 --> 4 </head> <!-- html head标签的结束 --> 5 <body> <!-- html body标签的开始 --> 6 <a href="http://www.baidu.com">跳转百度</a> <!--类似有很多href这种的叫做标签内部属性--> 7 </body> <!-- html body标签的结束 --> 8 </html> 9 注释的写法 <!-- -->
html head
1、自闭和标签
<meta charset="UTF-8">
只有开头标签，没有结尾标签，只有一对尖括号
2、主动闭合标签
<title>牧马人</title>
既有开头标签，又有结尾标签，有两对尖括号
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <!-- 指定编码 --> 5 <meta charset="UTF-8"> 6 <!-- 每1秒中刷新一次 --> 7 <meta http-equiv="refresh" content="1"> 8 <!-- 2秒后跳转页面 --> 9 <meta http-equiv="refresh" content="2;Url=http://www.baidu.com"> 10 <!-- 关键字检索 --> 11 <meta name="keywords" content="双鱼座"> 12 <!-- 网站描述--> 13 <meta name="description" content="大师兄是名低调的测试工程师"> 14 <!-- ie打开时以最高的兼容模式打开 --> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title--> 17 <title>白羊座</title> 18 <!-- 前方高能预警，***重要*** --> 19 20 <!-- title的图标 --> 21 <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> 22 23 <!-- 引入css --> 24 <link rel="stylesheet" href="s1.css"> 25 26 <!-- css样式--> 27 <style></style> 28 29 <!-- 引入js和编写js --> 30 <script src="s1.js"></script> 31 32 </head> 33 34 <body> 35 36 </body> 37 38 </html>
html body
符号：
 ：字符之间增加空格，有几个空格就要几个 
<：左尖角号或小于号展示到页面
>：右尖角号或大于号展示到页面
例：<h1><h1> </h1>标题标签</h1>
块级标签：H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)
行内标签：SPAN标签(白板)
h、p、br、span、div、input、form、label
1 <!--h123456标签：标题标签，由大到小--> 2 <h1>标题标签</h1> 3 <h2>标题标签</h2> 4 <h3>标题标签</h3> 5 <h4>标题标签</h4> 6 <h5>标题标签</h5> 7 <h6>标题标签</h6> 8 9 <p>年轻,<br>就是拿来折腾的</p> 10 <!--p标签：段落标签--> 11 <!--p标签：块级标签，占满整行--> 12 <!--br标签：换行标签--> 13 14 <span>年轻,就是拿来折腾的</span> 15 <!--span标签：行内标签--> 16 <!--span标签：白板标签，它没有做任何的修饰，可以通过css修饰变成任意标签--> 17 18 <div>年轻,就是拿来折腾的</div> 19 <!--div标签，块级标签--> 20 <!--div标签，伪白板标签--> 21 22 <span>年    轻</span> 23 <!-- ：字符之间增加空格--> 24 25 <span><年  轻></span> 26 <!--< >：将尖角号展示到页面--> 27 28 <span><p></p></span> 29 <!--将p标签展示到页面--> 30 31 <!--input标签：文本框标签--> 32 <input type="text" placeholder="请输入用户名" name="username" value="admin"> 33 <!--type="text"：普通输入框--> 34 <!--placeholder：输入框提示信息，输入框为空时显示--> 35 <!--name：通过输入框传递给后端的值--> 36 <!--value：输入框默认填入的值--> 37 <input type="password" placeholder="请输入密码" name="password"> 38 <!--type="password"：密码输入框--> 39 <!--placeholder：输入框提示信息，输入框为空时显示--> 40 <!--name：通过输入框传递给后端的值--> 41 <span>是否记住登录</span><input type="checkbox" name="xxx" checked="checked"> 42 <!--type="checkbox"：勾选框--> 43 <!--name：通过输入框传递给后端的值--> 44 <!--checked="checked"：默认勾选--> 45 <div>性别</div> 46 <span>男</span><input type="radio" checked="checked" name="sex"> 47 <!--type="radio"：单选按钮--> 48 <!--checked="checked"：默认勾选--> 49 <!--name="sex"：名字相同则互斥--> 50 <span>女</span><input type="radio" name="sex"> 51 <!--type="radio"：单选按钮--> 52 <!--name="sex"：名字相同则互斥--> 53 <input type="file" name="file"> 54 <!--type="file"：上传文件--> 55 <!--name：通过输入框传递给后端的值--> 56 <input type="button" value="提交"> 57 <!--type="button"：button是需要和js连用，通过js进行提交操作--> 58 <!--value="提交"：按钮名称--> 59 60 <form action="http://www.baidu.com" method="get"> 61 <!--点击登录按钮，跳转到百度页面--> 62 <input type="text" name="username" value="admin"> 63 <!--type="text"：普通输入框--> 64 <!--name：通过输入框传递给后端的值--> 65 <!--value：输入框默认填入的值--> 66 <input type="reset"> 67 <!--重置form表单到初始化状态--> 68 <input type="submit" value="登录"> 69 <!--submit和form连用则直接提交表单--> 70 <!--现在比较少用，点击后会刷新整个页面，所有input框都被清空，一旦有一个地方出错，刷新后其他地方都要重新输入--> 71 <input type="button" value="button按钮"> 72 <!--点击button按钮登录，异步提交，前端页面不动，前端通过js向后端偷偷发送请求，拿到请求结果后把请求结果直接绚览到页面上，能保证已经输入的内容不会被清空--> 73 </form> 74 75 <!--label标签：扩展了可点击范围--> 76 <label for="i1">用户名：</label><input id="i1" type="text" value="admin"> 77 <span>密码：</span><input type="password">
textarea、select、option、optgroup、a、ul、li、ol、dl、dt、dd
1 <!--textarea标签：多行文本标签--> 2 <textarea name="tex">sssssss</textarea> 3 4 <!--select option标签：下拉框标签--> 5 <select name="city" size="3" multiple="multiple"> 6 <!--size="3"：下拉框可以展示几个个东西--> 7 <!--multiple="multiple"：多选属性--> 8 <option value="1">北京</option> 9 <option value="2" selected="selected">上海</option> 10 <!--selected="selected"：默认选中上海--> 11 <option value="3">天津</option> 12 <option value="4">重庆</option> 13 <option value="5">深圳</option> 14 </select> 15 16 <!--select optgroup标签--> 17 <select> 18 <!--optgroup标签：对下拉框进行分组--> 19 <optgroup label="黑龙江"> 20 <option>哈尔滨</option> 21 <option>牡丹江</option> 22 </optgroup> 23 <optgroup label="河北"> 24 <option>石家庄</option> 25 <option>唐山</option> 26 </optgroup> 27 </select> 28 29 <!--a标签：超文本链接标签--> 30 <a href="http://www.imdsx.cn">大师兄博客</a> 31 <!--href=""：跳转地址--> 32 33 <!--a标签的锚点--> 34 <a href="#i1">跳转</a> 35 <!--井号代指id--> 36 <div id="i1">ssssssssssssss</div> 37 <!--id：id选择器--> 38 39 <!--ul+li：·形式的列表--> 40 <ul> 41 <li>大连</li> 42 <li>秦皇岛</li> 43 </ul> 44 45 <!--ol+li：数字形式的列表--> 46 <ol> 47 <li>大连</li> 48 <li>秦皇岛</li> 49 </ol> 50 51 <!--dl+dt+dd：分层列表，dd内层，dt外层--> 52 <dl> 53 <dt>黑龙江</dt> 54 <dd>牡丹江</dd> 55 <dd>哈尔滨</dd> 56 </dl>
table、thead、tr、th、tbody、tr、td
1 <!--table标签：表格标签--> 2 <table border="1"> 3 <!--border="1"：边框--> 4 <!--thead：表头--> 5 <thead> 6 <!--tr:行--> 7 <tr> 8 <!--th:表头当中的列--> 9 <th>id</th> 10 <th>请求方式</th> 11 <th>参数</th> 12 <th>接口</th> 13 <th colspan="2">操作</th> 14 <!--colspan="2"：操作栏占2列--> 15 </tr> 16 </thead> 17 <!--tbody：表体--> 18 <tbody> 19 <!--tr：表体当中的第一行--> 20 <tr> 21 <!--td：表体第一行中的列--> 22 <td>1</td> 23 <td rowspan="3">post</td> 24 <!--rowspan="3"：post占3行--> 25 <td>{'name':'dsx'}</td> 26 <td rowspan="3">/login</td> 27 <!--rowspan="3"：/login占3行--> 28 <td><a href="http://www.baidu.com">修改</a></td> 29 <!--加了a标签和href属性，点击修改则跳转页面--> 30 <td>删除</td> 31 </tr> 32 <!--tr：表体当中的第二行--> 33 <tr> 34 <!--td：表体第二行中的列--> 35 <td>2</td> 36 <td>{'name':'dsx'}</td> 37 <td>修改</td> 38 <td>删除</td> 39 </tr> 40 <!--tr：表体当中的第三行--> 41 <tr> 42 <!--td：表体第三行中的列--> 43 <td>3</td> 44 <td>{'name':'dsx'}</td> 45 <td>修改</td> 46 <td>删除</td> 47 </tr> 48 </tbody> 49 </table>
img
1 <!--img标签：图片标签--> 2 <img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="失败时展示的文字" title="鼠标悬浮时显示的文字"> 3 <!--alt：失败时展示的文字--> 4 <!--title：鼠标悬浮时显示的文字-->