编程笔记 html5cssjs 012 HTML分块

编程笔记 html5&css&js 012 HTML分块

  • 一、HTML 块级元素
  • 二、HTML 内联元素
  • 三、HTML` <div>` 元素
  • 四、HTML `<span>` 元素
  • 五、HTML`<article>`元素
  • 六、`<article>元素和<div>元素`的区别与联系
  • 小结

像报纸排版一样,很多时候需要把平面划分为多个块,网页也是一样,这里就看一下,怎么在页面中划分区块。

HTML <div> 和<span>
HTML 可以通过 <div> 和 <span>将元素组合起来。

一、HTML 块级元素

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
实例: <h1>, <p>, <ul>, <table>

二、HTML 内联元素

内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
HTML中的块级元素指的是在渲染时以块的形式显示的元素。
以下是一些常见的HTML块级元素:

  1. <div>:用于创建一个分隔的块级区域,常用于布局和样式的分离。
  2. <p>:用于段落文本。
  3. <h1> - <h6>:用于标题,其中<h1>表示最高级别的标题,<h6>表示最低级别的标题。
  4. <ul>:用于创建无序列表。
  5. <ol>:用于创建有序列表。
  6. <li>:用于列表项,必须位于<ul><ol>内部。
  7. <table>:用于创建表格。
  8. <thead>:用于定义表格的表头部分。
  9. <tbody>:用于定义表格的主体部分。
  10. <tr>:用于定义表格的一行。
  11. <th>:用于定义表格的表头单元格。
  12. <td>:用于定义表格的数据单元格。
  13. <form>:用于创建表单。
  14. <fieldset>:用于将相关表单元素分组。
  15. <legend>:用于为元素定义标题。
  16. <blockquote>:用于引用长段落的文本。
  17. <address>:用于定义联系信息。
  18. <pre>:保留空白字符和换行符的格式化文本。
  19. <figure>:用于包含独立的内容,如图像或表格。
  20. <figcaption>:用于为<figure>元素定义标题。

这只是一些常见的块级元素,还有其他块级元素,如<article>、<section>、<nav>、<header>等等。

三、HTML <div> 元素

HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

四、HTML <span> 元素

HTML <span> 元素是内联元素,可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

五、HTML<article>元素

用于定义独立的、完整的、与页面内容无关的文章内容。是HTML5新增元素。
<article>元素应该包含一片完整的、独立于页面的文章内容,例如一篇新闻报道、一篇博客文章等。这些内容可以作为独立的实体进行分发,例如通过RSS订阅或社交媒体分享。
<article>元素可以包含标题、摘要、作者、发布日期等信息。它可以包含其他HTML元素,如段落(<p>)、标题(<h1>-<h6>)、图片(<img>)、列表(<ul><ol>)等,以展示完整的文章内容。

<article><h2>Article Title</h2><p>Article content goes here...</p><p>Another paragraph...</p>
</article>

六、<article>元素和<div>元素的区别与联系

注意:<article>元素应该是独立的,即使嵌套在其他元素中,也应该具有自己的完整语义。
元素是HTML文档中的构建块,用于定义网页的结构和内容。在HTML中,有许多不同类型的元素,每个元素都有特定的功能和用途。
其中两个常见的元素是"<article>"和"<div>"
"<article>"元素用于定义一个独立的内容块,通常表示一篇文章或一个独立的主题。它可以包含标题、内容、作者等信息。一个网页可以包含多个"<article>"元素,每个元素独立显示。
"<div>"元素是一个通用的容器元素,用于将多个元素组合在一起或为它们提供样式。它没有特定的含义或语义,仅用于布局和组织目的。"<div>"元素可以用于分组相关的内容,设置样式,或创建网页布局的不同区域。
"<article>"元素和"<div>"元素之间的关系是,"<article>"元素通常可以包含多个"<div>"元素作为其子元素。这样可以将文章分为不同的部分或块,并使用"<div>"元素对每个部分进行样式设置或布局。
另外,"<div>"元素也可以存在于除了"<article>"元素以外的其他元素中,用于创建更复杂的布局或组织结构。
总的来说,"<article>"元素表示一个独立的内容块,而"<div>"元素是一个通用的容器元素,用于组合和布局其他元素。它们之间可以互相嵌套,以创建更具结构和样式的网页。

