<!--DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页的头部-->
<!--ctrl+/自动生成注解-->
<head>
<!-- meta是描述标签，用来描述网页的一些信息-->
<!-- meta标签一般用来做seo-->
<meta charset="UTF-8">
<meta name="keywords" content="html5">
<meta name="description" content="这里可以用来学习html5">
<!-- title是网页的标题-->
<title>基本标签学习</title>
</head>
<!--body标签代表网页的主体-->
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--段落标签-->
<!--直接按住【p】，然后按住【Tab】键可以直接生成-->
<p>窗前明月光</p>
<p>疑是地上霜</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
<!--br是一个单标签，可以进行换行处理-->
窗前明月光<br/>疑是地上霜<br/>
<!--粗体、斜体标签-->
<h1>字体样式标签</h1>
粗体：<strong>窗前明月光</strong><br/>
斜体：<em>疑是地上霜</em><br/>
<!--特殊符号-->
<!--特殊符号的记忆：首先输入一个&和；然后在中间输入一个字母就知道需要的是什么了,或者去百度-->
空格：空 格 <br/>
空 格<br/>
大于号：> <br/>
大于号：><br/>
小于号：< <br/>
小于号：<<br/>
版权符号：©版权所有html5 <br/>
版权符号:©狂神说java<br/>
<!--图像标签,
../表示上一级目录
alt:没有图片的时候显示出来的文字
title:鼠标放在上面悬停的文字
-->
<img src="./resource/image/1.png" alt="这是图片" title="鼠标放在上面悬停的文字"><br/>
<!--链接标签
href：表示要跳转到哪个页面
ctrl+D:idea的复制快捷键
target:表示超链接在哪个网页中打开
target="_blank":在当新网页中打开
target="_self":在当前网页中打开
-->
<a href="我的第一个网页.html" target="_blank">我的第一个网页 </a><br/>
<a href="我的第一个网页.html" target="_self">我的第一个网页 </a><br/>
<a href="www.baidu.com">百度的链接</a><br/>
<!--点击图片进行页面跳转-->
<a href="我的第一个网页.html">
<img src="./resource/image/1.png" alt="这是图片" title="鼠标放在上面悬停的文字"><br/>
</a>
<!--块元素：如果使用了之后换一行的是块元素（<p></p>）
行元素：无论里面都是内容，都只显示一行的是行元素
-->
<p>
<a href="我的第一个网页.html">
<img src="./resource/image/1.png" alt="这是图片" title="鼠标放在上面悬停的文字"><br/>
</a>
</p>
<p>
<a href="我的第一个网页.html">
<img src="./resource/image/1.png" alt="这是图片" title="鼠标放在上面悬停的文字"><br/>
</a>
</p>
<p>
<a href="我的第一个网页.html">
<img src="./web/resource/image/1.png" alt="这是图片" title="鼠标放在上面悬停的文字"><br/>
</a>
</p>
<!--锚链接
锚链接需要一个标记，然后跳转到对应到标记上
-->
<a href="#top">返回顶部</a><br>
<a name="down"></a><br>
<!--发送邮件标签
mailto
-->
<a href="mailto:16666666668@163.com">请邮件联系</a><br/>
<!--qq推广
在百度上搜索qq推广，然后点进去，登陆qq，之后开通qq推广，再继续在输入栏中输入文字，输入对应的信息后，复制代码，到页面之中即可
-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好，加我找他要钱" title="你好，加我找他要钱"/>
</a>
<!--
有序列表Ol，前面自动有数字
无序列表ul，前面是小点
自定义列表dl ，其中dt相当于标题，dd相当于内容
-->
<ol>
<li>语文</li><li>数学</li><li>英语</li><li>化学</li>
</ol>
<ul>
<li>语文</li><li>数学</li><li>英语</li><li>化学</li>
</ul>
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl>
<!--
表格标签
行 tr
列 td
跨行 rowspan="2"
跨列 colspan="2"
-->
<table border="1px">
<tr>
<td colspan="3">课程表</td>
</tr>
<tr>
<td rowspan="2">高一三班</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">高二三班</td>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</table>
<!--声音播放器的适配，可以用格式工厂转换格式-->
<audio controls="controls" loop="loop">
<source src="G:office_visaoffice_visio阿悠悠-念旧.mp3" type="audio/mpeg">
<source src="G:office_visaoffice_visio阿悠悠-念旧.ogg" type="audio/ogg">
你的播放器太low了，不支持audio播放
</audio>
<!--视频播放器的适配-->
<video controls="controls" loop="loop" width="300px" poster="C:UsersAdministratorPicturesSaved Pictures1.png">
<source src="G:office_visaoffice_visio阿悠悠-念旧.mp4" type="audio/mpeg">
<source src="G:office_visaoffice_visio阿悠悠-念旧.ogg" type="audio/ogg">
你的播放器太low了，不支持vedio播放
</video>
<!--嵌套内联标签iframe-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="1000px" height="800px"
name="框架标签名">
</iframe>
<!--
post和get的区别：
1post地址安全，get地址不安全，暴露账号密码
2post能传输的文件大，get能传输的内容小，只有50M
form中的action表示向何处发送请求，可以为网页，也可以为
value是默认值
maxlength:能输入的最大字节数
size：文本框的长度
-->
<form action="我的第一个网页.html"method="get">
<p>
账号:<input type="text" name="username" value="默认提示语" maxlength="20" size="30">
</p>
<p>
密码：<input type="password" name="password"value="默认提示语" maxlength="20" size="30">
</p>
<!--
type：radio
name:组
value：单选框的值
-->
<p>性别：
<input type="radio" name="sex" value="boy" checked/>男
<input type="radio" name="sex" value="girls"/>女
</p>
<!--
多选框：
type="checkbox"
-->
<p>
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="sport" name="hobby" checked>运动
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="money" name="hobby">钱
</p>
<!--
按钮
-->
<p>按钮
<input type="button" name="btn1" value="点击" onclick="btn1">
<input type="image" src="./web/resource/image/1.png" name="图片按钮">
</p>
<!--
下拉框
-->
<p>下拉框：
<select name="列表名称">
<option value="选项的值1" selected>money</option>
<option value="选项的值2">money1</option>
<option value="选项的值3">money2</option>
<option value="选项的值4">money3</option>
</select>
</p>
<!--文本域
cols:显示的行数
rows:显示的列数
-->
<p>
<textarea name="textarea" cols="10" rows="30">
833323333c64835333333333333333333c6483533333333334616","addr":"000000161193",
"cotrolCode":"91","dataLength":48,"dataField":"00ff00009315020000000000000000009315020000000000",
"dataMarker":"0000FF00","password":null,"operatorCode":null,
"freezeTd":null,
"dataValues":{"TAE":"900","TAE4":"0","TAE3":"215.93","TAE2":"0","TAE1":"0"},"seq":null,
"errCode":null,"detail":null,"version":null,"success":true,"longer":false
</textarea>
</p>
<!-- 文件域-->
<p>
<input type="file" name="file">
<input type="button" name="upload" value="上传">
<input type="button" name="down" value="下载">
</p>
<!-- 邮件验证-->
<p>邮件：
<input type="email" name="email">
</p>
<!-- url验证-->
<p>
<input type="url" name="url">
</p>
<!-- 数字验证-->
<p>商品数量：
<input type="number" name="number" max="1000" min="100" step="10">
</p>
<!-- 滑块-->
<p>
声音大小：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!-- 搜索框-->
<p>
搜索
<input type="search" name="search">
<input type="button" name="search1" value="搜索" id="search">
</p>
<!-- 鼠标增强特效-->
<p>
<lable for="search"></lable>
<input type="text">
</p>
<!-- 只读属性： readonly-->
<p>
只读
<input type="text" name="username" value="admin" readonly>
</p>
<!-- 禁用：disable-->
<p>
禁用：
<p>下拉框：
<select name="列表名称">
<option value="选项的值1" selected>money</option>
<option value="选项的值2" disabled>money1</option>
<option value="选项的值3">money2</option>
<option value="选项的值4">money3</option>
</select>
</p>
</p>
<!-- 影藏
hidden
-->
<p>
密码：<input type="password" name="password"value="默认提示语" maxlength="20" size="30" hidden>
</p>
<!--表单验证
placeholder:文本框中的提示信息
required:非空判断
pattern:正则表达式,正则表达式的网站：https://www.jb51.net/article/76901.html
-->
<p>用户名：
<input type="text" name="username" placeholder="请输入用户名" required pattern="^[u4e00-u9fa5]{0,}$">
</p>
<p>
<input type="submit" name="submit" value="提交">
<input type="reset" name="reset"value="重置">
</p>
</form>
</body>
</html>