HTML5
本文为我观看遇见狂神说的讲解视频的个人学习笔记，侵删。
基本信息
代码语言：javascript复制<!--DOCTYPE:用的是什么规范（告诉浏览器），默认html-->
<!DOCTYPE html>
<html lang="en">
<!--网页头部-->
<head>
<!-- meta 描述性标签，描述网站的一些信息-->
<!-- 常做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="Livinfly, WA">
<meta name="description" content="可以摸鱼">
<!-- 网页标题-->
<title>Web0</title>
</head>
<!--网页主体-->
<body>
Hello,HTML
</body>
</html>网页基本标签
代码语言：javascript复制<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<!--段落标签-->
<p>啊啊啊 急急急</p>
<!--换行标签 单标签-->
5555<br>
<br>778
<!--水平线标签-->
<hr>
<!--粗体、斜体-->
<strong>粗体</strong>
<br>
<em>斜体</em>
<br>
<!--特殊符号 &-->
空      格
大于号>
<br>
小于号<
<br>
版权©图像标签
代码语言：javascript复制<!-- <img src="图像地址（推荐相对地址）" alt="图像替代的文字（图片失败时候）" title="鼠标悬停提示的文字" width="宽" height="高"> -->
<!--
../ 上一级
src alt 必要
还有其他的属性
-->
<img src="https://q1.qlogo.cn/g?b=qq&nk=2756436359&s=640" alt="头像" title="残城三梦">超链接标签及应用
代码语言：javascript复制<!--
a标签
href（必填）跳转的网址
target 窗口在哪里打开
_blank 新标签页
_self 原标签
-->
<a href="">显示文字</a>
<!--图片跳转-->
<a href="">
<img src="" alt="">
</a>
<!--
锚标签
1. 一个锚标记
2. 跳转到标记
-->
<a id="top">顶部</a>
<a href="#top">回到顶部</a>
<a href="3.html#top">xxx</a>
<!--功能性链接
邮件链接：mailto:
-->
<a href="mailto:rslovesgames@qq.com">LINK ME</a>块元素和行内元素
代码语言：javascript复制<!--
块元素
新开辟一行
无论内容多少，独占一行
p,h1-h6
行内元素
a strong em... 在一行
-->列表
代码语言：javascript复制<!--有序列表 ordered list-->
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ol>
<hr>
<!--无序列表 unordered list-->
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
<hr>
<!--定义列表-->
<dl>
<dt>列表名称</dt>
<dd>列表内容</dd>
<dd>1</dd>
<dd>323</dd>
<dd>444</dd>
</dl>表格标签
代码语言：javascript复制<!--
表格table
行 tr rows
列 td
-->
<table>
<tr>
<!-- colspan 跨列-->
<td colspan="4">1</td>
<td>5</td>
</tr>
<tr>
<!-- rowspan 跨行-->
<td rowspan="2">6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>媒体元素
代码语言：javascript复制<!--
音频与视频
src
controls 控制
autoplay 自动播放
-->
<video src="path" controls autoplay></video>
<audio src="path" controls autoplay></audio>页面结构分析
代码语言：javascript复制<!--
结构清晰
header 头部区域
footer 脚部区域
section 页面中的独立区域
article 独立的文章内容
aside 相关内容（侧边栏）
nav 导航辅助内容
-->
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>iframe内联框架
代码语言：javascript复制<!--
iframe内联框架
更小层级的浏览器（？
src
width
hight
name 识别名
-->
<iframe src="" name="hello" width="1000px" height="800px"></iframe>
<a href="https://livinfly.top" target="hello">Link</a>表单post和get提交
代码语言：javascript复制<!--
form表单
method /get/post 如何发送表单
action 向何处发送表单（网站/请求处理地址）
get url中可以看到提交的信息，不安全，高效
post 安全 适合大文件
-->
<form action="a.html" method="get">
<!--文本输入框 input-->
<p>Name:       <input type="text" name="username"> </p>
<p>Password: <input type="password" name="pwd"> </p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>- 文本框和单选框
- 按钮和多选框
- 列表框文本域和文件域
- 搜索框滑块和简单验证
<form action="a.html" method="get">
<!--
文本输入框 input
value 默认初始值
maxlength="" 最长
size 文本框长度
-->
<p>Name: <input type="text" name="username"> </p>
<p>Password: <input type="password" name="pwd"> </p>
<p>Sex:
<!--
单选框
放到同一个组里面
value 提交的值
name 组别，在同一个组是单选
checked 默认
-->
<input type="radio" value="boy" name="sex">male
<input type="radio" value="girl" name="sex" checked>female
</p>
<!--
多选框 input type="checkbox"
checked 默认
-->
<p><input type="checkbox" value="sleep" name="hobby" checked>睡觉</p>
<p><input type="checkbox" value="code" name="hobby">写代码</p>
<p><input type="checkbox" value="char" name="hobby">聊天</p>
<p><input type="checkbox" value="run" name="hobby">跑步</p>
<!--
下拉框，列表框
selected 默认选中
-->
<p>下拉框
<select name="列表名称">
<option value="China" selected>China</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</p>
<!--
文本域
cols rows
-->
<p>反馈：
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!--
文件域
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--
邮箱验证
url验证
数字
-->
<p>Email:
<input type="email" name="email">
</p>
<p>URL:
<input type="url" name="url">
</p>
<p>number:
<input type="number" name="num" max="100" min="0" step="5">
</p>
<!--滑块-->
<p>volumn:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>search
<input type="search" name="search">
</p>
<!--
按钮 input button （普通)
img （图片按钮)
submit
reset
-->
<p><input type="button" name="btn1" value="check"></p>
<p><input type="image" src=""></p>
<p>
<input type="submit">
<input type="reset" value="xxx">
</p>
</form>表单应用
代码语言：javascript复制<!--
表单的应用
readonly 只读 使用如同checked
disabled 禁止
hidden 隐藏 默认值（（
-->
<!--
增强鼠标可用性
点文字光标也改变到文本框中
id=""
-->
<p>
<label for="mark">click me?</label>
<input type="text" id="mark">
</p>表单的初级验证
代码语言：javascript复制<!--
placeholder="请输入xxx" 提示输入信息
required 非空判断
pattern 正则 描述规则
-->
<p>自定义邮箱:
<input type="text" name="diymail" pattern="">
</p>
