HTML块元素，行内元素，类，头部元素
总结HTML块元素，行内元素，类，头部元素
块元素:
在HTML中，块级元素的高度为其内容的高度，宽度会扩展到与父容器同宽。默认情况下，块级元素会独占一行，并且元素前后行留空。
示例：
<h1>我是块级元素，我独占一行</h1>
<p>我也是块级元素，我会另起一行竖直排列</p>
行内元素:
行内元素
在HTML中，行内元素的高度为其内容的高度，宽度会收缩包裹其内容，并尽可能的包紧。默认情况下，行内元素只占据它对应标签的边框所包含的空间，而不会另起一行。
示例：
<label for="username">我是行内元素</label>
<input type="text" name="username" id="username">
块元素和行内元素区别：
默认情况下，另起一行左右撑满垂直排列
默认情况下，和其他元素水平排列在一行
高度，行高以及外边距和内边距都可设置
padding/margin只有左右有效，上下无效
默认情况下宽度是它本身容器宽度的100%
宽高就是它内容区域的宽高，不可改变
可以容纳行内元素和其他块级元素
只能容纳文本或者其他行内元素
常见块元素和行内元素：
块级元素
行内元素
<h1>~<h6>，不同级别标题
<a>，HTML锚元素
<div>，HTML文档分区元素
<span>，组合行内元素
<p>，文本的一个段落
<img>，HTML图片标签
<pre>，预格式化文本
<input>,HTML文本标签
<form>，HTML表单元素
<textarea>，HTML文本域
<table>，HTML表格元素
<button>，HTML按钮
<ul>/<ol>/<dl>，HTML列表
<label>，表单元素标注标签
<li>，HTML列表项元素
<select>，下拉选项列表
<header>/<section>/<footer>
<em>，强调文本标签
<nav>/<article>/<aside>
<i>，斜体文本标签
类:
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式。
分类块级元素
HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。
设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：
例子:
<head>
<meta charset="UTF-8">
<title>块和类</title>
<style type="text/css">
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head> <body>
<div class="cities">
<h2>London</h2>
<p>伦敦是英国的首都 也是世界金融中心</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>巴黎是法国的手抖 也是世界浪漫之都</p>
</div>
<div class="cities">
<p>东京是日本的首都，也是世界有色文化中心</p>
</div>
</body>
分类行内元素
HTML <span> 元素是行内元素，能够用作文本的容器。
设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。
例子：
<head>
<meta charset="UTF-8">
<title>块和类</title>
<style type="text/css">
span.spanC {
color: blue;
}
</style>
</head> <body>
<h1>我的<span class="spanC">重要的</span>标题</h1>
</body>
头部元素:
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。
| 标签 | 描述 |
|---|---|
| <head> | 定义关于文档的信息。 |
| <title> | 定义文档标题。 |
| <base> | 定义页面上所有链接的默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系。 |
| <meta> | 定义关于 HTML 文档的元数据。 |
| <script> | 定义客户端脚本。 |
| <style> | 定义文档的样式信息。 |
HTML块元素，行内元素，类，头部元素的更多相关文章
- 元素显示模式：块元素 & 行内元素 & 行内块元素
元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...
- css position 和 块级/行内元素解释
一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...
- 块级&行内（内联）元素
行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的 ...
- 块级元素行内元素以及display属性
1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...
- HTML 块级元素 行内元素
块级元素 - block level element 总是在新行上开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度: 它可以容纳内联元素和其他块元素 如: ...
- css总结17:HTML块级元素&行内元素之分: <div> 和<span>
1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...
- 块级&行内元素总结
一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的 ...
- 块元素&行内元素
大多数HTML 元素被定义为块级元素或内联元素.块级元素在浏览器显示时,通常会以新行来开始(和结束) block元素特点 1 总是在新行上开始: 2 高度,行高以及外边距和内边距都可控制: 3 宽度缺 ...
- CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例
vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...
- html 块状元素 行内元素 内联元素
块状(Block)类型的元素的width默认为100%,而行内(Inline)类型的元素则是根据自身的内容及子元素来决定宽度. 块元素(block element) address - 地址 bloc ...
随机推荐
- gitlab 随笔
输入: $ git init $ git add . $ git commit -m 'init commit' 绿色部分为gitlab网页的项目创建后下面的ssh路径,也可以通过查看gitlab网页 ...
- 在虚拟机里连接PLC S7-200
1-使用PPI线连接 这次选择了在虚拟机里面来调试PLC,s7-200的型号是214-2AD23-0XB8 ,连接线是在淘宝上卖的(连接),在虚拟机里面试的时候没有反应,如下 在设备管理器里面观察,在 ...
- STM32F0使用LL库实现DMA方式AD采集
在本次项目中,限于空间要求我们选用了STM32F030F4作为控制芯片.这款MCU不但封装紧凑,而且自带的Flash空间也非常有限,所以我们选择了LL库实现.在本文中我们将介绍基于LL库的ADC的DM ...
- mui slider禁止滑动
网上方法: mui('.mui-slider').slider().setStopped(true); 实际使用 mui('.mui-slider').slider().stopped = true; ...
- JS一直是单线程，异步（定时器，ajax请求等）是由浏览器来实现的！（转）
原文地址:https://www.cnblogs.com/woodyblog/p/6061671.html 1.自己画的一张示意图 2.DOM一变化,界面就立刻重新渲染,效率必然很低,所以浏览器的机制 ...
- 四丶前端基础之jquery
知识预览 一 jQuery是什么? 二 什么是jQuery对象? 三 寻找元素(选择器和筛选器) 四 操作元素(属性,css,文档处理) 扩展方法 (插件机制) 回到顶部 一 jQuery是什么? ［ ...
- java.lang.IllegalArgumentException: Invalid source 'classpath:spring-mvc.xml'
今天在跑项目时遇到java.lang.IllegalArgumentException: Invalid source 'classpath:spring-mvc.xml'报错,自己也是摸索了很久,一 ...
- html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...
- 2018-2019-2 20165239《网络对抗技术》Exp4 恶意代码分析
Exp4 恶意代码分析 实验内容 一.基础问题 1.如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. •使用w ...
- myBase Desktop 6.5.1 无限期试用
清空安装目录下的"nyfedit.ini"文件的"App.UserLic.FirstUseOn="配置项的值