HTML块级元素和内联元素（头部和布局）

news2024/11/25 7:48:51

目录

 1.HTML块级和内联标签：

1.块级元素：

2.内联元素:

3.元素嵌套：

4.元素转换：

示例如下:

 2.内联框架：

前言：

示例如下:

 3.布局：

4.头部标签：

前言：

说明：

 1.HTML块级和内联标签：

1.块级元素：

块级元素的特点就是他们自己独占一行，代表就是<div>,还有<p>,<nav>,<aside>,<footer>等等。块级元素一般都具有特定的语义，可以使代码的可读性更强。HTML表格表单以及列表-CSDN博客

块级元素的特征如下:

  • 不管用不用换行，块级元素总是在新的一行上开始。
  • 块级元素的宽度，高度以及外边距都可以，控制。
  • 如果省略块级元素的宽度，那么他的宽度为浏览器窗口的默认宽度。
  • 块级元素中可以包含其他内容和块级元素。

2.内联元素:

内联元素也称为行内元素，行内元素最常见的是<span>,还有<b>,<i>,<u>,<em>....等等,内联元素往往带有特殊的显示效果，可以代替CSS样式，非常实用,行内元素的主要特征如下:

  • 行内元素和其他元素在同一行向上显示。
  • 行内元素的宽度，高度以及外边距和内边距都不可改变。
  • 行内元素的宽度就是其中内容的宽度，且不可改变。
  • 内联元素只能容纳文本或者其他内联元素。

对于行内元素的使用，需要注意几点：

  • 设置宽度width无效。
  • 设置高度无效，但可以通过line-height来设置行高。
  • 可以设置margin外边距，但是只有左右边距有效，上下无效。
  • 设置padding内边距，只有左右有效，上下无效，需要注意是元素范围是增大了，但是对元素周围的内容是没有影响的。
  • 可以通过display属性将元素在行内元素和块级元素之间切换。

3.元素嵌套：

大部分的HTML元素都可相互嵌套，并且深度也没有明确限制，块级和内联如下:

  • 块级元素可以嵌套块级元素。
  • 块级元素可以嵌套内联元素。
  • 内联元素可以嵌套内联元素。
  • 内联元素可以嵌套块级元素。

需要注意的是：一般不建议在内联元素中嵌套块级元素，这样不符合规范，还会导致内联元素被撑开，独自占据一行，但是又不得不这样做。 

4.元素转换：

在很多时候我们可以借助CSS改变，我们可以通过CSS中的display属性将块级元素改为内联元素，或者将内联元素修改成块级元素，或者两者优点都保存，将标签设置为行内快元素。虽然CSS可以改变标签显示的类型，但是不能改变标签的语义，例如:

  • <div>：标签用来布局的，而不是用来显示文本的。
  • <p>：标签是用来显示文本的，而不是用来布局的。
  • <strong>：标签是用来强调文本的，加粗是附带的；
  • <b>：标签只是用来加粗的。

