HTML标签详解-优快云博客

行内元素：

a标签：

• 超链接标签，双标签，常用标签属性：

href：指定打开的页面；锚点；
target：用于指定在哪个窗口打开href标签属性指定的页面，常用属性值有_self 、_blank 等；

<a href="http://www.baidu.com" target="_blank">百度一下</a>

在浏览器界面上将鼠标放在“百度一下”上面，鼠标会变成一只小白手，即，可点击。
_blank 是在空白页打开此链接
_self是在本页面打开此链接
效果如下两个：
百度一下
 百度一下

## img标签： • img标签：图片标签，单标签，常用标签属性： 1. src：设置图片路径； 2. alt：设置图片不存在时替代文本，该属性的显示效果与浏览器以及浏览器版本有关； 3. height和width：设置图片的高度和宽度，单位为像素或%； 4. title：设定鼠标移到元素上时显示的信息；

• 注意：
1、任何标签都有title属性，它不是img标签特有的；（详情请见w3c）
2、img标签中src和alt标签属性不能省略；
正确图片路径

<img src="img/png-1525.png" title="生肖鼠" alt="这是一个PNG格式图片"/>

由于截图技术不成熟，没有截到将鼠标放在图片上时title显示的内容（生肖鼠）
在这里插入图片描述
错误图片路径

<img src="img/-1525.png" title="生肖鼠" alt="这是一个PNG格式图片"/>

在这里插入图片描述
显示的是alt标签属性中的内容

span标签

在这里插入图片描述 简单来说，span标签中的内容在浏览器上显示时没有任何变化，只有对其使用CSS样式才可以改变。

块级元素：

div标签：

div（division单词缩写）标签：常用于文档中分区。

p标签：

p（paragraph单词缩写）标签：段落标签，双标签，常用标签属性
1、align：设置文本显示的位置：
left：把文本排列到左边
right：把文本排列到右边
center：把文本排列到中间
justify：实现两端对齐文本效果
推荐使用text-align样式属性代替：
align：设置文本显示的位置。默认值：由浏览器决定
left：把文本排列到左边
right：把文本排列到右边
center：把文本排列到中间
justify：实现两端对齐文本效果
inherit：从父元素继承text-align属性的值。

		<p style="text-align: center;">白日依山尽，黄河入海流。</p>
		<p style="text-align: left;">白日依山尽，黄河入海流。</p>
		<p style="text-align: right;">白日依山尽，黄河入海流。</p>

在这里插入图片描述

hn标签：

• hn标签：标题标签，双标签，n的值为1~6，其中

定义最大的标题；

定义最小的标题，常用标签属性：
align：设定文本显示的位置，但不建议使用该align属性，推荐使用text-align样式代替，其使用方法和值参见p标签。

ol标签：

在这里插入图片描述

<div>
			<h1>图书分类</h1>
			<ol type="A">
				<li>小说</li>
				<li>文艺
					<ol type="a">
						<li>文学</li>
						<li>传记</li>
						<li>艺术</li>
						<li>摄影</li>
					</ol>
				</li>
				<li>励志/成功
					<ol type="a">
						<li>职场</li>
						<li>成功</li>
						<li>人际</li>
						<li>心灵修养</li>
					</ol>
				</li>
				<li>童书
					<ol type="a">
						<li>0-2
							<ol type="i">
								<li>数字</li>
								<li>图形</li>
								<li>图画</li>
							</ol>
						</li>
						<li>3-6</li>
						<li>7-10</li>
						<li>11-14</li>
					</ol>
				</li>
				<li>生活</li>
				<li>人文社科</li>
				<li>经管</li>
				<li>科技</li>
				<li>教育</li>
				<li>其他</li>
			</ol>
		</div>