您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

HTML5常用的基本元素

时间:2020-10-07 10:46:24  来源:  作者:
HTML5常用的基本元素

 

文章《html5语法概述》中,介绍了HTML5文档的组成,HTML5的组成可以用下图来表示:

HTML5常用的基本元素

 

除了上面的DOCTYPE标记以及html、head、title、meta、body元素外,我们编写HTML5文档时,会经常用到本文介绍的这些元素。

1、HTML5的注释

HTML5文档中,在<!-- 与 --!>之间的内容,被当作注释,不会被浏览器解析。例如下面的HTML文档:

<!DOCTYPE html>
<html>
	<head>
		<title>example1</title>
		<meta charset="utf-8" />
	</head>
	<body>
		hello, <!-- tom, I'm jerry! -->
	</body>
</html>

在浏览器中只会显示“hello,”:

HTML5常用的基本元素

 

2、换行元素<br>

br是英语单词break的简写,表示“换行”。

浏览器解析HTML5文档时,会将用户输入文本中的一个或多个连续空格、换行,当成一个空格。例如下面的HTML文档:

<!DOCTYPE html>
<html>
	<head>
		<title>example2</title>
		<meta charset="utf-8" />
	</head>
	<body>
		静夜思		李白		床前明月光,		疑是地上霜。		举头望明月,		低头思故乡。	</body>
</html>

在浏览器中,只会显示成一行:

HTML5常用的基本元素

 

如果希望输入的每行都在浏览器中占据一行,需要将HTML文档修改为:

<!DOCTYPE html>
<html>
	<head>
		<title>example3</title>
		<meta charset="utf-8" />
	</head>
	<body>
		静夜思<br/>
		李白<br/>
		床前明月光,<br/>
		疑是地上霜。<br/>
		举头望明月,<br/>
		低头思故乡。<br/>
	</body>
</html>

这时,浏览器中的展示效果为:

HTML5常用的基本元素

 

3、预定义标签<pre>

pre是英语单词predefined的简写,表示“预定义的(格式)”。

浏览器解析HTML文档,碰到<pre>标签时,会保留用户输入的空格和换行符,例如下面的HTML文档:

<!DOCTYPE html>
<html>
	<head>
		<title>example4</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<pre>
			  静夜思			   李白			床前明月光,			疑是地上霜。			举头望明月,			低头思故乡。		</pre>
	</body>
</html>

在浏览器中的展示效果为:

HTML5常用的基本元素

 

4、标题元素

在HTML5中,有六种标题元素:

<h1>:一级标题

<h2>:二级标题

<h3>:三级标题

<h4>:四级标题

<h5>:五级标题

<h6>:六级标题

h是英语单词headline的简写,表示“标题”。

不同级别的标题,在浏览器中展示时,都会换行,但大小不一样,例如下面的文档:

<!DOCTYPE html>
<html>
	<head>
		<title>example5</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<pre>
			<h1>1、亚洲</h1>
			<h2>1.1、中国</h2>
			<h3>1.1.1、广东省</h3>
			<h4>1.1.1.1、广州市</h4>
			<h4>1.1.1.2、深圳市</h4>
			<h5>1.1.1.2.1、罗湖区</h5>
			<h5>1.1.1.2.2、盐田区</h5>
			<h5>1.1.1.2.3、福田区</h5>
			<h5>1.1.1.2.4、南山区</h5>
			<h6>1.1.1.2.4.1、科技园</h6>
			<h6>1.1.1.2.4.2、西丽</h6>
			<h6>1.1.1.2.4.3、南油</h6>
			<h6>1.1.1.2.4.4、蛇口</h6>
			<h5>1.1.1.2.5、宝安区</h5>
			<h5>1.1.1.2.6、龙岗区</h5>
			<h4>1.1.1.3、东莞市</h4>
			<h4>1.1.1.4、珠海市</h4>
			<h3>1.1.2、广西自治区</h3>
			<h3>1.1.3、河南省</h3>
			<h3>1.1.4、河北省</h3>
			<h3>1.1.5、湖南省</h3>
			<h3>1.1.6、湖北省</h3>
			<h2>1.2、朝鲜</h2>
			<h2>1.3、巴基斯坦</h2>
			<h2>1.4、伊朗</h2>
			<h1>2、欧洲</h1>
			<h2>2.1、英国</h2>
			<h2>2.2、法国</h2>
			<h2>2.3、德国</h2>
			<h2>2.4、俄罗斯</h2>
			<h1>3、非洲</h1>
			<h1>4、北美洲</h1>
			<h2>4.1、美国</h2>
			<h2>4.2、加拿大</h2>
			<h2>4.3、墨西哥</h2>
			<h1>5、南美洲</h1>
			<h1>6、大洋洲</h1>
			<h1>7、南极洲</h1>
		</pre>
	</body>
</html>

在浏览器中展示的效果为:

HTML5常用的基本元素

 


HTML5常用的基本元素

 

5、水平线元素<hr>

hr是英语单词horizon的简写,表示“水平线”。

例如下面的HTML文档:

