JavaWeb-HTML常用标签了解(一)

注释标签

 <!-- 有注释 -->
    无注释

ctrl + / 快捷键可以快速进行注释/取消注释.

注意
注释不能传达负能量!!!

标题标签

有六个, 从 h1 - h6. 数字越大, 则字体越小.

        <h1>111111</h1>
        <h2>222222</h2>
        <h3>333333</h3>
        <h4>444444</h4>
        <h5>555555</h5>
        <h6>666666</h6>

在这里插入图片描述

段落标签

  <p>这是一个段落标签</p>

在这里插入图片描述
这样是看不出来它的作用的.

        <p>人生在世,人们大多喜欢“得”,不喜欢“失”。但现实是,得与失如影随形,有得的地方必定有失, 有失的地方也必定有得。
        在对得与失的纠结中,我们常常忽略一个基本的常识,那就是 无论得失,皆是过程。
        </p>
        生活的真相就是处处是得失。“文王拘而演《周易》;仲尼厄而作《春秋》;屈原放逐,乃赋《离骚》。
        ”这是塞翁失马焉知非福般的得与失,然人生波澜起伏,今日之蜜糖,可能是他日之砒霜。

在这里插入图片描述
如上所示对文字进行分段处理.

换行标签

br 是一个单标签(不需要结束标签)

         生活的真相就是处处是得失。<br>“文王拘而演《周易》;仲尼厄而作《春秋》;屈原放逐,乃赋《离骚》。
        ”这是塞翁失马焉知非福般的得与失,然人生波澜起伏,今日之蜜糖,可能是他日之砒霜。

在这里插入图片描述
由结果可知原文本进行换行,在网页显示中并没有进行换行,所以需要用<br>标签进行换行.

格式化标签

加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签

        <strong>加粗</strong>  <b>加粗</b>
        <em>倾斜</em>        <i>倾斜</i>
        <del>删除</del>      <s>删除</s>
        <ins>下划线</ins>        <u>下划线</u>

在这里插入图片描述

图片标签

<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.nelCIKYD30NJW6W68-ZHxAHaJA?pid=ImgDet&rs=1">

在这里插入图片描述
src属性表示图片的路径

绝对路径
以 html 所在位置为基准, 找到图片的位置.
相对路径
一个完整的磁盘路径, 或者网络路径(上述例子就使用的网络路径).

img 标签的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片比例失衡.
border: 边框, 参数是宽度的像素.

超链接标签

属性
href: 必须具备, 表示点击后会跳转到哪个页面(外部链接与内部链接).
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开

<a  href="https://www.csdn.net/?spm=1000.2115.3001.4476"  target="_blank">CSDN </a>

在这里插入图片描述
博主这里方的外部链接所以点一下这个CSDN链接就会跳转到CSDN首页.

外部链接与内部链接

  • 外部链接
    href 引用其他网站的地址.
href="https://www.csdn.net/?spm=1000.2115.3001.4476"
  • 内部链接
    网站内部页面之间的链接. 写相对路径即可.

在一个目录中, 先创建一个 1.html, 再创建一个 2.html

 1.html
<a href="2.html">点我跳转到 2.html</a>
 2.html
<a href="1.html">点我跳转到 1.html</a>
  • 空链接
    使用 # 在 href 中占位.
<a href="#">空链接</a>
  • 下载链接
    href 对应的路径是一个文件.
<a href="test.zip">下载文件</a>
  • 网页元素链接
    可以给图片等任何元素添加链接.
<a href="http://www.sogou.com">
<img src="rose.jpg" alt="">
</a>
  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

手插口袋谁也不爱♡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值