L02HTML5基础02

最新推荐文章于 2025-06-09 19:24:00 发布

201216323

最新推荐文章于 2025-06-09 19:24:00 发布

阅读量674

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/ccg_201216323/article/details/53766332

版权

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本篇文章延续上一篇L02HTML5基础，继续学习第五、第六、第七部分，并做笔记，便于以后自己查看，同时分享出来，有感兴趣的朋友们可以查看。

第五部分、HTML5表单提交和PHP环境搭建

1、HTML5表单：

测试代码：

<html>
<head lang="en">
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
    <form>
        用户名：
        <input type="text">
        <br/>
        大密码：
    <input type="password">
    <br/>
        你喜欢的水果有？
    <br/>
        苹果<input type="checkbox">
        香蕉<input type="checkbox">
        西红柿<input type="checkbox">
    <br/>
        请选择您的性别：
        <!--通过那么属性集合在一起，实现单选效果-->
        男<input type="radio" name="sex">
        女<input type="radio" name="sex">
    <br/>
        请选择购物网站：
    <select>
        <optgroup label="A">
            <option>淘宝</option>
            <option>京东</option>
            <option>天猫</option>
            <option>楚楚街</option>
            <option>聚美优品</option>
            </optgroup>
            <optgroup label="B">
            <option>淘宝1</option>
            <option>京东1</option>
            <option>天猫1</option>
            <option>楚楚街1</option>
            <option>聚美优品1</option>
        </optgroup>
    </select>
    <br/>
    <textarea cols="20" rows="5">请在此填写个人信息</textarea>
    <input type="button" value="按钮">
    <input type="submit" value="确定">
    <br/>
    <input type="file">
    <br/>
    <fieldset>ddddd</fieldset>
</form>
</body>
</html>

测试结果：

2、Php环境的搭建：

下载安装XAMPP，可以去官网下载，小编提供一个自己下载好的win版本的64位的安装包，傻瓜式next、next安装，并启动Apache、Mysql服务，Chrome浏览器输入localhost，出现此页面证明XAMPP安装成功。

Eclipse中安装PHP开发插件，小编尝试使用自己本机上现有的Eclipse安装PHP插件，但无奈安装过程太慢，而且还安装出错，于是就下载一个PHP的eclipse，然后将此Eclipse的工作空间切换到XAMPP安装包的htdocs目录下，如小编的路径是C:\xampp\htdocs，然后新建PHP项目，输出一句话来验证是否安装成功。

查看运行结果：

上述两款软件下载地址：https://github.com/201216323/L05_FormDemo，在我的项目中附带。

3、HTML5表单与PHP交互：

GET方式交互：

Eclipse中输出输入的用户名和密码：

点击提交按钮显示结果如下：

可以看到，我们在网页输入的用户名已经成功被服务器接收到且输出了出来。

POST方式交互：

Eclipse中输出输入的用户名和密码：

点击提交按钮显示结果如下：

可以看到，我们在网页输入的用户名也已经成功被服务器接收到且输出了出来，但不同的是在地址栏中没有显示我们输入的用户名和密码。

比较来说：
POST比GET要安全，但POST要比GET麻烦。
POS不能做资源定位，GET方式可以做资源定位。（就是你分享一个网址给别人，别人能直接打开那个网址）。

第六部分、HTML5框架、背景和实体

1、HTML5框架：

由于frame和frameset标签已经过时了，且在IDEA中也没有相应的标签了，这里就不再记录。直接使用iframe标签，其实frame是什么？frame其实也是h5页面，只不过是里面可以嵌套别的h5页面。举例说明：这里有三个frame，framea.html、frameb.html、framec.html和一个主页面index01.html。

index01.html:

在index01.html页面中通过内敛框架iframe标签，将framec.html文件嵌套进来，且指定宽高为600像素。

framec.html:

在framec.html页面中，嵌入frameb.html，指定宽高为400像素。

frameb.html:

在frameb.html页面中，嵌入framea.html，指定宽高为200像素。

framea.html:

在framea.html页面中，放入一个超链接标签，在没有指定target的时候，运行结果如下：

可以发现，百度的页面是在framea.html页面中发生的跳转，这相当于指定go度娘

当指定target=”_blank”时候，会在新的页面打开百度页面。

当指定target=”_parent”时候，会在framea的父控件上即frameb上面打开百度页面：

当指定target=”_top”时候，会在framea的最上层，也即index01.html上打开百度页面：

通过上面的跳转过程我们就可以清楚的知道target这四种值的作用。

2、HTML5的背景和颜色：

3、HTML5实体：

有些字符，像(<)这类的，对HTML(标准通用标记语言下的一个应用)来说是有特殊意义的，所以这些字符是不允许在文本中使用的。要在HTML中显示(<)这个字符，我们就必须使用实体字符

下面是一些例子说明：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
    小于号：&lt;
    <br/>
    大于号：&gt;
    <br/>
    双引号：&quot;
    <br/>
    人民币：&yen;
    <br/>
    和号符号：&amp;
    <br/>
    磅：&pound;
</body>
</html>