Web前端——HTML5（视频学习第三期）

最新推荐文章于 2023-02-10 11:25:35 发布

盼盼

最新推荐文章于 2023-02-10 11:25:35 发布

阅读量187

点赞数

本文链接：https://blog.csdn.net/KYX_2023/article/details/102593930

版权

视频学习，请多包含！
在这里插入图片描述

一、HTML表单

表单是用于获取不同类型的用户输入
常用表单标签

<form> 		表单			<lengend>		域的标题
<input>		输入域		<select>		选择列表
<textarea>	文本域		<optgroup>		选项组
<label>		控制标签		<option>		下拉列表中的选项
<fieldset>	定义域		<button>		按钮

复选框 checkbox

你最喜欢的水果
苹果<input type="checkbox" >
香蕉<input type="checkbox" >
橘子<input type="checkbox" >
油桃<input type="checkbox" >

在这里插入图片描述
2. 单选按钮 radio

  请选择您的性别<br/>
    <input type="radio" name="sex"> 男
    <input type="radio" name="sex"> 女

在这里插入图片描述
3. 下拉列表及按钮

<select name="nationality" multiple="multiple">
    <option value="China">中国</option>
    <option value="England">英国</option>
    <option value="Australia">美国</option>
    <option value="Bahamas">巴哈马</option>
    <option value="Canada">加拿大</option>
    <option value="Chile">智利</option>
</select>
<button>提交</button>

在这里插入图片描述
5. 文本域

<textarea name="comments " cols="30" rows="9">请在此处填写个人信息：</textarea>

在这里插入图片描述
6. 转义字符：<的转义字符是&lt ，>的转义字符是&gt
商标 TM 的转义字符是&#8482

登录密码

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

在这里插入图片描述

二、HTML5框架

框架标签：＜frame＞
框架集标签：＜frameset＞**(在HTML5中已经不使用了)**
＜frameset＞不能加在body标签，
框架集标签定义如何将窗口分割为框架，
每个frameset定义一系列行或列，
rows/cols的值规定了每行或每列占据屏幕的面积
常用标签：
noresize：固定框架大小
col：列， row：行 (可使用百分数)
▲ 内联框架 iframe
去掉外边框 frameborder=“0”
可定义边框大小 width和height
可设置进度条，从而镶嵌页面＜br/＞……＜br/＞

新建一个frame.html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<!--内联框架-->
    <iframe src="framea.html"frameborder="0" height="250px" width="250px">
    </iframe>
</html>

再新建一个framea.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body bgcolor="#556b2f">
<!--设置进度条-->
<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/><br/>
</body>
</html>

在这里插入图片描述

三、HTML5背景

背景标签 background——设置背景图片
bgcolor——设置背景颜色
颜色：是由一个十六进制符号来定义，这个符号由红色、绿色、蓝色的值组成（RGB）
最小值：0（#00）
最大值：255（#FF）
红色：#FF0000 ，绿色：#00FF00 ，蓝色：#0000FF
黑色：#FFFFFF ，白色：#000000

四、HTML实体

实体：HTML中预留字符串必须被替换成字符实体。例如，< 、> 、&在页面无法呈现。
例：" abcd< html > " 转换成 " abcd&lt ;html&gt ; "

五、HTML5表单提交与PHP交互

PHP环境搭建
1)打开网址：www.Apachefriends.org下载安装XAMPP

2)然后打开找到Managerservice服务，将Apache Web Service和Mysql Database打开。
3)找到查看安装包下面的htdocs文件夹，这样我们的PHP脚本就可以运行了。这里使用eclipse书写PHP，需要在eclipse下载一个插件：
打开Eclipse → Help → Install New Software → 版本（http://download:eclipse.org/releases./keptor）→ name中找到Programming Languages →PHP Development Tools
4)安装成功需要重启使用
创建PHP文件命名为service.php

<?php
echo "Hello World!";

如何执行？
将eclipse切换到当前目录下直接执行service.php
创建表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单与PHP交互</title>
</head>
<body>
    <form action="http://localhost//service.php" method="post">
        用户名：<input type="text" name="name">
        <br/>
        密  码：<input type="password" name="password">
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这里插入图片描述
8. 在eclipse创建服务器

<?php
echo "用户名：".$_POST['name']."<br/>密码：".$_POST['password'];

在这里插入图片描述
action定义提交到哪个服务器
method定义提交的方式：

get 表示运行结果的上端地址后显示用户名及密码
post 表示运行的上端地址不显示用户名及密码

盼盼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端——HTML5（视频学习第三期）

视频学习，请多包含！一、HTML表单表单是用于获取不同类型的用户输入常用表单标签<form> 表单 <lengend> 域的标题<input> 输入域 <select> 选择列表<textarea> 文本域 <optgroup> 选项组<label> 控制标签 <opt...
复制链接

扫一扫