从简单到复杂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. CTSC2017 铁牌记

    Day 0: 先到了丽都酒店. 看见北京八十中学生在发胸牌手册和T恤,领完之后开始分房间. 我和ryc一屋,lyd和ysq一屋,yzy和gzz分到了珀利酒店,老师尝试了半天把我们分到一个酒店,失败了. ...

  2. centos下 apache+mysql+php的安装

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...

  3. python学习之装饰器-

    python的装饰器 2018-02-26 在了解python的装饰器之前我们得了解python的高阶函数 python的高阶函数我们能返回一个函数名并且能将函数名作为参数传递 def outer() ...

  4. [Luogu 1516] 青蛙的约会

    Description 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事 ...

  5. MySQL中UTF8编码的数据在cmd下乱码

    MySQL中UTF8编码的数据在cmd下乱,在数据库ide中看到的却是中文. 其实,原因是cmd用gbk的格式来显示数据,那么我们只需要将utf-8存储的数据用gbk的格式输出到cmd即可. 解决方法 ...

  6. angular.run和angular.config的区别

    ng的运行机制: config阶段是给了ng上下文一个针对constant与provider修改其内部属性的一个阶段 而run阶段是在config之后的在运行独立的代码块,通常写法runBlock 简 ...

  7. 位运算n & (n-1)的妙用

    本文转自:http://blog.csdn.net/zheng0518/article/details/8882394 按位与的知识 n&(n-1)作用:将n的二进制表示中的最低位为1的改为0 ...

  8. HashMap和ConcurrentHashMap实现原理及源码分析

    HashMap实现原理及源码分析 哈希表(hash table)也叫散列表,是一种非常重要的数据结构,应用场景及其丰富,许多缓存技术(比如memcached)的核心其实就是在内存中维护一张大的哈希表, ...

  9. Wcf host

    Uri baseAddress = new Uri(uri);//var binding = new WebHttpBinding(WebHttpSecurityMode.None); var bas ...

  10. java web中filter分析

    摘自博客园,博主孤傲苍狼 一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp ...