🍁（一）HTML简介
🔥1.什么是HTML？
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML使用标记标签来描述网页
🔥2.HTML标签
- HTML标签由 尖括号包围 的关键词。如：< html>
- HTML 标签通常是成对出现的，如 < p > 和 < /p >
- 标签对中的第一个标签是开始标签(< p >)，第二个标签是结束标签(< /p >)
注意：并不是所有标签都有结束标签如< b >
🔥3.HTML文档
-HTML文档包含 HTML 标签和纯文本。
-HTML文档也被称为网页。
浏览器会自动读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。
实例：
<html> <body> <h1>欢迎！！</h1> <p>你好，一起来学习前端吧！</p> </body> </html>
在这串代码中
- < html > 与 < /html > 之间的文本描述网页
- < body > 与 < /body > 之间的文本是可见的页面内容
- < h1 > 与 < /h1 > 之间的文本被显示为标题
- < p > 与 < /p > 之间的文本被显示为段落
🍁（二）HTML四个基础标签
🔥1.HTML标题
HTML 标题（Heading）是通过 < h1 > — < h6 > 等标签进行定义的。
实例：
<html> <body> <h1>hello world </h1> <h2>hello world</h2> <h3>hello world </h3> <h4>hello world</h4> <h5>hello world</h5> <h6>hello world</h6> </body> </html>
🔥2.HTML段落
HTML 段落是通过 < p > 标签进行定义的。
实例：
<html> <body> <h1>hello world </h1> <p>sulaing!!!</p> </body> </html>
🔥3.HTML链接
HTML 链接是通过 < a > 标签进行定义的。a标签也叫跳转锚点标签，通过它可以实现页面的跳转。
实例：
<html> <body> <h1>hello world </h1> <p>sulaing!!!</p> <a href="https://suliang.blog.csdn.net/">苏凉.py的博客</a> </body> </html>
此时只需点击文字即可跳转。
🔥4.HTML图像
HTML 图像是通过 < img > 标签进行定义的。
实例：
<html> <body> <h1>hello world </h1> <p>sulaing!!!</p> <a href="https://suliang.blog.csdn.net/">苏凉.py的博客</a><br/> <img src="https://img1.baidu.com/it/u=386692673,2792409680&fm=253&fmt=auto&app=138&f=JPEG?w=571&h=381" alt="web前端" width="300px" height="200px"> </body> </html>
参数src为图片的路径，这里可以选择网页图片的地址，或者是本地图片，当使用本地图片时，需使用绝对路路径来定位图片。
参数alt为当图片路径不对加载图片出现错误时显示的内容。如：
🍁（三）HTML元素
HTML 元素指的是从开始标签到结束标签的所有代码。
🔥1.元素语法
- HTML 元素以开始标签起始，以结束标签终止。
- 元素的内容是开始标签与结束标签之间的内容。
- 某些 HTML 元素具有空内容。
- 空元素在开始标签中进行关闭（以开始标签的结束而结束），如< br > 换行标签。
- 大多数 HTML 元素可拥有属性，如widh,height等。
温馨提示： 在html中虽然没有结束标签也可以浏览器也能正确读取出来。但尽量加上结束标签，这也是我们编程的一个良好的习惯！！
🍁（四）HTML属性
属性是 HTML 元素提供的附加信息。
- HTML元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于 开始标签
- 属性总是以名称/值对的形式出现，比如：name=“suliang”。
实例：
<a href="www.baidu.com">百度一下</a>
这里的href就是a标签的属性，且是设置在a标签的开始标签里面的。
🔥1.常见HTML元素属性
| 属性 | 描述 |
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的 唯一 id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的 额外信息 (作为工具条使用) |
🍁（五）HTML文本格式化
在html中，又是我们需要对文本进行格式化输出，例如加粗文本，斜体文本，以及文本的上标和下标的表示等等。
实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>格式化文本</p> <p>定义<b>粗体文本</b></p> <p>定义<em>着重文本</em></p> <p>定义<i>斜体文本</i></p> <p>定义<small>小号文本</small></p> <p>定义<strong>加重语气文本</strong></p> <p>定义<sub>下标</sub>H<sub>2</sub>O</p> <p>定义<sup>上标</sup>2<sup>10</sup></p> <p>定义<ins>插入字</ins></p> <p>定义<del>删除字</del></p> </body> </html>
🍁（六）HTML超链接
tips：在href属性中填写的url最好始终在url后添加反斜杠，主要是为了区分访问的是文件还是文件夹。如：访问路径为http://baidu.com/a，浏览器不知道是访问的是文件还是文件夹，就会再次访问确认是哪种类型，若是文件夹则在后面加上反斜杠后以http://www.baidu.com/a/ 再次运行 。若链接为http://www.baidu.com/a.html则可以明确的知道这是文件而非文件夹，即可以不用添加反斜杠。
🔥1.a标签的target属性
| 值 | 描述 |
| _blank | 在新窗口打开 |
| _parent | 在父窗口中打开链接 |
| _self | 默认，在当前页面跳转 |
| _top | 在当前窗口打开链接，并替换当前的整个窗体。 |
附：target属性还有一个值为framename，后续在js中我们再细说。
🍁（七）HTML头部信息
一个默认的HTML文件头部信息如下：
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
上面包含了meta和title两个元素，当然html的头部中你还可以插入脚本（scripts）, 样式文件（CSS）以及style，link，base等元素。
🔥1.< meta >标签
元数据（Metadata）是数据的数据信息。< meta > 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
- < meta >标签没有结束标签
实例：
1.1 定义文档字符编码
<meta charset="UTF-8">
1.2 把content属性关联到HTTP头部
<meta http-equiv="X-UA-Compatible" content="IE=edge">
1.3 定义文档关键词，用于引擎搜索
<meta name="viewport" content="width=device-width, initial-scale=1.0">
另外还可以进行对页面的刷新和定义页面作者等信息。
1.4 定义页面作者
<meta name="author" content="su liang">
1.5 刷新页面
//每30秒刷新页面 <meta http-equiv="refresh" content = "30">
🔥2.< title >标签
定义了文档的标题
实例：
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>前端学习</title> </head>
🔥3.< link >标签
- < link > 标签定义文档与外部资源的关系。
- < link > 标签最常见的用途是链接样式表。
注意： 此元素只能存在于 head 部分，不过它可出现任何次数。
实例：
<link rel="stylesheet" type="text/css" href="./teststyle.css">
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="./teststyle.css"> <title>前端学习</title> </head> <body> <a style="text-decoration:none;" href="D:/桌面/图片111/liyif.png" target="_top"> 打开图片</a> <p class="su"> 苏凉 </p> <div class="div1">这是一个盒子</div> </body> </html>
css代码：
.su{ font-size: large; color: blueviolet; } .div1{ margin-right:1400px; border:3px inset red; background-color: antiquewhite; }
实现效果：
🔥4.< base >标签
定义了页面链接标签的默认地址链接。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="./teststyle.css"> <base href="https://www.baidu.com/" target="_blank"> <title>前端学习</title> </head> <body> <a style="text-decoration:none;" href="D:/桌面/图片111/liyif.png" target="_top"> 打开图片</a> <p class="su"> 苏凉 </p> <div class="div1">这是一个盒子</div> <br/> <p><a href="">点击打开百度</a></p> </body> </html>
