“生于深秋，孤独一世，忧郁半生。”

Web：HTML 简介

前言

HTML 感觉写不了太多
所以打算就给一个模板，然后介绍一下一些标签
然后给常用标签列个表格啥的=。=
之前草率了以为 JDBC 是最简单的，现在感觉这篇最简单…
最近在学前端所以最近几篇相关文章都给出前端学习路线

HTML

HTML，Hypertext Markup Language，超文本标记语言
浏览器将 HTML 文件解析后就形成了我们所看到的网页
严格来说它并不是一个编程语言，只是一个标记文档。例如 Java，Python 这种编程语言，需要经过编译执行，转为计算机底层的机器码；而 HTML 只是对标题、段落、图片等进行标记，告诉浏览器这里有什么，然后渲染形成页面。

HTML 大体结构

<!-- HTML基本结构 -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="style/index.css" />
    <script type="text/javascript" src="js/index.js"></script>
    <title>My test page</title>
  </head>
  <body>
    <p>My Test <strong>Paragraph</strong></p>
    <img src="images/icon.png" alt="My test image" />
  </body>
</html>

简单来说，HTML 由一个个元素（Element）组成，民间也喜欢称其为标签（Tag）。不过为了尊重英文翻译，本文就说是元素好了
然后来看看上面这个结构的一些元素：

<!DOCTYPE html>：在古早时期，DOCTYPE用来链接一些 HTML 的编写规则，可以进行自动查错，不过如今已经没啥用了（自动查错都由 IDE 实现了），但仍然沿用至今，放在文档开头用于保证文档的正常读取。就好像 SHELL 脚本的 Shebang。
<html></html>：该元素是 HTML 文档的顶级元素，也称根元素、主根元素，所有其他元素必须是该元素的后代。
<head></head>：该元素中的内容又称文档元数据（Metadata），用于声明一些页面的相关信息，包括方便搜索引擎检索的关键字、页面描述、CSS 样式、字符编码等，对用户不可见
<meta charset="utf-8">：指定该文档使用 UTF-8 字符编码。<meta>元素是元数据（Metadata）之一，当其他元数据（base、link、script、style 、 title）不能表示的时候就用它
<meta name="viewport" content="width=device-width, initial-scale=1">：声明viewport元素，虽然不写不影响网页，但会有个小波浪警告很不爽。其用于声明视图窗口，后面会再详细说说。
<link rel="stylesheet" href="style/index.css" />：声明外部链接的元素或资源，这里引入了 css 样式表
<title>My test page</title>：定义文档的标题，然后在浏览器标题栏或标签页上显示。
<body></body>：表示文档的内容，是用户可见的。包括文本、图像、视频、音频等。
<p></p>：表示一个文本段落的元素。其中的<strong></strong>表示加粗字体
<img src="images/icon.png" alt="My test image">：表示一个图像的元素，src表示图片路径，alt表示图片加载失败显示的替代文本

HTML 元素

大体上我们可以将 HTML 的元素（标签）分为两种，一种是非空元素，他们用开始标签（Opening tag）和结束标签（Closing tag）将内容（Content）包裹闭合，形成整个元素。另一种是空元素，比如上面的<meta>、<link>、<img>等，他们不需要结束标签，也没有内容。
我自己稍微试了一下，对于空元素来说，有没有斜杠（/）都是无所谓的，比如<img>和<img/>没啥差别，网页都能正常显示。

此外，元素可以有属性（Attribute），元素的属性通过键值对实现，即name="value"，包括但不限于设置元素的颜色、大小、背景等。比如<img>标签里的src和alt就都是其属性。对于空元素来说，属性就显得非常重要了。
最常用的属性应该就是class和id了。我们可以给不同的元素设置相同的class，这样在设计样式的时候，可以通过给class设置特定样式（比如字体大小、背景颜色等），从而同时对其对应的所有元素加上这些样式，减少冗余。而id和class类似，只不过在同一个 HTML 文档中id不能重复，相当于是一个元素的唯一标识。
有什么属性可以参考MDN：HTML 属性参考，这里就不多说了。

HTML 常用元素

这里列一下常用的元素，主要是方便自己以后查看把

元素	作用
`<title>My Title</title>`	浏览器标题
`<p>Paragraph</p>`	一段文字
`<h1></h1>`…`<h6></h6>`	一级至六级标题
`<strong></strong>`	加粗文本
`<em></em>`	斜体文本
`<del></del>`	删除线
`<ins></ins>`	下划线
`<img src="images/icon.png" alt="My Image">`	图片，`src`为图片来源，`alt`为替代文字
`<a href="https://www.baidu.com">百度</a>`	超链接，`href`表示 `Hypertext REFerence` 属性`target`设定在哪里打开链接 `_self`为默认值，在本页面打开；`_blank`为新页面打开
`<ul> <li></li><li></li> </ul>`	无序列表
`<ol> <li></li><li></li> </ol>`	有序列表
`<table> <tr> <td></td> </tr> </table>`	表格，`<tr>`为一行，`<td>`为一列
`<div></div>`	定义一个块元素
`<span></span>`	定义一个行内元素
`<br/>`	换行
`<hr/>`	水平线
`<sup></sup>`	上标
`<sub></sub>`	下标

HTML Viewport