示例如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: rgb(116, 209, 40);
        }

        p {
            background-color: red;
        }

        span {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <span>(第一个span)</span>
    <span>(第二个span)</span>
    <p>(第一个p)</p>
    <span>(第三个span)</span>
    <div>
        <span>(div里的span)</span>
        <p>div里的p</p>
    </div>
    <span>(最后一个span)</span>
</body>

</html>

 2.内联框架：

前言：

在HTML中可以使用<iframe>标签来设置一个内联框架，它的功能是将一个网页嵌入到另一个网页中，<iframe>标签会在网页中定一个矩形的区域，在这里面可以显示另一个网页的内容。

<iframe>使用说明:

<iframe>标签的语法如下:

<iframe src="url" width="m" height="n"><iframe>

其中src里面的url是其他网页的地址，width和height来决定这个网页在次页面显示的高度和宽度，一般情况下单位是像素，也可换成百分比。

HTML<iframe>标签对搜索引擎的抓取有负面影响，在现代的Web设计中不建议使用。

下列是<iframe>的属性:

属性值描述
alignleft,right,top,middle,bottomHTML5不支持，HTML4.01已经废弃，设置如何来对齐<iframe>.
frameborder1, 0HTML5不支持。设置是否显示<iframe>周围的边框。
height像素设置<iframe>的高度。
longdescURLHTML5不支持。设置一个页面，该页面中包含了有关<iframe>的描述。
marginheight像素HTML5不支持。设置<iframe>的顶部和底部的边距。
marginwidth像素HTML5不支持。设置<iframe>的左侧和右侧的边距。
nametext设置<iframe>的名称。
sandbox"",allow-forms,allow-same-origin,allow-scripts,allow-top-navigation对<iframe>的内容定义一系列额外的限制。
scrollingyes,no,autoHTML5不支持，设置是否在<iframe>中显示滚动条。
seamlessseamless让<irame>看起来像是父文档中的一部分(即没有边框和滚动条)。
srcURL设置要在<iframe>中显示的文档地址(URL)。
srcdocHTML代码设置<iframe>中要显示的内容，该属性会覆盖src属性。
width像素设置<iframe>的宽度。

示例如下:

下列代码中的style定义的事标签的样式也就是CSS，下面把<iframe>定义成550像素宽度，1000像素高度。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .size {
            width: 550px;
            height: 1000px;

        }
    </style>
</head>

<body>

    <a href="https://www.bilibili.com/">此链接到bilibili</a>
    <br>
    <iframe src="https://www.bilibili.com/" frameborder="0" class="size"></iframe>

</body>

</html>

可以看到运行结果按照我们设置的宽度和高度嵌入到页面中了。

 <iframe>除了可以嵌入其他页面还可以嵌入图片，视频音频等等其他资源，下列代码我是使用的自己当前文件夹的路径，当然若想更换则需要修改地址即可，也可用https这样的:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe {
            width: 550px;
            height: 500px;
        }
    </style>
</head>

<body>


    <iframe src="./img/F9704A2AF819298B60DCB7FE6A077918.jpg" frameborder="0"></iframe>
    <iframe src="./MPG4/277330630_da2-1-192.mp4" frameborder="0"></iframe>

</body>

</html>

运行结果如下图:

 3.布局：

布局是网页中必不可少的一部分，通过布局可以改变网页中内容的排列方式，让网页看起来更加美观，合理，在布局的过程中会经常用到CSS来修改HTML标签的样式，或者使用JavaScript给页面添加一些功能。

在上述的块级和内联中我们知道<div>标签是一个专门用来布局的标签，但是使用<div>标签进行布局，具有不明确的语义对于搜索引擎理解页面内容也是不好的。所以在HTML5中出现了专门用于布局的标签，他们用来定义网页的各个部分的内容，使得语义更加明确，HTML5布局标签表如下所示:

标签说明
<header>用于定义网页的头部，头部中一般包含一些介绍性的内容，如网站名称，logo或者作者的信息。
<nav>用于定义网页中的导航栏。
<section>

用于在网页中第一个单独的部分，可以包含文本，图像，表格。

<section>代表HTML文档中的"节"或"段"，"段"可以认为是一篇文章里主体的分段，"节"可以认为是一个页面里面的分组，主要作用就是对页面进行分块或者对文章内容进行分段。

<article>用于定义文章或者其他独立的信息，代表一个页面中自成一体的内容，如博客上的文章，bilibili里面博主发的视频等等。
<aside>用于定义网页内容以外的部分，如网页的侧边栏。
<footer>用于定义网页底部，如网页说明。
<details>用于定义一些详细信息，并且可以根据要求隐藏或者显示这些信息。
summary>用于为<details>标签定义标题。

示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这里存放了一个网页的标题</title>
    <style>
        body {
            font: 14px Arial, sans-serif;
            margin: 0px;
        }

        header {
            padding: 10px 20px;
            background: red;
        }

        header h1 {
            font-size: 24px;
        }

        .container {
            width: 100%;
            background: #f2f2f2;
        }

        nav,
        section {
            float: left;
            padding: 20px;
            min-height: 170px;
            box-sizing: border-box;
        }

        section {
            background-color: yellow;
            width: 80%;
            height: 100%;
        }

        nav {
            width: 20%;
            background: yellowgreen;
        }

        nav ul {
            list-style: none;
            line-height: 24px;
            padding: 0px;
        }

        nav ul li a {
            color: #333;
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        footer {
            background: red;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <h1>bilibili简介</h1>
        </header>
        <div class="wrapper clearfix">
            <nav>
                <ul>
                    <li><a href="https://www.bilibili.com/">首页</a></li>
                    <li><a href="https://www.bilibili.com/anime/?spm_id_from=333.1007.0.0">番剧</a></li>
                    <li><a href="https://manga.bilibili.com/?from=bill_top_mnav&spm_id_from=666.4.0.0">漫画</a></li>
                    <li><a href="https://www.bilibili.com/guochuang/?spm_id_from=333.1007.0.0">国创</a></li>
                    <li><a href="https://www.bilibili.com/v/knowledge/?spm_id_from=333.1007.0.0">知识</a></li>
                    <li><a href="https://www.bilibili.com/v/sports/">运动</a></li>
                </ul>
            </nav>
            <section>
                <h2>网站简介</h2>
                <p>哔哩哔哩了(bilibili.com)是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。</p>
            </section>
        </div>
        <footer>
            <p>www.bilibili.com</p>
        </footer>
    </div>

</body>

</html>

4.头部标签：

前言：

在HTML中<head>标签是所有头部标签的容器，这些头部标签用来定义有关HTML文档的元数据(描述数据的数据)以及所需资源的引用（如CSS文件，JavaScript脚本），对文档能在浏览器中正确显示起到了非常重要的作用，我们可以根据需求，在HTML头部定义大量的元数据，也可以定义很少或者不定义，虽然头部标签是HTML文档的一部分，但是里面的内容并不会显示在浏览器中。

说明：

在<head>标签中可以使用的标签有<title>,<base>,<link>,<style>,<meta>,<script>和<noscript>等，如下就来一一说明:

1.<title>标签：

<title>标签是用来定义HTML中的标题的，只有包含<title>标签的文档才是一个有效的HTML文档。在HTML文档中只允许有一个<tilte>标签，并且<title>标签 必须放在<head>标签里。需要注意的是，<title>标签只能包含纯文本内容。<title>标签里面的内容不应该太长。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这里存放了一个网页的标题</title>
</head>

<title>的作用如下：

  • 在浏览器标题栏或者任务栏中显示标题。
  • 当页面被添加到收藏夹(书签)时提供标题。
  • 在搜索结果中显示页面的标题。

2.<base> 标签：

<base>标签用于为页面中所有相对链接指定一个基本链接，当设置了基本连接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀，需要注意的是：<base>标签必须出现在任何引用外部资源标签之前，并且一个HTML文档只能存在一个<base>标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>&lt;base&gt;标签演示</title>
    <base href="https://www.bilibili.com/">
</head>
<body>
    <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="html/index.html">HTML搜索</a></li>
    </ul>
</body>
</html>

如上述的示例中首页的<a>标签中的链接会变成"https://www.bilibili.com/index.html",HTML搜索的<a>中链接会变成"https://www.bilibili.com/html/index.html".

3.<link>标签：

<link>标签大部分情况下都是用来引用外部CSS样式表，<link>主要包含两个属性:

  1. rel：属性用来指示引用文件的类型。
  2. href：属性用来设置外部文件的路径。
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../test1.css">
</head>

HTML文档<head>中可以有任意数量的<link>标签

4.<style>标签:

<style>标签可以在HTML文档中嵌入CSS样式，<style>标签定义的样式仅仅只对当前的HTML文档有效，代码如下:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe {
            width: 550px;
            height: 500px;
        }
    </style>
</head>

5.<meta>标签：

<meta>标签可以提供关于HTML文档的元数据，如页面有效期，页面作者，关键字......。<meta>标签中定义的数据不会在页面显示，但是会被浏览器解析。属性说明如下：

  • charset：属性用来指定文档的编码。
  • name：属性用来描述页面信息。
<meta charset="UTF-8">
<meta name="此页面并没有什么东西。">

6.<script>标签：

在HTML文档可以在<script>标签中书写JavaScript脚本，示例如下:

<button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        let bts = document.querySelectorAll('botton')
        for (let i = 0; i < bts.length; i++) {
            bts[i].addEventListener('click', function () {
                document.querySelector('.pink').className = ''
                this.className = 'pink'
            })
        } 

    </script>

7.<noscript>标签：

如果浏览器不支持JavaScript脚本或者JavaScript被浏览器禁用时，在可以使用<noscript>标签来提供给用户提示，里面除了不可以包好<script>外，可以包含任何HTML元素:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <noscript>
        <h2>你的浏览器不支持JavaScript，或者禁用了javaScript</h2>
    </noscript>
</head>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1559258.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

GT收发器PHY层设计（3）PHY层设计

GT收发器PHY层设计（3）PHY层设计

文章目录 前言一、设计框图二、PHY层基本传输协议三、PHY_TX模块3.1、模块接口3.2、组帧状态机描述3.3、数据大小端问题3.4、字节对齐 四、PHY_RX模块4.1、模块接口4.2、大小端转换4.3、起始位4.4、结束位4.5、axis数据流恢复 五、LFSR伪随机码六、链路空闲时期处理 前言 上一…
阅读更多...
windows平台虚拟机安装

windows平台虚拟机安装

windows平台虚拟机安装 1. 安装VMwareWorkstationPro 1.1 软件下载 官网下载 官网 百度网盘下载 版本 VMwareWorkstationPro16 链接&#xff1a;https://pan.baidu.com/s/1LidMxoM9e4a4CANixyRoyg?pwd1157 提取码&#xff1a;1157 1.2 软件安装 软件安装注意事项 软件…
阅读更多...
类的新功能

类的新功能

类的新功能 默认成员函数 在C11之前&#xff0c;一个类中有如下六个默认成员函数&#xff1a; 构造函数。拷贝构造函数赋值重载析构函数取地址重载函数const取地址函数 其中前四个默认成员函数最重要&#xff0c;后面两个默认成员函数一般不会用到&#xff0c;这里默认成员…
阅读更多...
Js之运算符与表达式

Js之运算符与表达式

运算符&#xff1a;也叫操作符&#xff0c;是一种符号。通过运算符可以对一个或多个值进行运算&#xff0c;并获取运算结果。 表达式&#xff1a;由数字、运算符、变量的组合&#xff08;组成的式子&#xff09;。 表达式最终都会有一个运算结果&#xff0c;我们将这个结果称…
阅读更多...
从输入url到页面展示的过程

从输入url到页面展示的过程

唠唠叨&#xff1a;我不想误人子弟&#xff0c;我这篇算是搬运工&#xff0c;加上自己的理解做点总结&#xff0c;所以还请大家科学上网去看这篇&#xff1a;https://aws.amazon.com/cn/blogs/mobile/what-happens-when-you-type-a-url-into-your-browser/ 是这六个步骤&#…
阅读更多...
springboot论坛管理系统

springboot论坛管理系统

论坛管理系统 摘要&#xff1a; 在社会快速发展的影响下&#xff0c;论坛管理系统继续发展&#xff0c;使论坛管理系统的管理和运营比过去十年更加信息化。依照这一现实为基础&#xff0c;设计一个快捷而又方便的网上论坛管理系统是一项十分重要并且有价值的事情。对于传统的论…
阅读更多...
如何提升公众号搜索量？分享内部运营的5步优化技术！

如何提升公众号搜索量？分享内部运营的5步优化技术！

最近一直有自媒体同行朋友在写关于公众号的内容&#xff0c;很多都说公众号现在没得玩了。其实&#xff0c;在运营自媒体上面&#xff0c;思维不通&#xff0c;技术不到位&#xff0c;哪个平台都不适合你玩。 想要在自媒体上面运营变现&#xff0c;一定不要先点击广告变现&…
阅读更多...
【Linux】详解文件系统以及周边知识

【Linux】详解文件系统以及周边知识

一、磁盘的基本知识 磁盘中可以被划分成一个一个的环&#xff0c;每个环都是一个磁道。每个磁道又可以被均分成一个一个的扇区&#xff0c;扇区是磁盘IO的基本单位&#xff08;想要修改扇区中的一个比特位就必须把该扇区的全部比特位都加载到内存中&#xff09;。磁盘中的盘面&…
阅读更多...
「MySQL」索引事务

「MySQL」索引事务

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;数据库 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 索引&事务 &#x1f349;索引&#x1f34c;特点&#x1f34c;通过 SQL 操作索引&#x1f34c;底层数据结构 &#x1f349;事务&…
阅读更多...
张颂文|永远保持好奇心的人，是永远进步的人。

张颂文|永远保持好奇心的人，是永远进步的人。

哈喽，你好啊，我是雷工！ 今天看到了张颂文的一段演讲，提到了他因为好奇心而被改变的人生。 如果想把单一和枯燥的工作做的更好，张颂文的办法是像一个孩子一样保持好奇心，不停地提出一些有趣的问题。 在5年的导游经历中，对每次游览的地点都像初次游览般保持好奇心，正因为…
阅读更多...
C++从入门到精通——引用()

C++从入门到精通——引用()

C的引用 前言一、C引用概念二、引用特性交换指针引用 三、常引用保证值不变权限的方法权限的放大权限的缩小权限的平移类型转换临时变量 四、引用的使用场景1. 做参数2. 做返回值 五、传值、传引用效率比较值和引用的作为返回值类型的性能比较 六、引用和指针的区别引用和指针的…
阅读更多...
工单系统的作用与优势!为什么企业需要它？

工单系统的作用与优势!为什么企业需要它？

什么是工单系统&#xff1f;工单系统作为企业服务类工具&#xff0c;能在管理上和业务上为企业带来什么帮助吗? 什么是工单系统 ZohoDesk工单系统是一种用于管理和处理任务或请求的软件工具。它提供了一个集中的平台&#xff0c;使组织能够跟踪、分配和解决各种问题、请求和…
阅读更多...
AWS创建IAM用户，以及通过IAM用户登录

AWS创建IAM用户，以及通过IAM用户登录

基本概念&#xff1a; IAM Identity Center&#xff08;AWS SSO&#xff09; 跨账户访问&#xff1a;IAM Identity Center允许用户使用他们自己的单一登录凭证来访问多个AWS账户和应用程序。这意味着你可以拥有一个账户和密码&#xff0c;通过IAM Identity Center的用户门户&…
阅读更多...
前端虚拟滚动列表 vue虚拟列表

前端虚拟滚动列表 vue虚拟列表

前端虚拟滚动列表 在大型的企业级项目中经常要渲染大量的数据&#xff0c;这种长列表是一个很普遍的场景&#xff0c;当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题&#xff1b;大数据量列表性能优化&#xff0c;减少真实dom的渲染 看图&#xff1a;绿色…
阅读更多...
攻防世界——catfly

攻防世界——catfly

这道题我觉得很难&#xff0c;我当初刷题看见这道题&#xff0c;是唯一一道直接跳过的&#xff0c;现在掌握了一点知识才回来重新看 这道题在linux运行下是这样&#xff0c;我首先猜测是和下面这个time有关&#xff0c;判断达到一定次数就会给我flag 但是我找了好久都没找到那…
阅读更多...
NFT-前端开发（一）

NFT-前端开发（一）

使用 在我们想要保存项目的目录下打开终端运行npx create-react-app test2命令初始化&#xff0c;test2是我们的项目名字&#xff0c;可以自己去更改。 初始化完成后&#xff0c;我们目录下就会多出一个test2文件夹 &#xff0c;然后我们在vscode中打开该文件夹 然后我们打开j…
阅读更多...
C++教学——从入门到精通 5.单精度实数float

C++教学——从入门到精通 5.单精度实数float

众所周知&#xff0c;三角形的面积公式是(底*高)/2 那就来做个三角形面积计算器吧 到吗如下 #include"bits/stdc.h" using namespace std; int main(){int a,b;cin>>a>>b;cout<<(a*b)/2; } 这不对呀&#xff0c;明明是7.5而他却是7&#xff0c;…
阅读更多...
(一)kafka实战——kafka源码编译启动

(一)kafka实战——kafka源码编译启动

前言 本节内容是关于kafka消息中间键的源码编译&#xff0c;并通过idea工具实现kafka服务器的启动&#xff0c;使用的kafka源码版本是3.6.1&#xff0c;由于kafka源码是通过gradle编译的&#xff0c;以及服务器是通过scala语言实现&#xff0c;我们要预先安装好gradle编译工具…
阅读更多...
暴力破解笔记

暴力破解笔记

1 暴力破解简介 暴力破解&#xff1a; 蛮力攻击&#xff0c;又称为穷举攻击&#xff0c;或暴力破解&#xff0c;将密码进行逐个尝试验证&#xff0c;直到尝试出真正的密码为止。 暴力破解是指采用反复试错的方法并希望最终猜对&#xff0c;以尝试破解密码或用户名或找到隐藏的…
阅读更多...
进无止境，砥砺前行，互联网营销专家杨建允助力多个品牌和机构提升营运效率！

进无止境，砥砺前行，互联网营销专家杨建允助力多个品牌和机构提升营运效率！

进无止境&#xff0c;砥砺前行&#xff01;在过去的一年&#xff08;2023年&#xff09;&#xff0c;互联网营销专家杨建允持续为数十家品牌和机构提供了品牌和营销支持&#xff01;统计如下&#xff1a;&#xff08;排名不分先后&#xff09; 滴滴&#xff1b; 企查查&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023