2016.01.22--html5第三天-CSDN博客

本文链接：https://blog.csdn.net/weiyumeizi/article/details/50570492

div布局


  <title>div布局</title>
    <!-- 第三步-->
    <style type="text/css"> 
    body{
            margin: 0px;
        }
        div#container{  <!-- 第四步-->
            width:100%;
            height:950px;
            background-color: darkgray;
        }
        div#content_menu{
            width:30%;
            height: 80%;
            background-color: aqua;
            float: left;
        }
        div#content_body{
            width:75%;
            height: 80%;
            background-color: palevioletred;
            float: left;
        }
        div#footing{
            width: 100%;
            height: 10%;
            background-color: black;

        }
    </style>
</head>

<body>
<div id="container">   <!-- 第一步-->
    <div id="heading">头部</div>  <!-- 第二步-->
    <div id="content_menu">内容菜单</div>
    <div id="content_body">内容主题</div>
    <div id="footing">底部</div>
</div>

table布局

    <title>table布局</title>
  </head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: darkgray">
<tr>
   <td colspan="3" width="100%" height="10%" style="background-color: aqua">这是头部</td> <!--合并单元格-->
</tr>
    <tr>
        <td width="20%" height="80%" style="background-color: blue">
            <ul>
                <li>ios</li>
                <li>android</li>
            </ul>
        </td>
        <td width="60" height="80%" style="background: blueviolet">内容主体</td>
        <td width="20%" height="80%" style="background-color: deeppink">右菜单</td>
    </tr>
    <tr>
        <td width="100%" colspan="3" style="background-color: darkcyan">这是底部</td>
    </tr>
</table>
</body>

表单

<title>表单</title>
  </head>
<body >
    <form>
        用户名：
        <input type="text">
        <br/><br/>
        密 码：
        <input type="password">
        <br/>
        你喜欢的水果有？
        <br/>
        <!--多选框-->
        苹果<input type="checkbox">
        西红柿<input type="checkbox">
        香蕉<input type="checkbox">
        <br/>
        请问您的性别？
        <!--单选框，name必须相同-->
        男<input type="radio" name="sex">
        女<input type="radio" name="sex">
        <br/>
        <!--下拉列表选项-->
        请选择您常用的网站？
        <select>
            <option>www.jikexueyuan.com</option>
            <option>www.google.com</option>
            <option>www.baidu.com</option>
        </select>
        <!--按钮-->
        <input type="button" value="按钮">
        <!--提交-->
        <input type="submit" value="确认">
    </form>
    <!--文本域-->
<textarea cols="30" rows="3">请在此填写个人信息</textarea>

  <title>表单与PHP交互</title>
  </head>
<body >
<form action="http://localhost/myWeb/index.jsp" method="post">
    用户名：<input type="text" name="=name">
    <br/>
    密 码：<input type="password" name="password">
    <br/>
    <input type="submit" value="提交">

</form>
</body>

HTML5表单提交和PHP环境搭建

    <title>框架</title>
</head>
<!--要先建frame啊，frameb,framec.html-->
<!--col是纵向，rows是横向-->
<frameset cols="20%,50%,30%">
    <frame src="framea.html"></frame>
    <frame src="frameb.html"></frame>
        <frame src="framec.html"></frame>
</frameset>

HTML框架

    <title>框架</title>
</head>
<!--要先建frame啊，frameb,framec.html-->
<frameset cols="20%,50%,30%">
    <frame src="framea.html"></frame>
    <frame src="frameb.html"></frame>
        <frame src="framec.html"></frame>
</frameset>

index.html

 <title>框架</title>
</head>
<a href="http://www.jikexueyuan.com" target="_self">极客学院</a>
<!--frameborder是否显示边框效果-->
<iframe src="framec.html" frameborder="0" width="800px" height="800px"></iframe>

framea.html

<body bgcolor="green">
FrameA
<br/>
通过改变self,parent,top展示窗口打开的位置
<a href="http://www.jikexueyuan.com" target="_parent">极客学院</a>
<!--实现在同一页面显示-->

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>br/><br/><br/>
<br/><br/><br/><br/><br/>br/><br/><br/><br/><br/><br/><br/><br/>br/><br/><br/>
<br/><br/><br/><br/><br/>br/><br/><br/><br/><br/><br/><br/><br/>br/><br/><br/>
<br/><br/><br/><br/><br/>
</body>

frameb.html

<body bgcolor="#ffc0cb">
Frame B
<iframe src="framea.html" width="400px" height="400px"></iframe>

</body>

framec.html

<body bgcolor="purple">
<iframe src="frameb.html" width="600px" height="600px"></iframe>
Frame C
</body>

HTML实体

<body>
<!--为了展示abcd<html>实体-->
可以去www.so.com，百度html实体
abcd&lt;html&gt;
</body>