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

相关推荐
鑫宝Code8 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh1 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜7 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点7 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow7 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o7 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app