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

目录

 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.rhkb.cn/news/292934.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

「MySQL」索引事务

「MySQL」索引事务

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;数据库 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 索引&事务 &#x1f349;索引&#x1f34c;特点&#x1f34c;通过 SQL 操作索引&#x1f34c;底层数据结构 &#x1f349;事务&…
阅读更多...
芒果YOLOv8改进130：Neck篇，即插即用，CCFM重构跨尺度特征融合模块，构建CCFM模块，助力小目标检测涨点

芒果YOLOv8改进130：Neck篇，即插即用，CCFM重构跨尺度特征融合模块，构建CCFM模块，助力小目标检测涨点

芒果专栏 基于 CCFM 的改进结构，改进源码教程 | 详情如下🥇 💡本博客 改进源代码改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 即插即用 结构。博客 包括改进所需的 核心结构代码 文件 YOLOv8改进专栏完整目录链接：👉 芒果YOLOv8深度改进教程 | 🔥 订阅一个…
阅读更多...
微服务（基础篇-006-Docker安装-CentOS7）

微服务（基础篇-006-Docker安装-CentOS7）

目录 05-初识Docker-Docker的安装_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1LQ4y127n4?p46&spm_id_frompageDriver&vd_source60a35a11f813c6dff0b76089e5e138cc 0.安装Docker 1.CentOS安装Docker 1.1.卸载&#xff08;可选&#xff09; 1.2.安装dock…
阅读更多...
UE5启用SteamOSS流程

UE5启用SteamOSS流程

一、安装OnlineSubsystemSteam插件 1、在UE里安装OnlineSubsystemSteam 2、设置默认开始地图 3、设置DefaultEngine.ini文件&#xff1a; 打开项目根目录/Config/DefaultEngine.ini文件 打开官网的配置说明 复制并粘贴到该文件中 4、设置运行模式 5、测试 确保Steam平台已…
阅读更多...
electron打包桌面版.exe之vue项目踩坑(vue3+electron 解决打包后首页打开空白，打包后路由不跳转及请求不到后端数据等问题)

electron打包桌面版.exe之vue项目踩坑(vue3+electron 解决打包后首页打开空白，打包后路由不跳转及请求不到后端数据等问题)

vue项目https://www.qingplus.cn/components-web/index打包桌面版问题集合 一、静态资源加载问题 npm run electron_dev桌面版运行后页面空白&#xff0c;内容未加载。 填坑&#xff1a; 打包配置要用相对路径 vite.config.ts文件中的base要改成./&#xff0c;之前加了项目…
阅读更多...
postcss安装和使用（详细）

postcss安装和使用（详细）

1,安装postcss&#xff1a; 在此之前需要安装有node.js 第一步 命令&#xff1a;cnpm install postcss-cli -g 第二步 命令&#xff1a;cnpm install postcss –g 推荐内容 2,下载autoprefixer插件&#xff0c;并创建postcss.config.js文件并写入配置代码 autoprefixer插件…
阅读更多...
习题2-5 求平方根序列前N项和

习题2-5 求平方根序列前N项和

本题要求编写程序&#xff0c;计算平方根序列 的前N项之和。可包含头文件math.h&#xff0c;并调用sqrt函数求平方根。 输入格式: 输入在一行中给出一个正整数N。 输出格式: 在一行中按照“sum S”的格式输出部分和的值S&#xff0c;精确到小数点后两位。题目保证计算结果不…
阅读更多...
西南交大swjtu算法实验3.3|穷举法

西南交大swjtu算法实验3.3|穷举法

1.实验目的 通过具体例子学习排列这种典型的穷举算法的求解过程以及程序框架&#xff0c;分析其算法的求解过程&#xff0c;以及如何设计穷举法解决实际问题。通过本实验&#xff0c;理解穷举法的特点以及实际应用中的局限性。 2.实验任务 有n (n>1&#xff09;个任务需要…
阅读更多...
HarmonyOS 应用开发之FA模型与Stage模型应用组件

HarmonyOS 应用开发之FA模型与Stage模型应用组件

应用配置文件概述&#xff08;FA模型&#xff09; 每个应用项目必须在项目的代码目录下加入配置文件&#xff0c;这些配置文件会向编译工具、操作系统和应用市场提供描述应用的基本信息。 应用配置文件需申明以下内容&#xff1a; 应用的软件Bundle名称&#xff0c;应用的开发…
阅读更多...
使用Python实现对word的批量操作

使用Python实现对word的批量操作

