精华内容
下载资源
问答
  • 标签属于单标签(空标签),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 通过 nameid 设置的锚点值
        示例:

    在这里插入图片描述
    跳转到不同页面:

    设置与 在当前页面中的跳转 的方式类似,将跳转的锚点 id 追加到路径后面即可(#符号前为文件路径,目标文件中要设置锚点)

    <base />

    base 该标签为单标签,可以通过 target 属性为当前页面的所有链接规定默认地址或默认目标(链接打开方式);该标签在 head 标签中使用

    示例:

    <head>
    	<base targert = "_blank"/>
    </head>
    
    展开全文
  • 写这篇文章源自我之前一次面试,题目便是问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>同时具有行内元素,行内块,和块级元素的特性
    • 替换元素一般有内在尺寸,所以具有 widthheight,可以设定
      • 例如你不指定 <img>widthheight 时,就按其内在尺寸显示,也就是图片被保存的时候的宽度和高度
    • 对于表单元素,浏览器也有默认的样式,包括宽度和高度
    • <img>、<input>属于行内替换元素。height/width/padding/margin均可用。效果等于块元素

    写在最后

    如果你觉得这篇文章对你有益,烦请点赞以及分享给更多需要的人!

    欢迎关注微信公众号【全栈道路】,获取更多科技相关知识及免费书籍。


    在这里插入图片描述

    更多好文

    [万字长文]百度和好未来面试经含答案

    [前端面试]前端缓存问题看这篇,让面试官爱上你

    记一次惨痛的Vue-cli + VueX + SSR经历

    [三分钟小文]前端性能优化-HTML、CSS、JS部分

    [三分钟小文]前端性能优化-页面加载速度优化

    [三分钟小文]前端性能优化-网络传输层优化

    展开全文
  • 3.行内元素内部只能放文本和行内元素,但是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 虽然有效果,但不起作用,对后面布局没有影响。
    展开全文
  • 我们常用的标签属于什么显示模式?他们之间有什么特性?是否可以互相转化和注意事项都是要熟记的,因为在网页div+css用来布局的时候很重要 块级元素 block-level 1⃣️常见的块元素有:< h1 >…< h6 >...
  • 标签的基本使用 浏览器支持 所有主流浏览器都支持 <img> 标签 标签定义及使用说明 <img> 标签定义 HTML 页面中图像 <img> 标签有两个必需属性:src 和 alt 强烈推荐在开发中每个图像中都使用...
  • 大家好我是木瓜太香,大家在使用 webstorm 编写 html 时候可能会...在解决问题之前,我们要知道产生这个问题原因,在 webstorm 中是对标签进行分类,其实从逻辑上来说,a 标签这种本身就属于行内标签,不换行在.
  • 文章目录语义化标签块和行内元素 语义化标签 html思想是通过不同标签的语义反映对应功能,因此存在很多语义化标签,这里我们重点关注标签语义而不是样式,html负责结构,css负责样式,呈现样式可以通过css随意...
  • 在 HTML 中,标签(tag)...提示:块级元素和行内元素的概念极其重要,同时也是学习 CSS 的基础知识之一,请读者不要忽略。 1. 块级元素 块级元素(block element)在浏览器中占据整行,并排斥其它元素与其位于同一
  • 标签的基本使用浏览器支持所有主流浏览器都支持 <img> 标签标签定义及使用说明<img> 标签定义 HTML 页面中图像<img> 标签有两个必需属性:src 和 alt强烈推荐在开发中每个图像中都使用 alt ...
  • 今天在做一个下拉菜单时候在同一个li...这是因为这两个标签属于行内元素,就是内联元素。这样想象如果你在一行文字中加入了空格或者回车(这里不是</br>)你说在浏览器里面打开时候怎么显示?没错它就...
  • 浮动,开发网站中最常用技术,标签添加浮动后会产生不同效果,让我们一起来探索一下添加浮动...我在html文件中创建了一个a标签,a标签属于行内标签,不能直接指定大小,但是当我们给a标签添加浮动之后,a标签就相当于从行.
  • 你没看错:用一个A标签包裹块级元素,在HTML5以前,a标签属于行内元素,而div,h1,p 等为块级元素,如果强行包裹,可能会被强行截断为多个a标签,感兴趣朋友可以了解些
  • 内联元素与外联元素

    2017-02-27 21:28:41
    内联元素: 又称为行内元素,不会自动换行,行内元素是不能跳出行的,但是可以辅助进行样式修改 ...属于内联元素的html标签有: a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bid
  • 例子: <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:00
    img和input也属于行内元素,但他们却可以设置宽高!!!! 查阅了一些资料才明白,原来css的元素还有另外一种分类方法,可替换元素,不可替换元素。 a)可替换元素 浏览器根据标签的属性来决定元素的具体显示...
  • 元素

    2020-03-27 23:37:07
    伪元素选择器包括 ::before 在元素内部前面插入内容 ...3. before和after创建一个元素,但是属于行内元素 4. 因为在dom里面看不见刚才创建元素,所以称为伪元素 5. 伪元素和标签选择器一样,权重为1 用伪类元...
  • img标签的特殊之处

    2019-06-26 17:18:50
    img同时具有行内元素,行内块,和块级元素的特性。既可以默认在一行显示(inline),也可以设置其宽和高(行内块),而且当设置一个图片的margin时,会同时作用到同一行的元素(inline-block) 自己总结,欢迎指正。 ...
  • 标签的显示模式(重点) div和span标签 ​1.样式完全相同,标签不同,显示结果完全不同 ​2.每个div会独占一行,多个span会并列一排 ...多学一招:从大方面来说,其实行内块元素也属于行内元素
  • 最近在突然想到为什么img标签行内元素还可以设置宽高,查阅了一点资料和参考了别人博客,得出结论:img标签没有独占一行所以是行内元素,但是img标签属于替换元素,具有内置宽高属性,可以直接设置宽高。...
  • 先解释a标签的宽高,a标签属于行内元素,默认情况下是不支持设置宽高,仅依靠内容来“撑大自己”。这时我们需要用cssdisplay属性并且值设置为block即可。这么设置浏览器就会将被设置a标签识别为块元素。这时宽...
  • 首先,分析一下行内元素的某些特点: 不可设置高宽; 不占满一行,可平铺; 对行内元素设置margin时,垂直方向上将会失效; 回到开头的问题:为什么img标签能够设置高宽呢? img确实是行内元素,但它同时也是“可...
  • 深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素属于内联元素或者块元素一种。 in-line这个词有很多种解释:内嵌、内联、行内、线级等,但是,它们都是表示相同意思,在这里...
  • CSS系列之美化网页/span标签和div标签/字体样式/文本样式 ...属于行内元素 div标签 属于块级元素 程序示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"...
  • 关于img标签的探讨

    2017-09-28 16:22:00
    关于img标签的探讨:一直以来img属于那一种标签受到困惑,因为它既有块元素的特性也有行内元素的属性。它独占一行,也可以设置宽高。在此重新学习一下标签元素的分类;html元素的分类:块元素、内联元素和内联块状...
  • 常用文字,图片,列表,链接,表格,表单,框架等标签的学习 html标签很多,大致分为三类,块级元素,行级元素,行内块元素三类。 块级元素 块级元素就是元素独占一行,...行内元素就是不能设置width,height属性...
  • img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点) ​ 属性: ​ src 属性指定的是外部图片的路径(路径规则和超链接是一样的) ​ alt属性 图片的描述,这个描述默认情况下不会显示,有些浏览器会...
  • before 和 after 必须有 content 属性 before 在内容前面,after 在...before 和 after 创建是一个元素,但是属于行内元素 创建出来元素在 Dom 中查找不到,所以称为伪元素 伪元素和标签选择器一样,权重为 1 ...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 147
精华内容 58
关键字:

属于行内元素的标签