HTML主要标签的简要描述

本文详细介绍了HTML的基本语法,包括文档结构、行内元素、块级元素、列表标签等,适合初学者快速入门。

 

HTML(Hyper Text Markup Language,即“超文本标记语言”)是一种解释性语言,用于制作网页界面,使用该语言编写的网页最终被浏览器解释执行。

<html>
	<head>
		
	</head>
	<body>
		网页正文
	</body>
</html>
说明:
1.<html></html>用来标记HTML文档的开始和结束;
2.<head></head>用来标记HTML文档的头部开始和结束;
3.<body></body>用来标记HTML文档的主体开始和结束;
 

行内元素:

1、a标签:链接标签,双标签,主要用于连接其他网页

常用标签属性:

  1. href:指定打开的页面
  2. target:用于指定那个窗口打开herf属性所指定的页面(常用的有_self [自身]_blank [空白页]等) 

演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank">百度一下</a>
	</body>
</html>

点击后就会转到百度界面

2、img标签:图片标签,单标签

常用标签属性:

  1. src:设置图片路径
  2. alt:设置图片不存在时的替代文本,该属性的显示效果与浏览器及浏览器的版本有关
  3. height、weight:设置图片高度和宽度,单位为像素或%
  4. title:设定鼠标移到元素上显示的信息

演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <!--图片文件名为3.jpg-->
		<img src="img/3.jpg" height="20%" width="20%" title="音乐节" alt="音乐节宣传图" />
	</body>
</html>

鼠标移到图片上后会显示音乐节。

但是当文件名出错时

会显示已经设定好的内容。

3.span标签:常用于组合文档中的行内元素,双标签(用于文本的页面输入)

注意:

  1. span标签没有固定的格式表现,只有对它应用CSS样式时才会产生视觉上的变化
  2. 推荐使用 <span> 来组合行内元素,以便通过样式来格式化它们
  3. 如果span标签没有CSS样式,那么span标签中的文本与前面文本没有任何视觉上的差异;span标签的定义方便了通过CSS样式格式化标签内的内容

块级元素:

1.div标签:常用于文档中的分区,双标签

2.p标签:段落标签,双标签

3.hn标签(n为1~6):标题标签,双标签,其中<h1></h1> 定义最大的标题;<h6></h6> 定义最小的标题

演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>Hello World!</h1>
		<h2>Hello World!</h2>
		<h3>Hello World!</h3>
		<h4>Hello World!</h4>
		<h5>Hello World!</h5>
		<h6>Hello World!</h6>
	</body>
</html>

ol标签:有序列表标签,双标签

常用标签属性:

  1. type:指定ol子标签li的编号类型,其属性值有:

    描述

    1

    数字,默认值

    A

    大写字母

    a

    小写字母

    I

    大写罗马数字

    i

    小写罗马数字

  2. start:指定ol子标签li序号起始点,默认为1,必须为整形数字
  3. reversedHTML5新增标签属性,用于设定列表顺序为降序,其属性值为reversed

ul标签:无序列表标签,双标签

常用属性标签:

  1. type:指定ul子标签li的编号类型,其属性值有:

    描述

    disc

    实心圆,默认值

    square

    实心方块

    circle

    空心圆

演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>图书分类</h1>
		<ol type="1">
			<li>小说</li>
			<li>文艺</li>
			<ul type="disc">
				<li>文学</li>
				<li>传记</li>
				<li>艺术</li>
				<li>摄影</li>
			</ul>
			<li>励志/成功</li>
			<ul type="circle">
				<li>职场</li>
				<li>成功</li>
				<li>人际</li>
				<li>心灵修养</li>
			</ul>
			<li>童书</li>
			<ul type="square">
				<li>0-2</li>
				<ol type="i">
					<li>数字</li>
					<li>图形</li>
					<li>画画</li>
				</ol>
				<li>3-6</li>
				<li>7-10</li>
				<li>11-14</li>
			</ul>
			<li>生活</li>
			<li>人文社科</li>
			<li>经管</li>
			<li>科技</li>
			<li>教育</li>
			<li>其他</li>
		</ol>
	</body>
