html5元素可以分为两个类别：1、“块级元素”；该种元素会独占一行，总是在新行上开始，元素的宽度、高度以及外边距和内边距等都可以控制。2、“内联元素”；该种元素和其他元素会在同一行上显示，元素的宽度、高度以及外边距和内边距都不可以改变。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
HTML 标签（元素）可以分为两个类别，分别是块级元素和内联元素（也叫行内元素）。
块级元素
块级元素最主要的特点是它们自己独占一行，块级元素中最具代表性的就是
、
块级元素一般都具有特定的语义，可以使代码的可读性更强。
块级元素的主要特征如下所示：
不管是否使用换行标签
，块级元素总是在新行上开始；块级元素的宽度、高度以及外边距和内边距等都可以控制；
如果省略块级元素的宽度，那么它的宽度默认为当前浏览器窗口的宽度；
块级元素中可以包含其它的内联元素和块级元素。
内联元素
内联元素也可以称为行内元素，行内元素中最常用的是，此外还有、、、、、、、、、、
、<cite>、<dfn>、<kbd>和<var>等。</var></kbd></dfn></cite>
内联元素往往带有某种特殊的显示效果，可以代替部分 CSS 样式，非常实用，例如：
和标签可以修饰字体；
和两个标签分别用来定义下标文本和上标文本。
行内元素的主要特征如下所示：
行内元素和其他元素会在同一行上显示；
行内元素的宽、高以及外边距和内边距都不可以改变；
行内元素的宽度就是其中内容的宽度，且不可以改变；
内联元素中只能容纳文本或者其他内联元素。
对于行内元素的使用，需要注意如下几点：
设置宽度 width 无效；
设置高度 height 无效，但可以通过 line-height 来设置行高；
可以设置 margin 外边距，但只对左右外边距有效，上下无效；
设置 padding 内边距时，只有左右 padding 有效，上下则无效，需要注意的是元素范围是增大了，但是对元素周围的内容是没影响的；
可以通过 display 属性将元素在行内元素和块级元素之间进行切换。
扩展知识：重点说明两个标签
1) 2) 标签 HTML 中的标签是一个内联元素，可以对 HTML 文档中的内容进行修饰，此标签不会为文档内容提供任何视觉效果，但可以与 CSS 结合使用来美化网页。 下面通过一个示例来演示标签的使用： 结果展示： 标签本身并没有什么特殊效果，通常需要借助 CSS 来改变内容的样式，比如字体、颜色、大小、边框、背景等。 说明：那些不被推荐的 HTML 内联标签，比如 、、 等，建议使用 + CSS 样式来代替；但是那么具有明确语义的内联标签，比如 、、<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><div>标签演示</title>
</head>
<body>
<div style="padding:0px 20px;border:1px solid #ccc; background-color:#eee;">
<h4 id="大前端教程">大前端教程</h4>
<ul>
<li><a href="/course/list/11.html" target="_blank">HTML视频教程</a></li>
<li><a href="/course/list/12.html" target="_blank">CSS视频教程</a></li>
<li><a href="/course/list/17.html" target="_blank">javascript视频教程</a></li>
<li><a href="/course/list/18.html" target="_blank">vuejs视频教程</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.car{
width: 110px;
height: 35px;
border: 1px solid black ;
font-size: 14px;
line-height: 35px ;
text-indent: 32px;
background: url(./img/buy.png) no-repeat 8px 11px;
background-color:#ffffff;
}
span{
color: blue;
font-size: 20px;
font-family: "宋体";
}
</style>
</head>
<body>
<div>我的<span>购</span>物车</div>
</body>
</html>
、<em>、<i>、<s> 等，还是应该坚持使用，这些标签比 <span> 更加具有语义，更有助于搜索引擎理解页面内容。</span></s></i></em>
The above is the detailed content of What are the classifications of html5 elements?. For more information, please follow other related articles on the PHP Chinese website!
HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AMHTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.
HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AMHTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.
From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AMHTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.
Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AMWebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AMThe role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.
HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AMHTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract
HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AMHTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PMHTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Chinese version
Chinese version, very easy to use
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
WebStorm Mac version
Useful JavaScript development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
