在网页开发中，我们需要掌握的常用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>

</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出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。

SS中的浮动（Floats）、定位（Positioning）和显示（Display）属性是前端工程师掌握页面布局的关键。本文将深入探讨这些属性的工作原理和使用场景，帮助开发者更好地理解和运用它们来构建响应式和精确的网页布局。

浮动（Float）

浮动是CSS中用于实现元素排列的一种方式，它可以让元素脱离正常的文档流，并可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。

.element {
  float: left; /* 或者 'right' */
}

使用场景

文字环绕图片。
创建水平导航栏。
无网格系统时的列布局。

注意事项

清除浮动（Clearing Floats）：使用clear属性可以防止元素被浮动元素覆盖。

.clear-element {
  clear: both; /* 可以是 'left', 'right', 或 'both' */
}

包含浮动（Containing Floats）：浮动元素的父容器可能不会扩展以包含浮动的子元素，可以通过清除浮动或使用其他技术（如overflow）来解决这个问题。
浮动塌陷（Float Collapse）：浮动元素不占据空间，可能导致父元素高度塌陷。

定位（Position）

定位属性允许你控制元素的位置，它可以是相对于它的正常位置、相对于最近的已定位祖先元素、相对于视口或绝对位置。

.element {
  position: static | relative | absolute | fixed | sticky;
}

使用场景

相对定位（Relative Positioning）：元素相对于其正常位置进行偏移。

.relative-element {
  position: relative;
  top: 10px;
  left: 20px;
}

绝对定位（Absolute Positioning）：元素相对于最近的已定位父元素进行定位。

.absolute-element {
  position: absolute;
  top: 0;
  right: 0;
}

固定定位（Fixed Positioning）：元素相对于视口进行定位，即使页面滚动也不会移动。

.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
}

粘性定位（Sticky Positioning）：元素基于用户的滚动位置在相对和固定定位之间切换。

.sticky-element {
  position: sticky;
  top: 10px;
}

注意事项

定位元素可能会脱离文档流，影响周围元素的布局。
z-index属性可以控制堆叠顺序。
绝对定位元素的容器应有position: relative;，以便正确定位。

显示（Display）

display属性是CSS中最重要的用于控制布局的属性之一，它定义了元素如何显示在页面上。

.element {
  display: block | inline | inline-block | flex | grid | none;
}

使用场景

块级元素（Block）：display: block;使元素表现为块级，占据新的行。

.block-element {
  display: block;
}

内联元素（Inline）：display: inline;使元素在文本行中显示，不开始新行。

.inline-element {
  display: inline;
}

内联块元素（Inline-Block）：display: inline-block;允许元素并排排列，同时拥有块级元素的宽度和高度属性。

.inline-block-element {
  display: inline-block;
}

弹性盒子（Flex）：display: flex;创建了一个弹性容器，其子元素可以灵活地在容器内排列。

.flex-container {
  display: flex;
}

网格（Grid）：display: grid;创建了一个网格容器，可以定义行和列以及在网格内放置元素。

.grid-container {
  display: grid;
}

隐藏元素（None）：display: none;将元素隐藏，且不为元素保留空间。

.hidden-element {
  display: none;
}

注意事项

使用display: none;与visibility: hidden;的区别在于后者仍保留元素占据的空间。
display: flex;和display: grid;为现代布局提供了更多控制，通常比浮动和定位更优。

示例

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="header">
  <div class="logo">Logo</div>
  <div class="navigation">Navigation</div>
</div>

<div class="main-content">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<div class="footer">Footer</div>

<div class="fixed-element">Fixed Element</div>

</body>
</html>

CSS样式

/* Reset some default styles */
body, h1, p {
  margin: 0;
  padding: 0;
}

/* Header styles */
.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  padding: 10px;
  overflow: hidden; /* Clearfix for floated elements */
}

.logo {
  float: left;
  font-size: 24px;
}

.navigation {
  float: right;
  font-size: 18px;
}

/* Main content styles */
.main-content {
  padding: 20px;
}

.sidebar {
  float: left;
  width: 200px;
  background-color: #ddd;
  padding: 10px;
}

.content {
  margin-left: 220px; /* Make space for the sidebar */
  background-color: #eee;
  padding: 10px;
}

/* Footer styles */
.footer {
  background-color: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center;
  padding: 10px;
  position: relative; /* For demonstration purposes */
  top: 20px; /* Move the footer down a bit */
}

/* Fixed element styles */
.fixed-element {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #333;
  color: #fff;
  z-index: 1000; /* Ensure it stays on top */
}

/* Clearfix hack */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在这个例子中，我们创建了一个包含头部、侧边栏、主要内容和页脚的基本布局。我们使用浮动来对齐头部的Logo和导航，以及创建一个侧边栏。我们还使用了相对定位来稍微下移页脚，并使用固定定位为页面添加了一个始终可见的固定元素。最后，我们使用了overflow: hidden;来清除头部中浮动元素的影响。

