html5学习笔记(3)

发布时间：2020-06-07 23:38:45 阅读：370 作者：thystar 栏目：移动开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

html表单的创建

表单：

表单用于获取不同类型的用户输入
常用标签：http://www.w3school.com.cn/tags/html_ref_byfunc.asp

html5学习笔记(3)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form>
        用户名
        <input type="text">
        密码
        <input type="password">
        <br/>
        <br/>
        fruit
        <br/>
        <input type="checkbox">apple
        <input type="checkbox">banana
        <input type="checkbox">pear

        <br/>
        性别
        <br/>
        男<input type="radio" name="sex">
        女<input type="radio" name="sex">

        <br/>
        city
        <select>
            <option>xiamen</option>
            <option>lanzhou</option>
            <option>fuzhou</option>
        </select>
        <br/>
        <input type="button" value="button">
        <input type="submit" value="提交">
    </form>
    <textarea cols="30" rows="20">info:</textarea>

</body>
</html>

PHP环境搭建：

具体搭建方法参考PHPeclipse的安装。网上可以搜到

html5表单和php交互

定义一个表单提交：

index.html中：

<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="http://localhost/myservice/service.php" method="get">
        用户名
        <input type="text" name="name">
        密码
        <input type="password" name="password">
        <br/>

        <input type="submit" value="提交">
    </form>
</body>
</html>

service.php

<?php
/*
 * Created on 2015-6-23
 *
 * To change the template for this generated file go to
 * Window - Preferences - PHPeclipse - PHP - Code Templates
 */
 echo "username".$_GET['name']."<br>password".$_GET['password'];
?>

html5的框架，背景和实体-框架

html框架：

框架标签（frame）: 框架对于页面的设计有着很大的作用
框架集标签（<framset>）\
内联框架：iframe:

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

html5学习笔记(3)

创建三个框架framea.html framec.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#faebd7">
   framea <br/>
    <!--<iframe src="framec.html" frameborder="0" width="800px" height="800px"></iframe>-->
   <a href="http://www.baidu.com" target="_top">baidu</a>
</body>
</html>

frameb.html,

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#8a2be2">
    frameb <br/>
    <iframe src="framea.html" width="400px" height="400px"></iframe>
</body>
</html>

framec.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#f0ffff">
    frameb <br/>
    <iframe src="frameb.html" width="600px" height="600px"></iframe>
</body>
</html>

在index.html中

<!DOCTYPE html>
<frame>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
    <!--<a href="http://www.baidu.com" target="_self">baidu</a>-->
    <br/>
    <iframe src="framec.html" frameborder="0" width="400px" height="400px">

    </iframe>
</html>

html 背景

1.背景标签

background

2.背景颜色：

bgcolor

html实体：

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

<body>
abc&lt;html&gt;
</body>

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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

html5学习笔记(3)

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签