HTML的学习总结
开发工具
工欲善其事，必先利其器。
这里作者用的是VScode这篇文章也会用VScode作为演示，其他开发工具也可以进行HTML的开发，这里不作演示。
- 推荐到官网下载 VS Code 最新版安装
进入官网后点击右上角的Download即出现如上图所示界面，这里选择自己相应的操作系统下载即可，这里作者是选择的Windows版本，下载完成后安装提示一直下一步就行。
注：这里选择文件的保存路径时，最好不要选择保存在C盘，可改成D盘或者其他盘（在C盘的数据很容易丢失） - 安装完毕运行软件时，推荐下载以下插件（插件是用户想拓展功能的好工具）Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。
插件在如图所示的地方输入并安装即可。 - 运行code后，请注意在File -> Auto Save 选中，如此code将自动保存我们的代码
- 几个常用的功能快捷键
代码格式化：Alt + Shift+ F
快速注释：Ctrl + /
还有许多VS中的快捷键，但这里作者频繁使用的就是这两个有需要的可以移步搜索VS的快捷键。 - 开发HTML建议使用Chrome或者Firefox。建议到官网下载Chrome或者Firefox。
HTML的基本概念
学习HTML之前我们首先要了解什么是HTML。
HTML是一种超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。
HTML 是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
-
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
-
在浏览器中看到的任何网页背后都是一个 HTML 文档，只要在网页上点击鼠标右键->查看源代码（用控制台工具也可）就可看到。
-
HTML以及我们后面将要学习的 CSS（Cascading Style Sheets 级联式样式表) 和 JavaScript是构建广泛使用的Web程序的三剑客。
HTML实例
首先新建文件，然后在该文件夹下新建一个 后缀名为html 的文件，如下图所示：
在该文件中输入如下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="4.ico" type="image/x-icon">
<title>lyj的HTML界面</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
检查我们刚创建的 HTML 文档你会发现，整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如·
<html> - HTML 标签通常是成对出现的，比如
<b>和</b> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
HTML元素
- “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
<p>这是一个段落。</p>
实例解析
<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。<html></html>：<html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。<head></head>:<head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。<meta charset="utf-8">1:这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。<link rel="shortcut icon" href="4.ico" type="image/x-icon">2:指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)<title></title>:设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。<body></body>:<body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
实例结果
在开发工具 code 中我们已经安装了open in browser插件，因此在 code 的编辑区点击鼠标右键即可看到快捷方式将该文件在浏览器中打开。如下图所示：
图标花花已经构建完成
HTML文档相关说明
注释
-
如同大部分的编程语言一样，在 HTML 中有一种可用的机制来在代码中书写注释 。
-
注释是被浏览器忽略的，而且是对用户不可见的，它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。 如果你在半年后重新返回你的代码库，而且不能记起你所做的事情，或者当你处理别人的代码的时候， 那么注释是很有用的.
-
为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号
<!--和-->包括起来， 比如：
<p>我在注释外，可以显示！</p>
<!-- <p>我在注释内！浏览器将忽略我</p> -->
空元素
一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>, <a>等等。我们称其为空元素，如下：
<!-- 换行 -->
<p>我可以<br>换行</p>
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
提示: 在上面代码中你看到
<br>元素放到<p>元素之中——这称作嵌套！
元素的属性
元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
一个属性必须包含如下内容：
- 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个 = 号。
- 一个属性值，由一对引号 “” 引起来。
HTML的标题
HTML 提供了从大到小6级标题，分别是：<h1> ~<h6>，如下所示：
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
在页面中，标题非常重要：
- 搜索引擎用标题来索引页面的内容
- 用户也习惯以标题进行主要内容浏览，以决定是否查看该页面
提示： 一级标题
<h1>最醒目，应该用于页面的主标题，其次为二级标题，以此类推
HTML文本格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lyj的HTML</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
</html>
效果如下
HTML 文本格式化标签
| 标签 | 描述 |
|---|---|
<b> | 定义粗体文本 |
<em> | 定义着重文字 |
<i> | 定义斜体字 |
<small> | 定义小号字 |
<strong> | 定义加重语气 |
<sub> | 定义下标字 |
<sup> | 定义上标字 |
<ins> | 定义插入字 |
<del> | 定义删除字 |
HTML的超链接a
-
没有超链接就没有万维网（World Wide Web）。基本上，我们可以把任何东西加上超链接，不过常用的是文本、图片等。
-
HTML使用标签 来设置超文本链接。
-
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
-
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
超链接语法
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
说明：
href即为要跳转去的地址 URL（Uniform Resorce Locator)target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）- 超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
锚点
- 锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
- 先使用
id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
<!-- 文档其余部分 -->
<h2 id="C1">第一章 lyj的htnl学习总结</h2>
<!-- 文档其余部分 -->
<a href="#C1">跳到第一章</a>
<!-- 文档其余部分 -->
...
注：
1.元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
2. 超链接中的地址需要有#符号
HTML 图像- 图像标签（ <img>）和源属性（Src）
-
在 HTML 中，图像由
<img>标签定义。 -
<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。 -
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。
定义图像的语法是：
<img src="url" alt="some_text">
URL 指存储图像的位置。
浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
HTML 图像- Alt属性
-
alt 属性用来为图像定义一串预备的可替换的文本。
-
替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
HTML 图像标签
| 标签 | 描述 |
|---|---|
<img> | 定义图像 |
<map> | 定义图像地图 |
<area> | 定义图像地图中的可点击区域 |
文件路径
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
上面图片的例子即为绝对路径。下面是相对路径的例子：
| 例子 | 解释 |
|---|---|
<img src="picture.jpg"> | 该图片文件与当前文档在同一目录中 |
<img src="./images/picture.jpg"> | 该图片文件在当前目录下的images目录中 |
<img src="../picture.jpg"> | 该图片文件在上一级目录中 |
提示： 图片的存储大小对网页的加载有重要的影响，从而影响用户体验。因此，在不明显改变图片质量的情况下压缩图片是提高 Web站点速度的重要手段。请前往WebsitePlanet以及 TinyPNG试试！
HTML 表格(table)
表格由 <table>标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lyj的HTML</title>
</head>
<body>
<table>
<tr>
<td>row 1, c1</td>
<td>row 1, c2</td>
</tr>
<tr>
<td>row 2, c1</td>
<td>row 2, c2</td>
</tr>
</table>
</body>
</html>
运行效果如下
HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
加边框的语法如下：
<table border="1">
</table>
效果如图
HTML 表格标签
| 标签 | 描述 |
|---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
HTML 列表(list)
HTML 支持有序、无序和定义列表:
HTML无序列表
-
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
-
无序列表使用
<ul>标签
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下
HTML有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li>标签。
列表项使用数字来标记。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器显示如下
HTML自定义列表
-
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
-
自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
浏览器显示如下
HTML列表标签
| 标签 | 描述 |
|---|---|
<ol> | 定义有序列表 |
<ul> | 定义无序列表 |
<li> | 定义列表项 |
<dl> | 定义列表 |
<dt> | 自定义列表项目 |
<dd> | 定义自定列表项的描述 |
HTML 表单（form）
-
表单是一个包含表单元素的区域。
-
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 来设置:
<form>
.
input 元素
.
</form>
文本域（Text Fields）
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
浏览器显示如下：
密码字段
密码字段通过标签<input type="password">来定义:
<form>
Password: <input type="password" name="pwd">
</form>
浏览器显示如下：
单选按钮（Radio Buttons）
<input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
浏览器显示如下：
复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
浏览器显示如下：
提交(submit)/重置(reset)按钮
<input type="submit"> 定义了提交按钮.
<input type="reset"> 定义了重置按钮.
将表单中的数据取消或传输给服务器端进行处理.
<input type="submit" value="提 交">
<input type="reset" value="重 置">
浏览器显示如下：
还有许多种样式，这里就不一一举例，用表格的形式呈现部分
HTML表单标签
| 标签 | 描述 |
|---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 元素的标签，一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
<legend> | 定义了 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist> | 指定一个预先定义的输入控件选项列表 |
<keygen> | 定义了表单的密钥对生成器字段 |
<output> | 定义一个计算结果 |
其他
HTML 的元素可以以称为区块 或内联的方式进行显示。
HTML区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。
<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>
HTML内联元素
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。
<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>lyj</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">
预设格式
如果你想在网页中展示一首诗或一些特别格式的文本，那么请使用<pre>标签。
<!-- pre标签中的内容将保持格式不变 -->
<pre>
我如果爱你——
绝不象攀援的凌霄花，
借你的高枝炫耀自己；
我如果爱你——
绝不学痴情的鸟儿，
为绿荫重复单调的歌曲；
也不止像泉源，
常年送来清凉的慰藉；
也不止像险峰，
增加你的高度，衬托你的威仪。
甚至日光。
甚至春雨。
不，这些都还不够！
我必须是你近旁的一株木棉，
作为树的形象和你站在一起。
根，紧握在地下，
叶，相触在云里。
每一阵风过，
我们都互相致意，
但没有人，
听懂我们的言语。
你有你的铜枝铁干，
像刀，像剑，
也像戟；
我有我红硕的花朵，
像沉重的叹息，
又像英勇的火炬。
我们分担寒潮、风雷、霹雳；
我们共享雾霭、流岚、虹霓。
仿佛永远分离，
却又终身相依。
这才是伟大的爱情，
坚贞就在这里：
爱——
不仅爱你伟岸的身躯，
也爱你坚持的位置，足下的土地。
</pre>
特殊字符
`<p>`有多 远，滚 多远！`</p>`
或者你希望在页面显示一段 HTML 的源代码，你打算用标签<pre>:
<pre>
<h1>这是个一级标题</h1>
<p>这是一个段落<p>
<a href="https://twitter.com/">眼见何事，情系何处，身处何方，心思何人</a>
<pre>
浏览器效果如下
以上代码将得不到你想要的结果。
原因是：在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
<p>有多 远，滚 多远！</p>
<hr>
<h2>test.html</h2>
<pre>
<h1>这是个一级标题</h1>
<p>这是一个段落<p>
<a href="https://twitter.com/">眼见何事，情系何处，身处何方，心思何人</a>
<pre>
特殊字符可参考ISO-8859-1 字符实体手册
此时浏览器的效果如下
这里我们以<div>,<span>元素为例深度剖析一下：
HTML<div>元素
-
HTML
<div>元素是块级元素，它可用于组合其他 HTML 元素的容器。 -
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 -
如果与 CSS 一同使用，
<div>元素可用于对大的内容块设置样式属性。 -
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
HTML<span>元素
- HTML
<span>元素是内联元素，可用作文本的容器
-<span> 元素也没有特定的含义。
- 当与 CSS 一同使用时，
<span>元素可用于为部分文本设置样式属性。
HTML分组标签
| 标签 | 描述 |
|---|---|
<div> | 定义了文档的区域，块级 (block-level) |
<span> | 用来组合文档中的行内元素， 内联元素(inline) |
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
