HTML5语言入门

最新推荐文章于 2024-04-24 15:00:00 发布

南柯Diana

最新推荐文章于 2024-04-24 15:00:00 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/diane6/article/details/101530382

版权

一.HTML5基础

1.HTML简介及发展史

HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。当你使用浏览器打开任意一个页面，按下F12键，就会看到一段程序，里面显示的就是这个网页的HTML源文件。

HTML发展史

超文本标记语言——在1993年6月互联网工程工作小组工作草案发布（并非标准）
HTML2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布过时。
HTML3.2——1996年1月14日，W3C推荐标准。
HTML4.0——1997年12月18日，W3C推荐标准。
HTML4.01（微小改进）——1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国际标准化组织和国际电工委员会的标准。
XHTML1.0——2000年1月26日发布。
XHTML1.1——2001年5月31日发布。
XHTML2.0——W3C的工作草案，由于改动过大，学习这项新技术的成本过高而最终失败，因此，现在最常用的还是XHTML1.0标准。
HTML5——目前最新的版本。

HTML5的优势

1.世界知名浏览器厂商对HTML5的支持

微软
Google
苹果
Opera
Mozilla

2.市场的需求

现在的市场已经迫不及待地要求有一个同一的互联网通用标准。HTML5之前的情况是，由于各浏览器之间的不统一，仅是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量的时间。而HTML的目标就是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画及同计算机的交互都被标准化。

3.跨平台

HTML5可以做到跨平台开发，用户只用打开浏览器即可访问应用，PC网站、各种移动设备、插件扥核心代码就可以不用重复编写，极大地减少了开发人员的工作量。

2.HTML5文件的基本结构

前面讲过HTML是一种超文本标记语言，所以他最基本的语法就是<标记>内容</标记>。HTML5的基本结构分为两部分，如图所示。整个HTML包括头部(head)和主体(body)两部分，头部包括网页标题(title)等基本信息，主体包括网页的内容信息，如图片、文字等。

在这里插入图片描述

3.网页的基本信息

DOCTYPE声明

在HTML结构的最上面有一行关于DOCTYPE文档类型的声明，约束HTML文档结构，检验是否符合相关Web标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行。

<!DOCTYPE html>

<title>标签

使用<ttitle.>标签描述网页的标题，类似一盘文章的标题，一般为一个简洁的主题，并能使读者有兴趣读下去。

<title>搜狐—中国最大的门户网站</title>

打开网页后，将在浏览器窗口的标题栏显示网页标题。

<meta>标签

使用该标签描述网页的摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。

4.网页的基本标签

标题标签

HTML共提供了六级标题<h1>~<h6>，并赋予了标题一定的外观，所有标题字体加粗、<h1>字号最大，<h6>字号最小。

<html>
<head lang="en"> 
		<meta charset="utf-8" />
		<title>不同等级的标题标签对比</title>
	</head>
	<body>
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h4>四级标题</h4>
		<h5>五级标题</h5>
		<h6>六级标题</h6>
	</body>
</html>

段落标签和换行标签

顾名思义，段落标签<p>…</p>表示一段文字等内容。比如一首歌，包括歌名和歌词。

<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>段落标签的应用</title>
	</head>
	<body>
		<h1>北京欢迎你</h1>
		<p>北京欢迎你，有梦想谁都了不起！</p>
		<p>有梦想就会有奇迹。</p>
	</body>
</html>

换行标签<br>表示强制换行显示，该标签比较特殊，没有结束标签，直接使用<br/>表示标签的开始和结束。

<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>换行标签的应用</title>
	</head>
	<body>
		<h1>北京欢迎你</h1>
		<p>
			北京欢迎你，有梦想谁都了不起！<br/>
			有勇气就会有奇迹。<br/>
			北京欢迎你，为你开天辟地<br/>
			流动中的魅力充满朝气。<br/>
			北京欢迎你，在太阳下分享呼吸<br/>
			在黄土地刷新成绩。<br/>
			北京欢迎你，像音乐感动你<br/>
			让我们都加油去超越自己。<br/>
		</p>
	</body>
</html>

水平线标签

顾名思义，水平线标签<hr/>表示一条水平线，注意该标签与<br/>标签一样，比较特殊，没有结束标签。

<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>水平线标签的应用</title>
	</head>
	<body>
		<h1>北京欢迎你</h1>
		<hr />
		<p>
			北京欢迎你，有梦想谁都了不起！<br/>
			有勇气就会有奇迹。<br/>
			北京欢迎你，为你开天辟地<br/>
			流动中的魅力充满朝气。<br/>
			北京欢迎你，在太阳下分享呼吸<br/>
			在黄土地刷新成绩。<br/>
			北京欢迎你，像音乐感动你<br/>
			让我们都加油去超越自己。<br/>
		</p>
	</body>
</html>

字体样式标签

在网页中，经常会遇到字体加粗或斜字体，可以用<strong>标签来让字体变粗，<em>标签让文字倾斜。

