HTML之⑤常用标签(常用基本单双标签(不含表单))

HTML之⑤HTML常用标签

  •                          QQ:3020889729                                                                                 小蔡
  • HTML常用双标签
    • ①头标签_head和标题标签_title
    • ②段落标签_p
    • ③文本格式化标签(提高文字突出性/改善显示效果)
      • 1)粗体_strong(或者_b)
      • 2)斜体_em(或者_i)
      • 3)删除_del(或者_s)
      • 4)下划线_ins(或者_u)
    • ④块区标签(布局标签)
      • 1)分割/分区标签_div——指分配一个行区
      • 2)跨距/跨度标签_span——指分配一个块区
    • ⑤超链接标签_a
      • *超链接标签之间的内容
      • 1)外部链接
      • 2)内部链接
      • 3)空链接——可实现当前网页/页面的位置跳转
      • 4)下载链接
      • 5)锚点链接(也叫内部链接)
  • HTML常用单标签
    • ①换行标签_br/
    • ②图像标签_img/
      • 路径的说明
      • 图像标签的使用
        • 添加图片文件
        • 1)直接使用图片_src
        • 2)添加图片无法显示是的提示文字的属性_alt
        • 3)添加图片显示提示文本的属性_title
        • 4)设置图像大小(长宽高)_width_height
        • 5)设置图像边框_border
    • ③注释标签_I----/

                         QQ:3020889729                                                                                 小蔡

HTML常用双标签

①头标签_head和标题标签_title


中间可以添加网站标题,字符编码设置等。
		设置标题内容

②段落标签_p

段落标签用于分段显示,并且显示内容在不同浏览器不同界面会有所不同(排版)。
段与段之间有空隙。

添加段落内容, 不会因为直接这样换行写内容就可以显示换行 而仅仅只是显示一个空格而已——哪怕多用几个空格也只保留一个空格。

③文本格式化标签(提高文字突出性/改善显示效果)

1)粗体_strong(或者_b)

代码:(展示strong)


效果:
在这里插入图片描述

2)斜体_em(或者_i)

代码:(展示em)


效果:
在这里插入图片描述

3)删除_del(或者_s)

代码:(展示del)


效果:
在这里插入图片描述

4)下划线_ins(或者_u)

代码:(展示ins)

高峰

效果:
在这里插入图片描述

④块区标签(布局标签)

1)分割/分区标签_div——指分配一个行区

代码:

    
时间最是无价!
学习在于积累!

效果:一个div分配一个行区放内容。当前div标签以外的部分放在另外的地方。并且可以看出,在div区域后紧跟内容是在另外的行里显示——而第二个div使用时,他会区别前面的内容,另外其一个新的行区。
HTML之⑤常用标签(常用基本单双标签(不含表单))_第1张图片

2)跨距/跨度标签_span——指分配一个块区

代码:

HTML学习span区域外添加的文字
积极动手!

**效果:**①部分:指文字内容直接加在标签外边就是无空隙的;②部分:第二个区块与第一区块或者前方内容之间有一个空隙。
在这里插入图片描述

⑤超链接标签_a

用于将一个页面/标签与另一个页面/标签进行链接。
标签使用方法

文本或者图片



*超链接标签之间的内容

(可以有很多元素作为内容:比如文字,图片,视频等等~,就列举比较常见的文字和图片!)
1.文字
代码:

这是一个内部链接

效果:
在这里插入图片描述
点击后跳转
HTML之⑤常用标签(常用基本单双标签(不含表单))_第2张图片
2.图片
代码:


效果:
HTML之⑤常用标签(常用基本单双标签(不含表单))_第3张图片
点击后跳转
HTML之⑤常用标签(常用基本单双标签(不含表单))_第4张图片

1)外部链接

实现一个页面到另外一个页面的来链接~
代码:
**说明一下:**默认打开方式是当前窗口_self
可以添加_target="_blank",实现新窗口中打开

百度

效果:
在这里插入图片描述
HTML之⑤常用标签(常用基本单双标签(不含表单))_第5张图片

2)内部链接

实现当前网站内网页的跳转链接——也就是当前网站所包含的网页之间的链接。
href里就填写你所需要的路径就可以了。
比如以下代码

这是一个内部链接

效果:点击之后实现跳转网站网页
HTML之⑤常用标签(常用基本单双标签(不含表单))_第6张图片
HTML之⑤常用标签(常用基本单双标签(不含表单))_第7张图片

3)空链接——可实现当前网页/页面的位置跳转

空链接格式:



空链接本身是不会指向任何地方的,但是当一个空链接出现时,后边再设置特定的属性,就可以实现页面位置跳转的作用——也就是锚点链接作用!
如:href="#c4" id=“c4”,假设左边两个属性分别是两个超链接标签中的,那么当点击第一个标签的内容时,会跳转到第二个标签位置。(也可以使用name=“c4”,但是最好时使用id)
代码:

  

这是一个标签












































恭喜你找到了

效果:
HTML之⑤常用标签(常用基本单双标签(不含表单))_第8张图片
在末尾~
HTML之⑤常用标签(常用基本单双标签(不含表单))_第9张图片

4)下载链接

同样的,只需要把href的地址设置为文件/压缩包的地址即可。
比如:
假设这个123压缩包在同级文件中。
代码:

压缩包

5)锚点链接(也叫内部链接)

点击跳转

HTML常用单标签

①换行标签_br/

实现网页显示的换行/空行。
换行上下文字间没有空隙,不同于两个段落标签之间是有空隙的。


实现换行和空行的显示

②图像标签_img/

路径的说明

路径是src所引用的内容,而src为图像标签的必须属性。
(ps:属性就是标签的特性。比如,我是四川的,她是山东的。)

图像标签的使用

添加图片文件

HTML之⑤常用标签(常用基本单双标签(不含表单))_第10张图片

1)直接使用图片_src

代码:


需要确保图片文件和html文件在一起。

效果:
HTML之⑤常用标签(常用基本单双标签(不含表单))_第11张图片

2)添加图片无法显示是的提示文字的属性_alt

代码:
仅有1.jfif照片,没有就无法显示。所以就会显示提示文字。

玫瑰花

效果:
在这里插入图片描述

3)添加图片显示提示文本的属性_title

代码:


效果:
HTML之⑤常用标签(常用基本单双标签(不含表单))_第12张图片

4)设置图像大小(长宽高)_width_height

代码:


效果:
HTML之⑤常用标签(常用基本单双标签(不含表单))_第13张图片

5)设置图像边框_border

代码:


效果:
HTML之⑤常用标签(常用基本单双标签(不含表单))_第14张图片

③注释标签_I----/

记住是一个!+四个‘-’:


它不会被显示,但是有助于我们查看代码,维护理解,有很多帮助和必要。
一般软件都会支持这样的一个快捷键——ctrl + /,实现注释标签快捷创建。

你可能感兴趣的:(HTML学习)