HTML基础知识点
作者：互联网
1、HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言
(markup language)
HTML 使用标记标签来描述网页
2、HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的 标签对中的第一个标签是开始标签，第二个标签是结束标签
HTML存在自结束标签，即不写自结束的 /
3、HTML基本结构
<!--<!DOCTYPE html>为HTML5的文档声明（HTML的注释可以用快捷键Ctrl+/生成）（注意：注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要）-->
<!DOCTYPE html>
<!--<html lang="en">是告诉浏览器你写的是英文网站，运行时会弹出“是否翻译”，若不想弹出则应该改为<html lang="zh">-->
<html lang="ch">
<head>
<!-- <meta charset="UTF-8">是设置字符集与编辑器保持一致，若编码解码的字符集不一致将会出现乱码问题 -->
<meta charset="UTF-8">
<title>Hard Coder</title>
</head>
<!-- VSCode对齐快捷键为:Shift + Alt + F-->
<!--HTML样式 的background-color属性为元素定义了背景颜色;text-align 属性规定了元素中文本的水平对齐方式-->
<body style="background-color:yellow">
<!--HTML标题标签是通过 <h1> - <h6> 标签进行定义的，重要性依次递减，一般只用到h1-h3 -->
<!-- hgroup标签将h标题分组 -->
<hgroup>
<h1 style="background-color:red;text-align: center">This is heading 1</h1>
<h2 style="background-color:red;text-align: center">This is heading 2</h2>
<h3 style="background-color:red;text-align: center">This is heading 3</h3>
<h4 style="background-color:red;text-align: center">This is heading 4</h4>
<h5 style="background-color:red;text-align: center">This is heading 5</h5>
<h6 style="background-color:red;text-align: center">This is heading 6</h6>
</hgroup>
<!--段落标签，用p表示，是一个块元素（即独占一行） -->
<p style="background-color:green">这是段落1。</p>
<!-- <hr /> 标签在 HTML 页面中创建水平线 -->
<hr />
<p style="background-color:green">这是段落2。</p>
<hr />
<p style="background-color:green">这是段落3。</p>
<hr />
<!--<br /> 标签用于换行，<br /> 元素是一个空的 HTML元素 -->
<p style="background-color:green">这是段落4。<br />这是段落5。</p>
<!-- <b>定义粗体文本 -->
<b>This text is bold</b>
<br />
<!-- <strong>定义加重语气 -->
<strong>This text is strong</strong>
<br />
<!-- <em>定义着重文字 -->
<em>This text is emphasized</em>
<br />
<!-- <big>定义 大号字-->
<big>This text is emphasized</big>
<br />
<!-- <small>定义 小号字 -->
<small>This text is emphasized</small>
<br />
这是长的引用：
<!--<blockquote>定义长的引用；浏览器通常会对 <blockquote> 元素进行缩进处理 -->
<blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
<!-- <q>定义短的引用；浏览器通常会为 <q> 元素包围引号。 -->
这是短的引用：
<q>
这是短的引用。
</q>
</body>
</html>
显示效果：
4、HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=“value”。属性总是在 HTML 元素的开始标签中规定。
属性值应该始终被包括在引号内。双引号是最常用的，也可以使用单引号。在某些个别的情况下，比如属性值本身就含有双引号，则必须使用单引号。
HTML 标签参考手册
5、HTML 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
我们通过使用 <a> 标签在 HTML 中创建链接。
两种使用
<a>标签的方式：通过使用 href 属性 - 创建指向另一个文档的链接；
通过使用 name 属性 - 创建文档内的书签。
<!--在VSCode中新建HTML页面时可以先输入!再tab键，快速生成HTML代码模板 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Coder</title>
</head>
<body>
<!-- href表示目标跳转路径
值可以是外部网站地址，也可以是内部页面地址
#表示回到顶部
使用id属性（注意id为唯一属性，一个页面内的所有id不能一样，以字母开头且区分大小写，靠前的元素优先生效）
可以创建直接跳至页面的某个小节 ，无需滚动寻找信息
-->
<a href="https://www.baidu.com/">超链接1</a>
<br />
<!-- 当我们需要跳转一个服务器内部页面时，一般使用相对路径
且相对路径一般以./ 或 ../开头，其中./可以省略不写表示当前文件所在的目录
../表示当前文件素所在目录的上一级目录
当我们不确定相对路径时可以选中文件右键选择"复制相对路径"-->
<a href="./practice.html">超链接2</a>
<br />
<a href="Test\test1.html">超链接3</a>
<br />
<!-- target属性为可选值
_self为默认值(一般不写)表示在当前页面打开
_blank表示在新的页面打开 -->
<a href="http://www.w3school.com.cn/" target="_blank">超链接4</a>
<br /><br />
<!-- 链接到同一个页面的不同位置 -->
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<!-- 注意此处给Chapter 4定义一个唯一id -->
<h2><a id="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<a href="#">回到顶部</a>
</body>
</html>
效果展示：
6、在 HTML 中，图像由 <img> 标签定义。
<img> 是空标签，即它只包含属性，并且没有闭合标签。（img 属于替换元素，属于行内元素和替换元素之间的一种元素，即img这段代码被具体的东西给替换了）
要在页面上显示图像，需要使用源属性（src），src 指 "source"且源属性的值是图像的 URL 地址。URL 指存储图像的位置。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当浏览器无法载入图像时，替换文本属性可告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。请注意，如果把鼠标指针移动到图像上，大多数浏览器会显示 “alt” 文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Coder</title>
</head>
<!--body的属性background可以设置图像背景（gif 和 jpg 文件均可用作 HTML 背景，且如果图像小于页面，图像会进行重复） -->
<body background="huawen.png">
<!-- <img>的属性包括 src、alt、width（单位为像素px）和height（单位为像素px）
（注意：若只修改了width或height一个，图片会被等比例缩放；
若同时指定了一个个图片的width和height就不会等比例变化;
且各个属性之间不要用逗号隔开
-->
<!-- 此处的src放的是相对路径（我们可以直接把需要展示的图像拖进项目中） -->
<img src="wiliuqi.jpg" width=500px>
<br />
<img src="wuliuiq.gif" height=200px>
<br />
<!-- 将服务器的图片显示到网页中 -->
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
<!-- 在文字中排列图像（默认对齐方式为底部对齐） -->
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src="eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src="eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src="eg_cute.gif" align="top"> 在文本中</p>
<!--使图片浮动至段落的左边或右边-->
<p>
<img src ="eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>
显示效果：
7、HTML 创建表格，表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如果不定义边框属性，表格将不显示边框。表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Coder</title>
</head>
<body>
<h4>这个表格没有边框：</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<!-- border 属性规定规定围绕表格的边框的宽度。
border 属性会为每个单元格应用边框，并用边框围绕表格
-->
<h4>水平表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>性别</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>123 456 789</td>
<td>男</td>
</tr>
</table>
<h4>垂直表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>123 456 789</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
</tr>
</table>
<!--<caption>标签定义表格标题 -->
<h4>这个表格有一个标题和粗边框：</h4>
<table border="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<!--th的属性colspan表示单元格横向跨越的列数，colspan=2即合并两列
th的属性rowspan表示单元格纵向跨越的行数，rowspan=2即合并两行
-->
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>123 456 789</td>
<td>123 456 789</td>
</tr>
</table>
<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>123 456 789</td>
</tr>
<tr>
<td>123 456 789</td>
</tr>
</table>
<!-- table标签的属性bgcolor表示表格背景颜色
注意td标签也有这个属性 -->
<h4>背景颜色：</h4>
<table border="1" bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<!-- table标签的属性background表示表格背景图像
注意td标签也有这个属性-->
<h4>背景图像：</h4>
<table border="1" background="huawen.png">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<!-- th和td标签均有align属性设置左右对齐方式 -->
<table width="400" border="1">
<tr>
<th align="left">消费项目</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">100</td>
<td align="right">100</td>
</tr>
<tr>
<td align="left">化妆品</td>
<td align="right">300</td>
<td align="right">300</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">500</td>
<td align="right">500</td>
</tr>
<tr>
<th align="left">总计</th>
<th align="right">900</th>
<th align="right">900</th>
</tr>
</table>
</body>
</html>
显示效果：
8、HTML 支持有序、无序和定义列表。
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd>。
注意：列表之间可以相互嵌套。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Coder</title>
</head>
<body>
<!-- ul标签的type属性值有三个：disc（默认值实心圆）；circle（空心圆）；square（实心方块） -->
<h4>Disc 项目符号列表：</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Circle 项目符号列表：</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Square 项目符号列表：</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<!--ol标签的type属性值有四个：十进制数字（默认）；小写字母顺序列表；大写字母顺序列表；小写罗马数字和大写罗马数字 -->
<h4>数字列表：</h4>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>大写罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
显示效果：
8、内联框架的iframe 用于在网页内显示网页，其中属性src指定要引入的网页路径，frameborder 只有0/1 两个值分别表示显示与不显示边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Coder</title>
</head>
<body>
<iframe src="https://www.w3school.com.cn"
frameborder="0"
width=800
height=400>
</iframe>
</body>
</html>
效果展示：
9、HTML的语义标签
10、HTML 字符实体（相当于进行转义）
HTML实体符号参考手册
11、HTML媒体
WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果需要未经压缩的声音（音乐或演讲），应该使用 WAVE 格式。
MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hard Coder</title>
</head>
<body>
<!-- audio标签用来向一个页面引入一个外部音频文件，默认情况下不允许用户自己控制播放和停止
属性为controls（表示是否允许用户控制播放）
autoplay（表示音频文件是否自动播放，若设置autoplay则音乐在打开页面时会自动播放
但是目前大部分浏览器都不会对音乐进行播放
loop（表示音乐是否循环播放-->
<audio controls>
<source src="还是会想你 .mp3" >
</audio>
<!-- video标签用来向一个页面引入一个外部视频文件
属性与audio相同-->
<video controls>
<source src="敬礼.mp4">
</video>
</body>
</html>
效果显示：
12、HTML表单用于收集用户输入。<form> 元素定义 HTML 表单，表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。
表单元素语法：
<input type="text"（input元素类型）name="fname"（input元素名称） value="text"（input元素的值）/>
文本框-语法：
<input type="text"(文本框) name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />
密码框-语法：
<input type="password "(密码框) name="pass"(密码框的名称) size="20"(密码框的长度) />
单选按钮-语法：
<input name="gen" type="radio"(单选按钮框) value="男"(值) checked(单选按钮选中状态) />男
<input name="gen" type="radio" value="女" />女
复选框-语法：
<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏
列表框-语法：
<select(列表框) name="列表名称" size="行数">
<option value="选项的值" selected="selected"(默认选中项)>…</option >
<option(选项) value="选项的值">…</option >
</select>
按钮-语法：
<input type="reset" (重置按钮) name="butReset" value="reset按钮"(按钮上显示的文字)>
<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
<input type="button"(普通按钮) name="butButton" value="button按钮"/>
多行文本域-语法：
<textarea(多行文本域) name="showText" cols="x"(显示的列数) rows="y"(显示的行数)>文本内容 </textarea >
文件域-语法：
<form action="" method="post" enctype="multipart/form-data"（表单编码属性）>
<p><input type="file"(文件域) name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
邮箱-语法：
<p>邮箱:<input type="email"（邮箱） name="email"/></p>
<input type="submit"/>
网址-语法：
<p>请输入你的网址:<input type="url"（网址） name="userUrl"/></p>
<input type="submit"/>
数字-语法：
<p>请输入数字:<input type="number"(数字) name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>
<input type="submit"/>
滑块-语法：
<p>请输入数字:<input type="range"(滑块) name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>
<input type="submit"/>
搜索框-语法：
<p>请输入搜索的关键词:<input type="search"(搜索框) name="sousuo"/></p>
<input type="submit"/>
标签：Chapter,知识点,ba,标签,基础,HTML,explains,bla 来源： https://blog.csdn.net/qq_44111805/article/details/122487740