总结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. 简单的接口测试类和测试生成报告工具HTMLTestRunner.py

    Demo.py #coding:utf-8 # import requests import json ''' data = { 'username':'jackson', 'password':'a ...

  2. HTTP请求（Request）和回应（Response）对象

    附录H HTTP请求(Request)和回应(Response)对象 57 http://djangobook.py3k.cn/ Django使用request和response对象在系统间传递状态. ...

  3. java----SVN

    下载SVN server 安装服务器,注意需要配置端口和本地仓库 https://www.visualsvn.com/server/download/ 下载SVN client https://tor ...

  4. centos7 安装Mysql8.0笔记

    下载MySQL yum源 wget https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm 安装yum源 yum lo ...

  5. [转] JavaScript中in操作符(for..in)、Object.keys()和Object.getOwnPropertyNames()的区别

    ECMAScript将对象的属性分为两种:数据属性和访问器属性.每一种属性内部都有一些特性,这里我们只关注对象属性的[[Enumerable]]特征,它表示是否通过 for-in 循环返回属性,也可以 ...

  6. 从分布式一致性到共识机制（二）Raft算法

    春秋五霸说开 春秋五霸,是指东周春秋时期相继称霸主的五个诸侯,“霸”,意为霸主,即是诸侯之领袖.典型的比如齐桓公,晋文公,春秋时期诸侯国的称霸,与今天要讨论的Raft算法很像. 一.更加直观的Raft ...

  7. POSIX-Data Structure

    struct sigevent The <signal.h> header shall define the sigeventstructure, which shall include ...

  8. Python 列表切片陷阱：引用、复制与深复制

    Python 列表的切片和赋值操作很基础,之前也遇到过一些坑,以为自己很懂了.但今天刷 Codewars 时发现了一个更大的坑,故在此记录. Python 列表赋值:复制"值"还是 ...

  9. react-native项目中禁止截屏与录屏

    在android/app/src/main/java/com/projname/MainActivity.java文件中的onCreate方法添加一下代码即可 import android.view. ...

  10. python之socketserver实现并发

    python之socketserver实现并发 服务端 import socketserver #socketserver模块是用来实现并发 # 我们自己的类里一定要继承socketserver.Ba ...