在网页开发中，我们需要掌握的常用HTML标签有哪些?
zhezhongyun 2024-12-11 18:13 24 浏览
如果想开发一个网站，除了要精通后端开发语言（如：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-定义文档类型
相关推荐
- css实现多行文本的展开收起（css实现一行多列）
-
背景在我们写需求时可能会遇到类似于这样的多行文本展开与收起的场景：那么，如何通过纯css实现这样的效果呢？实现的难点（1）位于多行文本右下角的展开收起按钮。（2）展开和收起两种状态的切换。（3）文本...
- 飞牛nas 中继功能再加强!跟所有穿透说再见吧!
-
本内容来源于@什么值得买APP，观点仅代表作者本人｜作者：科技菜菜原本飞牛nas的每周更新在周四，这次五一小长假！就提前更新了，虽然音频直通和离线播放是这次更新的主要内容，但是最让所有人开心的则是一...
- 这13个前端库，帮我在工作中赢得了不少摸鱼时间
-
前言平时开发的过程中，常常会使用到一些第三方库来提高开发效率，我总结了自己工作这么久以来经常用到的13个库，希望对大家有帮助～antd全称应该是AntDesign，这是一个React的组件库...
- 前端开发总踩坑?7 个 TypeScript 救命技巧速来查收!
-
在当下的前端开发浪潮中，React、Vue持续霸榜，Webpack性能优化话题不断，而TypeScript凭借强类型特性，成为众多开发者提升代码质量的“秘密武器”。可实际开发时，不少人被类型推导混乱...
- 不花一分钱!提升网站访问速度（让网站访问量提高的最好的方法是什么）
-
原创实用技巧不易，多多转发支持|现在很多公司都通过搭建官方网站的方式，比如电脑报全媒体群就有蛋黄星球（www.cpcw.com）来宣传自己的公司以及相关的产品。但是由于网友所处的位置不同，再加上网络...
- Excel常用技能分享与探讨(5-宏与VBA简介 VBA之用户窗体-框架)
-
书接上文，以下是VBA用户窗体中常用控件的详细解析，涵盖核心属性、关键事件、典型应用场景及代码示例，助您精准掌握每个控件的使用方法。三、核心控件精讲3.7.框架（Frame）3.7.1、框架控件（Fr...
- Excel常用技能分享与探讨(5-宏与VBA简介 VBA之用户窗体-高级用法)
-
书接上文，之前是VBA用户窗体中常用控件的详细解析，涵盖核心属性、关键事件、典型应用场景及代码示例，下面是窗体的最后一点我能想到的一些其他漏掉的东西。四、窗体交互进阶技巧4.1非模态窗体frmSea...
- 16.python学习笔记-页面样式（python 页面设计）
-
上一章我们完成了“学习笔记”Web应用程序的大部分功能，本章我们将通过Bootstrap对页面样式进行美化，这样会让我们的项目看起来更加专业。页面样式Bootstrap主页地址：https://get...
- 第8天 | 14天搞定Vue3.0，事件处理(详细)
-
在JavaScript语言中，当用户与UI组件交互时，UI组件能够激发一个相应事件。例如，用户按动按钮、滚动文本、移动鼠标或按下按键等，都将产生一个相应的事件。Vue3.0使用v-on指令(缩写为@符...
- 前端如何实现新手引导功能?（前端新手指引）
-
大家好，我是Echa。在产品发布新版本或者有新功能上线时，经常需要新手引导功能来引导用户了解应用。下面就来分享几个开箱即用的新手引导组件库，帮你快速实现新手引导功能！Intro.jsIntro.js...
- C#_WPF_按钮模板及自定义控件的使用
-
源码私信联系WPF功能强大，但是控件的用法与Winfrom不大一样。这个文件主要说明了Button控件的用法。希望能给大家一个启示。1、按钮加入图片<ButtonGrid.Ro...
- Excel常用技能分享与探讨(5-宏与VBA简介 VBA之用户窗体-命令按钮)
-
书接上文，以下是VBA用户窗体中常用控件的详细解析，涵盖核心属性、关键事件、典型应用场景及代码示例，助您精准掌握每个控件的使用方法。三、核心控件精讲3.3.命令按钮（CommandButton）3....
- Vue指令:v-bind动态属性绑定（vue动态绑定属性值）
-
1.v-bind:指令认识和基本使用上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:...
- C#-初始窗体程序的控件，属性，事件 123
-
新创建的窗体可以说是一个空白的窗体,窗体中什么东西都没有,如果想要把窗体设置成像QQ,酷狗等一样拥有丰富功能和画面的窗体应用界面,则需要手动添加,常用的添加方式有两种即拖控件和编写代码,然后设置其相应...
- Js基础7:表单元素属性（js表格属性）
-
一、封装获取元素的方法封装思想——函数封装——代码复用 function get_id(id){ //这个函数是专门来通过id获...
- 一周热门
- 最近发表
-
- css实现多行文本的展开收起（css实现一行多列）
- 飞牛nas 中继功能再加强!跟所有穿透说再见吧!
- 这13个前端库，帮我在工作中赢得了不少摸鱼时间
- 前端开发总踩坑?7 个 TypeScript 救命技巧速来查收!
- 不花一分钱!提升网站访问速度（让网站访问量提高的最好的方法是什么）
- Excel常用技能分享与探讨(5-宏与VBA简介 VBA之用户窗体-框架)
- Excel常用技能分享与探讨(5-宏与VBA简介 VBA之用户窗体-高级用法)
- 16.python学习笔记-页面样式（python 页面设计）
- 第8天 | 14天搞定Vue3.0，事件处理(详细)
- 前端如何实现新手引导功能?（前端新手指引）
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- 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)