<!DOCTYPE html> <!--标准的html格式--> <!--普通情况下一个页面中只允许出现一对html标签--> <!--标签：被<>包裹的名字--> <!--标签中可以定义属性，lang代表下放要求按照英文进行解释--> <html lang="en"> <!--头部--> <!--head中的内容 80%无法在页面看到--> <head> <!--不成对出现：自闭合标签--> <meta charset="UTF-8"> <!--特殊能够看到的title:浏览器的页签--> <!--需要成对出现：主动闭合标签--> <title>处女座</title> <!--style+tab建可自动补全--> <!--style标签可以在head中写css样式--> <style></style> <!--引入CSS标签：--> <!--link下可以自己写属性,例如图标--> <!--rel属性的目的 告诉浏览器，这个标签是要做tab图片还是要引入css--> <!--不同的属性用空格分隔--> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg"> <!--引入css所用样式：--> <link rel="stylesheet"> <!--script标签，能够在head中写javascript代码--> <script></script> </head> <body> <!--h：标题标签,1最大，6最小--> <h1>H1H1H1H1H1</h1> <h2>H2H2H2H2H2</h2> <h3>H3H3H3H3H3</h3> <h4>H4H4H4H4H4</h4> <h5>H5H5H5H5H5</h5> <h6>H6H6H6H6H6</h6> <!--p:段落标签--> <p>HTML学习实际就是学习能够被浏览器所识别的一套规则</p> <p>HTML学习实际就是学习能够被浏览器所识别的一套规则</p> <!--br换行标签--> ---------------------------<br> HTML学习实际就是学习能够被浏览器所识别的一套规则 HTML学习实际就是学习能够被浏览器所识别的一套规则 <!--块级标签：自己无论多大都占一整行，从而别的标签必须换行--> <!--div标签：带有换行样式，很常用的标签--> <!--伪白板标签--> <div>div真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。</div> <div>div真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。</div> <!--行级标签：自己多大就占多大，如果不满一行别的标签可以补上--> <!--span标签--> <!--span标签是白板标签，可以被CSS随意修饰--> <!--<span>span,磨练自己。</span>--> <!--输入框--> <input> <!--带默认提示文案--> <!--方法1：默认赋值--> <input value="请输入用户名"> <!--方法二--> <!--置灰样式展示--> <!--input默认的type值是text，就是单纯的文本框--> <input placeholder="请输入用户名" ，type="text"> <!--value属性就是input的值--> <!--name对应接口的key, value对应的值，通过input获取值，然后传给后端--> <input placeholder="请输入用户名" ，type="text" value="hm" name="username"> <!--输入后隐藏为密文--> <input type="password"> <!--多选框--> <div><span>男<input type="radio" checked="checked"></span></div> <div><span>女<input type="radio"></span></div> <!--单选框--> <div><span>男<input type="checkbox" checked="checked"></span></div> <div><span>女<input type="checkbox"></span></div> <!--name字段相同则互斥--> <div><span>男<input type="radio" checked="checked" name="sex"></span></div> <div><span>女<input type="radio" name="sex"></span></div> <!--登录框--> <div><span>用户名：</span><span><input placeholder="请输入用户名" ，type="text" name="username"></span></div> <div><span>密码：</span><span><input placeholder="请输入密码" type="password"></span></div> <!--登录框老师示范--> <div> <span>用户名：</span> <input placeholder="请输入用户名" type="text"> </div> <div> <span>密码：</span> <input placeholder="请输入用户名" type="password"> </div> <!--label标签：扩展点击范围--> <form action="http://api.nnzhp.cn/api/user/login" method="post"> <!--get中， name相当于Key，值是用户输入。在用户submit时会提交数据--> <div> <!--label for id名--> <!--点击这个label光标可以定在关联的id的输入框中--> <label for="user">用户名：</label> <!--id属性 在一对html标签中不允许出现出现重复--> <!--name值与接口中的key必须一致--> <input placeholder="请输入用户名" type="text" id="user" name="username" value="niuhanyang"> </div> <div> <label for="pwd">密码：</label> <input placeholder="请输入用户名" type="password" id="pwd" name="passwd" value="aA123456"> </div> <!--按钮--> <!--button必须自己写触发时间去请求--> <input type="button" value="button登录"> <!--submit和form连用可以直接去请求数据--> <input type="submit" value="submit登录"> <!--reset回到默认状态--> <!--reset也要和form表单连用才有效果--> <input type="reset"> <!--file上传文件--> <input type="file"> </form> <!--两种按钮区别：--> <!--submit 与form表单连用才有效果,submit点击跳到action--> <!--submit提交的弊端：--> <!--submit提交的整个表单，重新提交后原页面输入的内容就没有了，比如注册页一个内容写错了，提交后就要全部重新写，体验不友好--> <!--< :左尖括号 --> <!-->:右尖括号--> <p></p> <!--多个空格处理：--> <span>处    女 座</span> <!--更多替换符可百度HTML替换符--> <!--清浏览器缓存--> <!--检查---右键刷新——清空缓存并硬性重新检查--> <!--多行文本：--> <textarea>多行文本的默认信息</textarea> <!--下拉框标签--> <!--select是下拉框，option是下拉列表--> <!--默认选项是第一个option--> <h5 style="display: inline">单选</h5> <select> <option>北京</option> <option>上海</option> <option selected="selected" value="shenzhen">深圳</option> </select> <!--传值也是通过name来传--> <select name="city" size="10" multiple="multiple"> <!--size是展示几个，可以滚动--> <!--multiple是多选，在页面上需要按住ctrl才能多选--> <optgroup label="河北省"> <option value="1">邢台</option> <option value="2">保定</option> </optgroup> <optgroup label="黑龙江省"> <option value="3">哈尔滨</option> <option value="4">牡丹江</option> </optgroup> </select> <!--超链接标签--> <!--目的：跳转到某个链接--> <!--target 代表在新页面打开--> <!--href:跳转地址--> <!--target:新打开一个页面--> <a href="http://ui.imdsx.cn/html/" target="_blank">课件地址</a> <!--a标签做锚点--> <!--style="height: 1000px; 100%"代表宽高--> <div style="height: 1000px; 100%" id="i1">我是顶部</div> <!--#i1就是对应的#i1的id--> <a href="#i1">回到顶部</a> <!--图片标签：必须有src属性--> <!--title:鼠标悬浮上显示的文字--> <!--图片加载失败时的碎裂图片图标--> <img src="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg" title="鼠标悬浮上显示的文字" alt="图片碎裂后显示的文字"> <!--table标签--> <!--boder=1：加边框--> <table border="1"> <!--表头thead--> <thead> <!--tr代表一行一行的数据--> <tr> <th>id</th> <th>接口名</th> <th>请求方式</th> <!--colspan="2"代表占两列--> <th colspan="2">操作</th> </tr> </thead> <!--表体，与表头对应--> <tbody> <!--tr代表行 一组tr是一行的数据--> <tr> <!--td代表列--> <td>1</td> <td>/login</td> <!--rowspan="3"代表占3行--> <td rowspan="3">post</td> <td>运行</td> <td>编辑</td> </tr> <tr> <!--td代表列，几列表头，就有几列表体--> <td>2</td> <td>/login</td> <td>运行</td> <td>编辑</td> </tr> <tr> <!--td代表列--> <td>3</td> <td>/login</td> <td>运行</td> <td>编辑</td> </tr> </tbody> </table> <!--ul li标签：加圆点--> <!--ul外层，li内层--> <ul> <li>狮子座</li> <li>双鱼座</li> <li>天蝎座</li> </ul> <!--ol：前面数字--> <ol> <li>狮子座</li> <li>双鱼座</li> <li>天蝎座</li> </ol> <!--dl分层--> <dl> <dt>黑龙江省</dt> <dd>哈尔滨市</dd> <dd>牡丹江市</dd> </dl> <!--前端代码不安全，因为从服务器拉取代码存到本地，给浏览器来渲染--> </body> </html>