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开发中的主要作用:

  1. 结构化内容:HTML用于创建网页的结构和布局,通过标签定义标题、段落、列表、表格等内容,使得网页信息组织有序。

  2. 超链接功能:HTML的超链接功能使得不同网页之间可以相互链接,从而实现信息的快速导航与访问。这种超链接的能力是Web的核心特性之一。

  3. 多媒体支持:HTML5引入了音频、视频等标签,使得在网页中嵌入多媒体内容变得更加容易,从而提升用户体验。

  4. 表单交互:HTML提供了表单元素,允许用户输入数据并提交,广泛应用于注册、登录、评论等功能,实现与用户的交互。

  5. 与CSS和JavaScript结合:HTML可以与CSS(层叠样式表)和JavaScript(脚本语言)结合使用,CSS负责网页的样式和布局,而JavaScript用于实现动态效果和交互逻辑。三者的结合构成了现代Web开发的基础。

  6. 搜索引擎优化(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>唐&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.表格

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中的特殊字符表。

相关推荐
熊的猫28 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香2 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书