HTML
一.注释与结构
<!-- DOCTYPE:告诉浏览器使用什么规范 -->
<!DOCTYPE html>
<html lang="en">
<!--head代表网页头部-->
<head>
<!--meta描述性标签，用来描述网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="学习">
<!--title代表网页标题-->
<title>Title</title>
</head>
<!--body代表网页主体-->
<body>
</body>
</html>
二.特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--加粗-->
<strong>hhh</strong>
<b>hhh</b>
<!--斜体-->
<em>hhh</em>
<!--特殊符号-->
空格: 空格
大于号:>
小于号：<
版权符号：©
</body>
</html>
三.图片标签
<!--src：图像地址；alt:图像替代文字；title：鼠标悬停提示文字；width：宽度；hight：高度-->
<img src="path" alt="text" title="text" width="x" height="y"/>
四.链接标签
<!--href链接路径；target链接在哪个窗口打开，值为_self,_blank-->
<a href="path" target="目标窗口位置"></a>
锚链接
<a name="top"></a>
<a href="#top">回到顶部</a>
五.列表
<!--有序列表-->
<ol>
<li>java</li>
<li>python</li>
<li>c++</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>java</li>
<li>python</li>
<li>c++</li>
</ul>
<!--自定义列表:dt表示列表标题；dd表示列表选项-->
<dl>
<dt>语言</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C++</dd>
</dl>
六.表格
<!--table表格；tr代表行；td代表列-->
<table border="1px">
<tr>
<!--rowspan表示跨行-->
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<!--colspan表示跨列-->
<td colspan="2">2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
七.音频和视频
<!--src:资源路径；controls:控制条；autoplay:自动播放-->
<video src="path" controls autoplay></video>
<audio src="path" controls autoplay></audio>
八.页面结构
<header>网页头部</header>
<nav>导航栏</nav>
<section>网页主体</section>
<aside>侧边栏</aside>
<footer>网页脚部</footer>
九.iframe内联框架
<!--iframe内联框架-->
<iframe src="http://www.baidu.com" name="b站" width="800px" height="800px"></iframe>
<a href="https://www.bilibili.com/" target="b站">点我</a>
十.表单
表单控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>表单</h1>
<!--action：表单提交的位置，可以是网站也可以是请求处理地址
method：post，get提交方式-->
<form action="/" method="get">
<!--文本输入框：input type="text"
value="hhh":默认初始值
maxlength="8":最长能写几个字符
size=30：文本框的长度-->
<p><input type="text" name="username" value="hhh" maxlength="8"></p>
<p><input type="password" name="pwd"></p>
<!--单选框 input type="radio" checked默认选中-->
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女</p>
<!--多选框 input type="checkbox" checked默认选中-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="sbasketball" name="hobby">打篮球
<input type="checkbox" value="swim" name="hobby">游泳
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!--按钮：input type="button"普通按钮；input type="image"图片按钮-->
<p>按钮：
<input type="button" name="btn1" value="点">
<input type="image" src=""></p>
<input type="submit">
<input type="reset">
<!--下拉框selected默认选中-->
<p>下拉框：
<select name="列表名称">
<option value="uu">中国</option>
<option value="dd" selected>美国</option>
<option value="ee">日本</option>
</select>
</p>
<p>文本域
<textarea name="textarea" cols="50" rows="20">文本内容</textarea>
</p>
<p>文件域：
<input type="file" name="files">
</p>
<p>滑块
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>搜索框
<input type="search" name="search">
</p>
</form>
</body>
</html>
readonly:只读；disabled：禁用；hidden：隐藏；
<!--增加鼠标可用性-->
<label for="name">你点一哈</label>
<input type="text" name="text" id="name">
表单初级验证
- placeholder:提示信息
- required：非空判断
- pattern：正则表达式
<p><input type="text" name="username" placeholder="请输入用户名"></p>
<p><input type="password" name="pwd" required></p>
<p><input type="email" name="email" pattern="/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,})$/"></p>