从简单到复杂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. poj2406 连续重复子串

    Power Strings Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 41110   Accepted: 17099 D ...

  2. Scrapy框架

    Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以 ...

  3. Linux学习之CentOS(二)--初识linux的一些常用命令（基础命令）

    初次学习linux系统,首先也得会一些linux的基本命令.至少要先学会开启和关闭系统吧!我称为 基础命令! linux命令是对Linux系统进行管理的命令.对于Linux系统来说,无论是中央处理器. ...

  4. struct2利用相关的Aware接口

    Struts 2提供了Aware接口.Aware为"感知"的意思,实现了相关Aware接口的Action能够感知相应的资源.Struts在实例化一个Action实例时,如果发现它实 ...

  5. 四柱加强版汉诺塔HanoiTower----是甜蜜还是烦恼

    我想很多人第一次学习递归的时候,老师或者书本上可能会举汉诺塔的例子. 但是今天,我们讨论的重点不是简单的汉诺塔算法,而是三柱汉诺塔的延伸.先来看看经典的三柱汉诺塔. 一.三柱汉诺塔(Hanoi_Thr ...

  6. IntelliJ IDEA安装配置

    1. 从官网安装最新版IntelliJ Idea软件. 2. 激活使用 http://www.3322.cc/soft/37661.html 3. 配置eclipse快捷键 File-->Set ...

  7. c++ public,protected,private

    基类的私有成员被继承后不可见(优先级最高) 公有继承不改变基类成员属性 保护继承(私有继承)把基类成员变为保护成员(私有成员) public 公开的 protected 受保护的 private 私有 ...

  8. Matlab 编译EXE

    环境:vs2013  matlab2015b 一.生成独立可执行的程序(exe文件)步骤1.设置编译器.在matlab命令行输入mbuild –setup以及mex –setup,选择安装的c编译器. ...

  9. JavaScript基础知识必知！！！

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. JS作用:表单验证,减轻服务端的压力:添加页面动画效果:动态更改页面内容:Ajax网络请求. 下面简单介 ...

  10. ACM 饭卡

    Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...