HTML基础(二)列表标签

简介: HTML基础(二)列表标签

无序列表ul


ul标签的格式为

<ul>

   <li>内容1</li>

   <li>内容2</li>

   <li>内容3</li>

</ul>

View Code

效果

如果不想用圆点,想用方块只需要在ul标签里加上type属性就可以了,属性有

disc:    圆点  默认
square: 正方形
circle: 空心圆

View Code

在来刷新看看效果


有序列表ol

 

ol标签的格式为
<ol>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>                                                                         
</ol>

View Code

有序列表的type属性

1  数字1,2
a  小写字母a,b
A  大写字母A,B
i  小写罗马数字i
I  大写罗马数字I

View Code

效果


定义列表


基本格式 dl,dt,dd三个是一起出现的,缺一不可

<dl>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    <dd>列表项描述</dd>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    <dd>列表项描述</dd>
    ...
</dl>

View Code

效果



相关文章
|
28天前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
29 1
|
20天前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
12天前
HTML_表单标签
HTML_表单标签
15 0
|
1天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
1天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
1天前
|
前端开发 JavaScript UED
【专栏:HTML基础篇】HTML列表与表格:展示数据的两种方式
【4月更文挑战第30天】本文探讨了HTML中的列表和表格两种元素在网页设计中的重要性。无序列表(`&lt;ul&gt;`)和有序列表(`&lt;ol&gt;`)用于呈现相关项目,前者常用于导航菜单,后者适合有序信息。表格(`&lt;table&gt;`)用于展示结构化数据,通过`&lt;tr&gt;`、`&lt;td&gt;`和`&lt;th&gt;`定义行和单元格。尽管简单,列表和表格在内容呈现和用户体验上起着关键作用。然而,响应式设计趋势下,表格可能被更灵活的布局替代,复杂数据展示则可借助JavaScript库提升交互性。正确使用这些基础元素能有效组织信息,创建优质网页。
|
3天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
12天前
|
前端开发 容器
HTML_块级标签
HTML_块级标签
12 0
|
12天前
HTML_行内标签
HTML_行内标签
13 0
|
12天前
|
前端开发 JavaScript 开发者
html标签的样式
【4月更文挑战第19天】html标签的样式
13 2