【HTML/CSS】HTML元素种类的划分

1 种类划分

1.1 块级元素

  1. 特征:独占父元素的一行,可以设置宽高,高度默认由内容决定。
  2. 常用标签:div、p、h1~h6、ul、ol、li、dl、dt、dd、table、form
  3. 不常用标签:pre用来定义预格式化文本,pre内的文本会保留空格和换行符。blockquote用来定义引用文本。hr是水平分割线。
  4. 语义化标签:article、aside、footer、header、main、nav、section,语义化标签增加了代码的可读性,有利于搜索引擎优化。

1.2 行内元素

特征:一行可以放置多个行内元素

1.2.1 替换元素
  1. 特征:可以设置宽高
  2. 标签:img、input、iframe、video、embed、canvas、audio
1.2.2 非替换元素
  1. 特征:不可以设置宽高,宽高由内容决定
  2. 标签:a、strong、span、code、label

2 种类比较

总体来说可以有两种划分方式:

  1. 替换元素和非替换元素:替换元素就是根据元素内相关属性的不同,浏览器会有不同的解析展现。所有的块级元素都是非替换元素。
  2. 行内元素和块级元素:行内元素可以一行显示多个,块级元素一行显示一个,块级元素可以设置宽、高、margin和padding,行内元素非替换元素不能设置,替换元素可以设置。

3 inline、inline-block和block的区别

  • block是块级元素的样式,可以为元素设置宽高啊margin和padding,单独占满一行
  • inline不可以控制宽高margin、padding,多个元素占满一行才会换行
  • inline-block可以控制宽高margin、padding,多个元素占满一行才会换行,兼具了block和inline的特点,ie不支持

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/480895.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于“大中台+小前台”思想的电商系统总体架构设计

一、架构总原则 1. 大中台小前台的架构思路 2. 业务中台采用领域驱动设计(DDD),在其上构建业务能力SAAS,持续不断进行迭代演进。 3. 平台化定位,进行了业务隔离设计,方便一套系统支撑不同玩法的业务类型和便…

问答系统总结

最近在研究问答系统,但是在查找资料的过程中一直处于懵逼状态,因为问答系统分类比较多,根据不同的依据可以分为不同种类,总是搞混,也没有找到资料详细全面的介绍,所以在一边学习查找资料的同时,自己也整理出一份总结,用于以后学习过程不至于思路混乱,如有错误请帮忙指出.19世纪…

论文写作葵花宝典

一只小狐狸带你解锁NLP/DL/ML秘籍作者:小鹿鹿鹿论文写作套路老板说:写论文是有套路的老板说:introduction写好了,论文就成功了一半老板说:你的motivation是什么,contribution又是啥?小夕说&…

李涓子 | 机器智能加速器:大数据环境下知识工程的机遇和挑战

本文转载自公众号:数据派THU。 导读:知识图谱已经成为推动人工智能发展的核心驱动力之一。本文选自清华大学计算机科学与技术系教授、清华-青岛数据科学研究院科技大数据研究中心主任李涓子老师于201…

【HTML/CSS】CSS盒模型及其理解

1 盒模型 概念:CSS盒模型本质是一个盒子,包括:外边距margin、边框border、内边距padding、内容content 分类:标准盒模型(W3C)和怪异盒模型(IE) 标准盒模型:width的值就是…

Netty异步非阻塞事件驱动及原理详解

本文基于 Netty 4.1 展开介绍相关理论模型、使用场景、基本组件、整体架构,知其然且知其所以然,希望给大家在实际开发实践、学习开源项目方面提供参考。 Netty 是一个异步事件驱动的网络应用程序框架,用于快速开发可维护的高性能协议服…

文本预处理跑得慢?抱抱脸团队又放福利,1GB文本语料分词只需20s!

一只小狐狸带你解锁NLP/DL/ML秘籍正文素材来源:量子位缘起BERTBERT带来的并不是只有一大波paper和嗷嗷上线,还带火了一个NLP团队——Huggingface(中文译作抱抱脸)。抱抱脸团队是一个创业团队。他们的Transformers是github上最火的…

基于深度学习的FAQ问答系统

| 导语 问答系统是信息检索的一种高级形式,能够更加准确地理解用户用自然语言提出的问题,并通过检索语料库、知识图谱或问答知识库返回简洁、准确的匹配答案。相较于搜索引擎,问答系统能更好地理解用户提问的真实意图, 进一步能更有效地满足用…

