web技术基础—HTML学习总结
Web技术
web技术用来设计开发网页的，主要分为两部分：前端开发和后端开发 ，二者结合起来就是全栈开发。
前端开发主要有：HTML、CSS、JS（Java Script）、Angular；
后端开发主要有NestJs；
开发工具：VS Code最新版、Chrome浏览器。
HTML
HTML简要介绍
HTML是一种超文本标记语言，也就是用来定义内容结构，搭建一个网页的基础。在这里与前端开发的CSS以及JS是不可或缺的三个组成部分。HTML相当于结构；CSS相当于美工；JS相当于行为。
HTML文档结构
新建工作目录
我们已经安装了开发软件 code 及其相关的插件（code下载）。运行该软件，新建 一个zy文件接下来在该文件夹下新建一个 后缀名为html 的文件，如下图所示：
在该文件中输入如下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>这是我的第一个Web页</h1>
<p>可能当前有点丑：)</p>
</body>
</html>
在开发工具 code 中我们已经安装了open in browser插件，因此在 code 的编辑区点击鼠标右键即可看到快捷方式将该文件在浏览器中打开。如下图所示：
HTML文档结构分析
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如：
<head>，<title>，<body>，<header>，<footer>……
<!DOCTYPE html>: 声明文档类型；
<html></html>: <html>元素。包含全部页面，可以嵌套其他的元素；
<head></head>: <head>元素。 类似于C语言编程中的头文件，不会在浏览器中的html页面显示。
<meta charset="utf-8">: 设置文档使用utf-8字符集编码，用来识别文本内容。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 浏览器标签图标显示图。
<title></title>: 页面标题，也就是浏览器收藏标签。
<body></body>: <body>元素。 html的主体内容。
检查我们刚创建的 HTML 文档你会发现，整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成。
剖析一个 HTML 元素
如下所示的一个用于展示段落的元素：
开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
注释：
特殊的记号<!--和-->
空元素：
空元素只有一个开始标签，用来在此元素所在位置插入/嵌入一些东西，如下：
<br>, <hr>, <input>, <img>, <a>……
也就是换行，分割线与输入行,图片等等。
属性：
属性包含元素的额外信息，并不会在浏览器中显示出来。
<input type="text">
<input type="password">
标题heading：
<h1> ~ <h6>从小到大六级标题。
超链接：
拿百度为例，去访问到另一个页面。
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
href URL（Uniform Resorce Locator)，即统一资源定位符，也就是常说的网址。
target属性为_blank表示在新的页面打开超链接，点击“百度一下”即可跳转。
锚点：
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
<!-- 文档其余部分 -->
<h2 id="C4">第四章 超鸭子会飞</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...
图片：
这里事先把图片存在同一文件夹下，既可以直接调用相对路径，如下：
<img src="IMG_20181103_132537.jpg"alt="MDB Logo">
src属性是图片的路径
alt属性是当前图片获取失败时显示的占位符。
文件路径
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
上面图片的例子即为绝对路径。
表格 Table：
<tr>表示行, <td>表示行中的单元, <th>是表头的单元（将会加粗显示）
<table>
<tr>
<th>haha</th>
<th>lala</th>
<th>dada</th>
</tr>
<tr>
<td>chaoyazi</td>
<td>zouyazi</td>
<td>wangyazi</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
</table>
列表 List：
分为无序列表和有序列表。
无序列表使用<ul>标签；
有序列表使用<ol>标签。
表单 Form：
使用表单（form）进行信息的选择或者填写。提交信息，表单中没有name属性的元素将不会提交。
<form>
<!-- 文本框，注意有 placeholder 提示符 -->
用户名：<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
<!-- 密码框 -->
密码：<br>
<input type="password" name="ps" placeholder="请输入密码"><br>
……
</form>
HTML 的元素可以以称为区块或内联的方式进行显示。
区块元素：
区块元素在浏览器显示时，通常会以新行来开始（和结束）。
<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>
内联元素
内联元素相反，他们总是一个接一个进行显示，不会新起一行。
<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">
预设格式
如果你想在网页中一些特别格式的文本，那么请使用pre标签。
<!-- pre标签中的内容将保持格式不变 -->
<pre>
</pre>
特殊字符：
<p>有多 远，滚 多远！</p>
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
<p>鸭子 真的 会飞？</p>
<hr>
总结
通过对HTML的初步学习，我发现web是一个很值得我们去学习的东西，希望在接下来的学习生活中不断的提高自己的能力。