html5标记分为哪三类

html5标记的3种类型：1、块级元素，其display值为“block”，特点为能够设置宽高、边距，会自动换行；2、行内元素，其display值为“inline”，不会自动换行，无法设置宽高；3、行内块状元素，不会自动换行、能够设置宽高。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

html5标记的分类

标记又被称为元素

• 根据标签特性可以分为：块标签、行内(内联)标签、行内块标签

• 根据标签闭合规则，可以分为：单标签(空标签，自闭合标签)、双标签

常用的块状元素：

.....

常用的行内元素：
<var></p> <p>常用的行内块状元素：<img> <input></p> <p style="text-align:left;"><span style="font-size: 16px;"><strong>块级元素特点：<strong><code class="marker">display:<strong><code class="marker">block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及上下左右的margin、padding值都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置（只支持左右方向的margin、padding）；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。（支持上下左右的margin、padding值）

3、margin:0 auto无效

4、水平排列，但所有元素默认会有1个空格的间隙，因为元素之间在html中书写有回车换行，浏览器解析会将其解析成一个空格。

标记类型的转换

标签的类型是可以转换的：

• 设置display:inline 转换为行内元素

• 设置display:linline-block 转换为行内块元素

• 设置display:block 转换为块级元素

（学习视频分享：html视频教程、web前端）

以上是html5标记分为哪三类的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：

html html5

来源：php.cn

上一篇：figure是html5的新增标签吗 下一篇：jquery怎么实现十进制转二进制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

• 深入搞懂Redis中的哨兵
  2023-04-26 17:59:18
• 【整理分享】7个热门的React状态管理工具
  2023-04-26 17:47:48
• 一文讨论Vue2中key和Vue3中key的区别
  2023-04-26 17:41:42
• 一文聊聊Node中的内存控制
  2023-04-26 17:37:05
• 实用Excel技巧分享：4种删除重复值的小妙招！
  2023-04-26 17:31:25
• 实用Word技巧分享：简繁转换功能竟然可以这样用！
  2023-04-26 17:27:32
• 如何解决跨域？常见解决方案浅析
  2023-04-25 19:57:58
• 一文理解JavaScript中的单例模式
  2023-04-25 19:53:11
• 深入了解Node中的Buffer
  2023-04-25 19:49:11
• 探讨如何在Vue3中编写单元测试
  2023-04-25 19:41:54

最新问题

如何让我的图像显示在页面的主显示屏上？ 我想做的是使用NASAAPI接收一些照片。然后在我的网页的缩略图和主显示屏上显示这些照片。我只是弄清楚为什么代码不从缩略图中获取图像并将其显示在页面上。我还使用HTML5及以上版本...

来自于 2024-04-06 15:33:12

0

1

433

PDF文件能够运行HTML5和Javascript吗？ 我有一个愚蠢的想法，想尝试制作一个在任何计算机上都不会被阻止的程序，因为它将嵌入在PDF中（我听说Javascript可以在PDF中运行）。它将在PDF文件中运行HTML5和Jav...

来自于 2024-04-05 12:57:00

0

1

456

HTML5中的enctype和formenctype有什么区别？ 我只是想知道HTMLLivingStandard（又名新的HTML5规范）中的属性enctype和formenctype之间有什么区别？我一直在阅读《面向开发人员的HTML标准》，...

来自于 2024-04-02 11:47:56

0

1

275

使页面适合移动设备吗？ 我有很多网页和一些网站。问题是，我是一个初学者。我使用基本的html5和css3，但我不知道如何使它们放大、缩小并且适合移动设备。例如，这是我的页面之一和我的网站之一，您可以在其中...

来自于 2024-04-01 20:42:38

0

1

259

相关专题

更多>

• html版权符号
• html在线编辑器
• html网页制作
• html空格
• html是什么
• html字体大小怎么设置
• html转txt
• html文本框代码怎么写

热门推荐

• 什么是URL地址
• web端是什么意思
• 编程语言有哪些
• 什么是IT行业
• error是什么意思

热门教程

更多>

相关教程

热门推荐

最新课程

• 
  野秀堂HTML5+CSS3视频教程

  9338
• 
  html5基础知识入门视频教程

  69580
• 
  html5教程：六小时玩转js与字符串视频教程-千锋教育

  66329
• 
  HTML5新特性基础视频教程

  29717
• 
  html5开发实战之百度外卖手机站前端制作

  65794

• 
  最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

  1424279次学习
• 
  JAVA 初级入门视频教程

  2547837次学习
• 
  小甲鱼零基础入门学习Python视频教程

  507808次学习
• 
  Web前端开发极速入门

  215936次学习
• 
  零基础精通 PS 视频教程

  892276次学习

• 
  【web前端】Node.js快速入门

  7637次学习
• 
  国外Web开发全栈课程全集

  6115次学习
• 
  Go语言实战之 GraphQL

  5062次学习
• 
  550W粉丝大佬手把手从零学JavaScript

  706次学习
• 
  python大神Mosh，零基础小白6小时完全入门

  25681次学习

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

• [表单按钮] jQuery企业留言表单联系代码
• [播放器特效] HTML5 MP3音乐盒播放特效
• [菜单导航] HTML5炫酷粒子动画导航菜单特效
• [表单按钮] jQuery可视化表单拖拽编辑代码
• [播放器特效] VUE.JS仿酷狗音乐播放器代码
• [html5特效] 经典html5推箱子小游戏
• [图片特效] jQuery滚动添加或减少图片特效
• [相册特效] CSS3个人相册封面悬停放大特效

• [前端模板] 家居装潢清洁维修服务公司网站模板
• [前端模板] 清新配色个人求职简历引导页模板
• [前端模板] 设计师创意求职简历网页模板
• [前端模板] 现代工程建筑公司网站模板
• [前端模板] 教育服务机构响应式HTML5模板
• [前端模板] 网上电子书店商城网站模板
• [前端模板] IT技术解决互联网公司网站模板
• [前端模板] 紫色风格外汇交易服务网站模板

• [PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)
• [PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)
• [banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)
• [PNG素材] 金色的毕业帽矢量素材(EPS+PNG)
• [PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)
• [PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)
• [banner图] 扁平风格的植树节banner矢量素材(AI+EPS)
• [PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)

• [前端模板] 家居装潢清洁维修服务公司网站模板
• [前端模板] 清新配色个人求职简历引导页模板
• [前端模板] 设计师创意求职简历网页模板
• [前端模板] 现代工程建筑公司网站模板
• [前端模板] 教育服务机构响应式HTML5模板
• [前端模板] 网上电子书店商城网站模板
• [前端模板] IT技术解决互联网公司网站模板
• [前端模板] 紫色风格外汇交易服务网站模板



公益在线PHP培训，帮助PHP学习者快速成长！

关于我们 免责声明 Sitemap

© php.cn All rights reserved