一、前言
HTML,全称“Hyper Text Markup Language”，即超文本标记语言，是一种用于制作网页的描述性语言。
什么是超文本？在这门语言中可以加入图片、声音、动画、多媒体等内容，超出了传统意义上文本的限制，还可以从一个文件链接到另一个文件。在web开发中，HTML负责结构的编写。
二、基础语法
1.标签种类
所有的标签都需要写在<>里，且大部分是成对出现的，如<html><\html>、<body></body>等。像这样成对出现，即有开始符号和结束符号的标签称为“一般标签” 。相对地，HTML还有另一种标签，称为“自闭合标签”，其特征为只有开始符合没有结束符号，如<br/>,<hr/>。
2.标签关系
标签与标签之间存在包含关系和并列关系，包含关系是在标签中嵌套了另一个标签，形成“大肠包小肠”的既视感，而在并列关系中，两个标签相互独立，所处位置平等。
包含关系：
<head>
<title> </title>
</head>
并列关系：
<head> </head>
<body> </body>3.基本标签
（1）HTML标签
HTML标签是页面中最大的标签，整个网页从<html>开始，到</html>结束，这其中包含了大量其他标签，因此HTML标签也被称为根标签。
（2）head标签
head标签，顾名思义就是“头”的意思，它所代表的是网页头部的内容，这些内容通常在浏览器中是不可见的。head标签拥有内部标签，包括<title>、<meta>等，其中需要注意的是，在head标签中，我们必须设置title标签。关于内部标签的具体介绍在下文中使用到了再进行阐述。
（3）body标签
body标签定义了网页的所有需要显示内容，也就是在浏览器中可见的内容。
通过对上述基本结构标签的使用，可以让浏览器显示出基本的文字内容，示例代码如下：
<html>
<head>
<title>学习html</title>
</head>
<body>
赶紧爬去学习
</body>
</html>运行代码后，我们就能在浏览器中得到一个极其简单的网页：
4.段落和文字标签
（1）标题标签
HTML一共有六级标题，即<h1>—<h6>,其中<h1>为一级标题，在显示效果上字体最大、颜色最重，<h6>为六级标题,字体最小、颜色最浅。
通过下面一段代码我们就能观察到六级代码的效果:
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<h1>我不想学习</h1>
<h2>我不想学习</h2>
<h3>我不想学习</h3>
<h4>我不想学习</h4>
<h5>我不想学习</h5>
<h6>我不想学习</h6>
</body>
</html>其中:
- <!DOCTYPE html>声明为HTML5文档
- <meta charset = 'utf-8'>定义了网页编码格式为utf-8
效果如下：
（2）段落标签
段落标签<p>可以将网页划分成若干个段落。简单写一段代码看看效果:
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<p>我真的很不想学习啊呜呜呜嘤嘤嘤！</p>
<p>再重复一遍:老子不想学了。</p>
摆吗？
开摆！
</body>
</html>运行上述代码后得到的结果如下：
通过观察发现：
- 使用段落标签的文本会根据浏览器的窗口大小进行自动换换行。
- 段落和段落之间存在空隙
（3）换行标签
换行标签<br>与前面讲的标签不同，它只需要写一次，也就是我们之前在标签种类里提到的自闭和标签，只需要开始标志，不用写结束标志。它的作用是打断强制换行。
在上一端代码中加上换行标签，看看效果如何：
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<p>我真的很不想学习啊呜呜呜嘤嘤嘤！</p>
<p>再重复一遍:老子不想学了。</p>
摆吗？<br>
开摆！
</body>
</html>运行上述代码后，结果如下图：
通过比较可以发现：换行标签和段落标签不同，会另起一行但不会在其中插入间隔。
（4）文本格式化标签
| 标签 | 语义 | 效果说明 |
|---|---|---|
| <strong>(<b>) | 加强(加粗) | 字体加粗 |
| <em>（<i>） | 强调 | 字体倾斜 |
| <ins>(<u>) | 下划线 | 字体下方出现下划线 |
| <del>(<s>) | 删除 | 字体中间出现删除线 |
| <sup> | 上标 | \ |
| <sub> | 下标 | \ |
| <hr> | 水平线 | \ |
我们使用一下这些标签，看看都是什么效果。
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<p>1.这是strong的效果:我想<strong>开摆</strong></p>
<p>2.这是em的效果:我想<em>开摆</em></p>
<p>3.这是ins的效果:我想<ins>开摆</ins></p>
<p>4.这是del的效果:我想<del>开摆</del></p>
<p>5.这是sup的效果:我想<sup>开摆<sup></p>
<p>6.这是sub的效果:我想<sub>开摆</sub></p>
</body>
</html>运行上述代码后，我们可以看出各个文本格式化标签的作用了:
（5）布局标签
<div>和<span>标签用于布局，它们没有具体的语义，作用类似于一个盒子，用来装内容，不过二者存在以下区别:
- <div></div> 独占一行内容，也就是一行只能放置一个<div>
- <span></span> 一行内可以多次放置
这里介绍一下HTML的元素。元素按照在浏览器中的表现形式分为块元素和行内元素两种。
块元素的特点是：
- （1）单独占用一行，不能和其他元素共用一行。
- （2）内部可以包含其他快元素和行元素、
常见的块元素：h1-h6、p、div等。
行内元素的特点是：
- （1） 可以与其他行内元素位于同一行。
- （2）行内元素可以包含其他行内元素，但不可以包含块元素。
常见的行内元素：strong、em、span等。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<p>1.这是strong的效果:我想<strong>开摆</strong></p>
<p>2.这是em的效果:我想<em>开摆</em></p>
<p>3.这是ins的效果:我想<ins>开摆</ins></p>
<p>4.这是del的效果:我想<del>开摆</del></p>
<p>5.这是sup的效果:我想<sup>开摆<sup></p>
<p>6.这是sub的效果:我想<sub>开摆</sub></p>
<div>我真的可以摆吗?</div>
<div>我还不能摆！</div>
<span>我真的可以摆吗？</span>
<span>我还不能摆！</span>
</body>
</html>运行后效果如下：
（6) 空格
HTML提供了5种空格实体，它们拥有不同的宽度，非断行空格是常规空格的宽度，可运行与所有主流浏览器。其他几种空格在不同浏览器中宽度各异。
| 表达形式 | 名称 | 宽度 |
|---|---|---|
|  ； | 不换行空格 | 1（按下space的宽度） |
|   | 半角空格 | 1/2个中文宽度 |
|   | 全角空格 | 1个中文宽度 |
|   | 窄空格 | em宽度的1/6 |
| &zwnj | 零宽不连字 | \ |
| &zwj | 零宽连字 | \ |
（7）注释标签
和其他语言一样，怎么可以没有注释呢！HTML里有注释标签,格式如下：
<!--所需要注释的内容-->
5.图像标签与路径
图像标签<img>，用于定义HTML页面中的图像，是一种自闭合标签。使用<img>标签需要掌握以下属性:
| 属性 | 内容 | 说明 |
|---|---|---|
| src | 图片地址 | 必须属性 |
| alt | 文本 | 当图片无法打开时显示的替换文本 |
| title | 文本 | 鼠标放置于图片上显示的提示文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
需要注意的是：src是<img>的必须属性，用于指定图像文件的路径和文件名。
路径分为绝对路径和相对路径。绝对路径指的是图片在电脑中的完整路径，如：
F:\图片\640.webp
相对路径指的是图片相对当前页面的位置
img\vegetabledog.webp
我的html文件和存放图片的img文件位于同一目录下，因此采用相对路径进行访问。若img在html的上级目录中，可以采用“..\”的方式访问上一级目录。实际上，在真正的网站开发中，对于图片或者引用文件的路径，相对路径的使用率几乎是100%，这是因为如果采用绝对路径，网站的文件一旦移动，所有的路径可能会失效。
通过设置图片标签和路径，我们就能在网页上显示图片了：
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<p>1.这是strong的效果:我想<strong>开摆</strong></p>
<p>2.这是em的效果:我想<em>开摆</em></p>
<p>3.这是ins的效果:我想<ins>开摆</ins></p>
<p>4.这是del的效果:我想<del>开摆</del></p>
<p>5.这是sup的效果:我想<sup>开摆<sup></p>
<p>6.这是sub的效果:我想<sub>开摆</sub></p>
<div>我真的可以摆吗?</div>
<div>我还不能摆！</div>
<span>我真的可以摆吗？</span>
<span>我还不能摆！</span><br>
<img src = "img\vegetabledog.webp" alt = "图片失踪了!" title = "菜狗" width = "200" height = "200"><br>
</body>
</html>6.超链接标签
HTML链接是通过<a>来定义的。
<a>链接的使用语法如下:
<a href="链接地址" target="目标窗口的打开方式">
| target属性 | 作用 |
|---|---|
| _self | 默认方式，即在当前窗口打开链接 |
| _blank | 在新窗口打开链接 |
链接的种类可分为以下几种：
（1）外部链接
链接地址采用特定格式：http://www....
（2）内部链接
内部链接是内部页面之间的相互链接，在连接地址直接填写html文件的文件名即可跳转。
（3）下载链接
<a href="压缩包的名字">链接名字</a>
（4）网页元素链接
<a href="链接地址"><img src="图片地址"></a>
点击图片即可实现跳转。
（5）锚点链接
锚点链接，是一种点击后会跳到当前页面的某一部分的一种标签，通常用于长网页的内容查找和定位。
在href属性中，将属性值设置为#id的形式。
<a href="#six">老六</a>
同时在锚点的目标位置标签中，添加一个id属性
<h3 id="six">我是老六</h3>
让我们来试试这些链接标签的作用:
<!DOCTYPE html>
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<h1 id="six">我是菜狗</h1><hr>
<img src = "img\vegetabledog.webp" alt = "图片失踪了!" title = "菜狗" width = "200" height = "200"><hr>
<h3>1.什么是菜狗？</h3>
<p>
这是外部链接：
<a href="https://baike.baidu.com/item/%E8%8F%9C%E7%8B%97/59137544">为什么不问问神奇海螺</a>
</p>
<h3>2.什么？你不想点上面那个链接</h3>
<p>
这是内部链接:
<a href='vegetabledog.html' target="_blank">那就点这个吧！</a>
</p>
<h3>3.我想要菜狗的图!</h3>
<p>
这是下载链接:
<a href="img\vegetabledog.zip">点我下载哟</a>
</p>
<h3>4.我还想要更多菜狗的图！</h3>
<p>
这是网页元素链接:点击下方的图片<br>
<a href="https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&dyTabStr=MCwyLDYsMyw0LDEsNSw3LDgsOQ%3D%3D&word=%E8%8F%9C%E7%8B%97" target="_blank"><img src="https://img1.baidu.com/it/u=2831768726,3289750099&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="你小子是不是没联网" wedith="200" height="200"></a>
</p>
<h3>5.玛卡巴卡之歌</h3>
<p>
单纯为了测试后面的锚点链接哈哈哈哈！<br>
玛卡巴卡<br>
阿卡哇卡<br>
米卡玛卡_<br>
玛卡巴卡阿巴雅卡<br>
伊卡阿卡噢<br>
哈姆达姆阿卡_<br>
咿呀呦<br>
玛卡巴卡阿卡哇卡米卡_<br>
玛卡巴卡<br>
阿卡哇卡<br>
米卡玛卡_<br>
玛卡巴卡阿巴雅卡<br>
伊卡阿卡噢<br>
哈姆达姆阿卡_<br>
咿呀呦<br>
玛卡巴卡阿卡哇卡米卡_<br>
当你度过寂静黑夜<br>
黎明就在眼前<br>
每次狂风暴雨<br>
都会出现彩虹之间<br>
抛开心底那片尘埃<br>
像颗粒样飘渺<br>
散尽一切释怀<br>
飞向心中的未来<br>
你像是在我心里的玛卡巴卡<br>
让我这颗幼小的心有所期待<br>
流星划过坠落在你的星海<br>
我们一起念起咒语玛卡巴卡<br>
曾经的花园宝宝现已经长大<br>
默默承载一起陪我度过每一个冬夏<br>
当你度过寂静黑夜<br>
黎明就在眼前<br>
每次狂风暴雨<br>
都会出现彩虹之间<br>
抛开心底那片尘埃<br>
像颗粒样飘渺<br>
散尽一切释怀<br>
飞向心中的未来<br>
你像是在我心里的玛卡巴卡<br>
让我这颗幼小的心有所期待<br>
流星划过坠落在你的星海<br>
我们一起念起咒语玛卡巴卡<br>
曾经的花园宝宝现已经长大<br>
默默承载一起陪我度过每一个冬夏<br>
你像是在我心里的玛卡巴卡<br>
让我这颗幼小的心有所期待<br>
流星划过坠落在你的星海<br>
我们一起念起咒语玛卡巴卡<br>
曾经的花园宝宝现已经长大<br>
默默承载一起陪我度过每一个冬夏
</p>
<h3>6.带我回去见菜狗吧！</h3>
<p>
这是锚点链接:
<a href="#six">菜狗我回来了</a>
</p>
</body>
</html>依次测试链接。为了确保代码正常运行，首先需要保证图片的相对地址正确，图片存在html文件的上一级目录的image文件夹中，也按照自己存储的路径进行修改。
运行后将会得到这样的界面:
点击外部链接后，浏览器会打开新的百度页面。在测试内部链接时，需要在html文件的同一目录下放另一个html文件，并命名为vegetabledog.html。
<html>
<head>
<meta charset = 'utf-8'>
<title>菜狗简介</title>
</head>
<body>
<h1>菜狗小常识</h1>
<hr>
<h3>菜狗的意思是:</h3>
<p> 1、你玩游戏玩得太烂，技术太菜、太渣了。 </p>
<p> 2、也有笨的意思，因为队友带你带不动，还坑队友。</p>
<hr>
</body>
</html>点击内部链接后，浏览器会在一个新的页面上打开另一个html页面。
在测试下载链接时，首先要在设定的下载路径下准备好下载的压缩包，此时点击该链接，浏览器会自动下载压缩包。点击网页元素链接，也就是点击图片，浏览器会打开新的页面并跳转到百度的图片页面。点击最后的锚点链接，浏览器又会根据设定的id返回页面的第一个标题。
7.表格标签
（1）表格基本标签
| 标签 | 语义 |
|---|---|
| table | 表格 |
| tr | 表格行（table row） |
| td | 表格单元格（table data cell） |
根据以上基本的表格标签，我们可以搭建出基本的表格框架：
<table>
<tr><!表示一个表格行>
<td><!表示一各表格单元格></td>
<!..........可以继续添加表格单元格>
</tr>
<!...可以继续添加表格行>
</table>
在一个<table>中<tr>和<td>标签均可以添加多个。
对于表格标签<table>有相应的属性:
表6 表格属性
属性名 属性值 说明 align left,center,right 表格元素的对齐方式 border 0/1 表格是否拥有边框 cellpadding 像素值 文字距离边框的距离 width 像素值 规定表格的宽度若不设置表格的border属性，则默认为没有边框。
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
</html>运行上述代码后，我们可以观察到，产生的表格不带边框:
当我们赋予表格border属性为1后，表格就产生了边框:
代码:
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
</html>运行效果:
（2）表格结构标签
| 标签 | 说明 |
|---|---|
| caption | 表格标题 |
| thead | 表头 |
| tbody | 表身 |
| tfoot | 表足 |
| th | 表头单元格 |
使用上述标签，我们就可以得到完整的表格结构:
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<table border="1">
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表格单元格1</td>
<td>表格单元格2</td>
</tr>
<tr>
<td>表格单元格1</td>
<td>表格单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>表格单元格1</td>
<td>表格单元格2</td>
</tr>
</tfoot>
</table>
</body>
</html>运行后可得到下图所示的表格:
可以发现标头单元格<th>所属的内容会居中且加粗。
（3）合并单元格
合并单元格需要使用<td>标签的rowspan、colspan属性，顾名思义，合并行使用rowspan属性，合并列使用colspan属性。
我们以合并行为例：
<td rowspan="合并的行数">
运行下方的代码:
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<table border="1">
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td colspan="2" align="center">合并单元格1</td>
</tr>
<tr>
<td rowspan="2" align="center">合并单元格2</td>
<td>表格单元格2</td>
</tr>
<tr>
<td>表格单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>表格单元格1</td>
<td>表格单元格2</td>
</tr>
</tfoot>
</table>
</body>
</html>可以得到合并单元格的效果:
8.列表标签
HTML有三种列表：有序列表、无序列表自定义列表。
（1）有序列表
列表中的元素存在顺序之分，具体使用格式如下:
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
........
</ol>
（2）无序列表
列表元素无顺序之分。
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
...
</ul>
无论是有序列表<ol>、还是无序列表<ul>其中只能嵌套<li>，不能包含其他标签。
（3）自定义列表
<dl>定义自定义列表
<dt>定义列名称
<dd>定义列中元素名称
综合使用三种列表标签:
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<h1>列表</h1><hr>
<h3>有序列表:</h3>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol><hr>
<h3>无序列表:</h3>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul><hr>
<h3>自定义列表</h3>
<dl>
<dt>列表1</dt>
<dd>列表项1</dd>
<dd>列表项2</dd>
<dd>列表项3</dd>
<dt>列表2</dt>
<dd>列表项1</dd>
<dd>列表项2</dd>
<dd>列表项3</dd>
</dl>
</body>
</html>运行效果如下:
9.表单标签
在HTML中，表单由三部分组成：表单域、表单控件、提示信息
（1）表单域
表单域定义了表单元素存在的区域,其使用格式如下:
<form action="url地址" method="提交方式" name="表单域名称">
表单控件
</form>
在上面的使用中，提到了表单的三种属性：
| 属性名 | 属性值 | 说明 |
|---|---|---|
| action | url地址 | 指定接收并处理表单数据的程序地址 |
| method | get/post | 提交方式 |
| name | 名称 | 指定该表单的名称 |
（2）表单控件
大部分表单都是用<input>标签完成的。
<input type="表单类型"/> 根据type的不同，表单在浏览器显示的效果不同
type的属性值主要有一下几种:
| type属性值 | 说明 |
|---|---|
| text | 单行可输入文本框 |
| password | 定义密码字段（字段被掩码） |
| button | 定义可点击按钮 |
| reset | 定义重置按钮（清楚表单中的所有数据） |
| image | 定义图像形式的提交按钮 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| hidden | 定义隐藏字段 |
| file | 定义输入字段和文件上传 |
| submit | 定义提交按钮，将表单数据提交给后台 |
除了type属性外，<input>还有几个常用的属性:
| 属性名 | 说明 |
|---|---|
| name | 定义input元素的名字 |
| value | 定义元素的默认值 |
| checked | 定义默认选择 |
| maxlength | 规定输入字段的最大长度（正整数） |
（3）其他常用表单标签
<label>标签：
<label>标签为input元素定义的标注，绑定于一个表单元素，当点击<label>标签内的文本时，浏览器会自动将光标转到对应的表单上。
<select>与<option>标签：
<select>与<option>标签需配合使用，用于制作下拉表单，具体使用语法如下:
<select multipe="multipe" size="可见列表项的数目">
<option value="选项值" selected=“选项默认值”>选项显示内容</option>
<option value="选项值" selected=“选项默认值”>选项显示内容</option>
...
</select>
<textarea>文本域：
用于多行本文框，使用语法如下:
<textarea rows="行数" col="列数">
多行文本框内容
</textarea>
通过对上述标签的使用，我们可以搭建出简单的可选注册页面：
<html>
<head>
<meta charset = 'utf-8'>
<title>学习html</title>
</head>
<body>
<form>
<h3>菜狗注册界面</h3>
<table>
<tr>
<td>用户名<input type="text" value="请输入用户名"></td>
</tr>
<tr>
<td>密码 <input type="password" value="请输入密码"></td>
</tr>
<tr>
<td>性别 
<input type="radio" name="sex" checked="checked" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
</td>
</tr>
<tr>
<td>
爱好:
<input type="checkbox">篮球
<input type="checkbox">摄影
<input type="checkbox">书法
<input type="checkbox">动漫
<input type="checkbox">其他
</td>
</tr>
<tr>
<td>
年龄：<select>
<option><10</option>
<option>10-18</option>
<option selected="selected">19-30</option>
<option>30-40</option>
<option>40-50</option>
<option>50-60</option>
<option>>60</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</body>
</html>运行上述代码，可得到如下页面:
三、总结
以上就是个人参考各位b站大佬博客所总结的学习笔记。累死我了.....开摆!
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
