HTML中常见的标签
基本标签
上一章说了常见标签有:
- 标题标签<h1>~<h6>
- 段落标签<p>
- 水平线标签<hr>
- 强制换行标签<br>
- 强调标签<strong>标签(字体加粗)
- 特别强调标签 <em>标签(字体倾斜)
还有两个没有特别意思的标签,分别是:
<div>和<span>
这两个标签没有特别标注是段落标签还是标题标签之类,
他们两唯一的区别就是,一个是行内元素,一个是块元素。
行内元素有哪些?
上面说的<span><strong><em><br>就是行内元素。<br>因为是强制换行,但是是属于行内元素。<a><img>也属于行内标签,之后再讲这两个标签。
块元素呢?
<h1>~<h6>
<p>
<hr>
<div>
都属于块元素。
块元素
简单理解就是行内元素能在同一行显示,而块元素会自动换行。
块元素之所以叫块元素,就是要把它看成一个方块,块元素有大小,默认占据一整行。
例如:给块元素和行内元素加上背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内标签与块标签的区别</title>
</head>
<body>
<p style="background-color: red;">块元素</p>
<span style="background-color: red;">行内元素</span>
</body>
</html>
比如我们要在网页里居中一副图片,直接给<img>标签居中,去给<img>加一个居中属性,不会有任何效果。我们要给<img>套一个块元素,再给块元素设置一个居中属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内标签与块标签的区别</title>
</head>
<body>
<img style="text-align: center; background-color: red;" src="img/A.jpg" alt="#">
</body>
</html>
我这里直接给<img>加上了居中和红色背景,但是因为<img>是行内元素所以在浏览器中看不到又任何变化。
如果我给<img>外边套一个<div>,把居中和背景颜色属性赋予<div>会是什么样子呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内标签与块标签的区别</title>
</head>
<body>
<div style="text-align: center; background-color: red;">
<img src="img/A.jpg" alt="#">
</div>
</body>
</html>
既然说了图片就来说一下 <img>
<img>标签的基本语法
<img>标签的基本语法如下。
<img src="图片地址" alt="图像失效的替代文字" title="鼠标悬停提示文字">
src 属性表示图片路径,分为绝对路径和相对路径。
- 绝对路径: 指向目标地址的完整路径描述,一般指向本站点外的文件。例如:
<img src=http://www.sohu.com/indx.html/file/sohu.png>
- 相对路径: 相对于当前页面的路径,通常用于指向本站点内的文件,所以未必是一个完整的URL地址。例如:
<img src="img/A.jpg">
表示链接地址为当前页面所在路径的 img 目录下的A.jpg 图片。
<a>标签的基本语法
超链接标签包含两个部分,一个是<a>标签的href属性,就是链接的目标,可以是某个网址或文件的路径;二是<a>标签的target属性,用来定义被链接的文档在何处显示。也就是在本页面直接打开这个链接,还是开启一个新的窗口去打开这个链接。
语法如下:
<a href="链接地址" target="目标窗口位置">链接文本或图片</a>
- href: 链接地址的路径
- target: 指定链接在哪个窗口打开,常用的值有 _self (自身窗口)、_blank (新建窗口)。
示例:
<a href="https://www.baidu.com/" target="_self">百度</a>
单击文本超链接(百度),会在当前页面跳转到百度页面。
注意! 当超链接标签的href属性为 “#” 时,表示空链接,不会跳转到其他链接,也不会弹出404。
锚链接
锚链接常用于页面内容很多,需要定位到目标页面内容中的某个具体位置时。我们最常见的就是某宝,当点击某个超链接时,会跳转到对应帮助的内容介绍处,实现这个效果也很简单。
(1)在页面乙位置设置标记,语法如下。
<a name="AJ">目标位置乙</a>
name属性用于规定锚的名称,AJ为标记名,就类似于古时固定船的锚,所以也称作为锚名。
(2)设置甲位置的链接路径,就是href属性值为 “#标记名”,语法如下。
<a href="#AJ">当前位置甲</a>
完整效果就是点击“当前位置甲”,页面就会弹到“目标位置乙”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
<a name="AJ">目标位置乙</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#AJ">当前位置甲</a>
</body>
</html>
为了感受到效果我用<br>把页面拉长,页面效果如下:
右边的滚动条在最底端,当点击“当前位置甲”,浏览器就会自动跳到当前页面的“目标位置乙”。
HTML的常见标签就说完了,下一章说一说CSS。
美化网页,让我们的页面看起来赏心悦目。