<!DOCTYPE html>
<html>
	<head>
		<title>example6</title>
		<meta charset="utf-8" />
	</head>
	<body>
		静夜思<br/>
		李白<br/>
		床前明月光,<br/>
		疑是地上霜。<br/>
		举头望明月,<br/>
		低头思故乡。<br/>
		<hr/>
		赋得古原草送别<br/>
		白居易<br/>
		离离原上草,一岁一枯荣。<br/>
		野火烧不尽,春风吹又生。<br/>
		远芳侵古道,晴翠接荒城。<br/>
		又送王孙去,萋萋满别情。<br/>
	</body>
</html>

在浏览器中的展示效果为:

HTML5常用的基本元素

 

6、对内容进行分块的三种元素:<span>、<div>与<p>

span是英语单词,表示“跨度、范围”。

div是英语单词division的简写,表示“分开、部分”。

p是英语单词paragraph的简写,表示文章的“段、段落”。

6.1、当使用<span>元素时,浏览器不会加入换行符

例如下面的HTML文档:

<!DOCTYPE html>
<html>
	<head>
		<title>example7</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<span>文本1</span><span>文本2</span><span>文本3</span><span>文本4</span><span>文本5</span>
	</body>
</html>

在浏览器中的展示效果为:

HTML5常用的基本元素

 

6.2、当使用<div>元素时,浏览器会插入换行符

例如下面的HTML文档:

<!DOCTYPE html>
<html>
	<head>
		<title>example8</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div>文本1</div><div>文本2</div><div>文本3</div><div>文本4</div><div>文本5</div>
	</body>
</html>

在浏览器中的展示效果为:

HTML5常用的基本元素

 

6.3、当使用<p>元素时,浏览器会插入换行符,而且间距比<div>大

例如下面的HTML文档:

<!DOCTYPE html>
<html>
	<head>
		<title>example9</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<p>文本1</p><p>文本2</p><p>文本3</p><p>文本4</p><p>文本5</p>
	</body>
</html>

在浏览器中的展示效果为:

HTML5常用的基本元素

 

<span>、<div>、<p>三种元素中,用得最多的是<div>,尤其是在前端设计中。后面会专门再写一篇关于div元素的文章。

7、图片元素<img>

img是英语单词image的简写,表示“图像、图片”。

<img>元素中我们常用的属性有src和alt,src表示图片所在的位置,alt表示如果找不到图片,在图片位置显示的文字。

例如下面的HTML文档:

<!DOCTYPE html>
<html>
	<head>
		<title>example10</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<img src="flower.jpg" alt="花朵图片" />
	</body>
</html>

如果文件flower.jpg存在,则浏览器的显示效果如下:

HTML5常用的基本元素

 

如果文件flower.jpg不存在,则浏览器的显示效果为:

HTML5常用的基本元素

 

上面介绍的,都是最常用的HTML5的简单元素,除此之外,还有些用得比较多的复杂元素,后面另外写文章来介绍。



Tags:HTML5   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件&mdash;&mdash;MuiP...【详细内容】
2021-12-16  Tags: HTML5  点击:(22)  评论:(0)  加入收藏
Web项目开发中视频播放是一个非常常见的需求,需要播放器能够支持pc端和移动端的使用,并且支持常见的视频格式。我们从github上精选了5款优秀的Html5 播放器插件分享给大家。(排...【详细内容】
2021-09-17  Tags: HTML5  点击:(99)  评论:(0)  加入收藏
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  Tags: HTML5  点击:(343)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19  Tags: HTML5  点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20  Tags: HTML5  点击:(179)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24  Tags: HTML5  点击:(199)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12  Tags: HTML5  点击:(113)  评论:(0)  加入收藏
在本文中,我列出了十个我过去没用过的HTML5功能,但现在发现它们很有用,废话不多说,让我们开始吧。 detais 标签<details>标签向用户提供按需查看详细信息的效果。如果需要按需...【详细内容】
2020-10-09  Tags: HTML5  点击:(98)  评论:(0)  加入收藏
文章《HTML5语法概述》中,介绍了HTML5文档的组成,HTML5的组成可以用下图来表示: 除了上面的DOCTYPE标记以及html、head、title、meta、body元素外,我们编写HTML5文档时,会经常用...【详细内容】
2020-10-07  Tags: HTML5  点击:(69)  评论:(0)  加入收藏
介绍APlayer是一个简约且漂亮的HTML5音乐播放器,支持多种模式,包括播放列表模式、吸底模式、迷你模式、MSE模式、HLS模式。 Githubhttps://github.com/DIYgod/APlayer安装使...【详细内容】
2020-09-07  Tags: HTML5  点击:(550)  评论:(0)  加入收藏
▌简易百科推荐
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  鳌拜的表哥熬夜    Tags:HTML5   点击:(343)  评论:(0)  加入收藏
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  趣谈前端    Tags:H5编辑器   点击:(90)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18      Tags:H5   点击:(228)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19      Tags:HTML5   点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20      Tags:HTML5   点击:(179)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29      Tags:H5应用   点击:(165)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24      Tags:XGPlayer   点击:(199)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12      Tags:H5DS   点击:(393)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12      Tags:HTML5   点击:(113)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10      Tags:app开发   点击:(109)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条