总结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. Hutool工具里，POST方法，body中传参的几种调用方法

    接口说明: POSTMAN测试: JAVA代码: package com.provy.guard.api; import java.util.HashMap; import java.util.Map ...

  2. j2ee之监听页面请求

    本博客的起因是我想监听浏览器端每个页面都访问了哪些资源~~: 我是个菜鸡,所以我要记在我的小本本上,我怕忘了又~~~: 代码我是写在springboot2.1中的,有兴趣的同学可以玩一下~ 1:代码如 ...

  3. String，下表和切片，分割

    字符串介绍 1.字符串在内存中的存储 2.字符串的加法 3.字符串的格式化 1. 下标索引 所谓“下标”,就是编号,就好比超市中的存储柜的编号,通过这个编号就能找到相应的存储空间 字符串中" ...

  4. Mysql exists 与 in

    今天公司同事反馈一个SQL语句删除数据删除了一个小时,还没有删除完,强制中断. 第一眼看到 exists 的时候,脑子里要有这么个概念: Oracle exists 的效率比in 高.而Mysql 则 ...

  5. 中国居民18位身份证号验证方法，Java算法实现

    public static boolean validate18Idcard(String idcard){ if(idcard == null ) { return false; } if(idca ...

  6. 百度 Javascript开发 API

    一.在手机wap上滑动地图,标准点在最中心位置 map.getCenter() 1.当移动地图时,点同时移动,获取屏幕中心点 <!DOCTYPE html> <html> &l ...

  7. datatable拆分多个

    /// <summary> /// 分解数据表 /// </summary> /// <param name="originalTab">需要分 ...

  8. react-native自定义TextInput光标颜色

    <TextInput defaultValue="Highlight Color is red" selectionColor={'red'} style={styles.s ...

  9. UOJ#103. 【APIO2014】Palindromes PAM模板题

    原文链接www.cnblogs.com/zhouzhendong/p/UOJ103.html 前言 我终于会PAM啦 感谢CLY大佬手把手教我PAM 题解 建个 PAM. 统计一下每一个节点的 Rig ...

  10. [sublime] 利用sublime搭建C/C++编译器

    gcc/g++配置 先去下载TDM-GCC安装包,这里附下载地址(可能会有弹出界面,不用管他). 现在c盘中建立文件夹 g++,然后以管理员运行,点击Create傻瓜式安装, 这里要改一下安装路径,保 ...