02.基础标签

11 篇文章 0 订阅

1.H标签:给文本添加标题语义,独占一行

<h1>XXX</h1>

<h2>XXX</h2>

...

<h6>XXX</h6>

H1 标签最好只有1个,涉及SEO.

2.P标签:段落文本,单独一行

<p>xxx</p>

3.HR标签:分割线,单独一行

<hr>

4.注释标签:webstorm 快捷键 ctrl + /

<!-- -->

5.img标签: 显示图片 ,不独占一行

<img src="timg.jpg" alt="">

src:图片链接, alt:图片不存在显示的文字 ,width:图片宽度,height:图片高度,title:鼠标放在图片上的描述.

路径问题: 使用正斜杠/ ,不要用反斜杠\

1.相对路径赋值

1.1同级

src='timg.jpg'

从当前html所在文件夹查找

1.2下级

src='abc/timg.jpg'

从当前html所在文件夹的下级abc文件夹中查找.

1.3上级

src='../timg.jpg'

从当前html所在文件夹的上级文件夹中查找

2.绝对路径赋值 (可移植性不好)

6.br标签: 换行

<br>

企业开发中很少用br,因为br是内容没完结不另起一段的换行,很多其他标签都会另起一段换行

7.a标签:页面跳转,不换行

<a href="百度一下,你就知道">百度</a> 跳转到外部

<a href="https://www.baidu.com"><img src="timg.jpg" alt=""></a> 图片链接

<a href="timg.jpg">查看</a> 跳转到本地

target属性:

1. _self: 在当前选项卡中跳转

2._blank:新建界面,新的选项卡

title属性:鼠标悬停,显示提示.

在下载链接时使用 download 属性

当您链接到要下载的资源而不是在浏览器中打开时,您可以使用 download 属性来提供一个默认的保存文件名(译注:此属性仅适用于同源URL)。下面是一个下载链接到Firefox 的 Windows最新版本的示例:

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US" download="firefox-latest-64bit-installer.exe"> Download Latest Firefox for Windows (64-bit) (English, US) </a>

8.base标签:用来设定所有a标签的打开方式,写在head 标签中

<head>

<base target="_blank">

</head>

假链接: 不会跳转的链接

1.# :返回顶部

<a href="#">jjj</a>

2.javascript: :不会返回顶部

<a href="javascript:">jjj</a>

锚点: 通过A标签,跳转到页面的特定位置

1.当前页面跳转

<a href="#di">底部</a>

<h1 id="di">底部</h1>

通过id实现特定位置跳转

2.外部页面跳转

<a href="测试界面.html#123">跳转到外部</a>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值