HTML学习笔记：HTML中常用的标签介绍(1)

标签解释

1)块级(block)标签

<div></div>

特点： 独占一行

<!--h1~h6 标题-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

特点:
1)有字体大小的设置
2)文本有加粗强调设置
3)上下文之间有较大间距

<!--p 段落-->
<p></p>

特点：
1)独占一行
2)上下文之间具有距离

<!--ul li 无序列表-->
<ul>
	<li>列表1</li>
	<li>列表2</li>
</ul>

特点：

  1. 配合使用
  2. ul li都独占一行空间
  3. ul 上下文之间有很大空间
  4. li与列表的样式显示(默认点状)，并且由文本缩进
	<!--ol li 有序列表-->
				
		<ol>
			<li>列表1</li>
			<li>列表2</li>
		</ol>

特点：和ul类似

<!--dl dt dd 自定义列表-->
					<dl>
						<dt>列表标题</dt>
						<dd>列表内容</dd>
						<dd>列表内容</dd>
						<dd>列表内容</dd>
					</dl>

特点：三个标签配合使用，一个dl下面可以有若干个dt，一个dt下面可以有若干个dd
1)dl dt dd独占一行空间
2)dl上下文之间有很大空间
3)dd有文本缩进

块级标签具体使用效果：
源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试页面</title>
</head>
	<body>

		<div>div标签</div>

		<!-- 横线 -->
		<hr />

		<h1>h1标签</h1>
		<h2>h2标签</h2>
		<h2>h3标签</h2>
		<h2>h4标签</h2>
		<h2>h5标签</h2>
		<h2>h6标签</h2>

		<!-- 横线 -->
		<hr />
		
		<p>段落标签</p>
		
		<!-- 横线 -->
		<hr />
		

		<ul>
		<li>ul+li无序列表1</li>
		<li>ul+li无序列表2</li>
		</ul>
	
		<!-- 横线 -->
		<hr />

		<ol>
		<li>ol+li有序列表1</li>
		<li>ol+li有序列表2</li>
		</ol>

		<!-- 横线 -->
		<hr />

		<dl>
		<dt>dl+dt+dd自定义列表标题</dt>
		<dd>列表1</dd>
		<dd>列表2</dd>
		<dt>dl+dt+dd自定义列表标题</dt>
		<dd>列表1</dd>
		<dd>列表2</dd>
		</dl>

		
	</body>
</html>

效果：
在这里插入图片描述

2)行内（内联inline）标签
span标签
特点：
1)最干净的内联标签（没有任何修饰）
2)不独占一行
a 超链接
特点:
1)不独占一行
2)点击可以发生跳转（或进行对应操作），语法颜色为绿色
3)文本具有颜色，具有下划线，指向后光标为手型，有状态的色彩提示

decoration（装饰） 文本修饰标签

<u>下划线修饰</u>
<i>斜体修饰</i>
<b>加粗</b>
<em>强调</em>
<strong>加粗</strong>
<s>删除线</s>
<sup>上标</sup>
<sub>下标</sub>

img标签
src=“图片地址”
绝对路径
http://www.baidu.com/car.jpg
http://www.baidu.com/demo/one.html

<img src="http://www.baidu.com/car.jpg">					
<!--相对路径 one.html ../a.jpg-->

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试页面</title>
</head>
	<body>
		<span>span1</span>
		<span>span2</span>
		
		<!-- 横线 -->
		<hr>
		
		<a href="mytest1">超链接</a>
		
		<!-- 横线 -->
		<hr>
		
		<u>下划线修饰</u>
		<i>斜体修饰</i>
		<b>加粗</b>
		<em>强调</em>
		<strong>加粗</strong>
		<s>删除线</s>
		<sup>上标</sup>
		<sub>下标</sub>
		
		<!-- 横线 -->
		<hr>
		<img src="test/a.jpg">
	</body>
</html>

效果：

在这里插入图片描述

版权声明：本文为m0_45237843原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。