HTML常用行内标签

目录

概念

1、em,strong

2、i,b

3、span

4、del

5、br

面试题:

1、em、strong都是强调标签,他们的区别是什么?

2、title标签和h1标签有什么区别?

3、i标签和em标签,区别是什么?b标签和strong标签,区别是什么?

6、a标签

地址:

锚点功能


概念

行内标签:用来包裹具体内容

特点:1、不会独占一行

2、不可以设置宽高

3、宽度是由内容撑开

常用行内标签:em、strong、i、b、span、del、br、a


1、em,strong

语义:em和strong标签都有强调的语义,em是语气语调的强调,strong是内容的强调

默认样式:em是斜体强调,strong是加粗强调

html 复制代码
<p>后面演示<em>斜体</em> <strong>加粗</strong>!!!</p>
 
2、i,b

语义:i和b标签没有具体语义

默认样式:i是斜体,b是加粗

html 复制代码
<div>今天天气<i>真</i> <b>不错</b></div>
 
3、span

span标签没有默认样式也没有具体语义

html 复制代码
<div>今天天气<span style="color: red">真不错</span> 没大之者揽评的松得夫</div>
 

可以看出span在不换行的情况下对部分文字样式进行了修改

4、del

语义:表示要删除的内容

默认样式:文本有删除线

html 复制代码
<div>原价:<del>9999</del>,现价:<span class="current-price">9.9</span></div>
 
5、br

默认样式:强制换行

html 复制代码
<h1>01文件<br>111</h1>
 

面试题:
1、em、strong都是强调标签,他们的区别是什么?

em、strong在h5标签中,都有强调的语义

em是斜体强调,强调语音语调,strong是加粗强调,强调内容的重要性

在实际开发中,一般不做区分,遇到强调的部分,都可以使用

2、title标签和h1标签有什么区别?

在h5中,语义都很重,都可以帮助浏览器进行检索

title标签是设置页面在浏览器标题栏的标题

h1是设置页面内容的标题

在实际开发过程,由于这2个标签语义都很重,需要慎重使用

3、i标签和em标签,区别是什么?b标签和strong标签,区别是什么?

i标签和em标签都有斜体的默认样式,i标签没有语义,em标签有强调的语义,

b标签和strong标签都有加粗的默认样式,b标签没有语义,strong标签有强调的语义,

在实际开发中,尽量使用有语义的标签


6、a标签

a标签又称超链接标签

默认样式:字体颜色有变化,文本有下划线

去除默认样式 :<a href="#" style="color: black; text-decoration: none">百度</a>

功能:

1、从一个页面跳到另一个页面:<a href="https://www.baidu.com">百度</a>

2、从当前页面跳转 :下面解释锚点功能

3、下载

属性:href属性:指向跳转的地址

target属性:控制跳转页面的打开方式 可选值 _self(当前页面打开,谷歌浏览器默认) _blank 新开一个页面

空链接写法 :<a href="javascript:;">跳转到登录页</a> <a href="#">跳转到登录页</a>

注意:用#会有bug,点击时会滚动到页面顶部,有点像刷新了一下


地址:

绝对路径:路径地址是固定的,不会随着超链接所在html文件的变化而变化

例如:百度的网址,无论在哪个文件,地址永远是https://www.baidu.com

相对路径:路径地址不固定,会随着html文件位置的变化而变化

./ 你要跳转的文件跟超链接所在的文件在同一个目录下,默认就是./,所以./可以省略

**../**你要跳转的文件跟超链接所在的文件在不同一个目录下,../跳出当前的文件夹,

来到上一级文件夹下,如果上一级文件夹下也没有,可以**再../**跳出,直到找到你要跳转的文件

锚点功能

a标签实现当前页面的跳转,也叫锚点功能

第一步:给你要跳转的位置打一个标记,id属性="id属性值" 例如:<p id="center">XX</p>

第二步:设置超链接href的属性值:#id属性值 例如:<a href="#center">跳转到页面的XX处</a>

id属性值:不要以数字开头 不要重复 尽量不要是汉字

相关推荐
人良爱编程10 小时前
Hugo的Stack主题配置记录03-背景虚化-导航栏-Apache ECharts创建地图
前端·javascript·apache·echarts·css3·html5
晚烛13 小时前
CANN + 物理信息神经网络(PINNs):求解偏微分方程的新范式
javascript·人工智能·flutter·html·零售
ۓ明哲ڪ14 小时前
网页视频倍速播放.
html
觉醒大王18 小时前
哪些文章会被我拒稿?
论文阅读·笔记·深度学习·考研·自然语言处理·html·学习方法
RFCEO18 小时前
前端编程 课程十六、:CSS 盒子模型
css·前端基础课程·css盒子模型·css盒子模型的组成·精准控制元素的大小和位置·css布局的基石·内边距(padding)
WooaiJava19 小时前
AI 智能助手项目面试技术要点总结(前端部分)
javascript·大模型·html5
Never_Satisfied19 小时前
在JavaScript / HTML中,关于querySelectorAll方法
开发语言·javascript·html
夜郎king21 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
夏幻灵1 天前
HTML5里最常用的十大标签
前端·html·html5
程序员猫哥_1 天前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html