【HTML/CSS】定位方式及区别

1 文档流 文档流是浏览器默认的排版方式 文档流的排版方式是块级元素垂直排布,行内元素和行内块元素水平排布。 2 脱离文档流 脱离文档流是不按照文档流的排版方式进行排版,脱离后,元素不在布局中,不在流中占有位置&#xff0c…

基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba的企业级微服务敏捷开发系统架构

一、项目总体架构图 二、功能介绍 2.1、统一认证功能 支持oauth2的四种模式登录 支持用户名、密码加图形验证码登录 支持手机号加密码登录 支持openId登录 支持第三方系统单点登录 2.2、分布式系统基础支撑 服务注册发现、路由与负载均衡 服务降级与熔断 服务限流(url/方法级别…

征文通知 | 2018年全国知识图谱与语义计算大会

2018年全国知识图谱与语义计算大会China Conference on Knowledge Graph and Semantic Computing (CCKS 2018)2018年8月15日-18日,天津征稿截止: 2018年5月18日全国知识图谱与语义计算大会(CCKS: China Conference on Knowledge Graph and Semantic Comp…

如何让聊天机器人懂情感?这是一篇来自清华的论文

原载:Paperweekly作者:黄民烈,清华大学老师关注自然语言处理、人机对话情感分析等方向aihuangtsinghua.edu.cn当你悲伤的时候,机器人可以安慰你;当你高兴的时候,机器人为你高兴。悲你所悲,喜你所…

戴着口罩也要开心过年吖!

一只小狐狸带你解锁NLP/ML/DL秘籍素材来源于网络新的一年????就要到来了作为超(bu)高(shan)智(yan)商(ci)的程序员如何向亲朋好友证明我们是人群中最靓的仔呢小夕为你准备了专属程序员的新春祝福~~普天同庆for (;;) { print("鼠年快乐"); }(满屏的新年…

【HTML/CSS】margin塌陷和合并问题

1 margin塌陷问题 1.1 示例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>margin塌陷</title…

集群、分布式、微服务的概念及异同

一、什么是集群&#xff1f; 集群是指将多台服务器集中在一起&#xff0c;每台服务器都实现相同的业务&#xff0c;做相同的事&#xff1b;但是每台服务器并不是缺一不可&#xff0c;存在的主要作用是缓解并发能力和单点故障转移问题。 集群主要具有以下特征&#xff1a;&…

论文浅尝 | Complex Embeddings for Simple Link Prediction

The ́o Trouillon, Johannes Welb, Sebastian Riedel, ÉricGaussier, Guillaume Bouchard . Complex Embeddings for Simple Link Prediction. In Proceedings of the 33ndInternational Conference on Machine Learning, pages 2071– 2080 (ICML2016)论文链接&#xff1a;…

详解医学顶刊《柳叶刀》最新发表新型冠状病毒研究论文

我是夕小瑶&#xff0c;一只热爱科研的小狐狸作者&#xff1a;夕小瑶&#xff0c;小鹿鹿鹿&#xff0c;QvQ前言新型冠状病毒&#xff08;2019-nCoV&#xff09;的突发恰逢春节&#xff0c;千家万户都对疫情十分关注。令人心痛的是&#xff0c;病毒带来的不止有病痛&#xff0c;…

AI学习笔记--人机对话的四种形态

AI学习笔记--人机对话的四种形态 ><div class"show-content-free"><p>最近在筹备转行 AI PM 由于之前的产品线也有做过类似 AI 的智能客服产品&#xff0c;所以打算先从人机对话这个角度入手。</p><p>以下文章结合了一些 case&#xff0c…

Spring Cloud简介,为什么需要Spring Cloud?

一、为什么需要Spring Cloud&#xff1f; 从分布式/微服务的角度而言&#xff0c;就是把我们一个大的项目分解成多个小的模块&#xff0c;这些小的模块组合起来&#xff0c;完成功能&#xff1b;而拆分出多个模块以后&#xff0c;就会出现各种各样的问题&#xff0c;而Spring C…

【HTML/CSS】浮动模型和清除浮动的方法

1 浮动 浮动是让元素脱离文档流&#xff0c;浮动前后的非定位元素会无视浮动元素&#xff0c;可能沿着元素另一侧垂直流动。浮动元素会生成一个块级框&#xff0c;具有块级元素的特性&#xff0c;但是不占整行。浮动元素脱离了文档流&#xff0c;无法为文档流中的父元素撑起高…