从简单到复杂HTML5详解：每日更新关注:http://weibo.com/hanjunqiang 
新浪微博！

1.HTML列表

1.有序

2.无序

3.有序star属性

4.有序无序列表

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ul>
    <ol>
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
    </ol>

    <!--无需列表-->
   <ul type="square">
       <li>iOS</li>
       <li>android</li>
       <li>html5</li>
       <li>swift</li>
   </ul>
<!--有序列表-->
   <ol start="10">
       <li>iOS</li>
       <li>android</li>
       <li>html5</li>
       <li>swift</li>
   </ol>
<!--嵌套列表(无序ul/有序ol)-->

    <ul>
        <li>宠物</li>
            <ol>
                <li>猫</li>
                <li>狗</li>
            </ol>
        <li>植物</li>
            <ol>
                <li>仙人掌</li>
                <li>棕榈</li>
            </ol>
    </ul>

    <br/> <br/>

    <ol>
        <li>宠物</li>
        <ol>
            <li>猫</li>
            <li>狗</li>
        </ol>
        <li>植物</li>
        <ol>
            <li>仙人掌</li>
            <li>棕榈</li>
        </ol>
    </ol>

    <dl>
        <dt>helloword</dt>
             <dd>大家好啊打印helloword</dd>
        <dt>helloword</dt>
        <dd>大家好啊打印helloword</dd>
    </dl>
</body>
</html>

每日更新关注:http://weibo.com/hanjunqiang 
新浪微博！

2.块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块元素</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <style type="text/css">
        span{
            color: blue;
        }
    </style>
</head>
<body>
     <!-- 块 -->
     <p>大家好!</p>
     <h1>大家好啊</h1>
     <b>这是一个加重标签</b>
     <a>这是一个超链接标签</a>
     <div id="divid">
         <p>helloword</p>
         <a>惦记我</a>
     </div>
     <div id="divspan">
         <p><span>这是一个测试效果</span>span是什么样式</p>
     </div>
</body>
</html>

效果如下：

span标签下作用看效果图！

每日更新关注:http://weibo.com/hanjunqiang 
新浪微博！

3.布局

1.div布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        #container{
            width: 100%;
            height: 950px;
            background-color: antiquewhite;
        }
        #header{
            width: 100%;
            height: 10%;
            background-color: aquamarine;
        }
        #conten_menu{
            width: 30%;
            height: 80%;
            background-color: azure;
            float:left ;
        }
        #content_body{
            width: 70%;
            height: 80%;
            background-color: chartreuse;
            float: left;
        }
        #footer{
            width: 100%;
            height: 10%;
            background-color: darkgoldenrod;
            clear: left;
        }
    </style>
</head>
<body>
      <div id="container">
           <div id="header">头部</div>
           <div id="conten_menu">内容菜单</div>
           <div id="content_body">内容主题</div>
           <div id="footer">底部</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: darkgoldenrod">
          <tr>
              <td colspan="3" width="100%" height="10%" style="background-color: burlywood">这是头部</td>
          </tr>
          <tr>
              <td width="20%" height="80%" style="background-color: aqua">
                  <ul>
                      <li>iOS</li>
                      <li>android</li>
                      <li>swift</li>
                      <li>html5</li>
                  </ul>
              </td>
              <td width="60%" height="80%" style="background-color: chartreuse">内容主题</td>
              <td width="20%" height="80%" style="background-color: crimson">右菜单</td>
          </tr>
          <tr>
              <td width="100%" height="10%" colspan="3" style="background-color: blue">这是底部</td>
          </tr>
      </table>
</body>
</html>

效果如下：

每日更新关注:http://weibo.com/hanjunqiang 
新浪微博！

iOS开发者交流QQ群： 446310206 