小结

熟练掌握区块划分的各种方法,才能满足制作网页的实际需要。

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

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

相关文章

LTPI协议的理解——2、LTPI实现的底层架构

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 LTPI协议的理解——2、LTPI实现的底层架构 前言一、体系结构三、实现细节四、物理接口信号传输方法总结 前言 前面讲了LTPI的定义和大概结构&#xff0c;接下来继续理解LTPI…

【百度前端三面面试题】

在某乎看到的《百度前端三面面试题全部公开&#xff0c;三面的最后一个问题令我窒息》 其中下面三个问题没有给出答案&#xff0c;我虽然是前端出身&#xff0c;但也面试过一些人&#xff0c;大概分析一下这些问题。 面试中问这几个问题的目的是什么 &#xff0c;怎么回答 上…

理解开源协议GPL、MIT、BSD、Apache License

开源协议是一种法律文件&#xff0c;规定了使用、修改和分享开源软件的规则和条件。以下是一些常见的开源协议及其相同点和区别&#xff1a;GPL&#xff08;GNU General Public License&#xff09;&#xff1a;GPL 是一种比较严格的开源协议&#xff0c;要求使用者如果对开源软…

MySQL 数值函数,字符串函数与多表查询

MySQL像其他语言一样,也提供了很多库函数,分为单行函数和分组函数(聚合函数),我们这里先简易介绍一些函数,熟悉就行,知道怎么使用即可. 数值函数 三角函数 指数与对数函数 进制间的转换函数 字符串函数 注:LPAD函数是右对齐,RPAD函数是左对齐 多表查询 注:如果为表起了别名,就…

elasticsearch系列四:集群常规运维

概述 在使用es中如果遇到了集群不可写入或者部分索引状态unassigned&#xff0c;明明写入了很多数据但是查不到等等系列问题该怎么办呢&#xff1f;咱们今天一起看下常用运维命令。 案例 起初我们es性能还跟得上&#xff0c;随着业务发展壮大&#xff0c;发现查询性能越来越不…

边缘计算网关:重新定义物联网数据处理

随着物联网&#xff08;IoT&#xff09;设备的爆炸式增长&#xff0c;数据处理和分析的需求也在迅速增加。传统的数据处理方式&#xff0c;将所有数据传输到中心服务器进行处理&#xff0c;不仅增加了网络负担&#xff0c;还可能导致数据延迟和安全问题。因此&#xff0c;边缘计…

Java虚拟机中的垃圾回收

2 垃圾回收 2.1 判断一个对象是否可回收 2.1.1 引用计数法 如果一个对象被另一个对象引用&#xff0c;那么它的引用计数加一&#xff0c;如果那个对象不再引用它了&#xff0c;那么引用计数减一。当引用计数为 0 时&#xff0c;该对象就应该被垃圾回收了。 但是下面这种互相…

kafka实现延迟消息

背景 我们知道消息中间件mq是支持延迟消息的发送功能的&#xff0c;但是kafka不支持这种直接的用法&#xff0c;所以我们需要独立实现这个功能&#xff0c;以下是在kafka中实现消息延时投递功能的一种方案 kafka实现延时消息 主要的思路是增加一个检测服务&#xff0c;这个检…

0开始配置Cartographer建图和导航定位

0开始配置Cartographer 日期&#xff1a;12-19 硬件&#xff1a;激光雷达IMU 小车的tf变换&#xff1a; 建图配置 lua文件配置&#xff1a;my_robot.lua include "map_builder.lua" include "trajectory_builder.lua"options {map_builder MAP_BUILDE…

华为无线ac双链路冷备和热备配置案例

所谓的冷备和热备&#xff0c;冷备就是不用vrrp和hsb协议同步ap和用户信息&#xff0c;主的断了等七十五秒后&#xff0c;备的capwap和ap连接上去。 双链路冷备不用vrrp和hsb 双链路热备份只用hsb同步ap和用户信息&#xff0c;不用vrrp&#xff0c;两个ac可以不用在同一个二层…

