Web开发-html篇-上

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>唐&nbsp;李白</h4>	<!--&nbsp;表示空格--><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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;帮助中心</h4></dt><!-- definition description,dd --><dd>账户管理</dd><dd>购物指南</dd><dd>订单操作</dd></dl></body>
</html>

空白折叠：

HTML 中的空白折叠（Whitespace Collapsing）是指在浏览器渲染时，多个连续的空白字符（如空格、制表符和换行符）会被折叠成一个空格。以下是一些关于空白折叠的关键点：

在 HTML 中，如果你输入了多个连续的空白字符，浏览器会将它们视为一个空格。例如，" " 会被渲染为一个空格。
换行符（如 \n）也会被视为空白字符，多个换行符会被折叠成一个空格。即使你在 HTML 中使用了换行，渲染的结果仍然是一个空格。

因为有空白折叠的存在，我们在需要多个空格时就需要别的方法，一个&nbsp特殊符只能表示一个空格，需要多个空格时，需要别的方法，暂时先不用管。

<ul>：无序列表，使用圆点标记。
<ol>：有序列表，使用数字标记。
<li>：列表项，包含在<ul>或<ol>中。
<dl>：定义列表，包含定义条目。
<dt>：定义标题。
<dd>：定义描述。
<br>: 换行
&nbsp ：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>