HTML常用标签

结构标签

结构标签并没有什么特殊的做用,但是它是构建一个网页最基本的最主要的元素。

1、结构标签

HTML常用标签_第1张图片

网页浏览效果:

HTML常用标签_第2张图片

注:1、标题标签只有1~6不用一直用。

       2、现在入门大家只要认清这标签就可以。

2、列表标签

无序列表、有序列表、自定义列表

HTML常用标签_第3张图片

网页浏览效果:

HTML常用标签_第4张图片

注:无序列表与有序列表在网页中呈现的圆点以及数字均可以使用样式将其删除或修改。(使用的不多)

       无序列表通常用于导航、列表、菜单等布局。

       有序列表通常用于目录,其他情况使用的相对较少。

       自定义列表通常用于上下(左右)的图文区域布局,标题-内容区块。

3、功能标签

功能标签顾名思义有特定的功能效果


网页浏览效果:


大家有没有发现超链接三个字跟别人有点不同,没错就是因为我给它加了一个超链接,链接到了百度。当你点击超链接的时候页面会跳到百度。

HTML常用标签_第5张图片

这里面给大家展示了三个功能标签,分别是hr(水平线)、a(超链接)、br(换行)。

到这里大家可能会有个疑问,为什么平时在浏览网页的是时候也是有碰到这样的超链接,但是别人的超链接不会有一条横线也不是蓝色字体,这里我要给大家加个备注。

注:a标签的功能是:1、跳转到对应的链接地址。2、下载对应的文件。(如果设置指定为一个文件的话就可以实现页面的下载文件功能)

        a标签有默认的下划线和字体颜色,但是这些均可以使用样式将其修改。(如下图)

HTML常用标签_第6张图片

这些等讲到css的时候会跟大家讲到,现在大家只需要知道有这个东西就可以。

HTML常用标签_第7张图片

img图片标签、iframe内联框架

img:就是一个将图片放上页面。

iframe:简单的说就是网页中加网页。

HTML常用标签_第8张图片

下面讲最后一个常用的基础标签——link标签。

link功能:引用标题图标

相信大家应该有发现所有网页都有小图标


下面我们以京东商城做例子

HTML常用标签_第9张图片

网页浏览效果:

HTML常用标签_第10张图片

这样就做成了一个标题图标啦,是不是很简单,哈哈哈哈!!

那么我们基础常用的标签就跟大家介绍结束了,大家学会了吗?我们下次就要开始css(样式)是学习啦!


注:如果有什么疑问欢迎大家在评论区留言,一有空就会马上回复!!!

       相互学习共同进步!!!



你可能感兴趣的:(前端开发)