<!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;width: 100%"代表宽高-->
<div style="height: 1000px;width: 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>
