1. 认识html
html是超文本标签语言，其中超文本代表它不仅仅只有文本、还可能会有视频、图片、音频等、标签语言代表它是由一个一个标签组成的语言。
html中有双标签和单标签。
单标签：由一个标签组成。比如：<hr>、<br>
双标签：由开始标签和结束标签组成。比如：<h1></h1>
<h1>表示开始标签
</h1>表示结束标签
举一个例子这是一个简单的html格式：
1 <!-- 声明html5版本 --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <!-- html 是超文本标签语言 --> 5 <!-- 超文本：代表不仅仅有文字，图片，视频 标签语言：代表着html由一个一个标签记录 --> 6 <head> 7 <!-- 源标签 用来定义html基础内容，比如编码格式等 --> 8 <!-- 其中UTF-8是万国码，是所有国家通用的源码格式 --> 9 <meta charset="UTF-8"> 10 <!-- 页面的标题 --> 11 <title>Document</title> 12 </head> 13 <body> 14 <!-- 正文部分 --> 15 </body> 16 </html>
2. 常见的标签
2.1 标题标签
在html中标题标签为双标签，标题标签在html中分为h1、h2、h3、h4、h5、h6。
它们的作用是：用来标题的。
特点：
①独占一行、字体变粗变大
②随着标签的下标变大、内容变小
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <h1>这是一个h1标签</h1> 9 <h2>这是一个h2标签</h2> 10 <h3>这是一个h3标签</h3> 11 <h4>这是一个h4标签</h4> 12 <h5>这是一个h5标签</h5> 13 <h6>这是一个h6标签</h6> 14 </body> 15 </html>
结果：
2.2 br标签
在html中br标签为单标签，<br>元素在文本中生成一个换行符号
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>这是一个<br>h1标签</h1>
</body>
</html>
结果：
注意：
在html文本中无论空多少个空格，在编译中只会存在一个英文字符的空格，所以当我们需要输出多个空格时，需要运用特殊符号(实体符号)来体现出来。
2.3 html常用的特殊符号
由于html中部分符号是具有特殊意义的，当你想在内容中出现这些特殊符号是需要进行符号实体来体现的。
举个例子：
注意：
在html中一个空格是占用一个字符，而中文字符是占两个字符的，所以当我们想首行缩进时，需要输出4个 来实现。
2.4 hr标签
在html中hr标签为单标签，hr标签是用来实现画出水平分割线的作用。
hr标签的实现分为两部分，一部分是实现换行操作，第二部分是画出水平分割线。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head><script type="module" src=""></script> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <h1>这是一个<hr>h1标签</h1> 9 </body> 10 </html>
结果：
2.5 p标签
在html中p标签为双标签，p标签是段落标签用来标记内容是一个段落。
段落与段落之间会存在一段间隔。
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <script type="module" src=""></script> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quo vel illum, 12 nihil nobis impedit maxime laboriosam soluta cum a doloremque saepe beatae, 13 repudiandae pariatur omnis?Inventore fuga consectetur quia! 14 Quos aliquam temporibus accusamus iure, modi, minima, 15 laborum eius sit beatae reiciendis ut eos exercitationem corporis illo magnam delectus 16 quibusdamexcepturi deserunt est rem! Ad similique nam voluptatem distinctio doloremque.</p> 17 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 18 Quaerat soluta vero at recusandae officia dolorem nam fugiat dolore veniam! 19 Aliquam consectetur adipisci harum deserunt dolore voluptates 20 ipsam voluptas repellendus tempora.</p> 21 </body> 22 23 </html>
结果：
2.6 img标签
在html中img标签为单标签，img标签的作用是展示一张图片。
img标签有3个属性值：
①src：用来写图片的路径信息
路径分为两种：
(1)相对路径：相对于当前文件目录的位置，直到找到文件为止
举个例子：
①想要找到img中1.webp图片的写法
写法：
src = "./img/1.webp"
②想要找到img中2.webp图片
写法：
src = "../../img/2.webp"
(2)绝对路径：图片在电脑中的绝对位置
举个例子：想要找到img中2.webp图片的写法
写法：
src="D:\java全栈\前端\html基础内容\img\2.webp"
②alt属性：当图片加载失败时，出现的提示
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <script type="module" src=""></script> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <img src="../../img/2.web" alt="图片加载失败"> 12 </body> 13 14 </html>
结果：
③title属性：图片加载成功后，鼠标聚焦后提示的内容
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <script type="module" src=""></script> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <img src="../../img/2.webp" alt="图片加载成功" title="小鸟图片"> 12 </body> 13 14 </html>
结果：
2.7 a标签
在html中a标签是双标签，超链接它有两个作用：页面跳转、描点
①页面跳转：
（1）href属性：跳转的地址
举个例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <script type="module" src=""></script> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <a href="http://www.baidu.com">百度跳转</a> 12 </body> 13 14 </html>
结果：
当点击“百度跳转”时出现的结果：
（2）target属性：声明跳转的方式
分为两种：
①_self：在本页面进行跳转（这是html默认属性）
②_blank：新建一个新的网页，并打开跳转的地址。
举个例子：（展示_blank方式跳转）
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <script type="module" src=""></script> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <a href="http://www.baidu.com" target="_blank">百度跳转</a> 12 </body> 13 14 </html>
结果：
②描点
描点的作用是实现精准的跳转，想要将超链接标签设置为描点，需要设置name属性
举个例子
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <script type="module" src=""></script> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 12 Quibusdam, deserunt veritatis. Modi soluta,repudiandae praesentium a amet 13 sed quidem minus cumque dolorem vel molestias quasi alias officia eos provident ut? 14 Molestiae aut explicabo reiciendis odit earum nemo facere, autem ratione doloremque 15 exercitationem nulla perspiciatis temporibus. Fugit provident nam voluptatum repellendus 16 inventore perferendis incidunt repellat necessitatibus quisquam facere. 17 Exercitationem, laboriosam dolores. 18 Velit, recusandae. Nam dignissimos tenetur voluptatum omnis 19 atque maxime aliquam odit ducimus quas et dolor esse deserunt officiis 20 commodi doloremque distinctio, pariatur quia nulla, eligendi iure! Saepe fugiat molestiae quia! 21 Molestiae, adipisci iure obcaecati qui quia hic vel libero 22 exercitationem dolorum molestias praesentium delectus est neque 23 laborum natus accusamus ipsum quod. Et perspiciatis nemo sapiente, 24 facere accusantium eligendi porro modi. 25 Aut quaerat illo quos, sed similique dignissimos dicta aliquid ullam consequuntur? 26 Aliquam atque architecto sapiente. Ex obcaecati pariatur 27 consequatur nisi est quisquam consequuntur asperiores vel. Porro ipsam rem reprehenderit nulla. 28 Dolor expedita incidunt ad rerum veniam! Nam, minus dolor. 29 Dolore odio aspernatur perspiciatis, quod recusandae maxime unde exercitationem 30 doloribus non est at rem reiciendis quaerat ratione vitae eligendi! Hic, vel? 31 Dolor veritatis sint nobis facere recusandae eveniet aspernatur officia non 32 tempora et tempore architecto alias natus, dolore cum? Pariatur, 33 quam voluptatem soluta libero voluptas temporibus sunt sequi laboriosam fugiat vero. 34 Saepe, iure minima voluptatum officia vel voluptates officiis, 35 soluta magnam, corporis voluptate ut rem sit et vero nisi illo? 36 Sunt et officiis repudiandae fuga. At voluptates earum veniam doloribus quasi. 37 Quaerat aperiam recusandae, error perspiciatis placeat a doloremque 38 voluptatem consequatur quae natus neque exercitationem ullam aspernatur illum 39 consequuntur nostrum dignissimos dolores, id maxime similique laudantium! 40 Quibusdam itaque excepturi dolor? Sed! 41 Quis magnam reprehenderit ducimus! Facere quibusdam et 42 nostrum neque doloremque aliquam quidem velit beatae repudiandae 43 ipsum saepe tempora magni ex dolorum quasi, rem possimus cupiditate illo. 44 Atque possimus ad itaque?</p> 45 <!--这是一个尾部跳转描点--> 46 <a name="a"></a> 47 </body> 48 49 </html>
设置描点后，可以通过超链接标签<a>，去进行跳转。
href的属性：#名字
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <script type="module" src=""></script> 6 <meta charset="UTF-8"> 7 <title>Document</title> 8 9 </head> 10 11 <body> 12 <a href="#a">跳转到段落尾部</a> 13 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 14 Quibusdam, deserunt veritatis. Modi soluta,repudiandae praesentium a amet 15 sed quidem minus cumque dolorem vel molestias quasi alias officia eos provident ut? 16 Molestiae aut explicabo reiciendis odit earum nemo facere, autem ratione doloremque 17 exercitationem nulla perspiciatis temporibus. Fugit provident nam voluptatum repellendus 18 inventore perferendis incidunt repellat necessitatibus quisquam facere. 19 Exercitationem, laboriosam dolores. 20 Velit, recusandae. Nam dignissimos tenetur voluptatum omnis 21 atque maxime aliquam odit ducimus quas et dolor esse deserunt officiis 22 commodi doloremque distinctio, pariatur quia nulla, eligendi iure! Saepe fugiat molestiae quia! 23 Molestiae, adipisci iure obcaecati qui quia hic vel libero 24 exercitationem dolorum molestias praesentium delectus est neque 25 laborum natus accusamus ipsum quod. Et perspiciatis nemo sapiente, 26 facere accusantium eligendi porro modi. 27 Aut quaerat illo quos, sed similique dignissimos dicta aliquid ullam consequuntur? 28 Aliquam atque architecto sapiente. Ex obcaecati pariatur 29 consequatur nisi est quisquam consequuntur asperiores vel. Porro ipsam rem reprehenderit nulla. 30 Dolor expedita incidunt ad rerum veniam! Nam, minus dolor. 31 Dolore odio aspernatur perspiciatis, quod recusandae maxime unde exercitationem 32 doloribus non est at rem reiciendis quaerat ratione vitae eligendi! Hic, vel? 33 Dolor veritatis sint nobis facere recusandae eveniet aspernatur officia non 34 tempora et tempore architecto alias natus, dolore cum? Pariatur, 35 quam voluptatem soluta libero voluptas temporibus sunt sequi laboriosam fugiat vero. 36 Saepe, iure minima voluptatum officia vel voluptates officiis, 37 soluta magnam, corporis voluptate ut rem sit et vero nisi illo? 38 Sunt et officiis repudiandae fuga. At voluptates earum veniam doloribus quasi. 39 Quaerat aperiam recusandae, error perspiciatis placeat a doloremque 40 voluptatem consequatur quae natus neque exercitationem ullam aspernatur illum 41 consequuntur nostrum dignissimos dolores, id maxime similique laudantium! 42 Quibusdam itaque excepturi dolor? Sed! 43 Quis magnam reprehenderit ducimus! Facere quibusdam et 44 nostrum neque doloremque aliquam quidem velit beatae repudiandae 45 ipsum saepe tempora magni ex dolorum quasi, rem possimus cupiditate illo. 46 Atque possimus ad itaque?</p> 47 <a name="a"></a> 48 </body> 49 50 </html>
效果为：点击后直接跳转到描点的位置（这里不方便展示结果）
描点跳转也可以运用在其他网页文件中进行：
举个例子：
这是目标文件的描点内容：
这是要跳转网页的内容：
结果：
这是跳转前的结果：
这是跳转后的结果：发现文件地址改成目标文件的链接
