在网页开发中，我们需要掌握的常用HTML标签有哪些?
zhezhongyun 2024-12-11 18:13 29 浏览
如果想开发一个网站，除了要精通后端开发语言（如：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出来后，新增了许多的新标签。但是，有些标签在我们开发中很少用到，所以，这里就没有做相应的介绍。
- 上一篇：常见编码总结
- 下一篇：HTML&CSS基础学习笔记1.4-定义文档类型
相关推荐
- 自助机网络监控（自助设备监控）
-
今日领导打电话说上次的自助机修好了，今天又不行了，这是第二次打电话了。目前也没有其他人反馈这个机器的问题。于是我就想能不能根据IP去ping这个自助机的网络是否正常，如果不正常，关机了就自动给我发到科...
- C# 打字练习(WinForm)快速打字小游戏，输入正确自动爆炸效果
-
打字游戏窗体初始化：publicintk;PictureBoxpic=newPictureBox();//生成飞机控件privatev...
- 这三款颜值极高的工具完美契合win10风格，逼格满满
-
今天介绍三款开源软件让你的Windows10逼格再飞跃一个等级，而且功能与颜值兼具！ModernFlyouts这是一款Windows10弹出UI的替代品，比原生UI更漂亮、更现代。提示框的位置可以随意...
- VC界面开发组件Xtreme Toolkit Pro全新发布v17.0.0
-
Codejock软件公司的XtremeToolkitPro是屡获殊荣的VC界面库，是MFC开发中最全面界面控件套包，它提供了Windows开发所需要的11种主流的VisualC++MFC控件，...
- 字体|好看的英文字体合集(四)（最好看的十种英文字体）
-
电脑里的字体不在于多而在精，拥有10000个字体不用的话也是浪费，找起来也不容易，只有经常使用的才是好字体。获取方式：私31.潮流赛博朋克金属字体32.潮流创意可扩展英文字体StretchPro3...
- Qt5 C++入门教程-第13章 自定义控件(Custom Widgets)
-
大道至简，在Qt5C++入门教程的这一部分，我们将创建一个自定义部件。大多数工具包通常仅提供诸如按钮、文本部件或滑块等最常见的部件。没有哪个工具包能够提供所有可能的部件。程序员必须自行创建此类部件...
- 艾灸的美容养生功效（艾灸美容养颜）
-
艾灸，属于医外治物理疗法，通过百草之王艾草和13种名贵中草药特制成香条状，点燃以温热刺激患处四周或相关穴位，帮助人体全面温通经络，从而加速皮肤的血液循环，淡化色斑。艾灸疗法-温和灸1.四白穴：四白...
- 你可能不知道的10个CSS3中的隐藏特性
-
CSS3为web设计增添了许多令人惊叹的特性，这其中你经常会用到box-shadow（图层阴影），border-radius（边框圆角），transform（变形）这一类受欢迎的常用特性。但是还有一些...
- 不会才学-4 Tkinter 控件1一Label、Button、Entry
-
一、标签控件（Label）序号可选项&描述1anchor文本或图像在背景内容区的位置，默认为center，可选值为（n,s,w,e,ne,nw,sw,se,center）eswn是东南西北英文...
- 从0到1建立一张评分卡之可视化分析
-
上一篇文章介绍了如何进行数据预处理，接下来介绍如何进行探索性数据分析。探索性数据分析又叫EDA,即ExploratoryDataAnalysis。其实数据预处理也属于EDA的一部分，EDA的目...
- 高温致日本冲绳最大珊瑚群90%白化褪色
-
来源:新华网高温致日本冲绳最大珊瑚群90%白化褪色A+A-分享2016-09-0412:50:53 来源:新华网查看原文<divclass="video-box"data-vid="...
- 学习笔记(十七)|PPT考点总结（ppt.1）
-
分享兴趣，传播快乐，增长见闻，留下美好！亲爱的您，这里是LearningYard学苑。今天小编为大家带来“学习笔记（十七）|PPT考点总结”，欢迎您的访问。Shareyourinterests,...
- 史上最全的浏览器兼容性问题和解决方案
-
微信ID：WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄（页底留言开放，欢迎来吐槽）●●●浏览器兼容性问题是指因为不同的浏览器对同一段CSS代码解析不同导致页面显示效果不统一...
- 304071纽郎缝包机送料牙架（缝包机送料牙更换）
-
portant;white-space:normal;font-size-adjust:none;font-stretch:normal;background-color:rgb(25...
- 安卓手机微信设置字体大小导致页面错位的解决方案
-
切图网专注网页切图、小程序切图服务，在最近的客户反应中，当安卓手机设置字体大小以后，会导致从微信公众号进入的页面也会字体放大，导致页面的不同程度的错位，要想解决这个问题，可以通过代码解决，ios相对简...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)