整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

在网页开发中,我们需要掌握的常用HTML标签有哪些?

果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种超文本标记语言,它包含有众多的标签,我们可以通过这些标签,把不同的internet资源(如:文字、图片、视频、音频、表单等等)整合在一个统一的文档中,这就形成了我们可以看得见的网页。那么,HTML都有哪些常用的标签呢?

一、文档类型声明。

html5文档类型声明:<!doctype html>

html4文档类型声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签,所有其它的HTML标签都要放在这个标签的内部。

<html>

<head></head>

<body></body>

</html>

三、双标签和单标签。

在HTML标签中,有的标签是成双成对的,如:<html></html>(如下图);而有的标签是单个的,如:<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签:

meta:主要提供有关页面的元信息。

link:用来定义文档与外部资源的关系,最常用的是调用CSS样式文件。

title:页面标题的标签。

script:用来调用JS文件或JS代码。当然,script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是:独自占有一行;标签的高与宽、边距可以修改;没有设置宽与高时,默认继承父标签。例如:


<div>div1</div>

<div>div2</div>

<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>


前端页面显示的效果如下图:

常用的块级标签有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同,它不能独自占有一行,会与其它内联标签在同一样展示;内联标签的高与宽、上下边距是不能修改的,它里面的文字或图片有多高,它就是多高。例如如下代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<span>span1</span>

<span>span2</span>


CSS样式代码跟块级标签的例子是一样的,而显示的效果就不一样了,宽与高、上下边距没有效果。如下图:

常用的内联标签有:span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签,既有一些内联标签的特性,也有一些块级标签的特点:它不能独自占有一行,但是可以修改它的宽度和高度。例如下面这段代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

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

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


CSS样式代码跟块级标签的那个例子仍然是一样的,图片的宽和高、上下边距修改成功,而2个图片不能独自占有一行,而是在同一行。如下图:

常用的内联块级标签有:img、input、textarea。

4、区域标签。

所谓区域标签,就是主要用来划分布局页面区域的。如:头部、主体内容、侧边栏、底部。这样划分的好处是:让页面布局更加清晰明了。

常用的区域标签有:header(头部)、footer(底部)、nav(导航)、aside(侧边栏)、section(主体)、article(独立内容)。

5、表单标签。

这个表单标签我们也是会经常用到的,如:登录网站的时候、提交数据的时候。如下图的评论表单:

​表单常用的标签有:form、input、select、option、textarea 。

以上就是我们开发网页时,会常用到的HTML标签。当然,HTML标签远不止这些,尤其是html5出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。

TML图像标记

常用的图像格式—GIF,PNG,JPG
图像标记<img />
HTML网页中任何元素的实现都要依靠HTML标记,要想在网页中显示图像就需要使用图像标记,接下来将详细介绍图像标记以及和他相关的属性。其基本语法格式如下:

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名,他是img标记的必需属性。

相对路径和绝对路径

相对路径
相对路径不带有盘符,通常是以HTML网页文件为起点,通过层级关系描述目标图像的位置。
例如:

<img src="img/logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" />

相对路径设置分为以下三种:

图像文件和html文件位于同一文件夹:只需输入图像文件的名称即可,如<img src="logo.gif" />。

图像文件位于html文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如<img src="img/img01/logo.gif" />。

图像文件位于html文件的上一级文件夹:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推,如<img src="../logo.gif" />。

绝对路径

绝对路径一般是指带有盘符的路径。

例如:

“D:\HTML+CSS网页制作\chapter02\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。


原文链接:https://blog.csdn.net/dubaiqaq/article/details/103500345

-尖括号<html></html>是一组成为“双标记”,可以理解为<html>为始,</html>为终或闭合;

2-所有的标签都有<>开始,但不是所有的标签拥有</>结束,不是所有的标签有始就有终。比如<hr>水平线;

3-单个的标签叫什么?

单个的标签叫“单标记”,也可以叫不成对标签。

单标记指的是没有闭合标记的标记(没有结束标记),即空标签。

4-如果给“单标记”加上闭合会怎么样?

在空标签上使用闭标签是无效的,例如:</hr>。这样的情况是无效的HTML标签。

总结,一点小心得。双标记就如一段事件,单标记就像一种能力,事件会有开始和结束,能力的关闭就是程序的关闭。

以下是一些练习截图

这段代码的显示是下图

这是自学中的一点点自己的理解,如果有错误,欢迎留言指正。