总结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. 嵌入式Linux学习路线

    最近比较忙,对于嵌入式的相关学习一直没有很好的开展.今天也看了不少的嵌入式Linux的学习路线,也和几个工作过的朋友聊了聊,想把之后的学习过程记录下来. 自己以后想从事驱动开发这方面的工作,因为大多数 ...

  2. 微信小程序的桌面图标问题

    提问: 笔者在发布小程序后,发现无法在安卓手机创建桌面图标,而其它的小程序却可以. 回答: 在小程序后台页面(从公众平台进入)完整填写小程序的信息,之后便可创建桌面图标. 这可能是微信的某种筛查机制在 ...

  3. 虎牙直播弹幕转换字幕格式 基于Node.js 的 huya-danmu

    1 首先安装nodejs运行环境, 从 http://nodejs.cn/download/ 下载对应的版本 2 安装 huya-danmu 模块, https://github.com/BacooT ...

  4. vue中数据添加完成以后，数据回显

    1.格式 <FormItem label="奖品领取类型:" prop="getType" > <RadioGroup v-model=&qu ...

  5. adi i2s 提供的axi_lite接口说明

    总共定义了4个寄存器,位宽32位,也就是 偏移地址*4以下是PS写数据when 0 => I2S_RESET_REG <= wr_data; when 1 => I2S_CONTRO ...

  6. python输入一行字符,判断不同字符数量

    输入一行字符,判断不同字符的数量, 分别用for循环和while循环完成 for循环 运用了字符串方法, isupper()判断是否为大写字母 islower()判断是否为小写字母 isdigit() ...

  7. 2018-2019-2 网络对抗技术 20165206 Exp2 后门原理与实践

    - 2018-2019-2 网络对抗技术 20165206 Exp2 后门原理与实践 - 实验任务 (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主 ...

  8. Java Trie字典树，前缀树

    Trie查询每个条目的时间复杂度,和字典中一共有多少条无关. 时间复杂度为O(W) w为查询单词的长度 import java.util.TreeMap; public class Trie { pr ...

  9. Apt下载安装包时Hash校验和不符

    近期我的电脑在使用apt-get或aptitude下载Linux安装包时总是出现如下图所示的Hash校验和不符的问题.以至于下载过程被频繁中断,不得不反复运行apt-get或者在aptitude中按g ...

  10. RN和IOS原生端交互

    1.RCTBridgeModule #import <Foundation/Foundation.h> #import "RCTBridgeModule.h" #imp ...