HTML列表

　　列表标签

标签 描述
<ol> 定义有序列表。
<ul> 定义无序列表。
<li> 定义列表项。
<dl> 定义定义列表。
<dt> 定义定义项目。
<dd> 定义定义的描述。
<dir> 已废弃。使用 <ul> 代替它。
<menu> 已废弃。使用 <ul> 代替它。

常用的列表

1. 无序列表

使用标签: <ul>, <li>

属性: disc, circle, square

示例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>聊表</title>

</head>

<body>

<!--无序列表, 列表项为li-->

<!--disc 实心圆, circle 空心圆, square 实行正方形, 依次更改运行看下-->

<ul type="disc">

    <li>apple</li>

    <li>orange</li>

    <li>bananer</li>

    <li>Berry</li>

</ul>

</body>

</html>

2. 有序列表

使用标签<ol>, <li>

　　属性: A, a, I, i, start

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列表</title>

</head>

<body>

<!--有序列表, 列表项为li-->

<!--A: 以A,B,C...排序

    a: 以a,b,c...排序

    I: 以I, II, III...排序

    i: 以i,ii,iii...排序

    start: 自己定义排序的第一个-->

<ol type="i">

    <li>iOS</li>

    <li>Android</li>

    <li>Java</li>

    <li>Swift</li>

    <li>Objective-C</li>

</ol>

</body>

</html>

　　3. 嵌套列表(包含有序列表嵌套, 无序列表嵌套)

　　使用标签<ul>, <ol>, <li>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>列表</title>

</head>

<body>

<!---->

<ul type="square">

    <li>iOS</li>

        <ul>

            <li>iPhone</li>

            <li>iWatch</li>

            <li>iPod</li>

            <li>iPad</li>

        </ul>

    <li>Android</li>

        <ul>

            <li>Any Call</li>

            <li>Oppo</li>

            <li>Vivio</li>

            <li>Huawei</li>

        </ul>

    <li>Objective-C</li>

</ul>

</body>

</html>

　　4. 自定义列表

　　使用标签<dl>, <dt>, <dd>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自定义列表</title>

</head>

<body>

<!--定义自定义列表-->

<dl>

    <!--定义自定义项目-->

    <dt>cast:</dt>

    <!--定义自定义描述-->

        <dd>vi. 1投掷扔抛, 2丢弃, 抛弃 3把...投向, 抛射, 4分派..., 扮演角色 5铸造, 浇铸 n. 全体演员</dd>

    <dt>forecast:</dt>

        <dd>v. 预测, 预报, /dd>

        <dd>n. 预测, 预报<</dd>

    <dt>insight:</dt>

     <dd>n. 洞察力, 领悟 v. 洞悉, 了解</dd>

</dl>

</body>

</html>

HTML块

　　1. HTML块元素

　　块元素在显示时, 通常会以新行开始

　　如: <h1>, <p>, <ul>

　　2. HTML内联元素

　　内联元素通常不会以新行开始

　　如: <b>, <a>, <img>

　　3. HTML <div>元素

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

　　4. HTML <span>元素

　　span元素是内联元素, 可作为文本的容器

　　例:可粘贴运行一下查看效果(开发工具IntelliJ IDEA)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>块元素</title>

    <!--样式-->

    <style type="text/css">

        #wraper p{

            color: blueviolet;

        }

        #span span{

            color: indianred;

        }

    </style>

</head>

<body>

<!--块元素-->

<h1>visual:</h1>

<p>视力的, 视觉的</p>

<!--内联元素-->

<b>vision:</b>

<a>1视力, 2眼光,远见, 洞察力 3幻想 4设想, 念头</a>

<!--div元素-->

<div id="wraper">

    <p>prospective</p>

    <a>1可能的,有望的 2未来的, 即将发生的</a>

</div>

<!--span元素: 文本的容器-->

<div id="span">

    <p>respective: <span>分别的,</span> 各自的</p>

</div>

</body>

</html>

HTML布局

　　推荐两种方式:

　　1. 使用<div>元素布局

　　例:css代码中其实div不用加, 通常也不用添加

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div布局</title>

    <style type="text/css">

        body{margin: 0px}

        div#container{

            /*可以充满全屏*/

            width: 100%;

            height: 950px;

            background-color: darkgray;

        }

        div#heading{

            width: 100%;

            height: 10%;

            background-color: aqua;

        }

        div#menu{

            width: 30%;

            height: 80%;

            background-color: darkorange;

            float: left;

        }

        div#mainbody{

            width: 70%;

            height: 80%;

            background-color: brown;

            float: left;

        }

        div#footing{

            width: 100%;

            height: 10%;

            background-color: cornflowerblue;

            clear: both;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="heading">头部</div>

    <div id="menu">内容菜单</div>

    <div id="mainbody">内容主体</div>

    <div id="footing">底部</div>

