本来打算学完后端在学前端的（其实以前都学过，奈何都还给老师了，也没写博客也没有笔记，都没办法复习），奈何计划赶不上变化，课程要求用前端页面展示，只能先复习一下前端的知识了。
W3C：万维网联盟，web技术领域最有权威和最具影响力的国际中立性技术权威机构
html学习笔记
<!--这是一条注释DOCTYPE：告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页头部-->
<head>
<!--meta描述性标签，描述网页的一些信息-->
<!--meta一般用来做seo-->
<!--SEO搜索引擎优化-->
<meta charset="UTF-8">
<meta name="keywords" content="这是关键词">
<meta name="description" content="这是描述">
<!--title网页标题，就是代开网页标签上显示的文字-->
<title>这是一个标题</title>
</head>
<!--网络主体-->
<body>
hello word！
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落标签-->
<p></p>
<p>两只老虎</p>
<p>量子老虎</p>
<p>跑得快，跑得快</p>
<p>直没有眼睛</p>
<p>一直没有尾巴 </p>
<p>真奇怪，真奇怪</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎<br/>
量子老虎<br/>
跑得快，跑得快<br/>
直没有眼睛<br/>
一直没有尾巴 <br/>
真奇怪，真奇怪<br/>
<!--粗体和斜体标签-->
<h1>字体样式标签</h1>
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<br/>
<!--特殊符号-->
空 格<br/>
空 格<br/>
>这是一个大于号<br/>
<这是一个小于号<br/>
©版权符号<br/>
<!--
特殊符号记忆方式
&开头 ;结尾，通过idea查
百度
-->
<hr/>
<h1>图像标签</h1>
<!--图像标签-->
<!--
src：图片地址(必填)
相对地址，绝对地址
alt：图像没显示出来显示的文字（必填）
width：设置图片宽
height：设置图片高
-->
<img src="../resource/image/1.jpg" alt="这是一个图片" title="鼠标悬停显示文字" width="300" height="300">
<hr/>
<br/>
<!--链接标签-->
<h1>链接标签</h1>
<!--
a标签
href：必填，表示言跳转到那个页面
target：表示页面在哪打开
_blank:在新标签页中打开
_self:在当前页面中打开
-->
<!--使用name做一个标记-->
<a name="top">顶部</a>
<a href="http://www.baidu.com">点击我跳转到百度</a>
<br/>
<a href="http://www.baidu.com" target="_self">
<img src="../resource/image/1.jpg" alt="这是一个图片" title="鼠标悬停显示文字,图片标签链接，点击我跳转百度" width="300" height="800">
</a>
<!--锚链接-->
<!--
1 需要一个标记
2 跳转到标记
-->
<br/>
<a href="#top">回到顶部</a>
<!--打开xxxx网址，跳转到相应的锚链接位置，可以不再是顶部-->
<a href="xxxxxxx#top">回到顶部</a>
<br/>
<!--功能性链接-->
<!--
邮件链接：mailto：
QQ链接：打开浏览器，搜索QQ推广，登录输入消息，然后将代码复制即可，发起临时会话用
-->
<a href="mailto:335600361@qq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1851574845&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1851574845:51" alt="点我领取小电影" title="点我领取小电影"/>
</a>
<br/>
<!--列表-->
<h1>列表</h1>
<!--有序列表
应用：试卷，问答。。。。
-->
<ol>
<li>前端</li>
<li>后端</li>
<li>全栈</li>
</ol>
<!--无序列表
应用：导航，侧边栏。。。。
-->
<br/>
<ul>
<li>前端</li>
<li>后端</li>
<li>全栈</li>
</ul>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
应用：公司网站底部
-->
<dl>
<dt>技术路线</dt>
<dd>前端</dd>
<dd>后端</dd>
<dd>java</dd>
<dt>位置</dt>
<dd>黑龙江</dd>
<dd>北京</dd>
<dd>山东</dd>
</dl>
<br/>
<!--表格-->
<!--
行：tr
列：td
border：边框宽度
-->
<h1>表格</h1>
<table border="1px">
<tr>
<!--colspan跨列-->
<td colspan="4">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-4</td>
</tr>
<tr>
<!--rowspan跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
<!--媒体，视频，音频-->
<br/>
<!--视频
src：视频地址
controls：控制，播放进度，一级音量大小等（如果没有，就不能控制播放，播放进度，音量等）
autoplay：自动播放
muted:静音属性
有的浏览器不支持自动播放，加上静音就可以自动播放了,浏览器优化体验
-->
<video src="../resource/video/movie2.mp4" controls muted autoplay></video>
<audio src="../resource/MP3/1.mp3" controls autoplay ></audio>
<!--页面结构分析-->
<br/>
<header>这是一个头部</header>
<section>这是主体</section>
<footer>这是一个脚部</footer>
<nav>导航辅助内容</nav>
<!--iframe，在网页中嵌入另一个网页-->
<br/>
<!--
iframe:内联框架
src：应用页面地址
name：框架标识名
w和h：款高度
-->
<iframe src="" name="hello" frameborder="0" width="900px" height="200px"></iframe>
<a href="https://live.bilibili.com/" target="hello">点击在上述iframe中加载哔哩哔哩</a>
<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">
</iframe>
<!--表单-->
<!--
form：表单
action：表单提交位置，可以是网站，也可以是一个请求处理地址
method：表单提交方式 post/get
get：可以在url中看到提交的信息（不安全），但是高效
post：比较安全，在url中不会暴漏密码账号，可以传输大文件
-->
<br/>
<form action="" method="post">
<!--
input：输入框
type：text文本框，还有其他属性，如 image图片，range滑块 checkbox 等，radio单选框
value：设置初始值
maxlength：设置输入字符的最大长度
size：设置文本框长度
-->
<p>名字：<input type="text" name="username" value="大帅逼" maxlength="8" size="30"></p>
<!--
密码类型会将输入的字符变成··············
-->
<p>密码：<input type="password" name="pwd"></p>
<!--
单选框标签
input type="radio"
value:单选框的值
name：标识组，在单选框中一样的组只能选一个，不同的组可以多选
checked：默认选中
-->
<p>性别
<input type="radio" value="boy" checked name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--
多选框
name：标识组，在多选框中一样的组可以选多个
checked：默认选中
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="write" checked name="hobby"/>敲代码
<input type="checkbox" value="talk" name="hobby"/>聊天
<input type="checkbox" value="game" name="hobby"/>游戏
</p>
<!--
按钮 用value对按钮显示的字进行设置
input type="button" 普通按钮
input type="image" 图片按钮
下面还有重置按钮和提交按钮
-->
<p>
<input type="button" name="btn1" value="点击变长">
<input type="image" src="../resource/image/1.jpg">
</p>
<!--下拉框-->
<p>
下拉框：
<select name="列表名称">
<option value="选项的值" selected>中国</option>
<option value="选项的值">美国</option>
<option value="选项的值" >瑞士</option>
</select>
</p>
<!--
文本域
-->
<p>
<textarea name="textarea" cols="50" rows="10" ></textarea>
</p>
<!--
文件域
input type="file" 上传文件
name：传入后台的是key：value，上传的是value，name就是key
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--
邮件验证：验证邮箱是否写了@
-->
<p>邮箱：
<input type="email" name="email"/>
</p>
<!--url验证-->
<p>url：
<input type="url" name="url"/>
</p>
<!--数字验证
max ：最大值
min ： 最小值
step：每次增加的步数
-->
<p>number：
<input type="number" name="number" max="100" min="0" step="10"/>
</p>
<!--滑块-->
<p>音量：
<input type="range" min="10" max="100" step="2">
</p>
<!--搜索框-->
<p>
搜索：
<input type="search" name="search">
</p>
<!--
表单应用
只读：readonly
禁用：disabled
隐藏：hidden
-->
<br/>
<!--只读-->
<p>
<input type="text" value="只读" readonly/>
</p>
<!--禁用
下面例子男选不了
-->
<p>性别
<input type="radio" value="boy" checked name="sex" disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--隐藏
用于提交一些默认值
-->
<p>
<input type="radio" value="girl" name="sex" hidden/>女
</p>
<!--增强鼠标可用性
点击文字也选中输入框
-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark"/>
</p>
<!--
表单的初级验证，安全，保证数据不会出错，减轻压力
placeholder:提示信息
required：非空判断，不能为空
pattern：匹配正则表达式
常用正则表达式查找网站 https://www.jb51.net/tools/regexsc.htm
oninvalid="setCustomValidity('格式不对');" 设置报错信息
-->
<p>
<input type="text" placeholder="请输入用户名" required/>
</p>
<p>自定义邮箱：
<input type="text" name="diyimail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" oninvalid="setCustomValidity('格式不对');"/>
</p>
<!--
input type="submit":提交按钮
input type="reset"：重置按钮
-->
<p>
<input type="submit"/>
<input type="reset"/>
</p>
</form>
</body>
</html>完结撒花！！！
