HTML5
本文为我观看遇见狂神说的讲解视频的个人学习笔记，侵删。
基本信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="Livinfly, WA">
<meta name="description" content="可以摸鱼">
<title>Web0</title>
</head>
<body>
Hello,HTML
</body>
</html>
网页基本标签
<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>
版权©
图像标签
<img src="https://q1.qlogo.cn/g?b=qq&nk=2756436359&s=640" alt="头像" title="残城三梦">
超链接标签及应用
<a href="">显示文字</a>
<a href="">
<img src="" alt="">
</a>
<a id="top">顶部</a>
<a href="#top">回到顶部</a>
<a href="3.html#top">xxx</a>
<a href="mailto:rslovesgames@qq.com">LINK ME</a>
块元素和行内元素
列表
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ol>
<hr>
<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>
表格标签
<table>
<tr>
<td colspan="4">1</td>
<td>5</td>
</tr>
<tr>
<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>
媒体元素
<video src="path" controls autoplay></video>
<audio src="path" controls autoplay></audio>
页面结构分析
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
iframe内联框架
<iframe src="" name="hello" width="1000px" height="800px"></iframe>
<a href="https://livinfly.top" target="hello">Link</a>
表单post和get提交
<form action="a.html" method="get">
<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">
<p>Name: <input type="text" name="username"> </p>
<p>Password: <input type="password" name="pwd"> </p>
<p>Sex:
<input type="radio" value="boy" name="sex">male
<input type="radio" value="girl" name="sex" checked>female
</p>
<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>
<p>下拉框
<select name="列表名称">
<option value="China" selected>China</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</p>
<p>反馈：
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<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>
<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>
表单应用
<p>
<label for="mark">click me?</label>
<input type="text" id="mark">
</p>
表单的初级验证
<p>自定义邮箱:
<input type="text" name="diymail" pattern="">
</p>