一、啥是Html
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
什么是HTML：
- HTML 指的是超文本标记语言: HyperText Markup Language+
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML标签：
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
二、Html中的标签
1. 文本标签
下面用一段代码来解释，如图所示：
<html>
<head>
<title>文本标签</title>
</head>
<body>
<!-- 文本标签 -->
<h1>标题h1<h1>
<h2>标题h2</h2>
<h3>标题h3</h3>
<h4>标题h4</h4>
<h5>标题h5</h5>
<h6>标题h6</h6>
<p>p:换段</p>
<i>i:斜体标签</i><br>
<em>em:强调斜体标签</em><br>
<b>b:加粗标签</b><br>
<strong>strong:强调加加粗标签</strong><br>
<del>del:删除线</del><br>
<u>u:下划线</u><br>
<!-- 上标 -->
水分子:H <sub>2</sub>o
<!-- 下标 -->
4 <sup>2</sup> = 16
<!-- html格式化标签 -->
<!-- 换行 -->
<br/>
<!-- 水平分割线 -->
<hr />
</body>
</html>
运行效果：
标题h1
标题h2
标题h3
标题h4
标题h5
标题h6
p:换段
i:斜体标签em:强调斜体标签
b:加粗标签
strong:强调加加粗标签
u:下划线
水分子:H 2o 4 2 = 16
标题（Heading）是通过 < h1 > - < h6 > 标签进行定义的。 < h1 > 定义最大的标题。 < h6 > 定义最小的标题。
2. 列表标签
无序列表使用 < ul > 标签
有序列表始于 < ol > 标签。每个列表项始于 < li > 标签。
自定义列表以 < dl > 标签开始。每个自定义列表项以 < dt > 开始。每个自定义列表项的定义以 < dd > 开始。
| 标签 | 描述 |
|---|---|
| < ol > | 定义有序列表 |
| < ul > | 定义无序列表 |
| < li > | 定义列表项 |
| < dl > | 定义列表 |
| < dt > | 自定义列表项目 |
| < dd > | 定义自定列表项的描述 |
下面也用一段代码来演示，如图所示：
<html>
<head>
<title>列表标签</title>
</head>
<h1>列表标签</h1>
<!-- 有序列表，其中type类型值 -->
<h3>有序列表</h3>
<ol type="a">
<li>看书</li>
<li>上网</li>
<li>爬山</li>
<li>唱歌</li>
</ol>
<!-- ur:无序列表 -->
<h3>无序列表</h3>
<ul>
<li>看书</li>
<li>上网</li>
<li>爬山</li>
<li>唱歌</li>
</ul>
<!-- 自定义列表 -->
<h3>自定义列表</h3>
<dl></dl>
<!-- 自定义列表头 -->
<dt></dt>
<!-- 自定义列表内容 -->
<dd></dd>
<dl>
<dt>问：html？</dt>
<dd>答：啥玩意？</dd>
<dt>问：html？</dt>
<dd>答：啥玩意？</dd>
<dt>问：html？</dt>
<dd>答：啥玩意？</dd>
</dl>
<!-- 组合块级元素使用css进行格式化 -->
<div>aaa</div>
<div>bbb</div>
<!-- 用于包含的文本，用css进行样式 -->
<span>aaaa</span>
<span>bbbb</span>
</html>
3. 图片标签
在 HTML 中，图像由< img > 标签定义。
< img > 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址
定义图像的语法是：
<img src="url" alt="some_text" width="304" height="228">
- alt 属性用来为图像定义一串预备的可替换的文本。
- height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
4. 超链接标签
HTML 使用超级链接与网络上的另一个文档相连。
HTML中的链接是一种用于在不同网页之间导航的元素。
HTML使用标签 < a > 来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a id="a1"href="https://www.baidu.com/">百度1</a>
- href：指定链接目标的URL，这是链接的最重要属性。可以是另一个网页的URL、文件的URL或其他资源的URL。
- target（可选）：指定链接如何在浏览器中打开。常见的值包括 _blank（在新标签或窗口中打开链接）和 _self（在当前标签或窗口中打开链接）。
- title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。
- rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。
锚点链接：
定义一个锚点：
<a id = "a1" href = "#a2"> 跳转到a2处</a>
使用一个锚点：
<a href = "#a1" > 跳转到a1处 </a>
图像链接：
还可以使用图像作为链接。在这种情况下，< a > 元素包围着 < img > 元素。
<a href="https://www.example.com">
<img src="example.jpg" alt="示例图片">
</a>
5. 表格标签
HTML 表格由 < table > 标签来定义。
每个表格均有若干行（由 < tr > 标签定义），每行被分割为若干单元格（由 < td > 标签定义），表格可以包含标题行（< th >）用于定义列的标题
- tr：tr 是 table row 的缩写，表示表格的一行。
- td：td 是 table data 的缩写，表示表格的数据单元格。
- th：th 是 table header的缩写，表示表格的表头单元格。
| 标签 | 描述 |
|---|---|
| < table > | 定义表格 |
| < th > | 定义表格的表头 |
| < tr > | 定义表格的行 |
| < td > | 定义表格单元 |
| < caption > | 定义表格标题 |
| < colgroup > | 定义表格列的组 |
| < col > | 定义用于表格列的属性 |
| < thead > | 定义表格的页眉 |
| < tbody > | 定义表格的主体 |
| < tfoot > | 定义表格的页脚 |
下面用一段代码来演示，代码如下：
<html>
<head>
<title>
表格标签
</title>
</head>
<body>
<h3>表格标签</h3>
<table border="2" width="600" cellspacing="0" >
<caption>学生信息表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<th>1001</th>
<th>张三</th>
<th>22</th>
<th>二班</th>
</tr>
<tr>
<th>1002</th>
<th>李四</th>
<th>19</th>
<th>一班</th>
</tr>
<tr>
<th>1003</th>
<th>王五</th>
<th>18</th>
<th>三班</th>
</tr>
</table>
</body>
</html>
表格效果如下：
| 学号 | 姓名 | 年龄 | 班级 |
|---|---|---|---|
| 1001 | 张三 | 22 | 二班 |
| 1002 | 李四 | 19 | 一班 |
| 1003 | 王五 | 18 | 三班 |
6. 表单标签
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素
6.1. form
- < form > 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 “post”）。
<form action="" method="" enctype="" target="" id=""></form>
<!--
action 属性：提交的目标地址（URL）如果不填，默认为当前页面
method 属性：提交方式 默认get和post
get方式是URL地址栏可见，长度受限制（火狐8k,IE2k），相对不安全
post方式是URL地址不可见，长度不受限制，相对安全
enctype 提交类型
target 在何处打开目标URL
id 为表单起个名字
-->
6.2 input
- < input > 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 < abel > 元素，name 属性用于标识表单字段。
详情请看表格：
| 元素 | 描述 |
|---|---|
| type | 表示表单项的类型 |
| text | 单行文本框 |
| password | 密码输入框 |
| checkbox | 多选框 注意要提供value值 |
| radio | 单选框 要提供value值 |
| label | 可以包裹单选框和复选框 就不需要准确的点按钮，而是呢一块区域 |
| file | 文件上传选择框 |
| button | 普通按钮 |
| submit | 提交按钮 |
| image | 图片提交按钮 |
| reset | 重置按钮 还原到第一次打开时的效果 |
| hidden | 主表单隐藏域 要和表单一块提交的信息，但不需要用户修改 |
| 用于应该包含e-mail地址的输入域 | |
| url | 用于包含URL地址的输入域 |
| number | 用于包含数值的输入域 |
| max | 规定允许的最大值 |
| min | 规定允许的最小值 |
| step | 规定合法的数字间隔 |
| value | 规定默认值 |
| placeholder | 在表单空格内有虚写的提示词 |
日期选择器：
| 元素 | 描述 |
|---|---|
| date | 选取日，月，年 |
| month | 选取月，年 |
| week | 选取周，年 |
| time | 选取时间（小时和分钟） |
| datetime | 选取时间，日，月，年（UTC时间） |
| datetime-local | 选取时间。日，月，年（本地时间） |
| search | 用于搜索域，比如站点搜索或谷歌搜索 |
| color | 颜色选择 |
| name | 表单项名 用于存储内容值的 |
| value | 输入的值（默认指定值） |
| placeholder | 预期值的简短的提示信息 |
| size | 输入框的宽度值 |
| maxlength | 输入框的输入内容的最大值 |
| readonly | 对输入框只读属性 |
| disabled | 禁用属性 |
6.3 select
- < select > 元素用于创建下拉列表，而 元素用于定义下拉列表中的选项。
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<!--
name 用于定义名称，用于存储下拉值
disable 该属性为true 时 会禁用该菜单
multiple 多选
option 下拉选择项标签，用于嵌入select标签中使用
value 下拉项的值
selected 默认下拉指定值
-->
三、小结
写本文主要是为了分享我的学习过程，也是给自己记个笔记，哪里忘记了，回来再看一眼，也可以很快的回想起来
927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
