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文档示例:
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. 段落与文本样式
使用段落标签和文本样式标签,可以更好地组织内容:
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>
<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支持无序列表、有序列表和定义列表:
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.表格
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>
<!-- 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>
这是生成的表格:
而我们经常需要合并表格,如果换成如下代码,那么表格就会被合并
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. 超链接
超链接用于连接不同页面或网站:
html
<!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中的特殊字符表。