html5无序列表，有序列表，定义列表，组合标签，div分区标签

<!DOCTYPE html >
<html lang="en">
<head><meta charset="UTF-8"><title>常用于页面布局的块级标签练习</title>
</head><body>
<P style="font-size: x-large">商品信息</P>
<p STYLE="font-size: larger">产品类别</p>
<hr>
</hr>
<!--无序列表unorder list
    1：修饰符是默认的圆点
    2：可以嵌套，嵌套的修饰符会与外层进行区分，以示区别
列表项list item -->
<ul><li type="circle">笔记本</li><li type="circle">手机</li><li type="circle">家电</li></ul><li>美容</li><li>服装</li>
    </ul>

</ul>

<hr></hr>

<dl><dt>（标题）咖啡</dt><dd>（内容描述）咖啡是一种黑色的饮料，原料据说是咖啡店</dd><dd>（内容描述）可以提神，刺激神经。</dd></dl>
<dl>
<dt>联想电脑</dt>
<dt> <img src="../img/Lenovo1.jpg" alt="" width="150px" height="150px"></dt>
<dd>产品型号：联想IdeaPad Y450A-TFU(NBA纪念版）</dd>
<dd>价格：4999元</dd>
<dd>所在地：北京</dd>
</dl>
<hr>
</hr>

<h STYLE="font-size: larger">购物流程</h>

<!-- 有序列表标签order list

  1：修饰符是数字，他随着项目的增多，自动添加

  2：有序列表也是可以嵌套的-->

<ol>

       <li>确认购买信息</li>

       <li>付款到贵美</li>

       <li>确认收货</li>

       <li>付款给商家</li>

       <li>双方评价</li></ol>

   <!--start:指定列表的开始索引    reversed:列表索引倒序显示    type：指定列表索引的类型-->

 <ol start="3" reversed type="2">

   <li>列表1</li>

   <li>列表2</li>

   <li>列表3</li>

   <li>列表4</li>

  <li>列表5</li>

</ol>


<!--组合标签
    特点：图片与文字对齐-->
<figure><figcaption><img src="../img/Lenovo.jpg" alt=""></figcaption></figure>
<hr/>

<!--div分区标签（块状元素）-->
<div><div style="height: 80px"><img src="../img/logo.png" alt="" style="margin-left: 20px"><img src="../img/kouhao.png" alt=""><img src="../img/tel.jpg" alt="" style="margin-left: 600px" ></div><div style="height:40px ”;background-color: blue">菜单区域</div><div style="height:500px;background-color: yellow">详情区域</div>
</div>
</body>
</html>

html5无序列表，有序列表，定义列表，组合标签，div分区标签相关推荐

html无序站点,html有序无序定义列表详解（案例介绍）
在前面小编已经把html中有序列表.无序列表及定义列表通过单独案例的方式进行讲解,而今天我们来绘制一个将有序无序和自定义结合在一起的案例,方便大家以后在实习过程能运用自如html列表.先来看看效果展示 ...
有序列表、无序列表、定义列表
有序列表.无序列表.定义列表三种列表标签和语义标签语义 <u1></u1> 无序列表 <o1></o1> 有序列表 <d1></ ...
HTML---文本样式---行高---字符间距---文本对齐方式---文本使用线条修饰---文本的大小写---处理元素内的空白---字体样式---无序列表有序列表---表格
文章目录文本样式 color direction line-height letter-spacing text-align text-indent text-decoration text-tra ...
HTML5基础学习——列表标签表单标签
学习内容: 1.列表标签表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用场景不同,列表可以分为三大类:无序列表.有序列表和自 ...
html5列表表格媒体元素,列表、表格与媒体元素
北冥复习html(二) 一.表格的具体组成单位由行和列组成的单元格结构: row1,cell1 row1,cell2 table ==> 定义表格: border ==> 设置表格边粗 ...
HTML之创建有序、无序和定义列表
1.无序列表无序列表是一个项目的列表,在默认状态下,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于 <li>. 使用type样 ...
6、HTML有序列表+无序列表+定义列表
在网站开发过程中,我们经常会使用到列表(list).列表可以将若干条相关的内容进行整理,让内容看起来更加有条理. HTML 为我们提供了 3 种不同的列表: 有序列表无序列表定义列表 1. 有序列 ...
HTML标签的基本使用：无序列表、有序列表、定义列表
无序列表.有序列表.定义列表列表是由一组标签组成一.无序列表没有顺序的列表结构由ul和li标签组成 ul:unordered list(无序列表) li:list item(列表项) < ...
html 有序无序列表,无序列表、有序列表和定义列表
一.html无序列表无序列表是一个没有顺序的列表项目,在各条列前面使用●□◇◆等符号以示区隔. html无序列表始于标签.每个列表项始于 :无序列表的type属性有三个数值可选,这三个选项分别为: ...

html5无序列表，有序列表，定义列表，组合标签，div分区标签

html5无序列表，有序列表，定义列表，组合标签，div分区标签相关推荐

最新文章

热门文章