结语

浮动、定位和显示属性是CSS中构建复杂布局的强大工具。通过深入理解和正确应用这些属性，前端工程师可以创建出既美观又功能强大的网页。随着Web标准的不断发展，我们也需要不断学习和适应新的CSS特性，以保持我们技能的前沿性。

面效果展示

页面完整代码

<!DOCTYPE HTML>
<html>
<head> 
<title>文内链接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使页面居中显示，并展视窗50%宽度-->
<div style="position:fixed; top:0px;"><!--使导航菜单悬停在顶端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情况</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役动态</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>
</div><!--使导航菜单悬停在顶端（结尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隐藏滚动条-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >试飞进程</a></h2>
歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试，13时08分成功着陆，历时18分钟。<br>
整个首飞过程在歼-10S战斗教练机陪伴下完成 。
2016年10月28日，首次发布“空军试飞员将驾歼-20飞机亮相中国航展”后，还陆续发布了“歼-20战机列装空军作战部队”“空军歼-20战机首次开展海上方向实战化训练”等。
<h2><a id="chapter2">研制情况</a></h2>
在2016年11月1日，第十一届珠海航展，歼-20首次进行空中飞行展示。两架歼-20做了公开飞行，不仅在现场引起轰动，也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作，也进入了世界最先进的第五代战斗机行列，它是中国国防能力高速发展的一个象征。<br>
2018年11月11日，第十二届中国航展在珠海迎来“高光时刻”：歼-20战机在公开飞行展示中挂弹开仓，震撼献礼人民空军成立69周年纪念日。 <br>
2019年10月13日，庆祝人民空军成立70周年航空开放活动新闻发布上，空军新闻发言人申进科大校介绍歼-20战机列阵人民空军“王牌部队”
<h2><a id="chapter3" >服役动态</a></h2>
2017年3月9日，中央电视台报道歼-20战斗机正式进入空军序列。<br>
2017年3月13日，《中国日报》发布消息称，中国自主研制的歼-20近期将装配国产发动机。<br>
2017年7月30日，歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来，3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>
2017年9月28日，在中国国防部行记者会上，国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>
2017年11月10日上午，中国空军发言人申进科大校表示，歼-20 列装部队后，已经开展编队训练。<br>
2018年2月9日，中国空军新闻发言人申进科大校发布消息，歼-20开始列装空军作战部队。<br>
2018年10月30日，中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>
2019年10月1日，歼-20现身庆祝中华人民共和国成立70周年阅兵式；阅兵中，歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅；该三款歼击机被誉为中国空军歼击机家族的“三剑客”，是未来联合作战的骨干力量
<h2><a id="chapter4" >总体评价</a></h2>
歼-20是眼下亚洲区域最先进的战机，这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟，尚未正式交付入役；美国F-35战斗机也多次出现飞机供氧不足的问题，大面积停飞，出口受阻；韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况，后又传出了合作方印尼打算撤资并已告知韩国的消息。因此，中国歼-20战机成为亚太区域领跑的优势战机。<br>
中国空军正向全疆域作战的现代化战略性军种迈进，成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队，将进一步提升空军综合作战能力，有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>
歼20是我国自主研制的第五代战斗机，它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机，是按照性能、技术和进度要求，研制开发我国自己的新一代隐身战斗机。引领技术发展，指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破，这是中国航空工业从跟跑到并跑，再到领跑的必由之路。创新研发体系，是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制，我们建立了具有我国特色的数字化研发体系。建设卓越团队，是指通过型号研制，锤炼一支爱党爱国的研制队伍，这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来，我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="歼20气动外形分析"><!--必须保证画面尺寸与页面显示尺寸一致！-->
</map>
</div><!--小div(结尾)-->
</div><!--小div套大div隐藏滚动条（结尾）-->
</div><!--使页面居中显示，并展视窗50%宽度（结尾）-->
</body> 
</html>

页面制作技术解析

1.页面内容居中显示方法

2.导航栏悬停顶端方法

3.鼠标滑过导航标题或链接时改变背景色提示

3.隐藏滚动条方法

4.图片区域链接

大家结合代码和技术解析，先自行分析一下每段代码的作用，以及它们之间的前后关系。这一步练习对培养代码阅读能力很有好处，希望大家可以先自行阅读分析。

下一次，我会逐步演示“页面制作技术解析”中的五个步骤以及一些注意事项。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

整合营销服务商

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

一、文档类型声明。

二、html主标签。

三、双标签和单标签。

四、head头部标签。

五、body主体标签。

浮动（Float）

使用场景

注意事项

定位（Position）

使用场景

注意事项

显示（Display）

使用场景

注意事项

示例

HTML结构

CSS样式

结语

面效果展示

页面完整代码

页面制作技术解析

目录

您的项目需求