-
HTML-行内元素图片标签、超链接的使用,发送邮件的实现,锚点的使用,如何设置链接的默认打开方式
2019-09-25 15:01:08该标签属于单标签(空标签),img 标签虽然属于行内元素但是可以设置宽高 标签相关属性: src (source)图片的地址(url),可以是相对地址也可以是绝对地址 width 图片的宽,其属性值可以是具体数值也可以是...<img />
img
(image)通过该元素可以向页面中嵌入图片;该标签属于单标签(空标签),img 标签虽然属于行内元素但是可以设置宽高标签相关属性:
src
(source)图片的地址(url),可以是相对地址也可以是绝对地址width
图片的宽,其属性值可以是具体数值也可以是百分比(%)height
图片的高alt
(alter)图片无法显示时的替代文本title
鼠标悬停在图片上时显示的文本信息border
用于给图片添加边框,值为数值类型,边框颜色默认为黑色无法通过属性修改(HTML5 中已经废弃该属性)
<img src="./img/cat.gif" width="100" border="2" title="猫片">
<a></a>
a
(anchor)该标签用于定义超链接,可以从一个页面跳转到另一个页面;点击链接后便会进行跳转标签常用属性:
href
用于设置链接的相对地址或绝对地址(url)target
设置链接的打开方式,默认在当前页中打开链接;其值有_blank
在新的页面中打开,_shelf
在当前页打开,_parent
在父窗口中打开,_top
在整个窗口打开
<a href="https://www.csdn.net">CSDN</a>
链接为空时,将其herf
的属性值设置为#
即可,不进行链接跳转a
标签也可以设置邮箱链接href = "mailto:e-mail?subject='主题内容'&body= '邮件内容'
e-mail
对方邮箱账号
示例:
<a href="mailto:kefu@csdn.net?subject='主题内容'&body='邮件内容'">发邮件</a>
a
标签可以通过name
属性来定义锚点;通过锚点可以设置当前页中的位置跳转,也可以设置跨页面之间的跳转;所谓的锚点,就是一个小标记,通过这个标记可以完成跳转在当前页面中的跳转:
-
在需要设置锚点的位置通过
name
属性或id
属性设置一个锚点,该属性的值必须是唯一的 -
在当前页面中使用这个锚点进行跳转时是通过
a
标签的href
属性,跳转到页面的指定位置- 语法:
href="#anchor_id"
,anchor_id
通过name
或id
设置的锚点值
示例:
- 语法:
跳转到不同页面:设置与 在当前页面中的跳转 的方式类似,将跳转的锚点 id 追加到路径后面即可(#符号前为文件路径,目标文件中要设置锚点)
<base />
base
该标签为单标签,可以通过target
属性为当前页面的所有链接规定默认地址或默认目标(链接打开方式);该标签在head
标签中使用示例:
<head> <base targert = "_blank"/> </head>
-
img标签到底是行内元素还是块级元素
2020-11-27 14:19:16写这篇文章源自我之前的一次面试,题目便是问img标签属于块级元素还是行内元素,当时想都没想就说了是行内(inline)元素,面试官追问为什么能够设置 <img /> 标签的宽和高,当时脑子突然一懵,发现这是自己技术...面试官问你
<img>
是什么元素时你怎么回答写这篇文章源自我之前的一次面试,题目便是问img标签属于块级元素还是行内元素,当时想都没想就说了是行内(inline)元素,面试官追问为什么能够设置
<img />
标签的宽和高,当时脑子突然一懵,发现这是自己技术上的一个空白,所以有了这篇文章。阅读本文您将收获
<img />
标签的基本使用- MDN关于元素的定义
- 特殊的可替换元素
<img />
标签的基本使用浏览器支持
- 所有主流浏览器都支持
<img>
标签
标签定义及使用说明
<img>
标签定义 HTML 页面中的图像<img>
标签有两个必需的属性:src 和 alt- 强烈推荐在开发中每个图像中都使用 alt 属性。这样即使图像无法显示,用户还是可以看到关于丢失了什么东西的一些信息。而且对于残疾人来说,alt 属性通常是他们了解图像内容的唯一方式
<img />
究竟是什么元素<img />
是行内元素还是块级元素?<img />
标签没有独占一行,所以是行内元素,这没啥问题
既然是行内元素为什么能够设置宽高呢?
- 这个问题就要引申出下面部分了,
<img />
标签属于替换元素,具有内置的宽高属性,所以可以设置,具体解释看下面。
元素的定义
从元素本身的特点来讲,可以分为不可替换元素和替换元素
元素相关的MDN解释
不可替换元素
(X)HTML
的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)- 如:
<h1>我是标题</h1>
可替换元素
- 浏览器根据元素的标签和属性,来决定元素的具体显示内容
- 例如浏览器会根据
<img>
标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据<input>
标签的type属性来决定是显示输入框,还是单选按钮等 - (X)HTML中的
<img>、<input>、<textarea>、<select>、<object>
都是替换元素。这些元素往往没有实际的内容,即是一个空元素 - 如:
<img src="tigger.jpg"/>
、<input type="submit" name="Submit" value="提交"/>
- 可替换元素的性质同设置了display:inline-block的元素一致
特殊的可替换元素
<img>
属于可替换元素<img>
同时具有行内元素,行内块,和块级元素的特性- 替换元素一般有内在尺寸,所以具有
width
和height
,可以设定- 例如你不指定
<img>
的width
和height
时,就按其内在尺寸显示,也就是图片被保存的时候的宽度和高度
- 例如你不指定
- 对于表单元素,浏览器也有默认的样式,包括宽度和高度
<img>、<input>
属于行内替换元素。height/width/padding/margin
均可用。效果等于块元素
写在最后
如果你觉得这篇文章对你有益,烦请点赞以及分享给更多需要的人!
欢迎关注微信公众号【全栈道路】,获取更多科技相关知识及免费书籍。
更多好文
-
行内元素和块元素的区别
2019-10-18 21:09:153.行内元素内部只能放文本和行内元素,但是a标签里面可以放块元素。 行内元素: 1.和相邻行内元素在一行上。 2.高,宽无效,但水平方向的padding和margin可以设置,垂直方向无效。 3.默认宽度就是它本身内容的宽度。...注意:
1.只有文字才组成的段落,例如p标签,h1,h2,h3,h4,h5,h6,属于文字类块级元素,里面不能放其他块级元素。
2.链接里面不能再放链接。
3.行内元素内部只能放文本和行内元素,但是a标签里面可以放块元素。
行内元素:
1.和相邻行内元素在一行上。
2.高,宽无效,但水平方向的padding和margin可以设置,垂直方向无效。
3.默认宽度就是它本身内容的宽度。
4.行内元素内部只能放文本和行内元素,但是a标签里面可以放块元素。
块元素:
1.总是从新行开始。
2.高度、行高、外边距及内边距都可以控制。
3.宽度默认使容器的100%。
4.可以容纳内联元素和其他块元素。 -
行内元素与块状元素
2020-04-16 11:34:29行内元素: 一般的行内元素的高度和宽度都由内容撑起,设置宽高不起作用,img标签虽然属于行内元素,但可以设置宽高。 块状元素: 所有的块状元素都可以设置宽度和高度,默认高度为内容的高度,默认宽度为父元素的...1、宽度和高度
- 行内元素: 一般的行内元素的宽和高都由内容撑起,设置宽高不起作用。不过 img标签虽然属于行内元素,但可以设置宽高。
- 块状元素: 所有的块状元素都可以设置宽度和高度,默认高度为内容的高度,默认宽度为父元素的100%
2、外边距margin
- 行内元素: 设置上下margin没有效果,左右有效果,两个紧邻的行内元素设置margin,中间的距离为margin值之和。
- 行内块:margin和padding都起作用,两个紧邻的行内块设置margin,中间的距离为margin值之和。
- 块状元素:margin和padding都起作用,两个紧邻的块状元素设置margin,中间的距离取最大值。
- 嵌套元素:两个嵌套的元素,子元素设置margin,是相对于父元素的,若父元素还设置了padding,则距离为子元素margin和父元素padding之和。
3、内边距padding
- 行内元素: 设置左、右、下 padding有效果,padding-top没有效果,padding-bottom 虽然有效果,但不起作用,对后面布局没有影响。
-
块级元素、行内元素和行内块元素 三种显示模式的区别和特点
2019-04-23 09:17:24我们常用的标签属于什么显示模式?他们之间有什么特性?是否可以互相转化和注意事项都是要熟记的,因为在网页div+css用来布局的时候很重要 块级元素 block-level 1⃣️常见的块元素有:< h1 >…< h6 >... -
前端面试查漏补缺,是什么元素,属于块级元素还是行内元素?
2020-12-07 20:48:03标签的基本使用 浏览器支持 所有主流浏览器都支持 <img> 标签 标签定义及使用说明 <img> 标签定义 HTML 页面中的图像 <img> 标签有两个必需的属性:src 和 alt 强烈推荐在开发中每个图像中都使用... -
webstorm中emmet展开a标签和行内元素不换行的解决办法
2020-09-06 22:26:31大家好我是木瓜太香,大家在使用 webstorm 编写 html 的时候可能会...在解决问题之前,我们要知道产生这个问题的原因,在 webstorm 中是对标签进行分类的,其实从逻辑上来说,a 标签这种本身就属于行内标签,不换行在. -
html基础-3-语义化标签、块和行内元素
2020-05-06 21:22:26文章目录语义化标签块和行内元素 语义化标签 html思想是通过不同标签的语义反映对应的功能,因此存在很多语义化标签,这里我们重点关注标签语义而不是样式,html负责结构,css负责样式,呈现的样式可以通过css随意... -
5、HTML块级元素及行内元素
2020-10-27 16:23:28在 HTML 中,标签(tag)...提示:块级元素和行内元素的概念极其重要,同时也是学习 CSS 的基础知识之一,请读者不要忽略。 1. 块级元素 块级元素(block element)在浏览器中占据整行,并排斥其它元素与其位于同一 -
行内表单inline_web查漏补缺,<img>是什么元素,属于块级元素还是行内元素?...
2021-01-17 00:32:05标签的基本使用浏览器支持所有主流浏览器都支持 <img> 标签标签定义及使用说明<img> 标签定义 HTML 页面中的图像<img> 标签有两个必需的属性:src 和 alt强烈推荐在开发中每个图像中都使用 alt ... -
空白的文本结点,去除行内(内联)元素之间的空白节点
2017-04-24 22:07:00今天在做一个下拉菜单的时候在同一个li...这是因为这两个标签都属于行内元素,就是内联元素。这样想象如果你在一行文字中加入了空格或者回车(这里不是</br>)你说在浏览器里面打开的时候怎么显示的?没错它就... -
行内元素和块级元素添加浮动后变化
2020-11-16 21:45:40浮动,开发网站中最常用的技术,标签添加浮动后会产生不同效果,让我们一起来探索一下添加浮动...我在html文件中创建了一个a标签,a标签属于行内标签,不能直接指定大小,但是当我们给a标签添加浮动之后,a标签就相当于从行. -
HTML5在a标签内放置块级元素示例代码
2020-09-28 01:47:54你没看错:用一个A标签包裹块级元素,在HTML5以前,a标签属于行内元素,而div,h1,p 等为块级元素,如果强行包裹,可能会被强行截断为多个a标签,感兴趣的朋友可以了解些 -
内联元素与外联元素
2017-02-27 21:28:41内联元素: 又称为行内元素,不会自动换行,行内元素是不能跳出行的,但是可以辅助进行样式修改 ...属于内联元素的html标签有: a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bid -
通过循环为一个数组里面的每个标签元素注册事件的时候,在事件函数里面通过数组下标为每个标签设置属性的...
2019-05-09 12:46:08例子: <style>... /* input属于行内替换元素 */ input{ width: 100px; height: 100px; background-color: red; color: white; } </style> <input type="button" name="b... -
css中的img和input标签
2015-10-14 16:47:00img和input也属于行内元素,但他们却可以设置宽高!!!! 查阅了一些资料才明白,原来css的元素还有另外一种分类方法,可替换元素,不可替换元素。 a)可替换元素 浏览器根据标签的属性来决定元素的具体显示... -
伪元素
2020-03-27 23:37:07伪元素选择器包括 ::before 在元素内部的前面插入内容 ...3. before和after创建一个元素,但是属于行内元素 4. 因为在dom里面看不见刚才创建的元素,所以称为伪元素 5. 伪元素和标签选择器一样,权重为1 用伪类元... -
img标签的特殊之处
2019-06-26 17:18:50img同时具有行内元素,行内块,和块级元素的特性。既可以默认在一行显示(inline),也可以设置其宽和高(行内块),而且当设置一个图片的margin时,会同时作用到同一行的元素(inline-block) 自己总结,欢迎指正。 ... -
详解CSS标签中的显示模式
2020-11-21 14:51:07标签的显示模式(重点) div和span标签 1.样式完全相同,标签不同,显示的结果完全不同 2.每个div会独占一行,多个span会并列一排 ...多学一招:从大的方面来说,其实行内的块元素也属于行内元素 -
替换元素与非替换元素
2021-01-26 11:54:50最近在突然想到为什么img标签是行内元素还可以设置宽高,查阅了一点资料和参考了别人的博客,得出结论:img标签没有独占一行所以是行内元素,但是img标签属于替换元素,具有内置的宽高属性,可以直接设置宽高。... -
如何设置a标签的宽高,如何使a标签的文字垂直居中
2020-03-29 11:04:18先解释a标签的宽高,a标签属于行内元素,默认情况下是不支持设置宽高的,仅依靠内容来“撑大自己”。这时我们需要用css的display属性并且值设置为block即可。这么设置浏览器就会将被设置的a标签识别为块元素。这时宽... -
replaced element and non-replaced element(可替换元素和非可替换元素)
2019-12-01 16:18:38首先,分析一下行内元素的某些特点: 不可设置高宽; 不占满一行,可平铺; 对行内元素设置margin时,垂直方向上将会失效; 回到开头的问题:为什么img标签能够设置高宽呢? img确实是行内元素,但它同时也是“可... -
HTML中为何P标签内不可包含块元素?
2014-11-26 15:25:00深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种。 in-line这个词有很多种解释:内嵌、内联、行内、线级等,但是,它们都是表示相同的意思,在这里... -
CSS系列之美化网页/span标签和div标签/字体样式/文本样式
2019-06-19 23:07:16CSS系列之美化网页/span标签和div标签/字体样式/文本样式 ...属于行内元素 div标签 属于块级元素 程序示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"... -
关于img标签的探讨
2017-09-28 16:22:00关于img标签的探讨:一直以来img属于那一种标签受到困惑,因为它既有块元素的特性也有行内元素的属性。它独占一行,也可以设置宽高。在此重新学习一下标签元素的分类;html元素的分类:块元素、内联元素和内联块状... -
html标签的简单分类,方便学习
2018-11-06 09:18:36常用文字,图片,列表,链接,表格,表单,框架等标签的学习 html标签很多,大致分为三类,块级元素,行级元素,行内块元素三类。 块级元素 块级元素就是元素独占一行,...行内元素就是不能设置width,height属性... -
06-HTML中的图片标签 img
2020-07-20 19:30:53img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点) 属性: src 属性指定的是外部图片的路径(路径规则和超链接是一样的) alt属性 图片的描述,这个描述默认情况下不会显示,有些浏览器会... -
伪元素选择器注意事项
2020-12-07 08:57:21before 和 after 必须有 content 属性 before 在内容前面,after 在...before 和 after 创建的是一个元素,但是属于行内元素 创建出来的元素在 Dom 中查找不到,所以称为伪元素 伪元素和标签选择器一样,权重为 1 ...