从简单到复杂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. hdu 1402 FFT（模板）

    A * B Problem Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  2. [bzoj4868][Shoi2017]期末考试

    来自FallDream 的博客,未经允许,请勿转载,谢谢. 有n位同学,每位同学都参加了全部的m门课程的期末考试,都在焦急的等待成绩的公布.第i位同学希望在第ti天或之前得知所.有.课程的成绩.如果在 ...

  3. 修改Linux命令提示符

    vim .bashrc export PS1='\e[1;32m\u\e[m\e[1;33m@\e[m\e[1;35m\h\e[m:\W\$'

  4. shell 报错：syntax error: unexpected end of file

    有时执行脚本时会报错: [root@host1 shell]# sh -x test.sh + $'\r' : command not found test.: syntax error: unexp ...

  5. koa2+webSocket 聊天室

    做了一个简单的的聊天室,用来看看 koa和 websocket的使用还是挺好的,已经放到gitHub. https://github.com/zhaowanhua/koa2WebSocket

  6. Sublime Text3时间戳查看转换插件的开发

    平常配置表中,经常需要用到时间配置,比如活动开始结束.从可读性上,我们喜欢2017-04-27 17:00:00,从程序角度,我们喜欢用1493283600.前者是包含时区概念的,而后者市区无关,所以 ...

  7. 深入浅出低功耗蓝牙(BLE)协议栈

    深入浅出低功耗蓝牙(BLE)协议栈 BLE协议栈为什么要分层?怎么理解蓝牙"连接"?如果蓝牙协议只有ATT没有GATT会发生什么? 协议栈框架 一般而言,我们把某个协议的实现代码称 ...

  8. 关于bedtools merge 功能中sort 命令的解释

    Bedtools 是一个很好的用来处理区间的工具,很多时候用这个底层语言编写的小工具比自己写的脚本运行快很多,但是这个工具中的某些功能对输入文件有一定的要求,比如说里面的一个merge函数,这是里面的 ...

  9. Docker常见仓库MySQL

    MySQL 基本信息 MySQL 是开源的关系数据库实现. 该仓库提供了 MySQL 各个版本的镜像,包括 5.6 系列.5.7 系列等. 使用方法 默认会在 3306 端口启动数据库. $ sudo ...

  10. Docker多台物理主机之间的容器互联

    Docker 默认的桥接网卡是 docker0.它只会在本机桥接所有的容器网卡,举例来说容器的虚拟网卡在主机上看一般叫做 veth* 而 Docker 只是把所有这些网卡桥接在一起,如下: [root ...