html表格和列表标签
列表标签
1.有序列表(ol)
使用数字进行标记 开始标签： <ol> 列表项标签： <li>， <ol>是 ordered lists 的缩写 <li>是 list item 的缩写。
例如：<h2>搜索引擎排名</h2>
<ol type="1">
<li>Google</li>
<li>Baidu</li>
<li>Bing</li>
<li>Sougou</li>
</ol>
效果如下
列表类型type取值
|
1(默认) |
使用数字作为项目符号 |
|
A/a |
使用大写/小写字母作为项目符号 |
|
I/i |
使用大写/小写罗马数字作为项目符号 |
2.无序列表（ul）
<ul>是 unordered lists 的缩写 <li>是使用圆点进行标记 开始标签： <ul> 列表项标签： <li> list item 的缩写。
例如：
<h2>软件编程语言</h2>
<ul type="disc">
<li>Java</li>
<li>C++</li>
<li>Python</li>
<li>JavaScript</li>
</ul>
效果如下：
列表类型type取之值
|
(默认) |
项目符号显示为实体圆心 |
|
square |
项目符号显示为实体方心 |
|
circle |
项目符号显示为空心圆 |
3.自定义列表 开始标签（dd）
<dl> 列表项标签： <dt> 列表定义标签： <dd>，<dl>是definition lists 的缩写 <dt>是 definition term 的缩写 <dd>是 definition description 的缩写。
例如：
<h2>健康食品</h2>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>蔬菜</dt>
<dd>西兰花</dd>
<dd>菠菜</dd>
</dl>
效果如下：
表格标签
表格以“行”与“列”的方式展现数据。
- HTML 表格由 <table> 标签来定义
- 每个表格包含若干行，由 <tr> 标签定义 每行被分割为若干单元格，由 <td> 标签定义
- 数据单元格可以包含文本、图片、列表、表单、表格等
- 对表格进行更精确分组<caption> 表格标题 <thead> 表格头 <tbody> 表格体 <tfoot> 表格尾
表格合并列属性 colspan 将多列合并成一列，表格合并行属性 rowspan 将多行合并成一行。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table align="center" border="1" width="30%">
<caption>
<h4>小说排行榜</h4>
</caption>
<thead font-weight:bold;>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日 </th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="up.jpg" alt=""></td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg" alt=""></td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="up.jpg" alt=""></td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>1</td>
<td>356</td>
<td>3560</td>
<td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>
</tr>
</tbody>
</table>
</body>
</html>
效果如下：
html表格和列表标签相关推荐
- 零基础前端笔记（2）html，表格，列表，标签，文本域，表单域
XHTML可扩展超文本标记语言(2) (1)创建表格 (2)表格属性 表头单元格标签th 表格标题caption 小说排行榜 (3)合并单元格 (4)划分表格结构 (5)列表标签 无序列表 有序列表 ...
- web前段学习day_01:HTML（学习如何搭建页面结构和内容）：文本标签、列表标签、图片标签、超链接、表格、表单表单、分区标签、实体引用
学习如何构造页面结构和内容 安装HBuilderX 一.HTML 创建第一个HTML页面 写完html后如何测试 写在body中的常见标签有哪些? 注释快捷键 Ctrl+Shift+/ 1.文本相关标 ...
- html5列表标签代码,HTML5列表标签和表格标签(示例代码)
一.列表 1.1 什么是列表标签? 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体 无序列表---unordered-list(最多):新闻列表.导航.商品列表 作用: ...
- day51 列表、表格、form标签
目录 列表 表格 form标签 列表 语义:标记一堆数据是一个整体/列表 html中列表标签分为三种 1.无序列表(列表标签中使用最多的一种,非常重要):unordered list #1.作用: 制 ...
- HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一.排版标签 1.标题标签 在新闻和文章的页面中都离不开标题,用来突出显示文章主题. h系列标题 <body><h1>1级标题</h1> <h2>2级标 ...
- html标签：表格、列表、图片、文字、表单、以及h5新增特性
文章目录 前言 一.表格 二.列表 三.图片 四.文字 五.表单 六.h5新增特性 1.语义化标签 2.表单新增input属性 3.datalist 4.filedset 5.mark标记标签 6.多 ...
- HTML标签---列表标签和表格标签
HTML标签-列表标签和表格标签 列表标签: 无序列表ul: <!--type有实心,空心,方框的属性--> <ul type="disc"><l ...
- Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
- 列表标签,表格标签,表单标签
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
最新文章
- Mtk Android编译命令
- 通过输入流获取的xml格式字符串转为json和map格式
- ssdp协议 upnp_SSDP 简单服务发现协议
- how is home button implemented in Fiori launchpad
- gradle spring_使用Gradle的简单Spring MVC Web应用程序
- 顺序图组合片段类型及属性
- Android手动创建和解析Json
- 中文空格字符与英文空格字符怎么区分_设计随笔 | 中英文字符间距与社交网络脱退...
- python: pandas 、dataframe 与hdf5
- silverlight 初始页面进行安装主应用（初始安装xap，本地加载xap)，实现silverlight程序成桌面应用程序。
- pythonista安卓_Android平台有哪些软件类似于iOS上的JSbox、Pythonista和Thor？
- 论文阅读：2021 | CE-FPN: Enhancing Channel Information for Object Detection
- 音乐类软件LoveMusic开发(三)----登录界面
- win10多台计算机共享文件夹设置密码,win10系统给共享文件夹设置密码的操作方法...
- firefox图片不存在就显示小红叉的方法
- 电脑蓝屏记录（RESOURCE_NOT_OWNED）
- Mac下用docker安装阿波罗Apollo
- 红石外汇｜每日汇评：黄金多头在美国CPI指数之前仍保持希望
- 人工智能接口调试(百度AI|腾讯AI)
- 韩国美女的16种味道