Study Notes 之回顾 HTML 基础

LZ-Says：终于明白了鸡大说的，技术，沉淀，所谓的孤寂以及背后的坚持。比心，祝好～

前言

搞前段也搞了有一段日子，感觉嘛，还好。

还是有很多的属性，有点蒙，写起来还是不能行云流水。

大佬说过，这个没有任何捷径可选，唯有多练，多练。

Today，简单整理总结一下，算是为之前的部分前段，做个回顾。

只有根基打牢固，后续的骚技巧才能玩的嗨皮。LZ 一开始明白，却没有理解。

而今，为了未来，打好基础，加油～！！！

一、HTML 基础部分

东西很基础，如有不对，请指正，3 Q～

首先来说，什么是 HTML？
身边常见的例子，网页，就是 HTML，当然这里面还包含着例如 PHP、JSP 等等，LZ 这里统称网页无可厚非吧。那么来看一下确定术语吧。
HTML（Hypertext Markup Language）：超文本标记语言
那么，一个网页又是由什么组成？
我们看到的最实际的网页，往往包含了很多内容，网页跳转连接、图片、文字描述、各种好看好玩的效果。嗯，我们表面看到的是这些。而实际中，网页（HTML）则主要由三个部分组成分别为：
- 结构： HTML 用于描述页面的结构；
- 表现： CSS 控制页面中元素的样式；
- 行为： JS （Java Script）响应用户操作。
既然说了网页的组成，那么它标准格式又是什么？

<html><!-- 根标签，有且只有一个 -->
    <head><!-- 设置头部信息（帮助浏览器解析网页），不会在网页中直接显示 -->
        <title>网页标题</title>
    </head>
    
    <body><!-- 此处包含用户可见内容 -->
        <!-- 用户可见内容 -->
    </body>
</html>

再说说我们一般都会在代码中写一些注释，那么在 HTML 中注释又是什么样呢？

<!-- 
    注释内容不会显示在网页，在源代码中会显示
    一般主要对代码进行描述，方便后续阅读维护
  -->

小伙伴都知道，在我们实际开发中总会遇到各种版本，而每个版本一样却又不一样。以 Android 为例，5.0 开启的后续版本都需要我们开发者进行兼容，那么相对来说，HTML 目前使用较为广泛的版本又是哪儿些？
HTML 4、XHTML 以及 HTML 5（常用）
在我们开发时，都需要指定某种规则，或者告知程序需要按照某种规则进行解码，以 Android 为例，Gradle 这个估计大部分都被坑过吧。而 HTML 中，又该如何指定当前使用的 HTML 版本呢？我们下面以最常见的 HTML 5 为例，我们只需要在根标签上添加如下声明即可：

<!DOCTYPE HTML>

上面说到我们都需要指定某种规则，或者依据某种规则告知程序我们希望做的事情，那么 HTML 也为我们提供了俩种解析模式：
- 标准模式： （Standards Mode）
- 怪异模式： Quirks Mode
  在正常模式下解析时，当然我们的网页对用户显示正确内容，而怪异模式，则会在解析过程中出现一些不可预期的行为，最终导致的用户体验性较差。So，我们必须在页面中编写正确的 Doctype，也就是告诉网页应该按照何种规则解析我们的网页。
有时候，尤其在初学者时，常常会出现乱码原因，那么为什么会出现乱码呢？
总结来讲，出现乱码的根本原因是因为编码和解码此阿勇的字符集不同导致。
首先，由于计算机底层只能识别二进制文件，即使我们通过 Java 也好，还是其他语言编写的代码也好，最终都变成了机器可识别的二进制文件。
刚刚也说过，编码和解码，那么他俩又是什么？
- 编码：依据某种规则将字符转换为二进制编码；
- 解码：依据某种规则将二进制编码转换为字符；
  
  二者之间简单来讲就是一个转换的过程，通过将我们编写的编码成二进制文件使机器可正确识别并执行我们预期操作，随后将二进制编码解码输出。
那么关于这个 HTML 乱码问题，又该如何解决？
第一种方式： 说白了，出现的问题就是因为二者不一致，那么只要将编码和解码规则指定为同一个即可嘛。例如编码采用 GB-2312，那对应的解码也采用 GB-2312 不久好了么。
第二种方式： 其实就是在第一种方式的基础完善而已，即编码和解码采用国际通用规则，也就是 UTF-8 即可。
小伙伴说了，你叨叨半天，那么具体该如何操作呢？

...
<head>
    <meta charset="UTF-8"/>
    ...
<head>
...

小伙伴说了，这个 meta 又是什么鬼呢？它能干嘛？
这里简单讲述下：meta 标签主要作用便是设置网页的一些元数据，例如网页的字符集、关键字、简介等。
小伙伴又说了，能给我演示几种关于 meta 的使用么？
meta 可设置网页关键字，方便搜索引擎搜索，好的关键字也利于提升搜索引擎排名。

<meta name="keyworks" content="贺,大,宝"/>

也可以指定网页描述：

<meta name="descripiton" content="测试网页描述"/>

还可以设置请求的重定向：

<meta http-equiv="refresh" content="请求时间（秒）;请求目标路径"/>

- 小伙伴说，刚刚你说的字符集能大概说下不？
为了方便，LZ 这里直接截取 W3C School 为我们整理的部分内容。
在这里插入图片描述
简单理解，就是不同国家自身独特的规则以及世界通用规则的区别。

二、HTML 常用标签

