-
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 ...
收藏数
147
精华内容
58