HTML列表、块和布局

最新推荐文章于 2023-04-07 17:39:32 发布
最新推荐文章于 2023-04-07 17:39:32 发布
阅读量527 收藏 1
点赞数 2
文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42585774/article/details/82983284
版权

  • 列表

HTML列表

<ol> 有序列表

<ul> 无序列表

<li> 列表项

<dl> 列表

<dt> 列表项

<dd> 描述

  1. 无序列表
    1. 使用标签：<ul>、<li>
    2. 属性：disc、circle、square
  2. 有序列表
    1. 使用标签：<ol>、<li>
    2. 属性:A、a、l、i、start
  3. 嵌套列表
    1. 使用标签：<ul>、<ol>、<li>
  4. 自定义列表
    1. 使用标签：<dl>、<dt>、<dd>

 

  • 块（注释:<!--   -- >）

  1. HTML块元素
    1. 块元素在显示时，通常会以新行开始

              如：<h1>、<p>、<ul>

  1. HTML内联元素
  2. 内联元素通常不会以新行开始

               如：<b>、<a>、<img>

     3.HTML<div>元素

      <div>元素也被称为块元素，其主要是组合HTML元素的容器

     4.HTML<span>元素

           <span>元素是内联元素，可作为文本的容器

  • 布局

  1. <div>布局
<!DOCTYPE  html>
<html>
    <.head lang =”en”>
    <meta charset=”UTF-8”>
    <title>div布局<title>
    <style type=”text/css”>
    body{	<!--去除白边-->
            margin:0px
        }
    #container{
            width：100%;
            height：950px;
         }
    #heading{
            width:100%;
            height:10%;
            }
    #content_menu{
            width:30%;
            height:80%;
            float:left;
            }
    #content_body{
            width:70%;
            height:80%;
            float:left;
            }
    #footing{
            width:100%;
            height:10%;
            clear:both;
            }
    </style>
    </head>
    <body>
        <div id=”container”>
        <div id=”heading”>头部</div>
        <div id=”content”>内容菜单</div>
        <div id=”content_menu”>内容主体</div>
        <div id=”footing”>底部</div>
        </div>
    </body>
</html>

2.<table>布局

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8”>
    <title>table布局</title>
</head>
<body marginheight=”0px” marginweight=”0px”>
    <table width=”100%” height=”950px” style=”background-color:darkgray”>
    <tr>
        <td colspan=”3” width=”100% height=10%” style=”background-color:aqu”>这是头部                
        </td>
    </tr>
    <tr>
        <td width=”20%” height=”80% style=”background-color:blue””>
            <ul>
                <li>ios</li>
                <li>android</li>
                <li>html5</li>
            </ul>
        </td>
        <td width=”60%” height=”80% style=”background-color:blueviolet””>内容主体	</td>
        <td width=”20%” height=”80% style=”background-color:deeppink””>右菜单</td>
    </tr>
    <tr>
        <td width=”100%” height=”10% colspan=”3” style=”background-color:deeppink””>底部菜单</td>
    </table>
</body>
</html>

 

离不开丶离开
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML列表的使用与布局
吃不胖.
09-04 196
同时，还介绍了列表的嵌套以及如何使用CSS来设置嵌套列表的样式。但是，如果我们想要使用自定义的样式来标记每个项目，可以使用CSS来进行样式设置。在HTML中，我们可以将一个类型的列表嵌套到另一个类型的列表中。同样地，我们也可以使用CSS来设置描述列表的样式。同时，将无序列表的样式设置为自定义的样式，这样可以区分不同类型的列表。上面的代码将创建一个包含三个项目的有序列表，浏览器将根据默认的样式将每个项目用数字进行标记。上面的代码将创建一个包含两个项目的描述列表，浏览器将默认将名称和值用冒号进行分隔。
CSS布局模式、盒模型、块与行、inline-block
m0_55498382的博客
10-13 394
基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。
1-3、网页布局1——块元素/行内元素/行内块元素
ss 的博客
04-29 1388
三、行内元素和块元素
列表型布局套路总结
振之的博客
06-03 2057
手机屏幕尺寸有限，几乎每个 app 的内容区，都会用列表呈现。不信可以打开你手机里的任意一个 app 看看，99%的 app 的内容区都能被抽象成一个大列表。只是根据内容的丰富度，列表的复杂度有所不同。内容区的结构骨架，基本上就是由列表布局奠定的。从这点看，虽然还有其他各种类型的布局，但是它们都没有列表型的布局来得重要。 总的来说，必须知道的有 如何应对多类型复杂结构、几个滚动相关的实用的特别交...
[JS]列表布局的几种方式
Gamin
12-16 2215
目录 1、监控浏览器宽度即时更新布局 2、浮动布局 document.body.style.margin = "0px"; document.body.style.padding = "0px"; document.body.style.overflow = "auto"; var navView = document.createElement("div"); navView.style.backgroundColor = "blue"; navView.style.width = "10...
一步步教你实现完整的复杂列表布局
郭霖
08-10 700
今日科技快讯 8月8日傍晚，20余名乐视移动供应商，经过乐视总部所在地乐视大厦大堂的门禁，首次全体进入乐视大厦的办公区域，要求面见乐视移动代理CEO。谈及此次进入乐视大厦的目的，一名讨债的乐视移动供应商对澎湃新闻说，“还钱啊，（外界）不是传乐视要
html列表，区块以及布局知识点
weixin_53060283的博客
03-20 375
Html列表 关于HTML的列表应用分为无序列表和有序列表 无序： <h4>无序列表:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> 有序： <ol> <li>Coffee</li> <li>Tea</li&g...
HTML5系列教程-HTML5列表、块和布局
11-28
通过学习和理解HTML5中的列表、块级元素以及布局技术，开发者可以创建出更加高效、易用且美观的网页。无论是用于传统的桌面端，还是适应不断增长的移动端市场，HTML5的这些特性都能为网页设计带来显著的提升。在这个...
html和html5网站布局
10-21
传统HTML中的表格`<table>`、`<tr>`、`<td>`也曾用于布局，但这种方式已不推荐，因为它不利于内容的语义理解和搜索引擎优化。 HTML5则进一步增强了布局能力，引入了一些新的标签，旨在更好地描述页面内容的结构，...
jquery 创建div块 拖动 布局代码
04-25
通过这样的方式，我们可以创建一个动态且交互性强的网页布局，用户可以自由调整`div`块的位置，提升网页的可用性和趣味性。对于开发者来说，熟练掌握这种技术不仅可以丰富网页设计手段，还能提高用户满意度，是现代...
Isotope过滤和排序神奇布局
08-11
- **布局模式（Layout Modes）**：Isotope 提供多种布局模式，如“masonry”（砌石布局）、“fitRows”（适应行布局）、“cellsByRow”（按行布局）和“vertical”（垂直布局）等，每种布局都有不同的视觉效果。...
HTML表格布局
01-26
HTML表格布局是网页设计中一个基础且重要的部分，它用于组织和展示数据，如产品目录、数据统计或信息对比。在HTML中，我们使用`<table>`元素来创建表格，结合`<tr>`（行）、`<th>`（表头）和`<td>`（单元格）等标签...
HTML【区块+布局】
随便写写
07-06 1218
​ HTML 和 可以通过 和 将 HTML 元素组合起来。 HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素。 编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 例子：, , , HTML 内联元素 内联元素在显示时通常不会以新行开始。 例子：, , ...
html块布局,HTML5列表、块、布局
weixin_42502378的博客
06-15 296
一、列表 无序列表 (每项前有.) 有序列表 (每项前有编号1,，2，3) 列表项苹果橘子香蕉苹果橘子香蕉1,无序列表标签： 属性：disc 实体圆circle 空心圆square 方块实体2,有序列表标签： 属性： A a I i start3,嵌套列表宠物猫狗兔子人类亚洲人美洲人欧洲人植物4,自定义列表标签： hello worldC++hello worldJa...
HTML 区块、布局与框架
jiaomubai的博客
09-26 2964
html 区块、html 布局、html 框架
块布局div
Fairy的博客
02-27 497
1. 不必每个&lt;div&gt;元素都加上class或者id，可以对同一个&lt;div&gt;元素应用class或者id属性，class用于元素组（类似的元素，即某一类元素），而id用于标识单独的特定元素。 2. a元素可以包含任何元素，除了他自己本身，p元素不可以包含任何其他块元素； 3. class是设置标签的类，id是设置标签的标识。class属性用于指定元素属于何种样式的类。如样...
HTML中常用的布局技巧（一）
hafk12的博客
04-07 553
在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是display、visibility和overflow。display设置对象是否显示、如何显示。display : none隐藏对象。与它相反的是display:block除了转换为块级元素之外，同时还有显示元素的意思。特点：隐藏之后，不再保留位置。设置或检索是否显示对象。visible : 对象可视hidden : 对象隐藏特点：隐藏之后，继续保留原有位置。检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
聊天室、websocket、socket.io、毕业设计.zip
最新发布
07-27
聊天室、websocket、socket.io、毕业设计.zip
html弹性布局添加方块
04-03
HTML弹性布局（Flexbox）是一种用于创建灵活的、自适应的布局的技术。通过使用Flexbox，可以轻松地添加方块并控制它们的位置和大小。 要添加一个方块，首先需要创建一个容器元素，并将其设置为flex布局。可以通过设置容器元素的display属性为flex来实现，例如： ```html <div class="container"> <!-- 方块元素 --> <div class="box"></div> </div> ``` 接下来，可以使用CSS来定义方块元素的样式和布局。可以使用flex属性来控制方块元素在容器中的位置和大小。以下是一些常用的flex属性： - flex-grow：定义方块元素在剩余空间中的放大比例。 - flex-shrink：定义方块元素在空间不足时的缩小比例。 - flex-basis：定义方块元素在分配多余空间之前的初始大小。 - flex-direction：定义方块元素的排列方向（水平或垂直）。 - justify-content：定义方块元素在主轴上的对齐方式。 - align-items：定义方块元素在交叉轴上的对齐方式。 以下是一个简单的示例，展示如何使用Flexbox添加一个方块并设置其样式： ```html <style> .container { display: flex; justify-content: center; align-items: center; height: 200px; } .box { width: 100px; height: 100px; background-color: red; } </style> <div class="container"> <div class="box"></div> </div> ``` 这个示例中，容器元素使用flex布局，并设置了居中对齐。方块元素的宽度和高度分别为100px，并设置了红色背景色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值