第一章：传统html元素和布局容器

最新推荐文章于 2024-07-19 13:18:23 发布
最新推荐文章于 2024-07-19 13:18:23 发布
阅读量239 收藏
点赞数 1
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45656377/article/details/109353699
版权

传统html如：img、p、a、table（tr、td）
表单form,form下有input、select(option)，可以完成特定的数据提交如：如文件上传等
布局容器div、span将页面区分成几个大的容器，用于页面排版
html主要包含html标签和行内数据属性，使用的时候查阅即可

Mr JackZhang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
01-19
在前端页面布局中，经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求。一般这时候都会想当然的使用 height:100% 这样的 CSS 来写。这样写的话，当容器内内容很多的时候是没有问题的，可以达到预期的效果，但是如果容器内内容比较少，不足以撑起足够的高度的话，这个CSS 样式实际上是没起作用的。那要怎么解决这个问题呢？ 让容器高度充满这个屏幕 在容器内容很少的情况下，要想让这个容器充满整个屏幕可以这样： .container{ min-height:100vh } 你没看错，只需要这一个属性就可以办到，vh 是一个新的单位，表示的是屏幕的高度，还有一个对应的宽度属性 vw，
html中利用flex容器书写的布局样式
weixin_30480651的博客
09-09 192
首先页面基本样式见下图： 如有兴趣可以打开https://migloo.gitee.io/front或者https://www.igloo.xin/front进行查看 转载于:https://www.cnblogs.com/janken/p/11491229.html...
html -- bootstrap的布局容器
sanjiaowuhuan的博客
09-23 172
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css...
HTML盒子模型的布局
m0_72975897的博客
08-05 5042
**垂直和水平方布局**外边距重叠
行间容器html,HTMLCSS学习笔记（二十三）GRID布局
weixin_28871743的博客
06-09 155
原标题：HTMLCSS学习笔记(二十三)GRID布局GRID布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单...
第51章 布局相关的样式-多栏布局
08-12
在阅读《第51章 布局相关的样式-多栏布局》这篇博客时，作者可能会详细讲解如何利用这些技术创建多栏布局，包括实例代码和效果展示。此外，可能还会探讨浏览器兼容性问题，因为虽然现代浏览器对Flexbox和Grid支持...
2022年优秀-第三章-Web-服务器控件.pptx
11-14
容器控件如Panel和Table，可以用于布局和分组，而其他控件如DropDownList、CheckBox等，则提供了更多的用户交互选项。 总的来说，掌握Web服务器控件的使用对于构建动态、交互性强的ASP.NET Web应用程序至关重要。...
CSS网站布局实录 （第二版）PDF版
12-10
一章章的翻过去,命中的都是要害,不禁心中暗喜。看这样一本“糟粕与精华并存、弱智与天才的化身”的书,就好象是在做贼一般。感觉不是在看一本真金白银买来的书,而更象是偷看一个江湖上鲜见的手抄本……刺激! ——网友
css网站布局实录学习笔记第三部分网页布局与定位
12-13
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位，而div首当其冲。对于其他标签而言，往往有它自身存在的目的，而div元素存在的目的就是为了浮动与定位。 3.1.1 div是什么 div是XHTML...
HTML和CSS HTML&CSS
04-13
`div`元素是HTML中的一个通用容器，通常配合CSS使用来创建复杂的布局。CSS的盒模型（包括content、padding、border和margin）是理解`div`布局的关键。浮动（`float`）和定位（`position`）属性用于实现元素的对齐和...
HTML5与传统HTML的区别
热门推荐
小瑾沐晚风的博客
09-27 1万+
参考 1.什么是 HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 为 HTML5 建立的一些规则： 新特性应该基于 HTML、CSS、DOM 以及 JavaScrip...
html5与传统的区别,html5新增标签与传统html的区别
weixin_39589644的博客
06-19 57
一、文档声明以及编码声明的改变html5之前的版本声明：文档类型-文档编码-html5的版本声明：文档类型-文档编码-二、html5新增标签1.新的语义和结构标签　　定义了文档头部区域　　 定义了文档尾部区域　　 定义了页面侧边栏内容　　 定义了一篇文章　　　 定义导航链接的部分　　定义了一个区域　　 规定独立的流内容(图像、图表、照片、代码等等) 定义 元素的标题　　 ...
HTML页面布局
fakerking的博客
08-21 3289
前端页面布局
html加css布局结构,html、css基础复习之布局结构篇
weixin_35521169的博客
06-20 221
所谓“设计一根线，重构一身汗”，掌握好css基础对于提高UI开发效率，提升代码质量有很大的作用。本文由我大熊主播给大家分享一下css中布局方面的基础。不需要游艇火箭，假如看完后有收获的话就点个赞点个收藏便是极好的。本文的目录如下，采取的是由大到小的层面去分享：1.css定位布局2.css弹性布局3.css盒子模型4.css BFC另预报一下，css动画与即抄即可使用的css常用样式会在下篇中分享，...
HTML常用布局
最新发布
一个对代码有点兴趣的小人物
07-19 584
html常用布局
HTML布局总结
2203_76017613的博客
04-11 2851
概括了前端布局的大部分解释及标注
浅谈HTML几种布局方式
weixin_45131680的博客
12-05 1348
布局是前端比较基础但是也很重要的部分，过去传统的布局方案一般是通过基于然后配合display、position或float等属性进行布局。这种布局方式使用和理解起来是相对简单，但是我认为布局更复杂的布局场景和维护起来会比较困难。。没有适用所有场景的布局，只有合适的布局，在实际应用中多种布局方式灵活使用才能达到更好的效果。
HTML 内容容器
weixin_30509393的博客
11-23 262
<h>标签，标题 <p>标签，段落。会换行，有段落间距。 <div>块标签，默认占一行，可以放任何内容。 <span>块标签，大小取决于内容，放文字性的东西。 <ol><li>有序列表，有type属性。 <ul><li>无序列表，有type属性。 转载于:https...
HTML基本布局结构
joker的博客
11-11 1159
html 元素之间的关系————血缘关系 父子关系 父元素 子元素 直接包含在元素内容 子孙关系 子元素 祖籍元素 隔多代的元素 兄弟关系 具有相同父元素 浏览器解析html元素顺序 从辈分高的，到辈分低的元素 相同辈分之间，从上往下解析 注意：在html元素中；所有【相对】的单位，都是 子元素相对父元素 <!-- ...
Grid布局详解：容器属性、网格结构和应用实践
指定一个容器采用网格布局。 2. grid-template-columns属性，grid-template-rows属性： grid-template-columns属性设置列宽，grid-template-rows属性设置行高。 例如，将容器分成3*3的网格结构，代码如下： ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值