HTML主要标签的简要描述

最新推荐文章于 2024-08-12 21:45:00 发布

原创最新推荐文章于 2024-08-12 21:45:00 发布 · 967 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了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标签：链接标签，双标签，主要用于连接其他网页

常用标签属性：

href：指定打开的页面
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标签：图片标签，单标签

常用标签属性：

src：设置图片路径
alt：设置图片不存在时的替代文本，该属性的显示效果与浏览器及浏览器的版本有关
height、weight：设置图片高度和宽度，单位为像素或%
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标签：常用于组合文档中的行内元素，双标签（用于文本的页面输入）

注意：

span标签没有固定的格式表现，只有对它应用CSS样式时才会产生视觉上的变化
推荐使用 <span> 来组合行内元素，以便通过样式来格式化它们
如果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标签：有序列表标签，双标签

常用标签属性：

type：指定ol子标签li的编号类型，其属性值有：

值	描述
1	数字，默认值
A	大写字母
a	小写字母
I	大写罗马数字
i	小写罗马数字

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

ul标签：无序列表标签，双标签

常用属性标签：

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>