零基础HTML入门教程(6)——块级元素

简介: 上一篇我们讲了标签,它表示一个段落,在该标签后面会自动换行。所以标签是一个块级元素,它独自形成一块,跟后面的内容不会出现在同一行。

本章目录

1.任务目标

我们这一小节学习一下html的块级元素,并理解什么是块级元素,并熟练运用。

2.块级元素

常用的块级元素

标题 h1 h2 h3 h4 h5 h6

列表 ol ul li  dl dt dd

排版标签 p div hr center pre

表格 table

表单 form

3.什么是块级元素

上一3我们讲了

标签,它表示一个段落,在该标签后面会自动换行。

所以

标签是一个块级元素,它独自形成一块,跟后面的内容不会出现在同一行。

4.代码演示

我们拿div块级元素演示他和p差不多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 <div>我是第一个div</div>
 <div>我是第二个div</div>
 <div>我是第三个div</div>
 <div>我是第四个div</div>
</body>
</html>

效果如下

5.小结

本小结我们讲了块级元素,他独占一行跟后面的内容不会出现在同一行。我们要理解块级元素。熟练掌握并使用。

相关文章
|
3月前
|
前端开发 UED
学会了HTML中的块级元素和内联元素 SO 酷了
学会了HTML中的块级元素和内联元素 SO 酷了
学会了HTML中的块级元素和内联元素 SO 酷了
|
5月前
|
前端开发 JavaScript 开发者
HTML基础-块级元素与内联元素
【6月更文挑战第6天】HTML中的元素分为块级和内联元素,两者在网页布局中扮演重要角色。块级元素占用整行,可设置宽高,常用于组织结构;内联元素只占内容宽度,常用于文本样式和链接。理解它们的区别并正确选择是创建清晰布局的关键。常见问题包括错误选择元素、忽视默认样式和不熟悉`display`属性。解决方法包括根据语义选择元素、清除默认样式以及灵活使用`display`属性转换元素行为。熟练掌握这些能提升网页的语义化、可访问性和布局效率。
65 0
|
6月前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
120 1
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
17607 11
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位
162 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
192 0
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(下)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(下)
191 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(下)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(下)
192 0
|
Web App开发 前端开发 开发者
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
262 0
|
前端开发 数据安全/隐私保护
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
203 0