引言
开发一个网站
- 开发前端 ( HTML，CSS，JavaScript )
HTML：骨
CSS：皮
JavaScript：魂 - 开发后端 ( Java )
网页 + 服务器 => 网站 ( web app )
HTML 的作用
HTML：Hypertext Markup Language ( 超文本标记语言 )
HTML 早期设计是用来做报纸排版的，在当下时代，它被用来作为前端的整个网页骨架。
说明
使用 VS Code 来编写 HTML，使用 Chrome 浏览器来运行 HTML 展示结果
一、HTML 标准结构
<html> <head> <title> </title> </head> <body> </body> </html>
这是一个相对完整的 HTML 结构，最外层是 html 标签，一个 html 文件 的顶层标签就应该是这个带尖号的 html 标签。在 html 标签 中，始终包含一个 head 标签 和 body 标签，
head 标签 中放的是这个 htmI 中的一些属性，
body 标签 中放的是这个 html 要展示的内容。
这样的结构就类似于一个 " 树形结构 "，htmI标签 就是根节点，head 和 body 就是 html 的子节点，那么 head 和 body 是兄弟关系。而 title 又是 head 的子节点，所以 title 也是 html 的孙子节点。
我们也把这个由标签 ( 元素 ) 构成的树，称为 " DOM树 "
D：Document 文档（html本身）
O：Object 对象（每个标签就视为一个对象）
M：Model 模型
这些对象也包含一些属性和方法，然后我们就可以在 JS 中来访问或修改这里的属性，或者调用其中的方法了。（ 这些对象都是浏览器在解析这个 html 文件 的时候，自动创建的。）
二、HTML 标签
下图是一个较为完整的 HTML 结构
第1行：声明当前网页遵守 html5 这个标准，( html5 是最新版本 )
第2行：描述网页的内容是哪种语言 “en” 表示 English，而 lang 表示 language，浏览器可以根据 lang 属性来决定怎么翻译
第3行：head 标签，里面放的是当前 htmI 中的一些属性
第4行：字符集为 “UTF-8”
第6行：描述页面的缩放规则
第7行：title 标签，用来自定义标题
第10行：body 标签，里面放的是当前 htmI 要展示的内容
展示结果：
标签一 注释标签
注释标签看起来和其他语言不太一样，另外，HTML 中写的注释和其他语言注释有一个本质的区别：HTML 这个注释是可能被暴露到外面的，被广大用户看到的。即用户是可能看到包括注释在内的
HTML 完整源代码的。而 Java / C 当我们使用类似 “//” 这样的注释，只在编译之前才能被看到，当编译并运行之后，是不会展示出来的。
和 IDEA 编译器一样，VSCode 能够使用 【Ctrl + / 】这样的操作来进行快速注释和反注释
<!-- 注释内容 -->
标签二 标题标签
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
<!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>我的标题</title> </head> <body> <!-- 标题标签 --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html>
展示结果：
标签三 段落标签
<p>这是一个段落</p>
<!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>我的标题</title> </head> <body> <p>这是第一段 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum animi numquam rerum labore inventore. Magni excepturi non sed explicabo culpa ea beatae similique doloremque consectetur iure, alias enim placeat voluptas.</p> <p>这是第二段 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam laudantium officia ad libero alias molestias inventore natus, voluptatem corporis rerum iste! Odit sint natus officiis, ducimus repellendus voluptatibus nam velit.</p> <p>这是第三段 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quam tempore culpa molestiae dolores asperiores adipisci sunt natus dolorum inventore optio maiores molestias officiis numquam, libero vel ad explicabo! Eveniet, ratione!</p> </body> </html>
注意：
① 通过 Lorem 这样的方式可以构造出来一个随机的长文本出来
② 段落与段落之间存在间距
③ 在 HTML 中，内容首尾处的换行, 空格均无效。也就是说，在内容中换行了，但运行后 ( 展示结果 ) 并不会换行
展示结果：
标签四 换行标签
① 换行标签是一个单标签，即不需要结束标签来进行配合
② 下面的带斜杠的写法是规范写法，以防不同浏览器出现显示不同的情况
<br> <br/>
<!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>我的标题</title> </head> <body> <p>这是第一段 Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Eum animi numquam rerum labore inventore. <br> Magni excepturi non sed explicabo culpa ea beatae similique doloremque consectetur iure, <br> alias enim placeat voluptas.</p> <p>这是第二段 Lorem ipsum dolor sit amet consectetur adipisicing elit. <br/> Quam laudantium officia ad libero alias molestias inventore natus, <br/> voluptatem corporis rerum iste! Odit sint natus officiis, <br/> ducimus repellendus voluptatibus nam velit.</p> <p>这是第三段 Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br/> Quam tempore culpa molestiae dolores asperiores adipisci sunt natus dolorum inventore optio maiores molestias officiis numquam, <br/> libero vel ad explicabo! <br>Eveniet, ratione!</p> </body> </html>
展示结果：
标签五 格式化标签
<strong>加粗字体</strong> <b>加粗字体</b> <em>倾斜字体</em> <i>倾斜字体</i> <del>删除线字体</del> <s>删除线字体</s> <ins>下划线字体</ins> <u>下划线字体</u>
<!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>我的标题</title> </head> <body> <strong>加粗字体</strong> <b>加粗字体</b> <br/> <em>倾斜字体</em> <i>倾斜字体</i> <br/> <del>删除线字体</del> <s>删除线字体</s> <br/> <ins>下划线字体</ins> <u>下划线字体</u> </body> </html>
展示结果：
标签六 图片标签
<img src=" " alt=" ">
<!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>图片测试</title> </head> <body> <img src="123.png" alt="我是一个 logo" title="这个是我的头像" width="500px" height="400px" border="5px"> </body> </html>
注意：
① 图片标签说的就是 img 标签，单词即 image，image 标签必须带有 src 属性，表示需要放置的图片属性。图片路径可以来源于本地路径，亦可以来源于网络路径。
如果使用的是本地路径的绝对路径，直接复制粘贴即可。 如果使用的是本地路径的相对路径，必须以 html 所在位置为基准, 找到图片的位置。 同级路径: 直接写文件名即可 (或者 ./) 下一级路径: 目录名/图片名.jpg 上一级路径: ../目录名/图片名.jpg 如果使用的是网络路径，直接复制粘贴即可。
② alt 属性表示，如果一个图片的地址输入的不正确或者是运行时的网络速度太慢等原因，导致刚刚 src 加载不出来，就会进行一个提示，提示可以自定义。如下：【我是一个 logo】就是一个自定义的 alt 属性。
③ img 标签中的 title 表示，当你点击图片的时候，它就会提示你一个内容。而这个我发现截图不好展示，小伙伴可以自己试一下。
④ width 和 height 表示宽带和高度，px 表示像素单位
⑤ border 表示边框，单位也是像素
展示结果：
标签七 超链接标签
<a href=" ">超链接提示</a>
展示1
<!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>超链接测试</title> </head> <body> <a href="http://www.sogou.com">这是一个超链接</a> <a href=""></a> </body> </html>
超链接我就不必说了，实际上就是点击到一个平时我们口头上的网页。但我们必须注意一个问题：在使用 html 的时候，必须带上一个超链接的文字提示，否则你就无法通过这个文字提示，来跳转到另一个窗口。也就是你鼠标压根就没地方点。【这是一个超链接】这就是一个文字提示。
展示结果：
展示2
在展示1 中，我们看到跳转链接后，新的页面会代替原有界面，而当我们为代码加上
【target = “blank”】的时候，在点击超链接后，就会生成一个新的页面，而原来的页面还在那里。
<body> <a href="http://www.sogou.com " target="_blank">这是一个超链接</a> </body>
展示结果：
展示3
超链接标签中的 href 属性也可以使用本地的文件
<body> <a href="demo1.html">这是本地的一个 html 文件</a> </body>
展示结果：
展示4
href 属性写作 “#” 表示不跳转
<body> <a href="#">这是本地的一个 html 文件</a> </body>
