总结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块元素，行内元素，类，头部元素的更多相关文章

  1. 元素显示模式：块元素 & 行内元素 & 行内块元素

    元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...

  2. css position 和 块级/行内元素解释

    一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...

  3. 块级&行内（内联）元素

    行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的 ...

  4. 块级元素行内元素以及display属性

    1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...

  5. HTML 块级元素 行内元素

    块级元素 - block level element 总是在新行上开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度: 它可以容纳内联元素和其他块元素 如: ...

  6. css总结17:HTML块级元素&行内元素之分: <div> 和<span>

    1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...

  7. 块级&行内元素总结

    一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的 ...

  8. 块元素&行内元素

    大多数HTML 元素被定义为块级元素或内联元素.块级元素在浏览器显示时,通常会以新行来开始(和结束) block元素特点 1 总是在新行上开始: 2 高度,行高以及外边距和内边距都可控制: 3 宽度缺 ...

  9. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  10. html 块状元素 行内元素 内联元素

    块状(Block)类型的元素的width默认为100%,而行内(Inline)类型的元素则是根据自身的内容及子元素来决定宽度. 块元素(block element) address - 地址 bloc ...

随机推荐

  1. OPPO F9 Pro在哪里打开usb调试模式的完美方法

    经常我们使用pc通过数据线连接到安卓手机的时候,如果手机没有开启USB调试模式,pc则没能够成功读到我们的手机,此情况我们需要找处理方法将手机的USB调试模式开启,今天我们介绍OPPO F9 Pro如 ...

  2. 安装SSL证书 and 根域名跳转www域名

    1.安装自签证书 自签证书也就是不被公网认可的证书,可在局域网内进行签名认证,其12306也是自签证书,通过证书+nginx代理web服务器 可以实现https连接  一.使用OpenSSL创建证书 ...

  3. 《ServerSuperIO Designer IDE使用教程》- 6.增加与阿里云物联网（IOT）对接服务，实现数据交互。发布：v4.2.4 版本

    v4.2.4 更新内容:1.增加了对接阿里物联网平台的服务.下载地址:官方下载   6. 增加与阿里云物联网(IOT)对接服务,实现数据交互  6.1    概述 为了满足业务系统数据上云的要求,Se ...

  4. supermap中预览osgb格式的倾斜摄影文件

    参考: https://zhidao.baidu.com/question/136723493545478005.html 使用的是SuperMap IDesktop 9D,操作方法如下: 打开超图, ...

  5. vue 手机端样式统一配置

  6. SQL查询时，根据日期范围查询周

    周数据会有weekbegin和weekend两个字段,用来描述周的开始日期和结束日期. 现在项目中的日历控件不支持周查询,只支持日期查询,所以目前面临的问题是,根据时间范围,查询周. 最终sql如下: ...

  7. 一个类，有新增元素（add）和获取元素数量（size）方法。 启动两个线程。线程1向容器中新增数据。线程2监听容器元素数量，当容器元素数量为5时，线程2输出信息并终止

    方式一: /** * 两个线程要是可见的所以要加上votalile */public class Test_01 { public static void main(String[] args) { ...

  8. 20165319 Exp1 PC平台逆向破解

    本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShell,会返 ...

  9. setOnTouchListener在小米手机中不走ACTION_UP而是走ACTION_CANCEL

    单点触控: MotionEvent.ACTION_DOWN:手指 初次接触到屏幕 时触发. MotionEvent.ACTION_MOVE:手指 在屏幕上滑动 时触发,会多次触发. MotionEve ...

  10. Linux-day2-上课笔记

    UGO权限 1) 文件对于拥有者的权限   User 2) 文件对于所属组里面的用户的权限 Group 3) 文件对于其他人的权限  Others 对于文件的权限 1)对于文件可读  r 2)对于文件 ...