<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>字体样式标签</title>
	</head>
	<body>
		<strong>徐志摩人物简介</strong>
		<p>
			<em>1910</em>年入杭州学堂<br />
			<em>1918</em>年赴美国克拉大学学习银行学<br />
			<em>1921</em>年开始创作新诗<br />
			<em>1922</em>年返国后在报刊上发表大量诗文<br />
			<em>1927</em>年参加创办新月书店<br />
			<em>1931</em>年由南京乘飞机到北平，飞机失事，因而遇难<br />
		</p>
	</body>
</html>

注释和特殊符号

HTML中的注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容。


<!--em>1910</em>年入杭州学堂<br /-->
<!--em>1927</em>年参加创办新月书店<br /

由于大于号(>)，小于号(<)等已作为HTML的语法符号，因此，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示，这些特殊符号对应的HTML代码被称为字符实体。HTML中常用的特殊符号及其对应的字符实体如下表所示，这些实体符号都以"&“开头，以”;"结束。

特殊符号	字符实体	示例
空格		百度
大于号（>）	>	如果时间>晚上6点，就坐车回家
小于号（<）	<	如果时间<早上七点，就走路去上学
引号（“）	"	W3C规范中，HTML的属性值必须用成对的"引起来
版权符号	©	©20013-2018北大青鸟

图像标签

在日常生活中，使用比较多的图像格式有四种。

JPG格式：JPG格式图像是在Internet上被广泛支持的图像格式，它是联合图像专家组格式的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用。
GIF格式：GIF格式图像是网页中使用最广泛、最普遍的一种图像格式，它是图像交换格式的英文缩写。GIF格式文件支持透明色，是的GIF格式在网页的背景和一些多层特效的显示上用的非常多，还支持动画，这是它最突出的一个特点。
BMP格式：BMP格式图像在Windows操作系统中使用得比较多，它是位图的英文缩写。BMP格式图像文件格式与其他Microsoft Windows程序兼容。它不支持压缩，也不适用于Web页。
PNG格式：PNG格式是20世纪90年代中期开始开发的图像文件存储格式，它兼有GIF格式和JPG格式的优势，同时具备GIF格式不具备的特性。

图像标签的基本语法

<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>图像标签的应用</title>
	</head>
	<body>
		<p>
			<img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃"
				title="无漂白薄皮核桃" />
		</p>
		<p>
			楼兰蜜语 新疆野生<br />
				无漂白薄皮核桃 500g*2包<br />
				￥48.8
		</p>
	</body>
</html>

其中，src属性表示图片路径，alt属性指定的替代文本，表示图像无法显示时替代的文本，这样即使当图像无法显示时，用户还是可以看到网页丢失的信息内容，所以alt属性在制作网页时和src属性配合使用。width和heigth两个属性分别表示图片的宽度和高度，如果不设置那么图片默认显示原始大小。

超链接标签

大家在上网时，经常会通过超链接查看各个页面或不同的网站，因此超链接a标签在网页中极为常用。超链接包含两部分内容，一是链接地址，即链接的目标，可以是某个网址或文件的路径，对应为a标签的href属性；二是链接文本或图像，单机该文本或图像，将跳转到href属性指定的链接地址。

<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>图书列表页</title>
	</head>
	<body>
		<!--图像超链接-->
		<a href="detail.html" target="_blank"><img src="image/img1.png" alt="姑娘,欢迎降落在这残酷的世界"/></a>
		<p>
			<!--文本超链接-->
			<a href="detail.html" target="_blank">姑娘，欢迎降落在这残酷的世界</a>
		</p>
	</body>
	<p>￥58</p>
</html>

href：表示链接地址的路径。
target：指定链接在哪个窗口打开，常用的取值有_self、_blank。

根据链接地址是指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径。

绝对路径：指向目标地址的完整描述。一般指向本站点外的文件。
相对路径：相对于当前页面的路径，一般指向本站点内，所以一般不需要一个完整的URL地址的形式。

大家在上网时，会发现不同的链接方式，有的链接到其他页面，有的链接到其他页面，有的链接到当前页面，还有单击一个链接直接打开邮件，实际上根据超链接的应用场合，可以吧链接分为三类。

页面间链接：A页到B页，最常用，用于网站导航。

<html>
	<head lang="rn">
		<meta charset="UTF-8">
		<title>页面间链接</title>
	</head>
	<body>
		<p><a href="elearing/index.html"
		target="_blank">YL在线学习平台</a></p>
		<p><a href="elearing/couresList.html" target="_blank">YL在线学习课程列表</a></p>
	</body>
</html>

最低0.47元/天解锁文章

南柯Diana

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
HTML5语言入门

一.HTML5基础1.HTML简介及发展史HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。当你使用浏览器打开任意一个页面，按下F12键，就会看到一段程序，里面显示的就是这个网页的HTML源文件。HTML发展史超文本标记语言——在1993年6月互联网工程工作小组工作草案发布（并非标准）HTML2.0——1995年11月作为R...
复制链接

扫一扫