一、HTML教程练习笔记- (HTML5 标准)
本笔记主要目的是练习HTML 并无其它用途
官网地址：https://www.runoob.com/html/html-intro.html
HTML标签：https://www.w3school.com.cn/tags/tag_comment.asp
1、HTML简介
1.1.什么是HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
1.2.HTML 编辑器推荐
- notepad++：https://notepad-plus.en.softonic.com/?ex=CORE-117.1
- VS Code：https://code.visualstudio.com/
- Sublime Text：http://www.sublimetext.com/
1.3.HTML5编辑规范
1、文件拓展名默认使用htm或者html，便于操作系统或者程序辨认文件，而图片则基本上存为gif或jpg
2、浏览器默认忽视回车符，不过为了方便阅览，人们还是会习惯地在写完一段代码后进行回车
3、标记符号用尖括号括起来，带斜杠的元素表示该标记说明结束，大多数标记符必须成对使用，用以说明起始和结束。
4、必须使用半角而不是全角字符
5、HTML注释<!--注释内容-->的内容不给予显示。
1.4.HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>1.5.HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>1.6.<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>1.6.1通用声明
HTML5
<!DOCTYPE html>HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">查看完整网页声明类型 DOCTYPE 参考手册。
1.6.2.<meta>文档描述
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!--字符集为gb2312-->>
<meta name="author"
content="w3school.com.cn"><!--标注了该网站的主页-->
<meta name="revised"
content="David Yang,8/1/07"><!--标注了创作者-->
<meta name="generator"
content="Dreamweaver 8.0en"><!--标注了编辑软件-->
<meta name="description"
content="HTML examples"><!--描述了该文档-->
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"><!--描述关键字-->
</head>
</html>
1.6.2.1.Refresh (自动刷新页面)
说明：让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。
<meta http-equiv="Refresh" content="30" /><meta http-equiv="Refresh" content="5; url=https://www.w3school.com.cn />注意：其中的5是指停留5秒钟后自动刷新到URL网址。
1.7.HTML 实例
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
<!DOCTYPE html>
<html>
<head>
<title>页面标题(w3cschool.cn)</title>
</head>
<body>
<h1>我是第一个标题</h1>
<p>我是第一个段落。</p>
</body>
</html>实例解析：
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
1.8.中文编码 编码格式为 utf-8
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
HTML 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>2、HTML 基础
2.1.HTML 标题 </h1>
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
2.2.HTML 段落 </p>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
2.3.链接<a href="xxx">
<a href="https://blog.csdn.net/qq_35831134">这是一个链接</a>
2.4.HTML图像 <img>
<img loading="lazy" src="./images/image.png" width="258" height="39" />
3、HTML元素
HTML文档由HTML元素定义
3.1.元素 换行<br>；链接<a href="1.htm">
| 开始标签 * | 元素内容 | 结束标签 * |
|---|---|---|
| <p> | 这是一个段落 | </p> |
| <a href="default.htm"> | 这是一个链接 | </a> |
| <br> | 换行 |
*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。
3.2.嵌套的HTML元素
大多数HTML元素可以嵌套(HTML元素可以包含其他HTML元素)。
<!DOCTYPE html>
<html>
<body>
<p>这是一个段落</p>
</body>
</html>
以上实例包含了3个HTML元素：
<p>元素：
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
<body>元素：
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。
3.3.空元素<br>
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
4、HTML属性
属性是HTML元素提供的附加信息
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
4.1.属性实例
拥有关于对其方式的附加信息：
<h1 align="center">
<html>
<body>
<h1 align="center">标题-居中排列</h1>
</body>
</html>
拥有关于背景颜色的附加信息：
<body bgcolor="yellow">
<html>
<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body>
</html>
4.2.HTML 提示：使用小写属性
属性和属性值对大小写不敏感。
不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
4.3.始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
5、标题
5.1.标题(Heading) 是通过<h1>-<h6>等标签进行定义的。
<h1>定义最大的标题。<h6>定义最小的标题。
<h1>h1 This is a heading</h1>
<h2>h2 This is a heading</h2>
<h3>h3 This is a heading</h3>
5.2.HTML水平线，<hr/>标签在HTML页面中创建水平线，hr元素可用于分隔内容。
<h1>h1 This is a heading</h1>
<hr/>
<p>This is a paragraph</p>
<hr/>
<p>This is a paragraph</p>
5.3注释 <!--xxx-->
<!-- This is a comment注释 -->6、段落
6.1.段落 是通过<p>标签定义的。
<p>This is a paragraph</p>
<p>This is another paragraph</p>
6.2.拆行<br>，不产生一个新段落的情况下进行换行。
<p>This is 换行<br/> a para 换行<br/> graph with line breaks</p>
<!--若要打断段落中的行，请使用br标记-->
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
7.样式
7.1.格式化标签 使用标签<b>("bold")与<i>("italic")对输出的文本进行格式
通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
</body>
</html>
7.2.预格式文本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
</body>
</html>7.3."计算机输出"标签，此例演示不同的"计算机输出"标签的显示效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<p>
<b>注释：</b>这些标签常用于显示计算机/编程代码。
</p>
</body>
</html>
7.4.地址，此例演示如何在 HTML 文件中写地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
7.5.缩写和首字母缩写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
<p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
</body>
</html>当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本
7.6.文字方向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
</body>
</html>
7.7.块引用，此例演示如何实现长短不一的引用语。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
</body>
</html>
7.8.删除字效果 </del> 和 插入字效果</ins>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
</body>
</html>
HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
| <b> | 定义粗体文本 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标字 |
| <sup> | 定义上标字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
HTML "计算机输出" 标签
| 标签 | 描述 |
|---|---|
| <code> | 定义计算机代码 |
| <kbd> | 定义键盘码 |
| <samp> | 定义计算机代码样本 |
| <var> | 定义变量 |
| <pre> | 定义预格式文本 |
HTML 引文, 引用, 及标签定义
| 标签 | 描述 |
|---|---|
| <abbr> | 定义缩写 |
| <address> | 定义地址 |
| <bdo> | 定义文字方向 |
| <blockquote> | 定义长的引用 |
| <q> | 定义短的引用语 |
| <cite> | 定义引用、引证 |
| <dfn> | 定义一个定义项目。 |
8.链接
8.1.链接 target 属性，定义被链接的文档在何处显示
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开。 |
| _self | 默认。在相同的框架中打开。 |
| _parent | 在父框架集中打开。 |
| _top | 在整个窗口中打开。 |
| framename | 在指定的框架中打开。 |
8.2.链接 id 属性，可用于创建在一个HTML文档书签标记
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
个人理解应该可以用于返回顶部，在当前页面链接到指定位置
<a id="tips">有用的提示部分</a>在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>注释： 请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。
8.3.创建超级链接
<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>
</body>
</html>
8.4.将图像作为链接
<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
</body>
</html>
8.5.链接到指定位置
<html>
<p><a href="#C4">查看4</a></p>
<p><a href="#C20">查看20</a></p>
<h2> 1</h2><p> 1</p>
<h2> 2</h2><p> 2</p>
<h2> 3</h2><p> 3</p>
<h2><a name="C4"> 4</a></h2><p> 4</p>
<h2> 5</h2><p> 5</p>
<h2> 6</h2><p> 6</p>
<h2> 7</h2><p> 7</p>
<h2> 8</h2><p> 8</p>
<h2> 9</h2><p> 9</p>
<h2> 10</h2><p> 10</p>
<h2> 11</h2><p> 11</p>
<h2> 12</h2><p> 12</p>
<h2> 13</h2><p> 13</p>
<h2> 14</h2><p> 14</p>
<h2> 15</h2><p> 15</p>
<h2> 16</h2><p> 16</p>
<h2> 17</h2><p> 17</p>
<h2> 18</h2><p> 18</p>
<h2> 19</h2><p> 19</p>
<h2><a name="C20"> 20</a></h2><p> 20</p>
<h2> 21</h2><p> 21</p>
</html>
9.HTML头部
9.1. 元素<head>
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
9.2.元素<title>
<title> 标签定义了不同文档的标题。
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>9.3.元素<base>
<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>9.4.元素<link>
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
9.5. 元素<style>
<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>9.6. 元素 <meta>，meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域
9.6.1.为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">9.6.2.为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">9.6.3.定义网页作者:
<meta name="author" content="Runoob">9.6.4.每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">9.7. 元素<script>
<script>标签用于加载脚本文件，如： JavaScript。
10.样式-CSS
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式
10.1.内部样式表：可以在 head 部分通过 <style> 标签定义内部样式表
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>
10.2.外部样式表：使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观
<html>
<head>
<link rel="stylesheet" type="text/css" href="./csstest1.css" >
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html>//csstest1.css
h1 {
color: red
}
p {
color: blue
/*加一个边框*/
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:150px;
border-radius:25px;
}
10.2.1.没有下划线的链接
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>
<body>
<a href="/example/html/lastpage.html" style="text-decoration:none">
这是一个链接！
</a>
</body>
</html>
10.3.内联样式：
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
| 标签 | 描述 |
|---|---|
| <style> | 定义样式定义。 |
| <link> | 定义资源引用。 |
| <div> | 定义文档中的节或区域（块级）。 |
| <span> | 定义文档中的行内的小块或区域。 |
| <font> | 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。 |
| <basefont> | 定义基准字体。不赞成使用。请使用样式。 |
| <center> | 对文本进行水平居中。不赞成使用。请使用样式。 |
HTML从入门到放弃 练习笔记(2): https://blog.csdn.net/qq_35831134/article/details/109546909