HTML发展史
HTML的历史可以追溯到20世纪90年代初。当时，互联网尚处于起步阶段，Web浏览器也刚刚问世。HTML的创建者是蒂姆·伯纳斯-李（Tim Berners-Lee），他在1991年首次提出了HTML的概念。HTML的初衷是为了方便不同计算机之间共享文档，因此采用了标记语言的形式。
- 1993年：HTML 1.0发布，它的功能十分简单，主要用于文本格式化和链接。
- 1995年：HTML 2.0发布，增加了表单、图像等功能，使得Web页面更加丰富。
- 1997年：HTML 3.2发布，进一步扩展了表格、脚本和样式的支持。
- 1999年：HTML 4.01发布，这是一个重要的版本，支持更复杂的布局和交互功能。
- 2014年：HTML5正式成为W3C推荐标准，引入了音频、视频、Canvas等新元素，极大丰富了Web内容的表现力。
如今，HTML已经发展成为Web开发的基础语言之一，几乎所有的网站都离不开HTML的支持。
HTML在Web开发中的地位和作用
HTML在Web开发中占据着极其重要的地位，它是构建网页的基石。以下是HTML在Web开发中的主要作用：
-
结构化内容：HTML用于创建网页的结构和布局，通过标签定义标题、段落、列表、表格等内容，使得网页信息组织有序。
-
超链接功能：HTML的超链接功能使得不同网页之间可以相互链接，从而实现信息的快速导航与访问。这种超链接的能力是Web的核心特性之一。
-
多媒体支持：HTML5引入了音频、视频等标签，使得在网页中嵌入多媒体内容变得更加容易，从而提升用户体验。
-
表单交互：HTML提供了表单元素，允许用户输入数据并提交，广泛应用于注册、登录、评论等功能，实现与用户的交互。
-
与CSS和JavaScript结合：HTML可以与CSS（层叠样式表）和JavaScript（脚本语言）结合使用，CSS负责网页的样式和布局，而JavaScript用于实现动态效果和交互逻辑。三者的结合构成了现代Web开发的基础。
-
搜索引擎优化（SEO）：HTML的结构化标签和属性（如
<title>、<meta>等）有助于搜索引擎抓取和理解网页内容，从而提高网页的可见性和排名。
sublime text的安装和使用
工欲善其事，必先利其器，主要用到的工具有，sublime text ，VS code等，作为入门第一天，今天先说sublime text。
1.浏览器搜索，直接下载安装
2.根据各自电脑进行下载，大多数应该都是Windows，安装找个路径，然后就是下一步，下一步……
3.使用
打开软件，CTRL+Shift+P,然后搜索install，点击第一个，安装插件，然后进行搜索，
Emmet，点击进行安装
当然也有一些其他插件，比如汉化的插件，直接搜索Chinese，就可以下载安装，还有其他的插件根据自身需求下载安装，方法一样。点击上方菜单/首选项目/Package Setting可以查看已安装过的插件。
好了工具介绍到此结束，开始我们的第一条html代码吧……
1. 基本结构
每个HTML文档都应该包含基本的结构。以Windows为例，输入!,然乎按TAB键，会自动生成一个基本结构。（注意是英文的感叹号，其他标签也可以用tab键哦）下面是一个简单的HTML文档示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <!--标题标签-->
</head>
<body>
<!--h系列标签，加黑加粗字体-->
<h1>学习前端第一天</h1>
<h2>学习前端第一天</h2>
<h3>学习前端第一天</h3>
<h4>学习前端第一天</h4>
<h5>学习前端第一天</h5>
<h6>学习前端第一天</h6>
标签有点多，还没记住，不过感觉还挺好玩
</body>
</html>
保存文件后缀为 .html 文件，进行保存，然后在浏览器中打开，效果是这样
标签解释：
<!DOCTYPE html>：声明文档类型。<html>：根元素，包含整个HTML文档。<head>：文档的元数据部分，包含标题和其他信息。<meta charset="UTF-8">：指定字符编码。<title>：文档标题，在浏览器标签中显示。<body>：文档主体，包含可见内容。<h1>至<h6>：标题标签，表示不同级别的标题，<h1>为最高级别，<h6>为最低级别。
可以理解为固定格式，目前不必深究为什么
2. 段落与文本样式
使用段落标签和文本样式标签，可以更好地组织内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日漫发展史</title>
</head>
<body>
<em><h2>日本动漫发展史</h2></em>
<!--p标签为文章添加段落-->
<!--strong加粗/em斜体-->
<!--br标签进行换行-->
<p>你知道吗，加拿大曾做过一项调查，水管工人马里奥的知名度竟然比自家总理还高。而在美国，有人可能不知道日本在地图上的位置，却对《Pokemon》的每一只宝可梦了如指掌。这足以显示<strong>日本动漫的全球影响力</strong>。在漫画销售量排行榜上，日本漫画占据了前100名中的9本，而英语漫画则有43本。在2020年，全球电影票房总冠军不是好莱坞电影，而是<em>《鬼灭之刃》</em>剧场版。从漫画、动画、电影再到游戏，日本动漫征服了全世界。</p>
<p>那么，为什么日本动漫如此强大呢？让我们回顾一下其发展的历史。</p>
<h4>早期的探索与美国的影响</h4>
<p>日本在明治维新后迅速接触到西方的动画制作技术。1917年，日本制作了现存最早的动画作品《雀妖内名刀之卷》，讲述了一位武士想要测试刀子锋利度的故事。虽然这个时期的日本动画作品不少，但并没有留下太多知名的作品。相反，20世纪早期的美国动画业迅速发展，并有许多经典之作，例如迪士尼在1928年推出的短篇电影《汽船威利号》，这是米老鼠的第一次亮相，也是第一部有声动画作品。</p>
<h4>二战时期的动画发展</h4>
<p>
二战期间，日本的动画业得到了政府的支持，特别是为军方制作的宣传片。1945年上映的《桃太郎 海之神兵》由日本海军赞助，虽然是宣传片，但却展示了当时日本动画技术的集大成。这部作品启发了后来被誉为“漫画之神”的手冢治虫，他在观看后决定要投身于动画事业。
</p>
<h4>战后复苏与经济腾飞</h4>
<p>
战后，日本在美国的占领下开始重建经济。1950年代后期，在韩战红利的帮助下，日本经济逐渐恢复，并开始大量出口汽车、电视和家用电器。经济复苏后，国家需要新的文化和娱乐来提振士气，漫画作为一种便宜的娱乐形式得到了迅速发展。
<hr>
1956年，大川博成立了东映动画，立志要成为“东方的迪士尼”。东映的第一部动画长片《白蛇传》于1958年推出，对许多人产生了深远的影响，包括宫崎骏和高田勋，他们后来创办了吉卜力工作室。
</p>
<h4>手冢治虫的贡献</h4>
<p>
<strong>手冢治虫</strong>是日本动漫发展史上的关键人物。他不仅发明了“偷帧术”，大幅降低了动画制作成本，还引进了电影的分镜技巧，改变了漫画的创作方式。他的作品《铁臂阿童木》在1963年创下了全日本平均30%的收视率，并被翻译成多国语言，销往世界各地。
</p>
<h4>1970-1980年代的繁荣</h4>
<p>
1970年代，日本动画进入了“战国时代”，出现了许多经典之作，如《无敌铁金刚》、《凡尔赛玫瑰》和《宇宙战舰大和号》。1980年代，由于制作一部动画成本高昂，制作委员会方式应运而生，各公司分担风险并合作制作，提高了作品质量。
</p>
<h4>1990年代至今的辉煌</h4>
<p>
1990年代，日本动画发展更加成熟，每年都有大量优秀作品问世，如《魔女宅急便》、《红猪》、《幽游白书》和《灌篮高手》。进入21世纪，《海贼王》、《火影忍者》和《钢之炼金术师》等作品继续取得巨大成功。2010年代，《进击的巨人》、《一拳超人》和《鬼灭之刃》等作品更是风靡全球。
</p>
</body>
</html>生成的文件打开效果是这样：
<p>：段落标签，用于添加文本段落。<strong>：加粗文本，用于强调重要性。<em>：斜体文本，用于强调。- <hr>:会产生一条线进行分割
3. 列表
HTML支持无序列表、有序列表和定义列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body>
<!-- unordered list ,无序列表，ul -->
<h2>侠客行</h2>
<h4>唐 李白</h4> <!-- 表示空格-->
<ul>
<li>赵客缦胡缨，吴钩霜雪明。</li>
<li>银鞍照白马，飒沓如流星。</li>
<li>十步杀一人，千里不留行。</li>
<li>事了拂衣去，深藏身与名。</li>
<li>闲过信陵饮，脱剑膝前横。</li>
<li>将炙啖朱亥，持觞劝侯嬴。</li>
三杯吐然诺，五岳倒为轻。<br>
眼花耳热后，意气素霓生。<br>
救赵挥金槌，邯郸先震惊。<br>
千秋二壮士，烜赫大梁城。<br>
纵死侠骨香，不惭世上英。<br>
谁能书阁下，白首太玄经。<br>
</ul>
<hr>
<!-- ordered list ,有序列表，ol -->
<ol>
<h3>web前端学习</h3>
<li>Vue框架</li>
<li>JavaScript</li>
<li>React</li>
</ol>
<hr>
<!--definiton list ,定义列表， dl -->
<dl>
<!-- definiton title ,dt -->
<dt><h4> 帮助中心</h4></dt>
<!-- definition description,dd -->
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
</body>
</html>空白折叠：
HTML 中的空白折叠（Whitespace Collapsing）是指在浏览器渲染时，多个连续的空白字符（如空格、制表符和换行符）会被折叠成一个空格。以下是一些关于空白折叠的关键点：
- 在 HTML 中，如果你输入了多个连续的空白字符，浏览器会将它们视为一个空格。例如，
" "会被渲染为一个空格。 - 换行符（如
\n）也会被视为空白字符，多个换行符会被折叠成一个空格。即使你在 HTML 中使用了换行，渲染的结果仍然是一个空格。
因为有空白折叠的存在，我们在需要多个空格时就需要别的方法，一个 特殊符只能表示一个空格，需要多个空格时，需要别的方法，暂时先不用管。
<ul>：无序列表，使用圆点标记。<ol>：有序列表，使用数字标记。<li>：列表项，包含在<ul>或<ol>中。<dl>：定义列表，包含定义条目。<dt>：定义标题。<dd>：定义描述。- <br>: 换行
-   ：html中的特殊符，用于表示空格
接下来的效果，我就不截图一一展示了，可以自行复制代码查看
4.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<!-- table,tr,th,td, -->
<body>
<table border="1" cellspacing="0">
<caption>商品清单</caption><!--为表格添加清单-->
<tr>
<th>产品名称</th>
<th>品牌</th>
<th>数量</th>
<th>入库时间</th>
</tr>
<tr>
<td>空调</td>
<td>小米</td>
<td>200</td>
<td>2024-08-03</td>
</tr>
<tr>
<td>电冰箱</td>
<td>海尔</td>
<td>100</td>
<td>2024-08-01</td>
</tr>
<tr>
<td>洗衣机</td>
<td>海尔</td>
<td>200</td>
<td>2024-08-02</td>
</tr>
</table>
</body>
</html> 这是生成的表格：
而我们经常需要合并表格，如果换成如下代码，那么表格就会被合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格的横向合并与纵向合并</title>
</head>
<body>
<table border="1" cellspacing="0">
<caption>商品清单</caption><!--为表格添加清单-->
<tr>
<th>产品名称</th>
<th>品牌</th>
<th colspan = "2"> 数量和入库时间</th> <!-- 横向合并，其实表格的列合并 -->
</tr>
<tr>
<td>空调</td>
<td>小米</td>
<td>200</td>
<td>2024-08-03</td>
</tr>
<tr>
<td>电冰箱</td>
<td rowspan="3">海尔</td> <!-- 纵向合并，其实表格的行合并 -->
<td>100</td>
<td>2024-08-01</td>
</tr>
<tr>
<td>洗衣机</td>
<td>200</td>
<td>2024-08-02</td>
</tr>
<tr>
<td>热水器</td>
<td>150</td>
<td>2024-08-02</td>
</tr>
</table>
</body>
</html>这是修改后的表格
我们将同一品牌的进行了合并，也合并了第一行的3，4列
<table>：定义表格。<tr>：表格行。<th>：表头单元格，默认加粗并居中。<td>：表格单元格。<caption>：表格标题。colspan：跨越的列数，表示合并列。
5. 超链接
超链接用于连接不同页面或网站：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接/a标签</title>
</head>
<body>
<dl>
<dt><h4>导航站</h4></dt>
<dd><a href="http://www.xiaomi.com" title="点击一下，了解更多">小米</a></dd>
<dd><a href="http://www.baidu.com" title="点击一下，了解更多">百度</a></dd>
<dd><a href="http://www.Bing.com">必应</a></dd>
</dl>
</body>
</html>
<a>：锚点标签，用于定义超链接。href：指定链接目标。title：鼠标悬停时显示的提示信息。
html剩下的内容会在下篇更新……，下面是html中的特殊字符表。
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
