前端的三把利器
HTML：赤裸的一个人
CSS：华丽的衣服
JS/JavaScript：赋予这个人的行为，也就是动起来
HTML（超文本标记语言）
html代码实际上就是一套能够被浏览器所识别的规则代码，由一个个标签组成。html代码就是一大长串字符串，而这种字符串的格式正好能够被浏览器所识别，也就有了我们的WEB页面。
后端与前端交互方式
1、后端通过直接返回浏览器能够识别的html代码
2、后端返回数据，前端替换html种的指定数据
HTML标签
<!DOCTYPE html> <!--标准的html规则，类似于Python的解释器--> <html lang="en"> <!--html标签(只能一个)，指定语言en--> <head> <!-- html head标签的开始 --> </head> <!-- html head标签的结束 --> <body> <!-- html body标签的开始 --> <a href="http://www.imdsx.cn">跳转大师兄</a> <!--类似有很多href这种的叫做标签内部属性--> </body> <!-- html body标签的结束 --> </html> 注释的写法 <!-- -->
html head
1、自闭和标签
<meta charset="UTF-8">
只有开头标签，没有结尾标签
2、主动闭合标签
<a></a>
<!DOCTYPE html> <html lang="en"> <head> <!-- 指定编码 --> <meta charset="UTF-8"> <!-- 每3秒中刷新一次 --> <meta http-equiv="refresh" content="1"> <!-- 3秒后跳转页面 --> <meta http-equiv="refresh" content="1;Url=http://www.imdsx.cn"> <!-- 关键字检索 --> <meta name="keywords" content="大师兄"> <!-- 网站描述--> <meta name="description" content="大师兄是名低调的测试工程师"> <!-- ie打开时以最高的兼容模式打开 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title--> <title>白羊座</title> <!-- 前方高能预警，***重要*** --> <!-- title的图标 --> <link rel="shortcut icon" href="tubiao.ico"> <!-- 引入css --> <link rel="stylesheet" href="tmp.css"> <!-- css样式--> <style></style> <!-- 引入js和编写js --> <script src="tmp.js"></script> </head> <body> </body> </html>
html body
符号
<a href="http://www.imdsx.cn">大 师 兄</a>
<a href="http://www.imdsx.cn"><a></a>
空格：  大于号：> 小于号 < 记住常用的这三个，其他的用时百度
块级标签：H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)
行内标签：SPAN标签(白板)
p、br
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- p标签称之为段落标签，占满一整行，段落之间有空行 想换行需要通过<br/>标签 自闭合标签建议自己写上/作为区分-->
<p>从明天起，做一个幸福的人<br/> 喂马,劈柴,周游世界 </p>
<p>从明天起，关心粮食和蔬菜</p>
<p>我有一所房子，面朝大海，春暖花开</p>
<p>从明天起，和每一个亲人通信</p>
<p>告诉他们我的幸福</p>
<p>那幸福的闪电告诉我的</p>
<p>我将告诉每一个人</p>
<p>给每一条河每一座山取一个温暖的名字</p>
<p>陌生人，我也为你祝福</p>
<p>愿你有一个灿烂的前程</p>
<p>愿你有情人终成眷属</p>
<p>愿你在尘世获得幸福</p>
<p>我只愿面朝大海，春暖花开</p>
</body> </html>
h、form、div、span、input、label
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 标题标签 h1最大 h6最小 只需要记住先出生最大 自带属性 --> <h1>大师兄</h1> <h2>大师兄</h2> <h3>大师兄</h3> <h4>大师兄</h4> <h5>大师兄</h5> <h6>大师兄</h6> <!-- 行内标签的代表 什么属性都不带--> <span>大师兄</span> <!-- 块级标签的代表 什么属性都不带，html代码中出场率最高--> <div>大师兄</div> <!-- 登录页面 --> <!-- 表单标签 可以理解为载体 纸 input 就是写在纸上的文字--> <form action="/login" method="post"> <!-- 文本输入框 --> <input type="text" name="username"/> <!-- 密码输入框 --> <input type="password" name="passwd"/> <!-- 按钮 点击什么用也没有 需要结合js绑定事件 --> <input type="button" value="登录"/> <!-- 提交 提交表单需要用submit --> <input type="submit" value="提交"/> </form> <!-- get与post区别提交 --> <form action="/login" method="get" enctype="multipart/form-data"> <!-- 文本输入框 text--> <input type="text" name="username" value="默认值"/> <!-- 密码输入框 password--> <input type="password" name="passwd"/> <!-- 按钮 点击什么用也没有 需要结合js绑定事件 --> <input type="button" value="登录"/> <!-- 多选框 checkbox {"name"：[1,2,3]} 默认值checked=checked--> <p>女朋友的选择标准</p> <input type="checkbox" name="check" value="1" checked="checked"><span>大长腿</span> <input type="checkbox" name="check" value="2"><span>长头发</span> <input type="checkbox" name="check" value="3"><span>36C</span> <!-- 单选框 radio name相同 勾选是互斥--> <input type="radio" name="sax" value="1" checked="checked"><span>男</span> <input type="radio" name="sax" value="2"><span>女</span> <!-- 文件类 file 如果上传文件一定要在form中添加特殊属性 enctype="multipart/form-data" 意思是一点一点的发给服务器--> <p>上传文件</p> <input type="file" name="file"/> <!-- 提交 提交表单需要用submit --> <input type="submit" value="提交"/> <!-- reset 还原表单中填写的数据到默认 --> <input type="reset" value="重置"> </form> <!-- label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id--> <label for="username">用户名</label> <input id="username" type="text"/> </body> </html>
textarea、select、option、optgroup、a、img、ul、li、ol、dl、dt、dd
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p id="t1">描述</p> <!-- 多行文本 textarea 默认值在标签之间--> <textarea name="meno">默认值</textarea> <p>省市</p> <!-- select option 默认选择在option上增加selected size属性显示多少个 多选属性：multiple--> <select name="city" size="3" multiple="multiple"> <option value="1">黑龙江</option> <option value="2" selected="selected">辽宁</option> <option value="3">北京</option> <option value="4">四川</option> </select> <!-- optgroup 分组 label 组的名字 --> <select name="city" size="3" multiple="multiple"> <optgroup label="黑龙江省"> <option value="1">哈尔滨</option> <option value="2">牡丹江</option> </optgroup> <optgroup label="北京省"> <option value="3">北京</option> </optgroup> </select> <!-- 超链接标签 a href：跳转的链接 target="_blank" 新tab打开页面 --> <p>超链接</p> <a href="http://www.baidu.com" target="_blank">大师兄</a> <!-- a标签 锚的链接 通过id进行对应关系的映射 例子回到顶部--> <div style="height: 500px;">文章</div> <a style="position: fixed;right: 0;bottom: 0" href="#t1">回到顶部</a> <!-- img 图片标签 src：图片的位置 图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字--> <a href="http://www.imdsx.cn"><img src="1.png" style="height: 200px;width: 200px;" alt="html" title="大师兄html"></a> <!-- 列表 ul li 点--> <ul> <li>第一列</li> <li>第二列</li> </ul> <!-- 列表 ol li 数字 --> <ol> <li>第一列</li> <li>第二列</li> </ol> <!-- 分层列表 dl dd内层 dt外层 --> <dl> <dt>黑龙江</dt> <dd>哈尔滨</dd> <dd>牡丹江</dd> </dl> <dl> <dt>北京</dt> <dd>北京</dd> </dl> </body> </html>
table、thead、tr、th、tbody、tr、td
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列--> <table border="1"> <thead> <tr> <th>ID</th> <th>用例名称</th> <th>执行人</th> <th>编辑</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>table表格测试</td> <td>大师兄</td> <td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td> </tr> <tr> <td>1</td> <!-- colspan等于几就占几列--> <td colspan="2">table表格测试</td> <td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td> </tr> <tr > <td>1</td> <!-- rowspan等于几就占几行--> <td rowspan="2">table表格测试</td> <td>大师兄</td> <td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td> </tr> <tr> <td>1</td> <td>大师兄</td> <td><a href="tmp.html">详情</a> <a href="edit.html">编辑</a></td> </tr> </tbody> </table> </body> </html>