HTML
1.基本格式
2.基本标签
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h6>六级标签</h6>
<!-- 段落标签 -->
子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？
有子曰:“其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!”
<p>子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</p>
<p>有子曰:“其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!”</p>
<!-- 换行标签 -->
子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？？人不知而不愠，不亦君子乎<br>
有子曰:“其为人也孝弟而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。君子务本，本立而道生。孝弟也者，其为仁之本与!”
<!-- 水平线标签 -->
<hr>
<!-- 粗体，斜体 -->
<h1>字体样式标签</h1>
粗体：<strong>I am your mom</strong><br>
斜体：<em> I am your mom</em>
<!-- 特殊符号 -->
空 格：<br>
>大于符号<br>
<小于符号<br>
©hhhhh版权所有<br>
<!-- 特殊符号记忆方式 -->
<!--
& ;
-->
3.图像及链接
<!-- 图像标签 -->
<!--
src：图片地址（相对地址，绝对地址）
../ 上级目录
-->
<img src="../resource/814380_screenshots_20201230194406_1.jpg" alt="图片" title="悬停文字" width="200" height="180">
<!-- 链接标签 -->
<!--
href:必填，表示跳转到哪里
target:表示窗口在哪里打开
-->
<a href="https://www.baidu.com" target="_blank">11</a>
<a href="https://www.baidu.com" target="_self">22</a>
<!-- 锚链接 -->
<!--
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<!-- 功能性链接 -->
<!--
邮件链接：mailto：
QQ链接：
-->
<a href="mailto:1442487210@qq.com">联系我</a>
4.列表
<!-- 有序列表 -->
<ol>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>Java</li>
<li>Python</li>
<li>运维</li>
<li>前端</li>
<li>C</li>
</ul>
<!--
自定义列表
dl:标签
dt:列表名称
dd:列表选项
-->
<dl>
<dt>Java</dt>
<dd>Python</dd>
<dd>运维</dd>
<dd>C</dd>
<dd></dd>
<dd></dd>
<dt>位置</dt>
<dd>西安</dd>
<dd>西安</dd>
<dd>西安</dd>
</dl>
5.表格
<!-- 表格Table -->
<!--
行：tr
列：td
-->
<table border="1px">
<tr>
<!-- colspan跨列 -->
<td colspan="4">1-1</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>
</tr>
</table>
<table border="1px">
<tr>
<td colspan="4">课表</td>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>语文</td>
<td>科学</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>语文</td>
<td>科学</td>
</tr>
</table>
6.视频与音频
<!-- 视频与音频 -->
<video src="../" controls autoplay></video>
<audio src="../" controls autoplay></audio>
7.内联框架
<!-- iframe内联框架 -->
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
8.表单与提交
<!-- 表单 -->
<!--
action：表单的提交位置，可以是网站，也可以是一个请求处理地址
method:post，get 提交方式
get方式提交，我们可以在url中可以看到提交的信息，不安全，高效
post方式提交，比较安全，传输大文件
-->
<form action="https://www.baidu.com" method="GET"></form>
<!-- 提交与重置 -->
<p>
<input type="submit">
<input type="reset" value="清空表单">
</p>
9.文本框和单选框
<!--
文本输入框：input type=”text“
value:默认初始值
maxlength：最大能写几个长度
size：文本框长度
-->
<p>名字：<input type="text" name="username" ></p>
<!-- 密码框：imput type=”password“ -->
<p>密码：<input type="password" name="password"></p>
<!--
单选框标签
input type=”radio“
value：单选框的值
name：表示组
-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
10.按钮和多选框
<!--
多选框标签
input type="checkbox"
-->
<p>
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">代码
<input type="checkbox" value="girl" name="hobby">女孩
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!--
按钮
input type="button"普通按钮
input type="image"图像按钮
input type="submit"提交按钮
input type="reset"重置按钮
-->
<p>
<input type="button" name="btn1" value="点击变长">
<input type="image" src="../resource/捕获2.PNG" width="200" height="100">
</p>
11.列表框文本域文件域
<!-- 下拉框，列表框 -->
<p>国家
<select name="列表名称">
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="RS" selected>瑞士ETH</option>
<option value="Indian">印度</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>
12.搜索框滑块和简单验证
<!-- 邮件验证 -->
<p>邮箱:
<input type="email" name="email">
</p>
<!-- URL -->
<p>URL:
<input type="url" name="url">
</p>
<!-- 数字验证 -->
<p>数字:
<input type="number" name="number" max="100" min="0">
</p>
<!-- 滑块 -->
<p>滑块:
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!-- 搜索框 -->
<p>搜索:
<input type="search" name="search">
</p>
13.表单的应用
<!-- 增强鼠标可用性 -->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<!--
隐藏域 hidden
只读 readonly
禁用 disable
-->
14.表单的初级验证
placeholder 提示信息
required 非空判断
pattern 正则表达式
<p>自定义邮箱:
<input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
跟着狂神学Java遇见狂神说的个人空间_哔哩哔哩_bilibili