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中包含大量的标签, 这些标签在我们使用中发现会有小小的差别, 有的标签用了之后不会有太大的布局变化, 只是语义化, 而有的标签却会重起一行, 相当于自己回车了一次, 这就是不同标签元素的分类不 ...
随机推荐
- Harbor 学习分享系列4 - Harbor常用功能实验
前言 本文为Harbor技术分享系列的第4部分也是初级部分的完结篇,下个阶段作者将会进阶分享,更多详细的内容将会将会在文中介绍. 云盘链接 链接:https://pan.baidu.com/s/1PT ...
- 为 GlusterFS 设计新的xlator (编译及调用过程分析)
GlusterFS 是一个开源的网络分布式文件系统,前一阵子看了一点GlusterFS(Gluster)的代码,修改了部分代码,具体是增加了一个定制的xlator,简单记录一下. Gluster与xl ...
- zip命令详解
基础命令学习目录首页 好文链接:https://www.cnblogs.com/yinzhengjie/p/6247833.html 原文链接:https://www.cnblogs.com/ferr ...
- 20135316王剑桥 linux第六周课实验笔记
6.存储器层次结构 6.1存储技术 1.如果你的程序需要的数据是存储在CPU寄存器中的,那么在执行期间,在零个周期内就能访问到它们.如果存储在高速缓冲中,需要1-10个周期.如果存储在主存中,需要50 ...
- 奔跑吧DKY——团队Scrum冲刺阶段博客汇总
第一周:团队展示 团队选题 需求规格说明书 第二周:完善需求规格说明书.制定团队编码规范.通过团队项目数据库设计 奔跑吧DKY--团队Scrum冲刺阶段-Day 1-领航 奔跑吧DKY--团队Scru ...
- VS2010+WinXP+MFC程序 无法定位程序输入点于动态链接库
1.问题描述 原开发环境:Win7 64位旗舰版,VS2010,ThinkPad T460 出现问题:自己开发的MFC程序在WinXP环境下无法正常运行,弹框“无法定位程序输入点InitializeC ...
- iOS开发学习-如何优化tableview的使用
1.复用单元格 2.单元格中的视图尽量都使用不透明的,单元格中尽量少使用动画 3.图片加载使用异步加载 4.滑动时不加载图片,停止滑动时开始加载 5.单元格中的内容可以在自定义cell类中的drawR ...
- 【CS231N】7、卷积神经网络
一.疑问 1. assignments2 在代码文件FullyConnectedNets.ipynd 中,有代码如下: # Test the affine_forward function num_i ...
- SDWebImage缓存图片的机制
SDWebImage是一个很厉害的图片缓存的框架.既ASIHttp+AsyncImage之后,我一直使用AFNetworking集成的UIImageView+AFNetworking.h,但后者对于图 ...
- ssh结合使用
springxml配置 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=& ...