HTML5怎么样?

thbcm阅读(191)

HTML 相信没学过编程的都会认识,它的知名度不可谓不高,那么你知道它的新版本 HTML5 嘛?HTML5的功能在又上了一个档次,本篇文章小编为你介绍 HTML5。

HTML5介绍

2014年10月29日,万维网联盟正式宣布了 HTML5规范,HTML 是万维网最核心的超文本标记语言。万维网不等同于互联网,但它是依靠互联网运行的服务之一,万维网又简写为 www,它可以实现在互联网的帮助下,访问由许多互相链接的超文本组成的系统。

从1999年发布了 HTML4.01之后,到2014年经历十五年才推行 HTML,中间还出现了 WHATWG 和 XHTML2.0 两种规范,最后双方合并成全新的 HTML5 版本。

传言 HTML5 手机应用上运行缓慢并且漏洞百出,目前还不适合进行大规模推广,但这些问题都是可以优化的,并且 HTML5 手机应用有着可以在网页上直接调试和修改的优点,不需要再重复地编码和调试,相信未来 HTML5 手机应用的普及率只会越来越高。

HTML5新版本特性

1、HTML5淘汰了较为过时或冗余的 HTML 属性

2、增加了 Indexed DB 的本地存储功能

3、直接在浏览器中显示图形或动画,脱离 Flash 和 Silverlight

4、增加了 HTML5 文档到另一个文档间的拖放功能

5、提供外部应用与浏览器内部数据间的开放接口

HTML5的缺点

欧洲网络信息安全机构已经发出警告,HTML5 可能并不够安全。

HTML5 还没有被各大浏览器所支持

HTML5 要求技术必须全部开放,而这可能触及到一些大公司的利益

HTML5未来展望

随着移动化的进程,HTML5 终将成为主流。

毕竟,它更为简单、更为规范、相对于初学者而言更加友好。

HTML5新特性

用于绘画的 canvas 元素

标签 描述
<canvas> 标签定义图像,比如图表和其它图像。该标签基于 Javascript 的绘图 API

用于媒介回放的 video 和 audio 新多媒体元素

标签 描述
<audio> 定义音频内容
<video> 定义视频(video 或者 movie)
<source> 定义多媒体资源<video>和<audio>
<embed> 定义嵌入的内容,比如插件。
<track> 为诸如<video>和<audio>元素之类的媒介规定外部文本轨道

用于表单的 datalist 新表单元素

标签 描述
<datalist> 定义选项列表。请于 input 元素配合使用该元素,来定义 input 可能的值
<keygen> 规定用于表单的密钥对生成器字段
<output> 定义不同类型的输出,比如脚本的输出

用于新的语义和结构的新元素

标签 描述
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义<figure>元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<rudy> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。

HTML5 已移除的元素

以下的 HTML 4.01 元素在 HTML5 中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

以上就是关于 HTML5介绍和应用的全部内容了,想要学习更多 HTML5知识可以进入:HTML5基础入门HTML5新特性实战

JS实现图片放大镜效果(附源码)

thbcm阅读(170)

我们在浏览商城网页时,有一个最基本的 JS 功能就是将商品图片进行放大,也称图片放大器功能。W3Cschool 小编就来教大家如何用JS实现图片放大镜效果。

我们先来看下实现效果:

完整源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片放大镜 - 编程狮(w3cschool.cn)</title>
	<style>
		* {
			margin:0px;
			padding:0px;
			}
		#left {
			width:350px;
			height:350px;
			float:left;
			border:1px solid #cccccc;
			margin-top:10px;
			margin-left:10px;
			position:relative;
			}
		#right {
			border:1px solid #cccccc;
			float:left;
			position:relative;
			width:350px;
			height:350px;
			display:none;
			overflow:hidden;
			margin-top:10px;
			}
		#right img {
			position:absolute;
			}
		#small {
			width:150px;
			height:150px;
			background-color:#F90;
			border:1px solid #cccccc;
			opacity:0.3;
			top:0px;
			position:absolute;
			cursor:move;
			display:none;
			}
		#left img {
			width:100%;
			height:100%;
			}
	</style>
