一、标签
1. 基本标签
h标题标签：
一级：<h1>一级标签</h1>
二级：<h2>二级标签</h2>
p段落标签：<p>段落1</p>
hr水平线标签：<hr>
br换行标签：<br>
效果
一级标签
二级标签
段落1
2. 字体样式标签
strong加粗字体：<strong>加粗字体</strong>
em斜体：<em>斜体</em>
sup上标：<sup>上标字体</sup>
sub下标：<sub>下标字体</sub>
del删除：<del>删除</del>
ins插入：<ins>插入</ins>
效果
加粗字体
斜体
上标字体
下标字体
删除
插入
3. 链接标签
<a href="url" target="_blank">链接文本</a>
href：必填，跳转页面
target：窗口在哪打开
_self：在自己页面打开
_blank：新标签打开
链接文本可以是图片或HTML元素
效果
4. 锚标签
锚标记
<a id="top">顶部</a>
<a id="down">底部</a>
跳转到标记
<a href="#top">回到顶部</a>
<a href="链接标签.html#down">跳转</a>
效果：
5. 图片标签
<img src="E:/HTML/resources/image/1.jpg" alt="鬼怪壁纸" title="悬停文字">
<img src="../resources/image/1.jpg" alt="鬼怪壁纸" title="悬停文字">
src: 图片地址
绝对地址
相对地址 ../ 上一级目录
alt: 图片名字
title: 悬停文字
效果
6. 视频和音频标签
<video src=" " controls autoplay></video>
<audio src=" " controls autoplay></audio>
src: 地址
controls: 控制条
autoplay: 自动播放
二、表格
表格：table border：边框
行：tr th：表格表头
列：td colspan：跨列 rowspan 跨列
<table border="1px" >
<tr>
<th colspan="3" >跨列</th>
</tr>
<tr>
<td rowspan="2" >跨行</td>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
效果
| 跨列 | ||
|---|---|---|
| 跨行 | 1-1 | 1-2 |
| 2-1 | 2-2 | |
三、列表
有序列表：ol
li:列表项
无序列表：ul
li:列表项
自定义列表：dl
dt：列表名称
dd：列表内容
效果
- Java
- Python
- 前端
- Java
- Python
- 前端
- 列表名称
- 列表内容1
- 列表内容2
- 列表名称
- 列表内容1
- 列表内容2
四、表单
表单 form
action: 表单提交位置
method: 提交方式
get: url中可以看见提交的信息
post: 可以传输大文件
输入框 input
type：输入类型
文本text/密码password/单选radio
多选checkbox/下拉select
按钮button/image/submit/reset
value: 默认值
maxlength: 最长字符
size: 文本框长度
readonly: 只读
disabled: 禁用
hidden: 隐藏
placeholder: 提示信息
required: 非空判断
pattern: 正则表达式
https://www.jb51.net/tools/regexsc.htm
示例1
<form action="First%20webpage.html" method="get">
<!--文本输入框 input type="text"-->
<p>名字：<input type="text" name="username" value="请输入用户名" maxlength="5" size="15" required></p>
<!--密码框 input type="password"-->
<p>密码：<input type="password" name="password" placeholder="请输入密码" pattern="(?=^.{8,}$)(?=.*\d)(?=.*\W+)(?=.*[A-Z])(?=.*[a-z])(?!.*\n).*$"></p>
<!--单选框 input type="radio"
value: 表示值
name: 表示组
-->
<p>性别：
<input type="radio" value="boy" name="sex" checked>男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框 input type="checkbox"
-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby" checked>睡觉
<input type="checkbox" value="game" name="hobby">游戏
<input type="checkbox" value="chat" 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="../resources/image/1.jpg" width="100px">
</p>
<!--下拉框 select-->
<p>下拉框：
<select name="列表名称" id="">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
</form>
示例2
<!--文本域 textarea-->
<p>其它：
<textarea name="textarea" id="" cols="30" rows="10">请输入内容</textarea>
</p>
<!--文件域input type="file" name="files"-->
<p>上传文件：
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
<!--邮件验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL-->
<p>URL：
<input type="URL" name="URL">
</p>
<!--数字：-->
<p>数字：
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块-->
<p>滑块：
<input type="range" name="range" max="100"min="0" step="1">
</p>
<!--搜索框-->
<p>搜索：
<input type="search" name="search">
</p>
<!--增强鼠标可用性 label-->
<p>
<label for="mark">点击</label>
<input type="text" id="mark">
</p>
<!--正则表达式 pattern
https://www.jb51.net/tools/regexsc.htm
-->
<p>自定义邮箱：
<input type="text" name="mail"pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$//^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
五、框架
iframe: 内联框架
src: 地址
frameborder：是否显示边框
<iframe src="https://wwww.baidu.com/" frameborder="0" ></iframe>
显示目标链接页面：
<iframe src=" " name="name" frameborder="0" width="100px" height="100px" </iframe>
<a href="First%20webpage.html" target="name">点击跳转</a>