【Linux】缓冲区理解

需要云服务器等云产品来学习Linux的同学可以移步/–>腾讯云<–/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;优惠多多。&#xff08;联系我有折扣哦&#xff09; 文章目录 1. 一个奇怪的现象2. 为什么要有缓冲区3. 缓冲区的刷新策略4. 缓冲区在哪里5. 实现一…

Java将PDF转换为文本

在Java中&#xff0c;你可以使用现有的库来将PDF文件转换为文本。下面是一个简单的示例&#xff0c;使用Apache PDFBox库来实现PDF到文本的转换。首先&#xff0c;确保在你的项目中添加了Apache PDFBox库的依赖。你可以在 Maven 项目中添加以下依赖&#xff1a; <!--Pdf--&g…

面试题:说一下Spring 中的 @Cacheable 缓存注解?

文章目录 1 什么是缓存2 本地缓存和集中式缓存3 本地缓存的优点4 Spring对于缓存的支持4.1 spring支持的CacheManager4.2 GuavaCache4.3 引入依赖4.4 创建配置类4.5 缓存注解4.6 Cacheable的用法 5 Cacheable失效的原因 1 什么是缓存 第一个问题&#xff0c;首先要搞明白什么是…

详解“量子极限下运行的光学神经网络”——相干伊辛机

量子计算和量子启发计算可能成为解答复杂优化问题的新前沿&#xff0c;而经典计算机在历史上是无法解决这些问题的。 当今最快的计算机可能需要数千年才能完成高度复杂的计算&#xff0c;包括涉及许多变量的组合优化问题&#xff1b;研究人员正在努力将解决这些问题所需的时间缩…

VScode的入门手册(IDEA迁移到VScode)

从IDEA迁移到VScode的过程中&#xff0c;会有很多不适应的地方&#xff0c;下面算是一篇VScode的入门手册&#xff0c;也可以说是从IDEA迁移到VScode的手册。 命令面板&#xff08;Command Palette&#xff09; 允许你快速访问和执行命令。 在 Visual Studio Code 中&#x…

最新Jasmine博客模板:简洁美观的自适应Typecho主题

Jasmine是一个专为博客类网站设计的Typecho主题。它以简洁为基础&#xff0c;力求展现出精致而美观的风格。主题采用了响应式设计&#xff0c;即使在移动设备上也能提供良好的使用体验。此外&#xff0c;主题还进行了针对性的优化&#xff0c;包括SEO、夜间模式和代码高亮等方面…

ES的使用(Elasticsearch)

ES的使用&#xff08;Elasticsearch&#xff09; es是什么&#xff1f; es是非关系型数据库&#xff0c;是分布式文档数据库&#xff0c;本质上是一个JSON 文本 为什么要用es? 搜索速度快&#xff0c;近乎是实时的存储、检索数据 怎么使用es? 1.下载es的包&#xff08;环境要…

三台CentOS7.6虚拟机搭建Hadoop完全分布式集群(二)

这个是笔者大学时期的大数据课程使用三台CentOS7.6虚拟机搭建完全分布式集群的案例&#xff0c;已成功搭建完全分布式集群&#xff0c;并测试跑实例。 6.安装JDK 以下操作现在master上操作&#xff0c;然后远程复制到slave01、slave02即可。 6.1 将压缩包发送到master节点机…

通过AWS Endpoints从内网访问S3

AWS S3作为非结构化数据的存储&#xff0c;经常会有内网中的app调用的需求。S3默认是走公网访问的&#xff0c;如果内网app通过公网地址访问S3并获取数据会消耗公网带宽费用。如下图所示&#xff1a; AWS 提供了一种叫做endpoints的资源&#xff0c;这种资源可以后挂S3服务&a…

【Maven】linux部署maven

简介 最近学习hyperledger-fabric超级账本&#xff08;区块链&#xff09;&#xff0c;需要使用到java和maven&#xff0c;所以重新学习了一下如何部署maven&#xff0c;这里附上参考文档。在附上官方网站的下载地址&#xff1a;https://maven.apache.org/download.cgi。首先去…