</head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
<script> $(document).ready(function(e) { $("#left").mousemove(move).mouseenter(function() { $("#small").show(); $("#right").show() }).mouseleave(function() { $("#small").hide(); $("#right").hide() }) }); function move(e) { var y = e.pageY - $("#left").offset().top; if (y >= 75 && y <= 275) { $("#small").css("top", y - 75); $("#right img").css("top", -(y - 75) * 800 / 350); } var x = e.pageX - $("#left").offset().left; if (x >= 75 && x <= 275) { $("#small").css("left", x - 75); $("#right img").css("left", -(x - 75) * 800 / 350); } } </script> <body> <div id="left"> <img src="./image/01.png"> <div id="small"></div> </div> <div id="right"> <img src="./image/01.png"> </div> </body> </html>

图片素材:

以上就是用 JS 实现图片放大器效果的全部代码及相关素材。请同学们自行练习和巩固噢。

bootstrap3 和 bootstrap4 的区别

thbcm阅读(213)

bootstrap 是常用的前端开发框架之一,它以其稳定性高,响应速度快,免费开源的特性广受前端开发人员的喜爱。那么 bootstrap3 和 bootstrap4 的区别在哪里呢?这篇文章告诉你。

bootstrap3 和bootstrap4 的区别:

 编写语言不同 bootstrap3 用 ​Less ​语言开发,bootstrap4 用 ​Sass​ 语言编写
 栅格类不同 bootstrap3 有四种栅格,分别是特小(col-xs-)适配手机、小(col-sm-)适配平板、中(col-md-)适配电脑、大(col-lg-)适配宽屏电脑。
bootstrap4 有五种栅格,分别是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)。
 布局方式不同 bootstrap3 使用 ​float​ 的布局方式,bootstrap4 采用​flexbox​布局方式。
 使用单位不同 bootstrap3 使用​px​为单位,bootstrap4 使用​rem​和​em​为单位(除部分 margin 和 padding 使用 px)

以上就是 bootstrap3 和 bootstrap4 的区别。

HTML按钮代码怎么写?如何写按钮的代码

thbcm阅读(196)

HTML 相信大家很了解了,HTML 中的按钮交互功能运用广泛,本篇文章教你如何实现 html 按钮效果。

HTML<button>标签

标签定义及使用说明

<button> 标签定义一个按钮,在它内部您可以放置文本或图像等内容,这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

tips:请始终为 <button> 元素规定 type 属性。不同的浏览器对<button> 元素的 type 属性使用不同的默认值。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>button - 编程狮(w3cschool.cn)</title>
</head>
<body>
    <button type="button" onclick="alert('Hello world!')">Click Me!</button>
</body>
</html>

效果图:

HTML5的<button>新属性

属性 描述
autofocus autofocus 规定当页面加载时按钮应当自动地获得焦点。
disabled disabled 规定应该禁用该按钮。
form form_id 规定按钮属于一个或多个表单。
formaction URL 规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=”submit” 配合使用。
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type=”submit” 配合使用。
formmethod get
post
规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type=”submit” 配合使用。
formnovalidate formnovalidate 如果使用该属性,则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type=”submit” 配合使用。
formtarget _blank
_self
_parent
_top
framename
规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=”submit” 配合使用。
name name 规定按钮的名称。
type button
reset
submit 
规定按钮的类型。
value text 规定按钮的初始值。可由脚本进行修改。

HTML<input>标签

<input> ​标签用于创建交互式控件,这类控件是基于 web 表单的,它可以接收用户的数据、信息。

主要代码:

<input type="submit" value="提交">
<input type="reset" value="重置">

表单代码如下:

<!DOCTYPE html>

<html> <head> <meta charset="utf-8"> <title>button - 编程狮(w3cschool.cn)</title> </head> <body> <form action="example.htm" method="post"> 姓名: <input type="text" name="FirstName" value="张三丰"><br> 电话: <input type="text" name="LastName" value="123456"><br> <br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>

表单效果图:

以上就是小编为大家整理的关于 HTML 实现按钮效果的全部内容。

CSS如何设置渐变?

thbcm阅读(177)

之前 W3Cschool 小编为大家介绍了 CSS 如何给边框加上渐变,那么今天小编教大家 CSS 如何设置渐变。

先让我们来看下最终效果:

以上分别为线性渐变和径向渐变。渐变一般设置在背景,与元素相对应。

以下为源码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>渐变色 - 编程狮(w3cschool.cn)</title>
	<style type="text/css">
        #box1{  /*线性渐变*/
            width: 500px;
			height: 200px;
			FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#eb5757, endColorStr=#000000);	/*IE 6 7 8*/
			background: -ms-linear-gradient(top, #eb5757, #000000);/*IE 10 */
			background: -moz-linear-gradient(top, #eb5757, #000000);/*火狐*/
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5757),to(#000000));/*谷歌*/
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eb5757),to(#000000));/*Safari 4-5, Chrome 1-9*/
			background: -webkit-linear-gradient(top, #eb5757, #000000);/*Safari5.1 Chrome 10+*/
			background: -o-linear-gradient(top, #eb5757, #000000);/*Opera 11.10+*/
        }
        #box2{  /*径向渐变*/
            width:500px;
            height:200px;
            background: -webkit-radial-gradient(#eb5757, #000000); /*Safari 5.1 - 6.0 */
            background: -o-radial-gradient(#eb5757, #000000); /*Opera 11.6 - 12.0*/
            background: -moz-radial-gradient(#eb5757, #000000); /*Firefox 3.6 - 15*/
         }

    </style>
</head>
<body>
	<div id="box1"></div>
	<p id="box2"></p>
</body>
</html>

以上就是 CSS 如何设置渐变的全部内容,请同学们自行练习巩固。

Java抽奖系统(附完整代码)

thbcm阅读(180)

很多大公司的年会都会抽年终奖,为一年一来的付出做出奖励,你知道如何用 JAVA 做抽奖系统么?小编来告诉你。

抽奖系统需求分析

1)实现抽奖系统的三大主要功能是登录、注册和抽奖。

2)登录需求指的是让用户输入其账号密码从而进行登录,用户输入其账号去匹配系统内已注册用户,如果输入账号不存在就退出,密码则能输入三次,登录成功后主界面会显示已登录用户的账号信息。

3)注册需求让用户先输入其账号,再有系统查询用户账号名是否已存在,如果已存在就让用户重新输入,不存在就进行下一步密码输入,密码的要求是6位数字字符串,用户注册成功后系统会随机分配与已有账号不一样的四位数字 id 编号。

4)抽奖需求功能实现的前提条件是要有用户处于已登录状态。当前提满足时系统从已存在用户中随机去抽取5位不同的用户标记为幸运用户,并接着判断此时在线的用户是否有被抽中。

5)数据存储采用的是文件系统,导入 java.io.*包,

6)登录用户信息保存在 ArrayList 中,幸运用户编号与 id 保存在长度为5的 ​HasMap<String id,String name>​ 其中它的 id 为 Key,name 为 Value。

实现结果

1)登录:

2)注册:

3)抽奖:

注意事项

在运行代码之前务必在 user.txt 中创建五个以上的用户。

完整代码

import java.util.Scanner;
import java.util.ArrayList;
import java.io.*;
import java.util.StringTokenizer;

public class Dos {
    static boolean logined=false;
    public static void main(String[] args) {
        User user=new User();
        int k=0;
        while( (k=Main(user))>=1&&k<5){
            switch (k){
                case 1:
                    System.out.print((k=user.login(user))==-1?"此用户不存在!\n":"");
                    System.out.print((k==-2)?"===<<警告>>用户:["+user.userName+"]已处于登录状态,无需重复登录!\n":"");
                    break;
                case 2:
                    user.regist();
                    break;
                case 3:
                    user.getLuckly();
                    break;
                default:System.exit(0);
            }
        }
    }
    static int Main(User user){
        System.out.println("**********************************************");
        System.out.println("********************主菜单********************");
        System.out.println("**********************************************");
        System.out.println("******          <1> 登   录             ******");
        System.out.println("******          <2> 注   册             ******");
        System.out.println("******          <3> 抽   奖             ******");
        System.out.println("******          <4> 退   出             ******");
        System.out.println("**********************************************");
        System.out.println("==============================================");
        System.out.println(logined ? "-[已登录]-  (1)用户名:"+user.userName+"   (2)用户账号:"+user.userId:"-[未登录]-   (1)用户名:NaN   (2)用户账号:NaN");
        System.out.println("==============================================");
        System.out.print("###===>请输入您的选择:");
        return (new Scanner(System.in)).nextInt();
    }
}
public class User{
    String userName,userId,userPwd;
    public User(){}
    public User(String userName, String userId, String userPwd) {
        this.userName = userName;
        this.userId = userId;
        this.userPwd = userPwd;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        if(!userName.equals("")) {
            ArrayList<String> temp;
            this.userId=(temp=(new operatorFile(this.userName = userName)).getUserMess(0)).get(1);
            this.userPwd=temp.get(2);
        }
    }
    public String getUserId() {
        return userId;
    }
    public String setUserId() {
        String userId="";
        while((new operatorFile(userId=String.valueOf ((int) (Math.random()*9000+1000)))).getUserMess(1).size()>0){ }
        return (this.userId = userId);
    }
    public String getUserPwd() {
        return userPwd;
    }
    public int login(User u) {
        int inputTimes=3;
        Scanner scanner=new Scanner(System.in);
        operatorFile getUserMessage=new operatorFile();
        System.out.print("======>请输入您的用户名:");
        String uName="";
        getUserMessage.setUser(uName=scanner.nextLine());
        ArrayList<String> userMess=getUserMessage.getUserMess(0);
        if(userMess.size()<1)       return -1;//返回-1表示用户不存在
        if (uName.equals(userName))     return -2;//返回-2表示用户重复登录
        System.out.print("======>请输入您的登录密码:");
        while(!scanner.next().equals(userMess.get(2))&&inputTimes>0)
            System.out.print("===>密码输入错误!"+((--inputTimes)>0?"您还剩"+inputTimes+"次机会!":"三次机会已经用完了!输入任意退出"));
        System.out.println(inputTimes>0?"==>登录成功!您本次输入密码"+(4-inputTimes)+"次!":"==>登录失败!");
        setUserName(inputTimes>0?uName:"");
        Dos.logined=inputTimes>0?true:false;
        return 0;
    }
    public void regist() {
        User u=new User();
        Scanner scanner=new Scanner(System.in);
        System.out.print("===>请输入新的用户名:");
        String name;
        while(new operatorFile(name=scanner.nextLine()).getUserMess(0).size() > 0)
            System.out.print("已存在此用户,注册失败!\n===>请重新输入新的用户名:");
        System.out.print("======>请设置您的(六位数字)登录密码:");
        String regex = "[0-9]{6}", pwd;
        while (!(pwd = scanner.nextLine()).matches(regex))
            System.out.print("==>密码格式不正确,请重新设置您的(六位数字)登录密码:");
        System.out.println("已为用户:"+(u.userName=name)+" 生成唯一ID: "+(u.userPwd=pwd));
        (new operatorFile()).writeUserMess(u);
        System.out.println("=======>注册成功!");
    }
    public static HashMap<String,String> lucklyUsers=new HashMap<>();
    public void getLuckly() {
        if (!Dos.logined)   {
            System.out.println("===>警告:没有用户登录,无法抽奖!");
            return ;
        }
        while(lucklyUsers.size()<5)
        {
            String id="";
            ArrayList<String> u;
            while((u=(new operatorFile(id=String.valueOf ((int) (Math.random()*9000+1000)))).getUserMess(1)).size()<1){ }
            lucklyUsers.put(u.get(1),u.get(0));
        }
        Iterator iterator=lucklyUsers.entrySet().iterator();
        int no=1;
        boolean LUCKLY=false;
        System.out.println("====>恭喜以下用户获得幸运称号:");
        while(iterator.hasNext()){
            Map.Entry entry=(Map.Entry) iterator.next();
            System.out.println("幸运用户["+(no++)+"]  用户名:"+entry.getValue()+"   用户编号:"+entry.getKey());
            LUCKLY = entry.getKey().equals(this.userId) ? true : LUCKLY;
        }
        System.out.println(LUCKLY?"=========>恭喜您在本次抽奖中获得幸运称号!":"=========>很遗憾,今日您未获奖 !-_-!");
    }
    public String toString(){
        return this.userName+" "+this.userId+" "+this.userPwd;
    }
}
public class operatorFile {
    String user;
    public void setUser(String user) {
        this.user = user;
    }
    public operatorFile(String user) {
        this.user = user;
    }
    public operatorFile() { }
    public ArrayList<String> getUserMess(int index){
        ArrayList<String> temp=new ArrayList<String>();
        File file=new File("user.txt");
        String line="";
        try{
            BufferedReader br=new BufferedReader(new FileReader(file));
            while ((line = br.readLine())!=null && line!="\n"){
                temp.clear();
                StringTokenizer sk=new StringTokenizer(line);
                while (sk.hasMoreTokens()) {
                    temp.add(sk.nextToken());
                }
                if (temp.get(index).equals(this.user))  break;
            }
        }
        catch(IOException e){}
        return (line==null)?new ArrayList<String>():temp;
    }
    public void writeUserMess(User u){
        try{
            BufferedWriter bw=new BufferedWriter(new FileWriter(new File("user.txt"),true));
            bw.write(u.toString()+"\n");
            bw.close();
        }
        catch (IOException e){ }
    }
}

以上就是使用 java 制作抽奖系统的全部内容,请务必三连。

HTML怎么插入图片?

thbcm阅读(187)

在开发网页时,我们免不了要插入图片,以增强用户体验感。那么,在 HTML 怎么插入图片呢?

在 HTML 中,使用​<img>​标签来定义图像。其中有两个必需的属性:​src​和​alt​。src 属性是用来确定图片的地址,alt 的属性是用来确定图片可替换文本的。

让我们先来看看具体的代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>插入图片 - 编程狮(w3cschool.cn)</title>
</head>
<body>
	<img src="./image/logo.png" alt="这是一张logo">
        <img src="https://7n.w3cschool.cn/statics/img/logo/indexlogo@2x.png" alt="这是一张logo">
</body>
</html>

第一个 src 是图片的相对地址,第二个 src 为图片网址。

最终效果:

以上就是 HTML 怎么插入图片的全部内容。

python脚本怎么执行?怎么运行py文件?

thbcm阅读(191)

最近有不少小伙伴来问python脚本怎么执行?,今天W3Cschool小编就来和各位分享一下python脚本执行的几种方法。

第一种:使用脚本式编程

把下面的代码复制到W3Cschool.py文件中:

print ("Hello, Python!");

使用下面的命令运行脚本:

$ python ./W3Cschool.py
hello,python

如果使用的系统是Linux或Unix,可以在脚本的开端添加命令,像SHELL脚本一样直接执行Python脚本。

#! /usr/bin/env python3

给脚本添加执行权限:

$ chmod +x hello.py

执行:

./W3Cschool.pydede

得到运行结果:

Hello, Python!

第二种:使用IDLE

python内置了一款名为IDLE的IDE,运行后。点击文件→新窗口中开始使用。可以在IDLE中直接写python程序,写好后按F5保存,比如“W3Cschool.py”。保存之后,控制台窗口就会自动输出所有运行结果。

第三种:使用python.exe来执行

直接在win+R输入CMD,输入python就可以直接运行python相关代码。

python怎么运行py文件就为大家介绍到这里了,希望能对各位学员有所帮助。

HTML怎么引入CSS?

thbcm阅读(210)

CSS HTML 的结合能产生非常奇妙的化学反应,CSS 的样式可以让 HTML 更美的呈现在用户眼前,本篇我们来介绍如何把 CSS 嵌入到 HTML 中。

一、嵌入式

第一种方法嵌入式指的是使用 HTML 的 ​<style>​ 元素,在​<head>​ 内添加 ​<style type="text/css">​ ,接着在​<style>​内定义所指定的 CSS 样式内容。

上代码:

<head>
    <meta charset="utf-8">
    <title>button - 编程狮(w3cschool.cn)</title>
<style>
    h1{
        color:red;
    } 
    p{
        color:blue;
    }
</style>
</head>

二、内联样式

内联样式就比较直接了,它是在每个 HTML 元素中添加 style 属性,可以直接定义元素样式。此时这个 style 样式只对其元素有效,对于另一个同名或同类型的元素不起任何作用

上代码:

<p style="background-color: blue">w3cschool</p>
<h1 style="font-size:20px">编程狮</h1>

三、外部引用式

外部引用指的是在 HTML 中不存在嵌入和内联的 CSS 样式,而是去动态得引用外部 CSS 文件来修饰 HTML。

1、样式表处理指令语句

在 HTML 文档开头部分添加样式表指令语句

上代码:

<?xml-stylesheet type="text/css" href="w3cschool.css" ?>
<html>
指令语句 
</html>

这种情况是出于使用 xml 语法编写 html 文档所支持的指令,大部分浏览器要保存城 xhtml 或者 xml 格式才生效,而且 JS 无法处理此类 CSS ,不建议使用。

2、@import 命令

在​<style>​中使用@import 命令导入外部的 CSS 文件

上代码:

<head>
    <meta charset="utf-8">
    <title>button - 编程狮(w3cschool.cn)</title>
<style>
    <!--下面两行代码效果一样
    @import "w3cschool";
    @import url("w3cschool.css");
    -->
</style>
</head>

3、使用 link 元素(最常用)

上代码:

<head>
<link rel="stylesheet" href="w3cschool" type="text/css">
</head>

4、HTTP 消息报

使用 HTTP 消息报头部的 link 字段把它链接到一个外部样式表

上代码:

link:<mystyle.css>;rel=stylesheet;

以上就是小编总结的关于 HTML 如何引入 CSS 的全部内容。

HTML如何编写一个简单的表单?

thbcm阅读(223)

表单页面的编写是前端开发中一个重要的环节,在注册登录和填写资料信息时都会涉及到。那么 W3Cschool 小编为大家介绍下简单的表单编写。

我们先来看下常用的表单元素有哪些:

 文本域  文本域通过 ​<input type="text">​ 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
 密码字段  密码字段通过标签 ​<input type="password">​ 来定义
 单选按钮  ​<input type="radio">​ 标签定义了表单单选框选项。
 复选框  ​<input type="checkbox">​ 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
 提交按钮  当用户单击确认按钮时,表单的内容会被传送到另一个文件。

具体效果:

这是最基础的表单效果,包括了以上提及的五种表单元素。让我们来看下具体的代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单表单 - 编程狮(w3cschool.cn)</title>
</head>
<body>
<form action="">
用户名:<input type="text" name="username"><br>
密码:<input type="password" name="password"><br>
性别:<input type="radio" name="sex" value="女">女
      <input type="radio" name="sex" value="男">男<br>
爱好:<input type="checkbox" name="like" value="运动">运动
      <input type="checkbox" name="like" value="画画">画画
      <input type="checkbox" name="like" value="阅读">阅读<br>
<input type="submit" name="确定登录">
<input type="reset" name="重新填写">
</body>
</html>

以上就是 HTML 怎么编写简单的表单的全部内容。如果想让自己开发的页面更加美观,可以加入标签样式,背景图等。此处就不在叙述,请同学们自行练习开发。

联系我们