持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情
哈喽，大家好！我是Why，一名在读学生，目前刚刚开始进入自己的编程学习生涯。虽然学习起步较晚，但我坚信做了才有0或1的可能。学了一段时间以后也是选择在掘金上分享自己的日常笔记，也希望能够在众多道友的大家庭中打成一片。 本文主要讲解HTML常用标签以及重要标签的注解，如果大家读后觉得有用的话，还请大家多多支持博主：欢迎 ❤️点赞👍、收藏⭐、留言💬 ✨✨✨个人主页：JinHuan
HTML常用标签以及重要标签的注解
| 标签 | 描述 |
| ------------ | ---------------------- |
| <!–…--> | 定义注释。 |
| <!DOCTYPE> | 定义文档类型。 |
| <a> | 定义超链接。 |
| <address> | 定义地址元素。 |
| <b> | 定义粗体文本。 |
| <big> | 不支持。定义大号文本。 |
| <body> | 定义 body 元素。 |
| <br> | 插入换行符。 |
| <button> | 定义按钮。 |
| <canvas> | 定义图形。 |
| <caption> | 定义表格标题。 |
| <center> | 定义居中的文本。 |
| <code> | 定义计算机代码文本。 |
| <col> | 定义表格列的属性。 |
| <del> | 定义删除文本。 |
| <dir> | 定义目录列表。 |
| <font> | 定义文本的字体、尺寸和颜色。 |
| <footer> | 定义 section 或 page 的页脚。 |
| <form> | 定义表单。 |
| <h1> to <h6> | 定义标题 1 到标题 6。 |
| <head> | 定义关于文档的信息。 |
| <header> | 定义 section 或 page 的页眉。 |
| <hr> | 定义水平线。 |
| <html> | 定义 html 文档。 |
| <i> | 定义斜体文本。 |
| <img> | 定义图像。 |
| <input> | 定义输入域。 |
| <ins> | 定义插入文本。 |
| <label> | 定义表单控件的标注。 |
| <object> | 定义嵌入对象。 |
| <ol> | 定义有序列表。 |
| <optgroup> | 定义选项组。 |
| <option> | 定义下拉列表中的选项。 |
| <output> | 定义输出的一些类型。 |
| <p> | 定义段落。 |
| <pre> | 定义预格式化文本。 |
| <select> | 定义可选列表。 |
| <small> | 定义小号文本。 |
| <source> | 定义媒介源。 |
| <span> | 定义文档中的 section。 |
| <strike> | 定义加删除线的文本。 |
| <strong> | 定义强调文本。 |
| <style> | 定义样式定义。 |
| <sub> | 定义上标文本。 |
| <sup> | 定义下标文本。 |
| <table> | 定义表格。 |
| <tbody> | 定义表格的主体。 |
| <td> | 定义表格单元。 |
| <textarea> | 定义 textarea。 |
| <tfoot> | 定义表格的脚注。 |
| <th> | 定义表头。 |
| <thead> | 定义表头。 |
| <time> | 定义日期/时间。 |
| <title> | 定义文档的标题。 |
| <tr> | 定义表格行。 |
| <tt> | 定义打字机文本。 |
| <u> | 定义下划线文本。 |
| <ul> | 定义无序列表。 |
| <video> | 定义视频。 |
重要标签的注解
br
<br> 独目标签,表示换行
hr
<hr> 独目标签，代表横线
属性：color_设置横线颜色
width_设置在屏幕占比
栗子：
<hr color = "red" width = "50%"> 代表一个横线，颜色为red，再评，在屏幕的占比为50%
pre
<pre> 定义预留样式的文本
栗子：
<pre>
for(int i = 0; i < 10; i++){
System.out.println("第"+"i = " +"次！");
}
</pre>
font
<font><\font>可以设置文本的字体，颜色，以及尺寸
栗子：
<font color = "color" size = "30"></font>
实体符号
'实体符号特点是：以&开始，以;结束
空格
大于号
<
小于号
>
table
表格的属性：
border="1px" 设置表格的边框为1像素的宽度
宽度 width
高度 height
背景色 bgcolor 可以设置表格的背景颜色
对齐方式 aline：
left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom
表头 <thead></thead>
th 表头数据 默认 加粗 居中
表体 <tbody> </tbody>
行 <tr></tr>代表一行数据
列 <th></th>代表一列数据
行合并 rowspan 会删除“下面的”单元格
列合并 colspan
表格实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
表格的属性：
<tr></tr>代表一行数据
<th></th>代表一列数据
border="1px" 设置表格的边框为1像素的宽度
width 宽度
height 高度
bgcolor 可以设置表格的背景颜色
align设置对齐方式
th 表头默认 加粗 居中
rowspan 行合并 会删除“下面的”单元格
colspan 列合并
-->
<table bgcolor="aliceblue" border="1px" width="40%" align="center">
<tr>
<th bgcolor="red">第一列</th>
<th>第二列</th>
<th>第三列</th>
</tr>
<tr align="center"> <!--设置整行的属性为居中-->
<td font bgcolor="aqua">第一行的第一列</td>
<td>第一行的第二列</td>
<td>第一行的第三列</td>
</tr>
<tr>
<td align="center">第二行的第一列</td> <!--设置单列的属性为居中-->
<td>第二行的第二列</td>
<td bgcolor="coral"rowspan="2">第三列的二、三两行合并了</td>
</tr>
<tr>
<td bgcolor="chartreuse"colspan="2" align="center">第三行的第一、二列合并了</td>
</tr>
</table>
</body>
</html>
bgcolor & background
背景颜色以及背景图片
bgcolor="color"
background="文件路径"
a
超链接
href 链接的目标 URL
<a href="http://www.baidu.com"></a>
链接到本地的某个资源
<a href="本地文件的相对路径或绝对路径"></a>
图片做超链接
<a href=""><img/></a>
<target属性：在何处打开目标 URL
_blank : 新窗口
_self ： 当前窗口（默认就是这种方式。）
_top ： 顶级窗口
_parent ： 父窗口></target属性：在何处打开目标>
栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接实例</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<a href="本地URL">本地</a>
<a href="https://www.google.cn//">
<img src="本地img路径" width="x_px"/>
</a>
<a href="https://www.google.cn//" target="_self">
<img src="本地img路径" width="x_px"/>
</a>
</body>
</html>
列表
列表
type属性
有序列表
1、A、a、I、i、I（阿拉伯数字）
无序列表
circle、square、disc
ol
<!--有序列表-->
<ol type="I">
<li>水果
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
</li>
<li>饮料
<ol>
<li>矿泉水</li>
<li>可乐</li>
</ol>
</li>
<li>美食</li>
</ol>
ul
<!--无序列表-->
<ul type="circle">
<li>中国
<ul type="square">
<li>河南省
<ul type="disc">
<li>南阳市</li>
<li>信阳市</li>
<li>濮阳市</li>
<li>安阳市</li>
</ul>
</li>
<li>河北省</li>
<li>山东省</li>
</ul>
</li>
<li>俄罗斯</li>
<li>越南</li>
</ul>
input
<type属性：
button 按钮
checkbox
date
datetime
datetime-local
email
file 文件上传专用
hidden 隐藏对用户不可见但实际存在
image
month
number
password 密码框
radio
range
reset
submit
text 文本框 maxlength 设置文本框中可输入的字符数量
time
url
week
></type属性：>
<value属性：
对于按钮、重置按钮和确认按钮：定义按钮上的文本。
对于图像按钮：定义传递向某个脚本的此域的符号结果。
对于复选框和单选按钮：定义 input 元素被点击时的结果。
对于隐藏域、密码域以及文本域：定义元素的默认值。
注释：不能与 type="file" 一同使用。
注释：与 type="checkbox" 和 type="radio" 一同使用时，此元素是必需的。></value属性：>
form（***）
表单用来收集用户信息。表单展示给用户之后，用户填写表单，通过点击提交按钮提交数据给服务器端。
<--form的属性
<action属性：
action属性用来定义一个 URL。当点击提交按钮时，向这个 URL 发送数据。></action属性：>
<method属性：
用于向 action URL 发送数据的 HTTP 方法。默认是 get。
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上。></method属性：>
<target属性：
在何处打开目标 URL。></target属性：>
<readonly和disabled
相同点：都是只读不能修改。
readonly可以提交数据给服务器
disabled数据不会提交给服务器（即使有name属性）></readonly和disabled>
画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的功能。
对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息。
码字不易，少男叹气，进阶的小尽欢，希望可以帮助到像我一样的小白们，最后别忘啦支持一下博主哦，求三连！❤️❤️❤️
