文章目录
写在话前
之前学过的html现在忘的差不多了，想再复习一下html，于是我就在csdn找html相关的学习资料，但是并没有找到我想要的那种代码实例加效果截图的，千篇一律的粘代码公式并不能让我们直观感受到真实效果，甚至还看到一篇要付费的。。。
现在确实是一个知识付费的时代，写文章收费并没有让人觉得不合理。我不会站在道德的制高点谴责任何人，因为我心里清楚写一篇博客有多么的不易，不仅不能获利还花费了大量的时间，甚至辛辛苦苦花几天写完的长篇博客也没几个人看，这是真正的吃力不讨好。但就我个人来说，我还是觉得人总要有一点情怀的，作为一个技术追求者，应该具备基本的开源精神，我也是受开源精神影响开始写技术博客的， 记得曾看到某黑客大佬说过一段话很受触动：
曾记得，黑客的原意是指那些对计算机执著钻研，擅长研究系统缺陷的狂热者。但现在黑客的原意已被雨打风吹去，我们那一撮还死死抱着“自由，共享，交流，钻研”的朋友们，你们今天还好吗？当为着这些原生态的黑客精神而热泪盈眶时，当为理想信念而执着奋斗时，当梦想还在支撑着你寂寂默默的前行时，你是否有所察觉，美丽而纯粹的黑客世界在你身后将崩塌。不让生活磨灭我们的个性，是对自己精神价值的鼓舞，还是现实生活中苍白无奈的呐喊？当铅华荡尽，泡沫破灭，蓦然回首，你是否感叹在生命中曾经有过一段无悔的激情岁月……
其实，我觉得，不只是黑客，同样，我们每一个技术人都需要这种原生态的开源精神支撑我们进步成长，因为我们也是直接或间享受开源精神的劳动成果。
人嘛，总需要有一点情怀在心中，无论是对亲人、朋友、陌生人、家国，我们内心总有一股正义与执着在其中，这种执着督促我们奋力前行，给我们以勇气和方向。
是啊，生活很难，不让生活磨灭我们的个性，是对自己精神价值的鼓舞，更是对自己情怀的一种坚守。
回归正题，最后实在没办法，豪横地决定自己写一个，希望能给他人带来一点帮助。
什么是HTML？
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
注意：HTML是一种标记语言（markup language），它不是一种编程语言。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。
HTML文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>第一个标题</h1>
<p>第一个段落</p>
</body>
</html>
<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。
是HTML页面的根元素，在它们之间
是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。
它们之间的内容不会在浏览器的文档窗口显示。
包含了文档的元（meta）数据。
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。
`注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，
否则会出现乱码。有些浏览器会设置 GBK 为默认编码，
则你需要设置为 <meta charset="gbk">。`
还有一些其他用法：
<!--刷新2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
head头部
<head> 元素包含了所有的头部标签元素。
在 <head>元素中你可以插入脚本（scripts）
, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为:
<title>, <style>, <meta>, <link>,
<script>, <noscript> 和 <base>。
<title> 定义文档的标题
<base> 定义页面链接标签的默认链接地址
<link> 定义一个文档和外部资源之间的关系
<meta> 定义HTML文档中的元数据
<script> 定义客户端的脚本文件
<style> 定义HTML文档的样式文件
title 文档标题
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
它定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
内容......
</body>
</html>
标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题。
示例：
<h1>这是第一个标题</h1>
<h2>这是第二个标题</h2>
<h3>这是第三个标题</h3>
<h4>这是四个标题</h4>
<h5>这是五个标题</h5>
<h6>这是六个标题</h6>
水平线
<hr> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容。
示例：
<p>枕上诗书闲处好，</p>
<hr>
<p>门前风景雨来佳。</p>
<hr>
注释
为了提高其可读性，可以将注释插入 HTML 代码中，使代码更易被人理解。
注释写法如下:
<!-- 注释内容 -->
段落
HTML 段落是通过标签 <p> 来定义的。
示例：
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p> 年敲代码三百天，
即会拷来也会编。
</p>
换行
在不产生一个新段落的情况下进行换行，可以使用 <br> 标签，
它没有结束标签（不成对儿）
示例：
<p>枕上诗书闲处好，<br>门前风景雨来佳。<br>演示分行的效果</p>
文本格式化标签 粗体 斜体 上下标
<b> 定义粗体
<i> 定义斜体
<sub> 定义下标字
<sup> 定义上标字
<small> 定义小号字
<strong> 定义加重语气
<em> 定义着重文字，也是斜体同<i>
<ins> 定义插入字
<del> 定义删除字
示例：
<b>文本加粗</b>
<br>
<strong>文本也加粗</strong>
<br>
<big>字体放大</big>
<br />
<em>斜体文本</em>
<br />
<i>也是斜体文本</i>
<br>
<small>缩小文本</small>
<br>
下标
<sub>2</sub>
<br>
上标
<sup>2</sup>
<br>
<ins> 定义插入字</ins>
<br>
<del> 定义删除字</del>
链接
HTML 链接是通过标签 <a> 来定义的。
示例：
<a href="http://www.baidu.com" target="_blank" >点我进入百度</a>
target：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页（不写就默认这个）
id：定义标签的唯一ID，HTML文档树中唯一
示例：
<a id="b">我是b</a>
<a href="#b">访问b</a>
图像
在 HTML 中，图像由<img> 标签定义。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。
源属性的值是图像的 URL 地址。
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:
src 可以放图片链接：
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597174250391&di=c84c327725d39fab846db7f03287b18e&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F58b4ef69ed377.jpg" width="500" height="500" />
效果如下：
也可以放本地图片路径，找一张图片放到当前工程目录下，也可以使用绝对路径，
<img src="2.jpg" width="300" height="500" />
效果如下：
图像里面有一个Alt属性，
alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
示例：
<img src="1.jpg" alt="图片1">
URL
以下是一些URL scheme(因特网服务的类型)：
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页，加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。
URL 只能使用 ASCII 字符集.来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
表格
表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义），
每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），
即数据单元格的内容。数据单元格可以包含文本、图片、
列表、段落、表单、水平线、表格等等。
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
表格示例：
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
border=“1” 表示边框属性宽度，不加的效果：
表格属性:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
表头
表格的表头使用 <th> 标签进行定义。
示例：
<table border = '1'>
<tr>
<th>表头 1</th>
<th>表头 2</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
列表
HTML 支持有序、无序和定义列表。
1.无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用 <ul> 标签
示例：
<ul type="disc">
<li>用户</li>
<li>管理员</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
2.同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
示例：
<ol type="1">
<li>用户</li>
<li>管理员</li>
</ol>
type属性：
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
3.自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
示例：
<dl>
<dt>Coffee</dt>
<dd>
<p>一杯咖啡</p>
<img src ='https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3279950110,2159240585&fm=26&gp=0.jpg' width="500" height="500" alt = '咖啡图'> </img>
</dd>
<dt>Milk</dt>
<dd>
<p>一杯牛奶</p>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2862689571,1651685268&fm=26&gp=0.jpg" width="500" height="500" alt = '牛奶图'></img>
</dd>
</dl>
区块分区
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
示例：
<div style="color:#0000FF">
<h3>div 中的标题。</h3>
<p>div 中的文本。</p>
</div>
<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
示例：
<p>那是一片<span style="color:blue">蓝色</span> 的海洋。</p>
布局
- 使用div 布局
下面的例子使用五个 div 元素来创建多列布局：
<div id="container" style="width:500px">
<div id="header" style="background-color:#FF0000;">
<h1 style="margin-bottom:0;">网页标题</h1></div>
<div id="menu" style="background-color:#FF00FF;height:200px;width:100px;float:left;">
<b>菜单</b><br>
C<br>
C++<br>
Java<br>
python</div>
<div id="content" style="background-color:#9AFF02;height:200px;width:400px;float:left;">
他的胸腔四分五裂，流淌出滚烫的岩浆，爱情落在地面冻结，时间踩碎，雪花轻柔地掩盖。
</div>
<div id="footer" style="background-color:#2828FF;clear:both;text-align:center;">
copyright by xxx</div>
</div>
这里稍微提一下颜色值，颜色由红®、绿(G)、蓝(B)组成。
HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
这个表格给出了由三种颜色混合而成的具体效果：
三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
所以单独研究颜色没有什么意义，稍微记几种常用的就行了。不强制要求掌握，用的时候百度一下就可以了。
2. 使用表格布局：
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FF0000;">
<h1>网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FF00FF;width:100px;">
<b>菜单</b><br>
C<br>
C++<br>
Java<br>
python
</td>
<td style="background-color:#9AFF02;height:200px;width:400px;">
那么热的夏天，少年的后背被女孩的悲伤烫出一个洞，一直贯穿到心脏，无数个季节的风穿越这条通道，有一只萤火虫在风里飞舞，忽明忽暗。
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#2828FF;text-align:center;">
copyright by xxx</td>
</tr>
</table>
表单和输入
HTML 表单用于收集不同类型的用户输入。
1.表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、
单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置
输入类型：
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
示例：
<form>
用户名: <input type="text" name="username"><br>
密码: <input type="text" name="pwd">
</form>
2.针对密码输入，实际上还有专门的密码字段password：
示例：
<form>
Password: <input type="password" name="pwd">
</form>
这样输入不会明文显示，而是以星号或圆点替代，比上面那种text单行文本输入更安全。
3. 单选按钮
<input type="radio"> 标签定义了表单单选框选项
示例：
<form>
<input type="radio" name="a" value="male">男<br>
<input type="radio" name="a" value="female">女
</form>
4.复选框（Checkboxes）
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中
选取一个或若干选项。
示例：
<form>
<input type="checkbox" name="a" value="basketball">篮球<br>
<input type="checkbox" name="a" value="football">足球 <br>
<input type="checkbox" name="a" value="pingpang">乒乓球
</form>
5.提交按钮(Submit Button)
<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。
表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的
输入数据进行相关的处理。
<form name="input" action="hello.html" method="get">
用户名: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
在上面的文本框内键入内容后，然后点击Submit确认按钮，那么输入数据会传送到 "hello.html"的页面。
- 下拉列表
示例：
<form action="">
<select name="球类">
<option value="篮球">篮球</option>
<option value="足球">足球</option>
<option value="保龄球">保龄球</option>
<option value="羽毛球">羽毛球</option>
</select>
</form>
7.多行文本textarea输入
示例：
<textarea name="a" id="a" cols="30" rows="10">
请输入内容：
</textarea>
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用
label标签
定义：label标签为 input 元素定义标注（标记）。
说明：
label 元素不会向用户呈现任何特殊效果。
label 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
<label for="username">用户名</label>
<input type="text" id="username" name="username">
</form>
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
iframe语法:
<iframe src="URL"></iframe>
该URL指向不同的网页。
为了看到更好的效果，可以找几个网站，鼠标右键选择查看网页源代码，将源代码复制下来保存到一个新建的html文件中，作为备用素材。
1.设置高度与宽度
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如：“80%”)。
<iframe src="博客.html" width="1000" height="600"></iframe>
<p> 其他内容 </p>
<iframe src="python学习网.html" width="1000" height="600"></iframe>
2.移除边框
frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 “0” 移除iframe的边框:
<iframe src="博客.html" width="1000" height="600" frameborder="0">
</iframe>
3.使用iframe来显示目标链接页面
目标链接的属性必须使用iframe的属性，如下实例:
<iframe src="python学习网.html" width= '1000' height='600' name="a"></iframe>
<p><a href="https://www.baidu.com/" target="a">点击进入百度</a></p>
因为 a 标签的 target 属性是名为 a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。
字符实体
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体，
一些在键盘上找不到的字符也可以使用字符实体来替换。
参照表：
简单示例：
<p> a > b </p>
<p>a > b</p>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
