HTML总结
学习来源：https://www.bilibili.com/video/BV1x4411V75C?p=11&vd_source=c406cec6bb9d5441fcb8903f9c8242d5
基本标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<title>基本标签</title>
<p>两只老虎，两只老虎，</p> //段落标签
<br/> //换行
粗体：<strong>i love you</strong>
斜体：<em>i love you</em>
<hr> //水平分割线
//空格
> //大于号（>）
< //小于号（<）
© //©
超链接
<a href="1.html" target="_blank">点我跳转到页面一</a> //target="_blank" 相当于跳转到新网页，而旧网页不变
<a href="https://www.cnblogs.com/fqqyblog/" target="_self">点我跳转到fqqy的博客</a> //target="_self" 相当于跳转到新网页，而旧网页关闭
//href中的地址既可以是网址也可以是本地文件
图片
<img src="../resource/image/1.jpg" alt="图片" title="悬停文字" width="300" height="300">
//alt指的是图片加载不出来时显示的内容，title是悬停文字
锚链接
<a name="top">top</a>
<a href="#top">回到顶部</a>
//先在一处定义a标签的name,再在另一处的a标签通过#加上name为地址，可实现跳转
列表
<ol>
<li>java</li>
<li>python</li>
<li>c</li>
</ol> //有序列表
<hr>
<ul>
<li>java</li>
<li>python</li>
<li>c</li>
</ul> //无序列表
<hr>
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
</dl> //自定义列表
表格
<table border="1px"> //表格以table标签开始
<tr> //<tr>代表一行
<td colspan="3"> //<td>代表一列，colspan的值代表当前列占几列
学生成绩
</td>
</tr>
<tr >
<td rowspan="2"> //rowspan的值代表当前行占几行
狂神
</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>
媒体（视频、音频）
<video src="../resource/video/F149A9D49B791AEAA2270B75F2F1AC9A.mp4" controls autoplay height="500" ></video> //视频
<audio src="../resource/audio/20230507_202918.m4a" controls autoplay></audio> //音频
页面框架
<body>
<header><h2>网页头部</h2></header>
<section><h2>部分</h2></section>
<footer><h2>网页底部</h2></footer>
</body>
iframe内联框架
<iframe src="5.html" name="hello" frameborder="0" width="500" height="500"></iframe>
//在一个网页里面嵌套另一个网页
表单
<form action="1.html" method="get"> //表单==》form标签 action为表单提交后跳转的网页
<p>名字：<input type="text" name="username" value="123" maxlength="8" size="30" readonly></p> //纯文本框
<p>密码：<input type="password" name="pwd" value="123456" hidden></p> //密码框
<p>
性别：
<input type="radio" value="boy" name="sex" checked disabled>男 //单选
<input type="radio" value="girl" name="sex">女
</p>
<p>
爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉 //多选
<input type="checkbox" value="code" name="hobby" checked>敲代码
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="chat" name="hobby">聊天
</p>
<p>
<input type="button" name="btn1" value="点我变长"> //按钮
<input type="image" src="../resource/image/1.jpg" width="300" height="300"> //图片
</p>
<p>
国家：
<select name="列表清单" > //下拉框
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk" selected>英国</option>
</select>
</p>
<p>
邮箱：
<input type="email" name="email" placeholder="请输入邮箱" required>
</p>
<p>
url:
<input type="url" name="url">
</p>
<p>
商品数量：
<input type="number" name="num" max="100" min="0" step="2">
</p>
<p>
音量:
<input type="range" name="voice" max="100" min="0" step="1">
</p>
<p>
反馈：
<textarea name="textarea" cols="30" rows="10">文本</textarea>
</p>
<p>
搜索：
<input type="search" name="search">
</p>
<p>
<input type="file" name="files">
<input type="button"value="上传" name="upload">
</p>
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
<!--正则表达式pattern
<input type="text" name="diymail" pattern="">
其中pattern要上网搜索查询
-->
</form>