HTML的标签元素分类的区别
HTML ,即Hyper Text Markup Language 超文本标记语言;
文本:纯字符,如window中的txt文本
超文本:在纯文本中嵌入样式,图片,音频,视频,链接等内容
HTML的基本结构:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
HTML元素类型:
(1) 区块元素:
- 每个块级元素都从新的一行开始,并且其后的元素也要另起一行。(一个块级元素独占一行)。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设置了宽度
(2) 内联元素:
- 和其他元素都在同一行;
- 元素的高、宽、行高以及边距均不可设置
- 元素的高、宽均取决于它包含的文字或图片的大小
(3) 内联块:
- 和其他元素在同一行;
- 元素的高度、宽度、行高及边距可以设置
注意:元素的类型是可以改变的,通过display属性设置。
例如:
以下代码和图片的差别揭露不同类型标签元素之间的区别
<!DOCTYPE html> <html> <head> <meta charset=U"utf-8"> <title></title> <style> strong,em,a,img{ display:block; } h1,h2,p,hr,ul,ol,dl{ display: inline; } </style> </head> <body> <strong>天下无双</strong><strong>天下无双</strong> <em>海天一线</em><em>海天一线</em> <h1>永无止尽</h1><h1>永无止尽</h1> <h2>天涯海角</h2><h2>天涯海角</h2> <p>越狱</p><p>越狱</p> <hr><hr> <a>蓝天白云</a><a>蓝天白云</a> <img src="C:\Users\ghost\Desktop\html\378463.PNG"> <img src="C:\Users\ghost\Desktop\html\627857834.PNG"> <br><br> <ul><li>透破天幕</li></ul><ul><li>透破天幕</li></ul> <ol><li>接下黑暗的幕布</li></ol><ol><li>接下黑暗的幕布</li></ol> <dl> <dt>电脑</dt> <dd>联想</dd> <dd>惠普</dd> <dt>手机</dt> <dd>小米</dd> <dd>苹果</dd> </dl> <details> <summary></summary> </details> <details> <summary>123</summary> 天涯海角共几何,只为青山缘始终。 </details> </body> </html> |
未控制样式,各标签的默认显示方式,如图1
图1
是它们的显示样式相反,如图2
图2
HTML的标签元素分类的区别的更多相关文章
- HTML标签元素分类(HTML基础知识)
HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...
- html标签元素分类
元素分类 html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...&l ...
- CSS html标签元素分类
在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>… ...
- CSS中html的标签元素分类
在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...
- CSS元素分类及区别
元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”).但是不同的元素显示的方式会有所不同,例如<div>和<span>就不同,而&l ...
- [转]HTML标签元素的分类
在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素和内联块状元素. 常用的块状元素有: <div>.<p ...
- 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?
4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...
- 从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型
我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...
- 了解HTML 元素分类
HTML中包含大量的标签, 这些标签在我们使用中发现会有小小的差别, 有的标签用了之后不会有太大的布局变化, 只是语义化, 而有的标签却会重起一行, 相当于自己回车了一次, 这就是不同标签元素的分类不 ...
随机推荐
- MYSQL 数据库结构优化
数据库结构优化 优化数据大小 使表占用尽量少的磁盘空间.减少磁盘I/O次数及读取数据量是提升性能的基础原则.表越小,数据读写处理时则需要更少的内存,同时,小表的索引占用也相对小,索引处理也更加快速. ...
- 【CodeForces-1041C】Coffee Break(二分解决关于set,pair,upper_bound用法)
//题意:一个的工作时间是m分钟. // 在特定的时间和咖啡 n a1,a2....an,, ai代表的是每个咖啡要在一天中对应的时间点喝掉 // 每一次喝咖啡的时间为1分钟 // 必须在一天中的ai ...
- 使用maven&&make-distribution.sh编译打包spark源码
1>基础环境准备: jdk1.8.0_101 maven 3.3.9scala2.11.8 安装好上述软件,配置好环境变量,并检查是否生效. 2>配置maven:intellij idea ...
- Plasma Cash 合约解读
作者介绍 虫洞社区·签约作者 steven bai Plasma Cash 合约解读 Plasma Cash 合约解读 1. 合约代码 2. 合约文件简单介绍 3. Plasma Cash 的基础数据 ...
- 数据库之python操作mysql
目录 一.pymysql 二.SQLAchemy 2.操作使用 (1)连接数据库 (2)执行原生SQL语句 (3)ORM操作-数据表操作 (4)ORM操作-数据行操作 (5)更多例子 一.pymysq ...
- iOS静态库.a总结(2017.1.24增加脚本打包方法)
修改于:2017.1.24 1.什么是库? 库是程序代码的集合,是共享程序代码的一种方式 2.根据源代码的公开情况,库可以分为2种类型 a.开源库 公开源代码,能看到具体实现 ,比如SDWebImag ...
- 以符合人类阅读的方式打印php数组【转载】
在程序开发过程中:打印数据进行查看调试是非常频繁的:如果没有一种易于阅读的样式那是相当痛苦的: 先定义一个数组: 1 2 3 4 5 6 7 8 9 $array=array( 't0'=&g ...
- ORM PHP 学习记录
ORM:object relation mapping,即对象关系映射,简单的说就是对象模型和关系模型的一种映射.为什么要有这么一个映射?很简单,因为现在的开发语言基本都是oop的,但是传统的数据库却 ...
- Daily Scrum3 11.5
昨天的任务已经完成,但是大家分析后发现进度稍有些慢.今天各自都在调整进度,不再拖延别人的工作. 今日任务: 杨伊:做问卷调查,准备用户体验篇内容. 徐钧鸿:把Xueba中Utility 向闸瓦移植 张 ...
- [buaa-SE-2017]个人作业-回顾
个人作业-回顾 提问题的博客:[buaa-SE-2017]个人作业-Week1 Part1: 问题的解答和分析 1.1 问题:根据书中"除了前20的学校之外,计科和软工没有区别"所 ...