HTML-知识点总结
HTML各知识点总结：
| 基本标签 | 标题标签、段落标签、换行标签、水平线标签、字体样式标签、注释和特殊符号 |
| 网页插入 | 图像、超链接，视频、音频、列表、表格、表单、内联框架等 |
| 超链接 | 锚链接、功能性链接 |
| 列表 | 有序列表、无序列表、自定义列表 |
| 表格 | 行、列、跨行、跨列 |
| 表单 | 提交格式、文本框、密码框、单选框、多选框、下拉框 滑块等 |
| 表单设置功能 | 隐藏区域、只读模式、禁用模式 |
| 格式验证 | 用户提示（placehoder)、必填选项（required)、正则表达式（pattern) |
注：图片或者音、视频的路径：
1、相对路径：相对于代码所在的路径，返回上级目录用“../”
2、绝对路径：不考虑所写代码的路径，直接复制图片或者音、视频的在盘符里的路径
一、基本标签：
注：标签中的各个属性是用 空格 隔开！
1、标题标签：
给网页中的正文设置标题，同时可选择标签大小。
用法说明：
一级标题h1,二级标题则h2，后者同理。
例如：一级标签：
格式： <h1>标题名字</h1>
2、段落标签：
给网页中的内容分段，但是不具有空格和换行功能。
用法说明：
段落标签用字符p表示
例如：
格式： <p>段落内容</p>
3、换行标签：
给网页中内容进行换行，不具有分段和空格功能，且与段落标签相比，内容较显的紧凑。
用法说明：
换行标签用br表示，并且是单标签
格式： 选择换行内容<br/>(自闭合、建议使用)
或者 选择换行内容<br>
4、水平线标签：
给网页中内容进行水平线分隔开。
用法说明：
水平线标签用Hr表示，也是单标签
格式： 选择换行内容<hr/>(自闭合、建议使用)
或者 选择换行内容<hr>
5、字体样式标签：
设置字体样式，如粗体、斜体。
用法说明：
粗体：strong
斜体：em
格式： <strong> 内容 </strong>
<em> 内容 </em>
6、注释和特殊符号：
网页中所表示实际上的中、英或者数字等注释和符号。
格式： 空格：内容1 内容2 大于号：内容1 > 内容2
小于号：内容1 < 内容2 版权符号：© 内容
二、网页插入：
1、图像：
在网页中插入图片。
格式 <img src="path" alt="text" title="text" width="x" height="y" />
其中 src: 图像地址 alt: 图像的替代文字（当图片不存在或者找不到时，就会用alt中内容来表示这个图片）
title: 悬停在图片上的文字 width和height:设置图片大小
2、超链接
在网页中加入超链接，可以实现跳转功能。
锚链接：
1、需要一个锚标记
锚标记可以在本页面标记，在其他页面实现跳转； 也可以在其他页面标记，在本页面跳到标记的那个页面。
2、知道要跳转的页面的网页链接
格式： 锚标记： <a name="内容"></a> 有的版本用的是这个： <a id="内容"> </a>
锚链接： <a href="#内容（与锚标记中的内容是相同的）">回到锚标记对应的内容中</a>
功能性链接：
如邮件链接：mailto
格式： 邮件链接： <a href="mailto:此处输入要跳转的电子邮箱"> 点击跳转 </a>
3、列表：
用来列举各种可能的事件或者种类等等。
有序列表：ol
无序列表：ul
自定义列表：dl
`<!--有序列表--> <ol>
<li> 内容 </li>
</ol>
<!--无序列表--> <ul>
<li> 内容 </li>
</ul>
<!--自定义列表--> <dl> <!--自定义列表-->
<dt> <!-- 列表名称-->
<dd> 内容 </dd>
</dt>
</dl>`
4、表格：
用表格来显示各个事物的各种属性，简单明了。
使用：
表格：table
行：tr
列：td
跨行：rowspan
跨列：colspan
`<table> <!--表格-->
<tr> 内容 <!--行-->
<td> 内容
<!--列-->
</td>
</tr>
</table>`
多行多列则在表格里多写几个tr、td。具体事例如下代码：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格标签
tr:行标签
td:列标签
-->
<table>
<tr>
<!-- colspan 跨列-->
<td colspan="4">1-1</td>
</tr>
<!--rowspan 垮行-->
<tr>
<td rowspan="2">2-1
</td>
<td>2-2
</td>
<td>2-3
</td>
</tr>
<tr>
<td>3-1
</td>
<td>3-2
</td>
<td>3-3
</td>
<td>3-4
</td>
</tr>
<!-- 小练习-->
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">哈哈</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>
<table> <!--表格-->
<tr> <!--行-->
<td>
<!--列-->
</td>
</tr>
</table>
</body>
</html>
三、表单：
1、提交表单的形式：常用get/post （get方式提交，可以在url中看到用户提交的信息，不安全，但是这种方式高效；post相对较安全，但是要想信息不被泄露仍需后期加密）
格式： <form method="get/post" action="发送地址"> 表单内容</form>
2、输入框：
输入框：input
比如输入框、密码框等等都用input标签 ，标签中的“type”的值决定了是输入框还是其他标签元素等等。并且尽量用“name”命名元素
type:
text(文本框)，password（密码框），checkbox（多选框），radio（单选框），submit（提交），reset （重置），file（上传文件），hidden（隐藏区域），image（图片，点击该图片也可以提交表单），button（按钮）等
value:
表单组件的初始值。当type为radio或者checkbox时，必须指定一个值。
size:
指定表单组件的初始宽度。当type为text或password时，表单元素的大小以字符为单位。而其他组件类型，宽度以像素为单位。
maxlength：
type为text或password时，输入的最大字符数
checked：
type为radio或者checkbox时，表示指定按钮已被选中，不可更改。
注：同一类型的单选框，name名称必须一样，不一样则不为单选。
格式： 文本框：<input type="text" name="名字" > 密码框：input type="password" name="名字" >
多选框：<input type="checkbox" name="名字"> 单选框：<input type="radio" name="名字">
提交：<input type="submit" name="名字"> 重置<input type="reset" name="名字">
上传文件：<input type="file" name="名字"> 隐藏区域：<input type="hidden" name="名字">
图片：<input type="image" name="名字"> 按钮：<input type="button" name="名字">
3、下拉框：
下拉框：select
格式 <select name="下拉框的名称">
<option value="选项的值1"> </option> （可在option标签中加入selected表示已被选择的选项）
<option value="选项的值2"> </option>
</select>
4、搜索框：
在网页中添加搜索，可快速找到网页中某个内容。
格式： <input type="search" name="名字">
5、滑块：
类似音量调节的滑块，可用来调节大小。
格式： <input type="range" max="滑块所能滑的最大值" min="滑块所能滑的最小值"> （滑块对应的值要在表单提交后的网页的网址上看到）
6、文件域：
上传文件：file
格式： <input type="file" name="名字">
7、文本域：
多行文本：textarea
格式： <textarea name="名字" rows="行" cols="列"> 文本内容 </textarea>
表单的提交和重置：
提交：submit
重置：reset
格式 提交：<input type="submit" name="sub" src="提交地址">
或者以图片形式提交：<input type="image" src="图片地址" alt="图片提交">
重置：<input type="reset" name="res" >
四、表单初级验证：
判断用户输入是否合理或者满足条件，验证失败时，给出提示信息。
1、邮箱验证：
格式： <input type="email" name="email">
2、URL验证：
格式： <input type="url" name="url">
3、数字验证：
格式： <input type="number" name="num"> (可在此标签中加入max,min,step来设置数字范围以及步长大小)
4、表单验证之提示：
默认提示信息：placeholder（即在文本框中默认显示的信息）可用在所有输入框中，在单选、多选、下拉框中无意义。
必填选项：required （设置该项必填）
正则表达式：pattern （需要的可以在网上搜索）
五、表单其他功能：
隐藏某区域：hidden
设置只读模式：readonly
禁用模式：disabled
注：可在标签属性后添加这几个功能。如隐藏一个文本框：
格式： <input type="text" name="text" hidden>(表示该文本框已经隐藏）
鼠标定位：实现点击文字就能将鼠标定位到对应的框中。
格式： <label for="锁定鼠标的id"> 内容如（用户名）</label>
<input type="text" id="给这个文本框设置一个id名">
表单相关代码：
`
`
