html5


列表:

http://www.w3school.com.cn/tags/html_ref_byfunc.asp


html5学习笔记(2)_列表 布局

列表:

  • 无序列表:

    • 使用标签<ul><li>

    • 属性:disc, circle, square

  • 有序列表:

    • 使用标签<ol><li>

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

  • 嵌套列表:

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

  • 自定义列表:

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

<body>
    <ul type="circle">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ul>
    <ul type="square">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ul>
    <ol type="a">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ol>
    <ol type="A">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ol>
    <ol type="i">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ol>
    <ol type="I">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ol>
    <ol start="10">
        <li>apple</li>
        <li>bnana</li>
        <li>orange</li>
    </ol>
    <ul type="square">
        <li>fruit</li>
            <ol>
                <li>apple</li>
                <li>bnana</li>
                <li>orange</li>
            </ol>
        <li>vegetable</li>
            <ol>
                <li>potato</li>
                <li>tomato</li>
                <li>cabbage</li>
            </ol>
    </ul>
    <dl>
        <dt>helloworld</dt>
            <dd>print helloworld</dd>
        <dt>helloworld</dt>
            <dd>print helloworld</dd>
    </dl>
</body>


html块

  1. html块元素

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

    2. <h1>,<p>.<ul>

  2. html内联元素:

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

    2. <b>,<a>,<img>

  3. html <div>元素:

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

  4. html<span>元素:

    1. <span>元素是内联元素,可作为文本的容器

<div>和<span>通常一起使用


index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="divcss.css">
    <style type="text/css">
        span{
            color: crimson;
        }
    </style>
    <title></title>
</head>
<body>
    <p>hello world</p>
    <h1>hello world</h1>
    <br/>
    <b>helloworld</b>
    <a href="hrefht.html">hrefht</a>
    <br/>
    <div id="divid">
        <p>helloworld</p>
        <a>click</a>
    </div>
    <div id="divspan">
        <p><span>hello world</span>this is a text</p>
    </div>
</body>
</html>


divcss.css:

#divid p{
    color : chartreuse;
}

html5学习笔记(2)_列表 布局_02

html布局:

    

使用<div>布局   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        body{
            margin: 0px;
        }
        div#container{
            width: 100%;
            height: 950px;
            color : gainsboro;
        }
        div#heading{
            width: 100%;
            height: 10%;
            background-color: cornflowerblue;
        }
        div#content_menu{
            width: 30%;
            height: 80%;
            background-color: gainsboro;
            float: left;
        }
        div#content_body{
            width: 70%;
            height: 80%;
            background-color: burlywood;
            float: right;
        }
        div#footing{
            width: 100%;
            height: 10%;
            background-color: black;
            clear: both;
        }
    </style>
    <title></title>
</head>
<body>
    <div id="container">
        <div id="heading">头部</div>
        <div id="content_menu">内容菜单</div>
        <div id="content_body">内容主体</div>
        <div id="footing">底部</div>
    </div>
</body>
</html>

    

使用<table>布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body marginheight="0px" marginwidth="0px">
    <table width="100%" height="950px" style="background-color: aliceblue">
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: cornflowerblue">头部</td>
        </tr>
        <tr>
            <td width="20%" height="80" style="background-color: darkgray">
                <ul>
                    <li>ios</li>
                    <li>ios</li>
                    <li>ios</li>
                </ul>
            </td>
            <td width="60%" height="80%" style="background-color: azure">实体</td>
            <td width="20%" height="80" style="background-color: darkgray">左菜单</td>
        </tr>
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: blue">底部</td>
        </tr>
    </table>
</body>
</html>



极客学院:http://www.jikexueyuan.com/course/135.html