Python在平时写写小工具真是方便快捷&#xff0c;Pyhon大法好。以下所有代码都是找了好多网上的大佬分享的代码按照自己的需求改的。 调用的库为Python-docx、win32com、PyPDF2、xlwings&#xff08;操作excel&#xff09;。 因为公司的任务要对上千个word文件进行批量操作&a…
阅读更多...
JAVAEE之网络编程

JAVAEE之网络编程

1.网络编程 网络编程&#xff0c;指网络上的主机&#xff0c;通过不同的进程&#xff0c;以编程的方式实现网络通信&#xff08;或称为网络数据传输&#xff09;。 当然&#xff0c;我们只要满足进程不同就行&#xff1b; 所以即便是同一个主机&#xff0c;只要是不同进程&am…
阅读更多...
【论文阅读】ELA: Efficient Local Attention for Deep Convolutional Neural Networks

【论文阅读】ELA: Efficient Local Attention for Deep Convolutional Neural Networks

&#xff08;ELA&#xff09;Efficient Local Attention for Deep Convolutional Neural Networks 论文链接&#xff1a;ELA: Efficient Local Attention for Deep Convolutional Neural Networks (arxiv.org) 作者&#xff1a;Wei Xu, Yi Wan 单位&#xff1a;兰州大学信息…
阅读更多...
C语言-文件操作

C语言-文件操作

&#x1f308;很高兴可以来阅读我的博客&#xff01;&#x1f31f;我热衷于分享&#x1f58a;学习经验&#xff0c;&#x1f3eb;多彩生活&#xff0c;精彩足球赛事⚽&#x1f517;我的CSDN&#xff1a; Kevin ’ s blog&#x1f4c2;专栏收录&#xff1a;C预言 1. 文件的作用 …
阅读更多...
基于spark的大数据分析预测地震受灾情况的系统设计

基于spark的大数据分析预测地震受灾情况的系统设计

基于spark的大数据分析预测地震受灾情况的系统设计 在本篇博客中，我们将介绍如何使用Apache Spark框架进行地震受灾情况的预测。我们将结合数据分析、特征工程、模型训练和评估等步骤，最终建立一个预测模型来预测地震造成的破坏程度，同时使用可视化大屏的方式展示数据的分布…
阅读更多...
docker-compose运行springinitializr用来创建springboot2

docker-compose运行springinitializr用来创建springboot2

前言 spring initializr官方的地址是: https://start.spring.io/ &#xff0c;这是一个用来创建springboot脚手架的一个工具&#xff0c;但是目前这个工具已经更新到springboot3&#xff0c;而我还没学springboot3&#xff0c;目前还想继续创建springboot2&#xff0c;我就想能…
阅读更多...
Unity类银河恶魔城学习记录11-10 p112 Items drop源代码

Unity类银河恶魔城学习记录11-10 p112 Items drop源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili ItemObject_Trigger.cs using System.Collections; using System.Collecti…
阅读更多...
Gin入门指南：从零开始快速掌握Go Web框架Gin

Gin入门指南：从零开始快速掌握Go Web框架Gin

官网：https://gin-gonic.com/ GitHub：https://github.com/gin-gonic 了解 Gin Gin 是一个使用 Go 语言开发的 Web 框架，它非常轻量级且具有高性能。Gin 提供了快速构建 Web 应用程序所需的基本功能和丰富的中间件支持。 以下是 Gin 框架的一些特点和功能： 快速而高效：…
阅读更多...
设计模式-结构型-享元模式Flyweight

设计模式-结构型-享元模式Flyweight

享元模式的特点&#xff1a; 享元模式可以共享相同的对象&#xff0c;避免创建过多的对象实例&#xff0c;从而节省内存资源 使用场景&#xff1a; 常用于需要创建大量相似的对象的情况 享元接口类 public interface Flyweight { void operate(String extrinsicState); } 享…
阅读更多...
信息工程大学第五届超越杯程序设计竞赛（同步赛）题解

信息工程大学第五届超越杯程序设计竞赛（同步赛）题解

比赛传送门 博客园传送门 c 模板框架 #pragma GCC optimize(3,"Ofast","inline") #include<bits/stdc.h> #define rep(i,a,b) for (int ia;i<b;i) #define per(i,a,b) for (int ia;i>b;--i) #define se second #define fi first #define e…
阅读更多...
【C++庖丁解牛】自平衡二叉搜索树--AVL树

【C++庖丁解牛】自平衡二叉搜索树--AVL树

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1 AVL树的概念2. AVL…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023