</div>

</body>

</html>

　　2. 使用<table>元素布局

　　例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table布局</title>

</head>

<body marginheight="0px" marginwidth="0px">

<table width="100%" height="950" style="background-color: darkgray">

    <tr>

        <td colspan="3" width="100%" height="10%" style="background-color: aqua">

            头部

        </td>

    </tr>

    <tr>

        <td width="20%" height="80%" style="background-color: cornflowerblue">

            <ul>

                <li>diktatet</li>

                <li>diktator</li>

                <li>diktation</li>

            </ul>

        </td>

        <td width="60%" height="80%" style="background-color: cadetblue">中间部分</td>

        <td width="20%" height="80%" style="background-color: crimson">右菜单</td>

    </tr>

    <tr>

        <td width="100%" height="10%" colspan="3" style="background-color: coral">底部</td>

    </tr>

</table>

</body>

</html>

欢迎大家提问和评论, 我尽我所能的为大家解答, 一起学习, 共同成长~

南心芭比: 热爱分享, 收获快乐~ 　

HTML5学习笔记<四>: 列表, 块和布局的更多相关文章

  1. HTML5学习笔记四：html5结构

    一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各 ...

  2. HTML5学习笔记四 HTML文本格式化

    HTML 格式化标签 HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签 通常标签 <strong> ...

  3. HTML5学习第四天

    HTML5学习第四天 一.HTML列表 HTML列表,有无序表,有序表以及自定义表,列表于列表之间可以实现嵌套 列表相关操作 <ul> <li>(多选)谁世界第二可爱?< ...

  4. Windows phone 8 学习笔记(5) 图块与通知

    原文:Windows phone 8 学习笔记(5) 图块与通知 基于metro风格的Windows phone 8 应用提到了图块的概念,它就是指启动菜单中的快速启动图标.一般一个应用必须有一个默认 ...

  5. python3.4学习笔记(四) 3.x和2.x的区别，持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  6. kvm虚拟化学习笔记(四)之kvm虚拟机日常管理与配置

    KVM虚拟化学习笔记系列文章列表----------------------------------------kvm虚拟化学习笔记(一)之kvm虚拟化环境安装http://koumm.blog.51 ...

  7. go微服务框架kratos学习笔记四(kratos warden-quickstart warden-direct方式client调用)

    目录 go微服务框架kratos学习笔记四(kratos warden-quickstart warden-direct方式client调用) warden direct demo-server gr ...

  8. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  9. C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻

    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...

随机推荐

  1. 蓝桥杯java试题《洗牌》

    问题描述 小弱T在闲暇的时候会和室友打扑克,输的人就要负责洗牌.虽然小弱T不怎么会洗牌,但是他却总是输. 渐渐地小弱T发现了一个规律:只要自己洗牌,自己就一定会输.所以小弱T认为自己洗牌不够均匀,就独 ...

  2. 王爽汇编语言（第三版）环境搭建（附PDF及工具下载）

    一.前言 最近在学习汇编语言,使用的是读者评价非常高的王爽老师写的<汇编语言>(第三版),为了适应现在各个版本的windows操作系统,所以采用VMWare虚拟机来搭建纯DOS环境. 二. ...

  3. ArcGIS API for JavaScript 4.2学习笔记[2] 显示3D地图

    3D地图又叫场景. 由上一篇可知, require入口函数的第一个参数是字符串数组 ["esri/Map", "esri/views/MapView", &qu ...

  4. [JavaScript] 学习笔记-JavaScript基础教程

    1.JavaScript介绍 1)JavaScript是互联网上最流行的脚本语言,这门语言可用于Web和HTML,更可广泛用于服务器.pc端.移动端.JavaScript是一种轻量级的编程语言,插入H ...

  5. [html5] 学习笔记- html拖放

    拖放是一种常见的特性,即抓取对象以后拖到另一个位置,在HTML5中,拖放是标准的一部分,任何元素都能够拖放. 1.html5拖放:(drag和drop)是HTML5标准的组成部分 拖动开始:ondra ...

  6. 通过判断cookie过期方式向Memcached中添加,取出数据(Java)

    应用场景:在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够 ...

  7. HDU 3782 xxx定律

    xxx定律 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  8. JavaScript———从setTimeout与setInterval到AJAX异步

    setTimeout与setInterval执行 首先我们看一下以下代码打印结果 console.log(1); setTimeout(function() { console.log(2); },1 ...

  9. 【吐血整理】SVN命令行，Subversion的正确使用姿势，让版本控制更简单~

    一.写在前面 前面一直博主一直用svn的桌面版本,但看项目经理一直都用的命令行方式,不为性能,还能直接装逼呀!在这里先感谢赵哥,也把它分享给感兴趣的你们~ 二.直接上干货 1. svn checkou ...

  10. Javascript的简单测试环境

    在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...