</html>

<think>嗯,用户想了解HTML5的基本概念。首先,我需要回忆一下HTML5的定义和核心特点。根据提供的引用,HTML5是超文本标记语言的最新版本,结合了HTML、CSS和JavaScript,对吧?引用[2]提到HTML5属于超文本标记语言,用于统一文档格式,连接网络资源。应该先从定义入手,解释HTML5是什么,然后分结构、表现、行为三个标准来介绍。 接下来,结构标准对应HTML标签,比如网页骨架,像<html>、<head>、<body>这些标签。引用[3]里提到了结构标准是.html文件,样式是.css,行为是.js,需要分开说明。可能需要举几个HTML5的新标签,比如<header>、<nav>、<section>,这些标签能帮助用户理解语义化。 然后,表现标准是CSS,负责样式。HTML5在这方面支持更多CSS3特性,比如动画和响应式设计。行为标准是JavaScript,处理交互。引用[3]也提到行为标准是.js文件,这部分可以强调三者如何协作。 还要提到跨平台特性,比如在移动端的应用,支持视频和音频标签,替代Flash。引用[2]中的五大浏览器,可能需要说明HTML5的兼容性,主流浏览器都支持,这对开发者很重要。 最后,结合用户提供的引用,特别是引用[2]和[3],需要确保引用的内容准确嵌入到回答中,比如超文本标记语言的定义,结构、样式、行为的类比(人体、服饰、运动)。可能需要检查引用的序号是否正确,避免混淆。 确保使用正确的LaTeX格式,虽然用户的问题可能不涉及数学公式,但如果有提到版本号或其他可能需要强调的地方,用行内格式。比如HTML5中的“5”可能需要用$HTML5$,不过可能不需要。另外,回答中的引用标识要自然,如末尾添加[^2][^3]等。 用户可能还想知道HTML5和之前版本的区别,或者新特性,但根据问题,重点在基本概念。需要保持回答简洁,结构清晰,分点说明定义、核心标准、跨平台能力,并举例说明标签。同时,生成的相关问题要围绕基本概念展开,比如新特性、应用场景、学习路径等。</think>### HTML5基本概念解析 #### 1. HTML5的定义 HTML5是$HTML$(*HyperText Markup Language*,超文本标记语言)的第五个主要版本,由$W3C$(万维网联盟)制定。它不仅是简单的标签语言,还结合了$CSS3$(样式表)和$JavaScript$(脚本语言),构成现代网页开发的三大核心技术[^2]。HTML5的目标是**统一网络内容格式**,支持多媒体、跨平台交互,并减少对插件的依赖(如Flash)。 #### 2. 核心标准 HTML5通过以下三部分定义网页标准: - **结构标准**(HTML):定义网页骨架,使用标签组织内容,如`<header>`、`<nav>`、`<section>`等语义化标签,文件后缀为`.html`。 - **表现标准**(CSS):控制网页样式,如布局、颜色、字体,文件后缀为`.css`。 - **行为标准**(JavaScript):实现动态交互,如表单验证、动画效果,文件后缀为`.js`。 #### 3. 关键特性 - **语义化标签**:新增`<article>`、`<footer>`等标签,提升代码可读性与SEO优化。 - **多媒体支持**:直接嵌入视频(`<video>`)和音频(`<audio>`),无需插件。 - **跨平台兼容**:适配移动端、PC及多种浏览器(如Chrome、Firefox等[^2])。 - **本地存储**:通过`localStorage`和`sessionStorage`实现客户端数据存储。 #### 4. 示例代码 ```html <!DOCTYPE html> <html> <head> <title>HTML5示例</title> </head> <body> <header> <h1>网页标题</h1> </header> <section> <p>这是一个HTML5语义化段落。</p> <video controls> <source src="video.mp4" type="video/mp4"> </video> </section> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值