HTML5中 HTML列表／块／布局 韩俊强的博客的更多相关文章

  1. HTML5中 基本用法及属性 韩俊强的博客

    从今天开始更新H5相关学习:希望大家能一起学习,多学习一门语言,多一门乐趣! 了解Html5: Html5基本属性: <!DOCTYPE html> <html lang=" ...

  2. iOS开发中的零碎知识点笔记 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博 1.关联 objc_setAssociatedObject关联是指把两个对象相互关联起来,使得其中的一个对象作为另外 ...

  3. iOS中 MediaPlayer framework实现视频播放 韩俊强的博客

    iOS开发中播放音乐可以使用MPMusicPlayerController类来实现,播放视频可以使用MPMoviePlayerController和MPMoviePlayerViewControlle ...

  4. iOS中 Realm错误总结整理 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 一.错误信息:Attempting to modify object outside of a write tra ...

  5. iOS中 动态热修补技术JSPatch 韩俊强的博客

    .1.4) JSPatch bridge Objective-C and JavaScript. You can call any Objective-C class and method in Ja ...

  6. iOS中 最新支付宝支付(AliPay) 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博 现在的支付方式一般有三种, 支付宝, 微信, 网银. 个人觉得最简单易用的还是支付宝, 微信虽然看起来币支付宝要简单 ...

  7. iOS中 断点下载详解 韩俊强的博客

    布局如下: 基本拖拉属性: #import "ViewController.h" #import "AFNetworking.h" @interface Vie ...

  8. iOS中 扫描二维码/生成二维码详解 韩俊强的博客

    最近大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 指示根视图: se ...

  9. iOS中 HTTP/Socket/TCP/IP通信协议详解 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博 简单介绍: // OSI(开放式系统互联), 由ISO(国际化标准组织)制定 // 1. 应用层 // 2. 表示层 ...

随机推荐

  1. 【QAQ的Minecraft】

    树套树被QAQ用木斧挖了,只剩二维RMQ了. 题目:      QAQ最近爱上了一款很平凡的游戏,叫做<Minecraft>.目前游戏更新到了1.12版本,他发现了一条新的指令:/fill ...

  2. 从零安装Scrapy心得 | Install Python Scrapy from scratch

    1. 介绍 Scrapy,是基于python的网络爬虫框架,它能从网络上爬下来信息,是data获取的一个好方式.于是想安装下看看. 进到它的官网,安装的介绍页面 https://docs.scrapy ...

  3. App上架应用市场，如何攻破安全过检难题

    App的安全过检与众所熟知的安全检测是两个完全不同的概念.首先App行业本身对App安全过检有一定的要求与规范,其次2017年6月1日正式实施的<中国网络安全法>中就曾要求App在渠道上线 ...

  4. OkHTTPClient

    一,OKHttp介绍 okhttp是一个第三方类库,用于android中请求网络. 这是一个开源项目,是安卓端最火热的轻量级框架,由移动支付Square公司贡献(该公司还贡献了Picasso和Leak ...

  5. Zookeeper 快速入门（上）

    来源:holynull, blog.leanote.com/post/holynull/Zookeeper 如有好文章投稿,请点击 → 这里了解详情 Zookeeper是Hadoop分布式调度服务,用 ...

  6. MySQL数据类型DECIMAL用法

    MySQL DECIMAL数据类型用于在数据库中存储精确的数值.我们经常将DECIMAL数据类型用于保留准确精确度的列,例如会计系统中的货币数据. 要定义数据类型为DECIMAL的列,请使用以下语法: ...

  7. Promise--优雅的异步回调解决方案

    当一个接口需要依赖另一个接口的请求数据时,通常有两种解决方式,一个是将请求数据的接口设为同步,之后调另一个接口,另一个是在请求数据接口的成功回调里调另一个接口. 但是:当一个接口需要依赖很多个接口的请 ...

  8. 安装redis，搭建环境

    这里以redis-4.0.9为例   我自己为了好方便管理自己的软件包,就在/usr/local/目录下创建了一个software目录   mkdir  /usr/local/software cd  ...

  9. Unity中使用射线查询MeshCollider背面的方法

    之前遇到一个问题要从MeshCollider背面方向发出射线,直至检测到该射线与MeshCollider的相交点为止. 后来我用双面MeshCollider的方法解决了http://www.cnblo ...

  10. 终止Docker容器

    可以使用 docker stop 来终止一个运行中的容器. 此外,当Docker容器中指定的应用终结时,容器也自动终止. 例如对于上一章节中只启动了一个终端的容器,用户通过 exit 命令或 Ctrl ...