这里我们来简单说一下Viewport，进一步了解可以参考：Correct Viewport
这个属性主要是针对移动设备的，因为大多数情况下其屏幕大小受限，不像我们电脑上的浏览器那样容易被拉伸缩放。
而且移动设备的浏览器渲染网页的时候通常会比设备屏幕要宽大，用户可以通过放大页面并滑动来查看页面，而不需要将整个页面全部在一个屏幕中展现
于是，Mobile Safari（对，都怪苹果）引入了viewport meta tag，让 Web 开发人员控制Viewport的大小。如今大部分移动浏览器都支持此 tag。

我在用VS Code的时候，在开头出现了个红色小波浪的警告：A 'viewport' meta element was not specified.
（虽然这只是警告，不影响 HTML 正常显示，但还是很难受好吧）
想要消除警告，需要在<head>标签中添加下面这行，其实这一行适用于大多数情况：

<meta name="viewport" content="width=device-width, initial-scale=1" />

然后其content属性中，推荐声明width=device-width，其表示将网页适配设备屏幕，并允许浏览器重新排版其内容
该声明还可以实现性能优化，可以消除IOS 10+的Safari及其他某些浏览器的点击延迟

initial-scale=1是为了解决IOS 9以下的Safari的方向更改错误，反正声明了没啥坏处
user-scalable，maximum-scale和minimum-scale等属性不推荐使用

语义化 HTML

语义化 HTML（Semantic HTML），即使用语义化元素（Semantic Elements）的 HTML
很多时候人们喜欢用<div></div>，<span></span>等元素来包裹一系列元素，作为网页的一个区块，比如用<div id="nav">表示导航栏，<div class="header">表示头部， <div id="footer">表示尾部等。
而事实上，HTML 有很多标签本身就提供了这些含义，使用这些标签不仅可以增加文档的可读性，还可以增加文档在不同程序中的可移植性。

语义化元素 Semantic Elements

语义化元素基本就下面这些了

元素	说明
`<article>`	表示一部分独立的内容，如论坛帖子、用户评论、博客文章等
`<aside>`	表示非主体内容，类似于侧边栏，理想情况下应当与正文内容有所关联
`<details>`	表示进一步的信息，通常用户可以选择显示或隐藏其内容
`<figcaption>`	表示图片、图标的标题，常和`<figure>`一起使用，放在第一个或最后一个
`<figure>`	表示图片、图表等元素。常包裹`<figure>`和`<img>`等元素表示一块图片区域
`<footer>`	表示文档或一块内容的底部（页脚），也可以有多个，常用于包含作者信息、版权信息、联系方式等
`<header>`	表示介绍性内容或一组导航链接，通常包含一个或多个标题、图标或作者信息。可以有多个但不能嵌套在`<footer>`、`<header>`或`<address>`等元素之中
`<main>`	表示文档的主要部分，有点类似`<body>`的感觉
`<mark>`	表示被标记或需要重点突出的部分
`<nav>`	表示一组导航链接。并非页面中所有链接都要放在该元素中，其用于包含一块区域，用于显示链接。
`<section>`	表示一个区块内容，W3C 提到其内容“有同一个主题，通常还有一个标题“。比如一个网页的标题栏是一个区块，底部联系方式是一个区块等
`<summary>`	表示`<details>`的可视标题，供用户选择是否进一步查看`<details>`的内容
`<time>`	表示时间或日期

盒模型（Box Model）

通常盒模型是放在 CSS 里来讲的，因为该模型的思想主要方便我们对页面进行布局排版，不过为了给 HTML 的文章加一些内容，所以放在这了

之所以叫盒模型，因为我们的元素除了内容（content）外，还有边框（border）、内边距（padding）和外边距（margin），方方正正的像个盒子，所以我们可以把每个元素都看成一个盒子
而我们可以将元素分为块元素、行内元素、行内块元素，也称块级盒子（Block box）、行内盒子 / 内联盒子（Inline box）、行内块盒子 / 内联块盒子（Inline-Block box）

类型	特点	例子
块级盒子	默认情况下占满整个父容器，每个元素都会换行，可以设置`width` 和 `height` ， padding，margin，border 会将其他元素“推开”	`<p>`、`<h1>`、`<div>`等
行内盒子	元素不会换行，`width` 和 `height` 属性将不起作用，垂直方向的 padding，margin，borde 不会把其他行内盒子推开，而水平方向的会	`<a>` 、 `<span>`、 `<em>` 、`<strong>`等
行内块盒子	元素不会换行，但可以设置`width` 和`height` ，并且会推开其他元素	通过`display: inline-block`设置

由于盒模型有四个部分（content、border、padding、margin），因此就分成了以下四种盒子：

Content box: 这个区域是用来显示内容，通过 width 和 height设置
Padding box: 内容区域外，边框区域内的空白区域，通过 padding 设置。
Border box: 边框里的内容和内边距。通过 border 设置。
Margin box: 元素和其他元素之间的空白区域。通过 margin 设置。

对于标准盒模型来说，width和height的属性实际上是content box的宽高，而元素的总大小还要加上 边框和内边距
在某些情况下，这样会很麻烦，因为盒子的大小还要加上边框和内边距，于是就有了替代盒模型，其使得width和height是给Border box设置的
默认浏览器会使用标准模型，如果想使用替代模型，可以进行如下声明（在 css 中）：

.box {
  box-sizing: border-box;
}

Web：HTML简介

HTML、常用标签、盒模型简介