标签可细分为：

成对标签；
自结束标签。

按照字面意思来讲，成对标签，一对一对的，例如：p /p。而自结束标签则单身狗，一人吃饱全家不饿，例如换行符 br/。

标题标签：标题一共有 6 个。h1 最大，h6 最小。对于搜索引擎来讲，h1 重要性仅次于 title，搜索引擎检索完 title，会立即查看 h1 中的内容，So，h1 也算影响搜索引擎排名因素之一。

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

显示效果如下：
在这里插入图片描述

段落标签：描述一个段落文字内容。独占一行且行与行之间具有默认边距。

<p>我是 p 标签，我代表段落</p>

显示效果如下：
在这里插入图片描述

换行符，自结束标签，代表换下一行。

<p>
    锄禾日当午，汗滴禾下土。<br>
    谁知盘中餐，粒粒皆辛苦。
</p>

显示效果如下：
在这里插入图片描述

水平线标签，hr

<hr/>

演示效果：
在这里插入图片描述

图片标签：img 主要俩个属性为：
- src：图片地址；
- alt：主要用于图片异常时，对图片的描述占位。其次的作用是为例便于搜索引擎识别不同类型的图片，如不设置则搜索引擎不会对此图片进行检索搜录。

<img alt="HLQ_Struggle" src="https://avatar.csdnimg.cn/E/8/D/1_u012400885.jpg"/>

显示效果如下：
在这里插入图片描述
上图显示图片太大，我们将其宽度设置下，使其变小：

这个时候，高度也发生变化。

所以，这里需要记住一点：如果单独设置宽或者高，则会自动调整图片比例。

那么下面尝试同时测试宽高看下效果：
在这里插入图片描述
路径分为俩种：相对路径以及绝对路径。
简单描述下：相对路径，相对于某个项目下某某图片。当项目地址发生改变时并不影响图片使用。而绝对路径，例如：/user/hlq/img.png ，当我将图片移动其他目录下，再使用此地址，则发现图片应用不到了。

一般在实际开发中，我们都会指定图片的相对路径，而不是绝对路径。
这里简单说下图片的格式，图片的格式一般有如下几种：

jpeg（jpg）： 支持的颜色较多且可压缩，但是不支持透明，一般使用此格式来缓存照片。
gif： 支持颜色较少，支持动态图。
png： 支持颜色较多且支持复杂的透明。
webp： 图片较小，兼容性会有些问题。
.9png： 可伸缩性图片，也是按照指定规则进行拉伸。
…
超链接标签：a 标签，可以从一个页面跳转另一个页面。

<a href="https://blog.csdn.net/u012400885">This is HLQ-Blog.</a>

显示效果如下：
在这里插入图片描述
很明显看到，当鼠标浮上时，页面左下角会显示出当前链接的地址。

a 标签中有几个关键属性，我们一起来看下。

target 规定打开页面的位置，关键属性如下：

_self：默认在当前窗口打开
_blank：在新页面打开网页
可以设置一个内联框架 name 属性，在指定的内联框架打开此页面

href：跳转目标。设置 # 跳转当前页面顶部

www.xxx.com：跳转指定网址；
#ID：跳转指定 ID 处；
mailto：打开本地默认邮箱；

center 居中标签，将包裹的内容居中。
内联框架 iframe：将某个网址内嵌当前网页。不推荐使用，搜索引擎不会检索。

<iframe src="https://blog.csdn.net/u012400885"></iframe>

显示效果如下：
在这里插入图片描述

特殊字符

假设我们有个需求，要在网页中输出如下内容：

a<b>c

很 easy，是不是？来个代码。

<p>
    a<b>c
</p>

来个效果图：
在这里插入图片描述
咦，字母 b 以及大小与的符号哪儿去了呢？

这里解释下，< b > 在 HTML 代表加粗，直接这样写，浏览器会将其识别为一个标签解析，那么我们如果想要正确显示需求怎么办？

别着急，我们先来看下 HTML 中有用的字符实体，也就是特殊字符，
在这里插入图片描述
So，针对如上需求，我们简单修改下代码：

<p>
    a&lt;b&gt;c
</p>

查看最后效果：
在这里插入图片描述
最后我们再列举一个特殊字符：

<p>
    我是   HLQ_Struggle
</p>

<p>
    我是&nbsp;&nbsp;&nbsp;HLQ_Struggle
</p>

在上面的代码中，我们为其中的一段话中间加了几个空格，而为另一行文字则是使用标记符号，也就是实体名称。

那么，他俩之间的效果又是什么样的呢？一起来看。
在这里插入图片描述
ummm，为什么会这样呢？

简单说下，即使你在 HTML 中打了 n 个空格，在浏览器解析过程中，依旧会被认为只有一个空格。那么在某些变态需求中需要我们输出多个空格时，直接采用实体名称即可。

HTML 规范

凡事，都讲究个规矩，那么在 HTML 的规矩又是什么呢？
HTML 规范，严格意义应该是 XHTML 规范。
- HTML 不区分大小写，但是一般都小写；
- HTML 中注释不能嵌套；
- HTML 标签必须结构完整，要么成对出现，要么自结束标签；
- HTML 会自动修正我们编写过程中遇到的一些问题，例如成对标签，只写一个，浏览器会自动为你修复结束标签，但是很扯犊子的那就 Says GoodBye；
- HTML 标签可以嵌套，但是不能交叉嵌套；
- HTML 标签属性必须有值且必须加引号；