Web：HTML简介
source link: https://blackdn.github.io/2022/07/29/HTML-Intro-2022/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
“生于深秋，孤独一世，忧郁半生。”
Web：HTML简介
HTML感觉写不了太多
所以打算就给一个模板，然后介绍一下一些标签
然后给常用标签列个表格啥的=。=
之前草率了以为JDBC是最简单的，现在感觉这篇最简单…
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" />
<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;
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK