HTML常用知识点整理三（布局标签/列表标签/表格标签）

最新推荐文章于 2024-05-23 20:09:14 发布
最新推荐文章于 2024-05-23 20:09:14 发布
阅读量213 收藏
点赞数
分类专栏： HTML笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41452476/article/details/108811892
版权

布局标签和列表标签 

<!-- html基本标签

- 布局标签
  - div 划分网页板块 
    - 双标签/不带任何自带样式/独占一行
  - span 小文本
    - 双标签/不带任何自带样式/在同一行显示
- 列表标签
  - 无序列表 -->
          <ul>
            <li><b>哈哈哈</b></li>
            <li><a href="">嘿嘿嘿嘿</a></li>
            <li>嘻嘻嘻</li>
          </ul>
   <!--  - 快速生成列表 ul里面10个li  ul>li*10  
      1. 花括号里面写内容： ul>li*10{哈哈哈$}
      2. $代表从1开始的数字
    - 应用场景：网页的导航/新闻列表/商品列表
  - 有序列表 -->
         <ol type="a" start="2">
          <li>嘻嘻嘻1</li>
          <li>嘻嘻嘻2</li>
          <li>嘻嘻嘻3</li>
         </ol>
    <!-- - type: 排序方式 1/A/a/I/i
    - start: 排序的起始值，必须是数字
  - 自定义列表   -->
          <dl>
            <dt>图片/名词</dt>
            <dd>图片说明/名词的解释</dd>
            <dd></dd>
            <dd></dd>
          </dl>

 表格标签及示例

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        td {
            width: 160px;
            height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div></div>
    <table border="1" cellspacing="0" width="800" height="600" align="center" cellpadding="0" >
        <thead>
            <tr>
                <th colspan="5">啦啦啦</th>
                <!-- <th></th>
             <th></th>
             <th></th>
             <th></th> -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>您的大名</td>
                <td></td>
                <td>贵庚</td>
                <td></td>
                <td rowspan="5">照片</td>
            </tr>
            <tr>
                <td>是否毕业</td>
                <td></td>
                <td>专业是啥</td>
                <td></td>
                <!--  	<td></td> -->
            </tr>
            <tr>
                <td>大学名称</td>
                <td></td>
                <td></td>
                <td></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td>从事过工作</td>
                <td></td>
                <td></td>
                <td></td>
                <!-- 	<td></td> -->
            </tr>
            <tr>
                <td>h5基础程度</td>
                <td></td>
                <td></td>
                <td></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td>自我性格描述</td>
                <td colspan="4"></td>
                <!-- 	<td></td>
          	<td></td>
          	<td></td> -->
            </tr>

            <tr>
                <td rowspan="2">自我简述</td>
                <td colspan="2" rowspan="2"></td>
                <!-- 	<td></td> -->
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <!-- 	<td></td> -->
                <!-- <td colspan="2"></td> -->
                <!-- <td></td> -->
                <td colspan="2"></td>
                <!-- 	<td></td> -->
            </tr>

            <tr>
                <td colspan="5">啦啦啦啦</td>
                <!-- <td></td>
          	<td></td>
          	<td></td>
          	<td></td> -->
            </tr>


        </tbody>
    </table>
</body>



<!-- 表格: 主要用在后台系统展示数据，一般不用在前台网页布局

- table 表格
  - 边框 border="数字" 像素px
  - 宽度 width="数字" 高 height="数字"
  - 表格水平位置 align
    1. left 默认值
    2. center 居中
    3. right 居右
  - 单元格之间的间距 cellspacing="数值"  一般设置0 去掉单元格之间的间距
  - 调整内容到单元格的距离  cellpadding="数值"
  - 快速生成表格 table>tr10>td8{$} 10行8列的表格
- tr 行
  - 水平对齐方式 align
    1. left 默认值
    2. center 居中
    3. right 居右
  - 垂直对齐方式 valign 
    1. middle 居中 默认值
    2. top 居上
    3. bottom 居下 
- td 列
  - 水平和垂直的对齐方式和tr一样
  - 列合并 colspan
  - 行合并 rowspan
  - 合并的步骤：
    1. 补全表格，有几行几列就生成几行几列的表格
    2. 观察属于行合并还是列合并，哪个不同合并哪个
    3. 确定属性之后，观察合并几个单元格，属性对应的值就是几
    4. 将合并的属性放到合并的起始的单元格
    5. 注释掉多余的单元格

 -->


<!-- 在使用表格进行布局时，可以将表格划分为头部、主体和页脚（页脚因为有兼容性问题，我们不在赘述），具体 如下所示：

<thead></thead>：用于定义表格的头部。

必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。


<tbody></tbody>：用于定义表格的主体。

位于<table></table>标签中，一般包含网页中除头部和底部之外的其他内容。

表格的标题： caption

表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标签th</th替代相应的单元格标签td</td即可。 -->

weixin_41452476
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解HTML5布局和HTML5标签
01-18
一、新的文档类型声明...a，新增的HTML5标签-结构标签 结构标签：(块状元素) 有意义的div   标记定义一篇文章   标记定义一个页面或一个区域的头部  <nav> 标记定义导航链接   标记定义一个区域  <aside> 标
WEB标准网页布局中尽量不要使用的HTML标签
10-30
CSS网页布局中不推荐使用的HTML标签，请尽量不要使用这些HTML标签。
HTML和常见标签
wangzedd的博客
02-27 229
HTML入门笔记
07 - HTML常用标签（二）
m0_48670609的博客
01-04 2470
HTML常用标签
HTML基础
weixin_50204197的博客
02-04 359
java基础，HTML基础，HTML控件
vscod 技巧，自动循环书写li
weixin_33910434的博客
06-13 301
ul>li*10{这是第$个li} <ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li</li> <li>这是第4个li</li> <li>这是第5个li</li> <li...
Sublime text 3怎么快速生成ul>li*5 ol>li*5 ul>li>span*5垂直多行相同内容
热门推荐
哈里·雪利博客
12-27 2万+
Sublime text 3 在body中 1、打入ul>li*5 2、按Ctrl键+E建 3、OK 在body中 1、打入ul>li>span*5 2、按Ctrl键+E建 3、OK
div+css布局中选择使用html标签的方法
12-13
2、列表型布局（使用ul li标签）遇到图片列表、文章标题列表，通常使用ul li列表标签进行布局。当然使用这些标签时要进行设置需要CSS样式达到布局效果。这样程序调用数据时候更容易做循环内容。 3、标题型布局（使用...
HTML教程:收集的常用的HTML标签(5)
12-14
各位在实际布局时应有所取舍，如：B标记，FONT标记，都是不符合XHTML规范的。 相关文章：初学者接触HTML了解一些HTML标记(4) 　这些所介绍的HTML标记不一定完全符合XHTML规范。各位在实际布局时应有所取舍，如：B...
ASP.NET批量操作基于原生html标签的无序列表的三种方法
01-02
本篇介绍服务器端ASP.NET批量操作基于原生html标签的无序列表的三种方法。 方法一，将li元素做成html控件，加上id，用FindControl方法。 aspx代码： <form id=form1 runat=server> 初始值1</li> 初始值2</li...
自动生成10个li(提高版)-四次切换
whoops_butterfly的博客
10-16 554
无标题文档 li{width:50px; height:50px; background:red; color:#fff; font-size:18px; text-align:center; line-height:50px; position:absolute ; top:0px; left:0px; font-weight:bold;} window.onload = func
HTML常用基础知识复习
qq_41746175的博客
11-17 155
HTML常用基础知识复习 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽
html常用布局标签的合理搭配
u013239236的专栏
06-17 2107
做前端接近两个星期了，我感觉最近进步比较大，可能是因为起点低吧，所有感觉进步比较快，简单的总结一些我两周来所遇到的问题以及解决的办法 印象最深刻的也是第一次遇到这样的问题： 需求： 做一个收索的文本框，文本框前面放一个放大镜，然后中间可以输入文字，但文字不能再放大镜上，后面跟一个收索确定按钮， 我的办法： 三个div全部做浮动，左边一个放放大镜的图片，中间的放一个文本框，右边的那个放按钮
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 932
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-23 1076
理解PNG格式的不同变体及其适用场景，是前端开发者必备的基础技能之一。通过合理的选用，不仅能提升网站的视觉效果，还能确保良好的性能体验。在实际工作中，你还遇到过哪些关于图像格式选择的挑战？或是有独到的优化策略？欢迎在评论区分享你的见解和经验，让我们一起探讨前端图像优化的更多可能性。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页(5个页面)
weixin_42283461的博客
05-22 1078
HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页(5个页面)
动态插入HTML内容有哪些常见用法
codemami的博客
05-22 531
动态列表和表格：对于需要从服务器获取数据并在页面上显示的列表或表格，可以使用JavaScript动态插入HTML内容。当用户滚动到页面底部或点击“加载更多”按钮时，可以使用JavaScript动态加载并插入新的内容块。用户交互反馈：当用户在网页上进行某些操作时（如点击按钮、提交表单等），可以使用JavaScript动态插入HTML内容来提供即时的反馈或结果。实时更新：对于需要实时更新的网页内容（如聊天室、股票行情等），可以使用JavaScript定时从服务器获取最新数据，并动态更新页面上的HTML元素。
HTML新春烟花盛宴
兔子王
05-21 7857
本期小编给大家分享一场绝美的烟花盛宴，无论你用手机还是电脑都可以直接打开哦！烟花盛宴春节放烟花这个传统习俗，可是咱们古老文化中一道璀璨夺目的风景线呢！每年农历新年的到来，家家户户燃放烟花炮竹的场景，那可是热闹非凡，充满了喜庆与吉祥的气息。这习俗最早源于古代人们对新的一年的美好祝愿和对邪恶力量的驱赶。在很久很久以前，人们相信燃烧火把和竹子可以发出巨大的声响和耀眼的火花，这些都能帮助他们赶走那些可能带来病痛和灾难的瘟疫、邪灵。后来随着技术的发展，竹子内的火药被发明出来，就演变成了我们现在看到的烟花爆竹。
preamble html标签,美化Index of /目录列表页面
05-30
您可以在Index of /页面的HTML代码中添加以下preamble标签来美化页面： ``` <!DOCTYPE html> <html> <head> <title>Index of /</title> <style> body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; } h1 { font-size: 2em; margin: 0; padding: 1em; background-color: #333; color: #fff; text-align: center; } table { margin: 0 auto; border-collapse: collapse; width: 80%; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } th, td { padding: 0.5em; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #333; color: #fff; } a { text-decoration: none; color: #333; } a:hover { color: #000; } </style> </head> <body> <h1>Index of /</h1> <table> <thead> <tr> <th>Name</th> <th>Last modified</th> <th>Size</th> </tr> </thead> <tbody> <!-- 文件列表 --> </tbody> </table> </body> </html> ``` 这个preamble标签将添加一个简单的CSS样式表，用于美化Index of /页面。它将设置背景颜色、字体等，使页面看起来更加美观和易于查看。同时，它还将创建一个简单的表格布局，以显示文件列表。您可以在<!-- 文件列表 -->处添加实际的文件列表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值